People making a website decision
Owners, marketing leads and commercial teams who need to understand whether their website needs clearer messaging, better journeys, stronger search foundations or a rebuild.
Fresh & Crispy / Public brand system
Useful by design.
A practical reference for making Fresh & Crispy work look and sound consistent. It covers the public website, campaigns and social content. The internal Growth Engine has a separate interface system.
01 / Foundation
Fresh & Crispy is a website audit and rebuild studio for UK service businesses. We use a scored CRISP audit to show what helps a website, what gets in the way and what to fix first. When the evidence supports further work, our team can implement the fixes.
Clarity before commitment
The audit gives the reader a score, priority issues and a useful next step. It should remain valuable whether they fix the work themselves, use their current supplier or hire us.
Evidence-led and implementation-ready
We connect diagnosis with delivery. Claims come from observable evidence, and recommendations explain the visitor impact before proposing a solution.
Sharp, warm and candid
The work should feel engineered, with strong hierarchy and direct language. A little dry wit can help when the situation allows it.
Principles
Evidence before assertion
Show the page, behaviour or source behind a finding. Label concepts and demonstrations clearly.
Make the next step clear
Every page, component and piece of copy should help someone understand, decide or act.
One system, used with restraint
Repeat the same type, colour, spacing and annotation patterns. Let content create variety.
The CRISP method
CRISP is Fresh & Crispy’s own website audit method. Always define it in that context and keep the five dimensions in this order.
Contextual
Can a visitor instantly tell what the business does and what to do next?
Responsive
Is the website fast and smooth, including on mobile?
Intelligent
Does the website guide visitors to the right product or service?
Seamless
Is it easy to enquire, book or buy?
Powerful
Does the experience feel credible enough for the decision being made?
02 / System scope
Choose the surface before choosing tokens. The public website is the visual source of truth. Social adapts it for fixed-size exports. The Growth Engine stays operational and separate.
Marketing and editorial
Near-black and cream surfaces, acid emphasis, condensed display type and mono annotations. Use the live tokens in assets/css/v2.css.
Fixed export system
Use the same dark, cream and acid character with square layouts. Arial replaces Inter for dependable offline export. Use the social studio templates.
Internal control centre
A separate light and green interface for repeated operational work. Do not bring its compliance states, queue patterns or colours into public marketing.
03 / Colours
The public palette uses warm neutrals with one acid accent. Dark and cream surfaces carry most of the work. Acid marks an action, score or deliberate point of emphasis.
Background
--bg · oklch(12% .004 90)
#060605 equivalentSurface
--bg-2 · oklch(18% .004 90)
#121210 equivalentPrimary ink
--ink · oklch(93% .017 95)
#EBE8DB equivalentSecondary ink
--ink-soft · oklch(76% .014 90)
#B4B1A7 equivalentAcid accent
--accent · oklch(93% .23 125)
#C8FF3C exportPaper
--paper · oklch(94% .018 94)
#EFEBDE equivalentWarning
--warn · oklch(72% .14 55)
#E78A45 equivalentError / low
--low · oklch(66% .17 25)
#E8605B equivalentImplementation token reference
| Role | Tokens | Use |
|---|---|---|
| Dark surfaces | --bg: oklch(12% .004 90) | Page, cards and nested surfaces |
| Dark text | --ink: oklch(93% .017 95) | Primary copy, supporting copy, metadata and low-emphasis labels |
| Rules | --line: oklch(24% .004 90) | Controls, frames and quiet section boundaries |
| Accent | --accent: oklch(93% .23 125) | Primary actions, hover, decorative emphasis and text on acid fills |
| Accent effects | --accent-wash: oklch(93% .23 125 / .13) | Status backgrounds, soft emphasis and rules on acid |
| Semantic | --warn: oklch(72% .14 55) | Warnings, errors and low scores, always with a written label |
| Light surfaces | --paper: oklch(94% .018 94) | Daylight sections, cards and their text hierarchy |
| Light rules | --paper-line: oklch(18% .009 90 / .14) | Borders and large accent details on paper |
Approved text pairings
Cream on near-black
--ink / --bg · 16.53:1Soft cream on near-black
--ink-soft / --bg · 9.46:1Near-black on acid
--accent-ink / --accent · 16.94:1Near-black on paper
--paper-ink / --paper · 15.79:1Soft ink on paper
--paper-soft / --paper · 8.40:1Error red on near-black
--low / --bg · 6.04:1Do not use acid or deep green as body text on cream. Use near-black text on acid fills and pair every status colour with a written label.
Accent discipline
Use acid to carry meaning
- Primary actions
- Scores, wins and live states
- Section indices and one deliberate headline emphasis
- Short rules or progress bars tied to evidence
Keep it scarce
- No decorative gradients or full-page washes
- No second accent colour
- No large acid paragraphs
- No accent on every word that needs emphasis
04 / Typography
Futura Condensed ExtraBold gives headings their compressed force. Inter, with system fallbacks, keeps longer text calm and readable. Monospace labels make evidence, scores and annotations feel precise.
Display / H1
41.6px to 86.4px
800 / .98 / +.01emSee what to fix first.
Section / H2
29.6px to 49.6px
800 / 1.02 / +.01emEvidence before assertion.
Card / H3
22.4px
800 / 1.15 / +.02emMake the next step clear.
Lead
18.24px
400 / 1.6 / 56ch maxExplain the problem, show the evidence and give the reader a useful decision.
Body
16px
400 / 1.6Use body copy for explanations, service details and practical guidance. Keep paragraphs focused on one idea.
Small
14.4px
400 / 1.6Supporting detail, qualifications and secondary metadata.
Annotation
11.52px
mono / +.08em / uppercaseCRISP / CONTEXTUAL / FINDING 01
Keep display headings short and uppercase. Use sentence case for body copy and interface labels. Do not redistribute the local font files until their licence permits it.
Headline rules
Display copy
- Use four to ten words when possible
- Write a useful question or verdict
- Use one italic acid word at most
- End with deliberate punctuation
Annotation copy
- Use two to six words
- Set labels in uppercase monospace
- Index sections and figures consistently
- Keep labels factual and compact
05 / Layout and shape
Use generous vertical rhythm, a visible grid and fine rules. Pages should feel measured rather than crowded. Borders and surface contrast create depth; shadows are reserved for content that needs to sit above the page.
Grid
- Maximum content width: 1,200px
- Desktop gutter: 28px
- Mobile gutter: 20px
- Page grid: 72px blueprint rhythm
- Common breakpoints: 650px, 760px, 820px and 900px
Depth
- Use 1px warm-neutral borders first
- Use darker or lighter surfaces for grouping
- Reserve soft shadows for terminals and light cards
- Avoid gradients, glossy glass effects and decorative elevation
Spacing scale
space-1 · 4pxspace-2 · 8pxspace-3 · 12pxspace-4 · 16pxspace-5 · 24pxspace-6 · 32pxspace-7 · 48pxspace-8 · 64pxspace-9 · 96pxspace-10 · 120pxRadius scale
none · 0px
xs · 4px
sm · 8px
md · 12px
lg · 16px
Use square edges for editorial layouts and exports. Use 8px to 16px radii for interactive controls, cards and framed media. Circles are limited to dots, avatars and compact indicators.
06 / Logos
Use the supplied artwork without redrawing it. Choose white on dark surfaces and black on cream or white. Keep the mark level, preserve its proportions and leave enough space for the letterforms to breathe.
Clear space and minimum size
Use the cap height of the “F” as one unit. Keep at least one unit free on every side of the artwork.
Use a 26px logo height in navigation. Elsewhere, keep the full wordmark at least 64px wide on screen or 12mm wide in print. Below that size, use the approved favicon.
Never
- Stretch, squash, rotate, outline or typeset the logo.
- Recolour individual letters or add effects.
- Place the white logo on cream or the black logo on a dark image.
- Crop the ampersand or use it as a standalone mark without approval.
- Regenerate the logo with an image tool.
07 / Imagery
Use real interfaces, deliberate compositions and recognisable people. Images should prove the work, explain a principle or introduce the team. Stock technology scenes and decorative filler weaken the evidence-led position.
Art direction
- Prefer real website screens and original diagrams
- Crop to the decision or detail being discussed
- Keep colours natural and contrast strong
- Use fine rules and annotations to connect images to findings
Production
- Use WebP for content images
- Write descriptive alt text for meaningful images
- Use 1200 × 630px for Open Graph artwork
- Compress before publishing and keep the source provenance
08 / Components
Components use the live website classes and tokens. Every control needs a visible label, a clear state and a specific action. Keep one primary action in each decision area.
Actions
Free. About 60 seconds. No obligation.
Form fields
Include the full domain.
Enter a complete website address.
Status labels
ReadyNeeds reviewBlockedNot checked
Finding card
CRISP / Contextual / Finding 01
The main action is vague
The button says “Learn more” and opens the services page. Name the service or next step so visitors know where the click leads.
Disclosure
What does a CRISP audit check?
Contextual, Responsive, Intelligent, Seamless and Powerful. Each dimension connects an observation to evidence and a practical priority.
Interaction states
| State | Required behaviour |
|---|---|
| Default | The label names the action or destination. |
| Hover | Change colour or border within 150ms. Keep layout stable. |
| Focus | Show a 2px acid outline with 3px offset. |
| Active | Use a brief 0.97 scale response. Remove the transform for reduced motion. |
| Disabled | Reduce emphasis, remove pointer behaviour and explain why when needed. |
| Error | Place a specific message next to the field and explain how to recover. |
09 / Access and motion
Accessibility is part of the brand. Strong hierarchy, honest labels and visible states make the work feel considered. Every public pattern should work with a keyboard, at narrow widths and with reduced motion.
Access rules
- Meet WCAG AA contrast for text and controls
- Keep keyboard focus visible
- Use semantic headings and landmarks
- Give controls useful accessible names
- Do not use colour as the only status signal
- Write alt text around the image’s purpose
Motion rules
Use motion to show continuity, progress or response. Entries use opacity and a small 16px movement. Controls respond within 150ms. Structural sequences may run up to 800ms.
fast 150ms · base 300ms · slow 500ms · structural 800msUse the canonical ease-out curve: cubic-bezier(.16, 1, .3, 1). Remove transforms and looping motion when reduced motion is requested.
10 / Tone of Voice
Our voice stays the same: plainspoken, observant, candid and human. Our tone changes with the reader’s situation. A homepage can be confident. An audit finding should be calm and exact. An error message should help someone recover.
Plainspoken
Use the words you would choose when explaining the problem to a smart client. Keep technical terms when they add precision, then explain them in context.
Contractions are welcome. Buzzwords, jargon for show and inflated claims are out.
Observant
Point to the button, page, message or behaviour that needs attention. Name the consequence for the visitor and the next useful fix.
Specific observations carry more weight than adjectives.
Candid
Say what we know, how we know it and where the evidence stops. If a finding needs analytics, customer research or a technical check, say so.
We earn trust by being honest about limitations.
Human
Write to “you” and use “we” for work our team does. Vary sentence length. Keep a little edge when it feels natural.
Dry wit is welcome when the reader is relaxed. Clarity always wins.
Match the tone to the moment
Start with what the reader is trying to do and how they are likely to feel. Keep the voice recognisable, then adjust the amount of energy, humour and detail.
| Moment | Reader needs | Tone | Example |
|---|---|---|---|
| Homepage | A quick reason to care | Confident, concise, specific | “See what is helping your website, what is getting in the way and what to fix first.” |
| Audit finding | A clear diagnosis | Calm, exact, evidence-led | “The main button says ‘Learn more’ and opens the services page. Name the service or next step so visitors know where the click leads.” |
| Error message | A way forward | Direct, reassuring, brief | “We could not check that URL. Check the address and try again.” |
| Support | To feel heard and get help | Warm, patient, practical | “That sounds frustrating. Send us the page URL and what you expected to happen, and we’ll take a look.” |
| Social post | One useful idea | Conversational, sharp, lightly playful | “‘Learn more’ is asking the visitor to do the writing. Tell them what they’ll get.” |
Write the value first
Lead with what the reader can understand, decide or do. Product names and process details can follow. These are illustrative rewrites; audit findings still need evidence from the website being reviewed.
Describe the offer
Avoid: “Elevate your digital presence with transformative solutions.”
Use: “Get a scored CRISP audit with clear priorities for your website.”
Give useful advice
Avoid: “Unlock the full potential of your customer journey.”
Use: “Check that your main button tells visitors what happens after they click.”
Make the action clear
Avoid: “Begin your transformation.”
Use: “Book a call.”
Match the label to the destination. Explain any commitment before the reader takes the next step.
Humour needs a reason
Use humour to make a useful point more memorable, never to decorate routine copy. Keep it dry, specific and inclusive. Skip it when someone is confused, blocked, worried about money or reporting a problem. If the joke needs explaining, cut it.
Names and mechanics
Use consistently
- Fresh & Crispy, always with the ampersand
- Fresh & Crispy CRISP audit when defining it for the first time
- CRISP audit on later mentions
- Contextual, Responsive, Intelligent, Seamless and Powerful
- conversion optimisation in UK English
- Sentence case for buttons and interface labels
Cut or replace
- “Elevate your online presence”
- “Unlock your potential”
- “Digital transformation”
- “Best-in-class” and “cutting-edge”
- “Seamless” without an explanation
- Fake urgency, vague expertise and unsupported superlatives
Before you publish
- Does the opening answer the reader’s question?
- Is the reader the subject of the headline, with the value or action made clear?
- Could another agency use this unchanged? Replace generic lines with details about the work.
- Can we support each factual claim, number and example?
- Does the tone fit the reader’s situation and state of mind?
- Have we removed filler and kept the writer’s natural voice?
- Is the copy in UK English, with no em dashes?
- Is the next step clear and the destination correct?
Informed by PostHog’s voice and tone guide, Mailchimp’s voice and tone guide and Peter Yang’s No AI Slop guide. Fresh & Crispy’s evidence and UK English rules apply throughout.
11 / Applications
Start with the minimum set of recognisable brand elements for the surface. Keep the palette, type roles, grid and voice consistent, then let the content determine the composition.
[ 01 ] / THE PROBLEMFC.AUDIT · 202601 / 05
One point per frame
- Keep 72px margins on the export canvas
- Place the wordmark and index on the top line
- Use a short display headline with one useful emphasis
- Use proof or explanation on the middle frames
- End a carousel with one clear action
Headline left, evidence right
- Use one idea per slide
- Show a report, comparison or measured result as evidence
- Index the slide and label each figure
- Use a quiet footer with the brand mark and page count
- Export to PDF when the display font cannot be embedded
Choose one ground
- Use the dark system for screens and the paper system for print
- Open sections with an index and direct headline
- Number findings and put them in priority order
- Scope every number with source, sample and period
- Repeat the client name, document mark and page count in the footer
The audit is the interface
- Use indexed sections, mono evidence labels and measured progress
- Keep the live CRISP HUD on interactive website surfaces
- Do not imitate live status in static content
- Use one primary action in each decision area
- Put objection-handling microcopy next to the action
Plain text first
- Use short paragraphs, one useful link and a human sign-off
- Let the voice carry the brand
- Use the body font with system fallbacks in HTML email
- Skip the display font when the client cannot load it reliably
- Write subject lines as specific verdicts or useful questions
12 / Preflight
Run these checks before a public asset ships. The boxes are a working review aid for the current browser session.
- Palette. Every colour comes from the public tokens and there is no second accent.
- Accent. Acid marks an action, score, win, live state or deliberate emphasis.
- Typography. Display, body and mono styles each perform their defined role.
- Logo. The approved artwork, colour, clear space and minimum size are correct.
- Annotation. Indices and figure labels are factual, compact and consistent.
- Contrast. Text and controls use an approved pairing and status never relies on colour alone.
- Spacing. Gaps use the four-pixel scale and radii use the defined steps.
- Action. One primary action names the result or destination, with commitment made clear nearby.
- Evidence. Every factual claim, result and number has enough scope and provenance.
- Copy. The opening answers the reader, uses UK English and contains no filler or em dashes.
- Access. Semantics, keyboard flow, focus, alt text, labels and narrow layouts have been checked.
- Motion. UI response stays brief, uses the approved easing and honours reduced motion.
13 / Resources
This page is the human-readable public-brand reference. The live stylesheet remains the implementation source for website tokens and components. Keep both aligned when the public system changes.
Assets and tools
Reference pages
Governance
Fresh & Crispy team
Brand changes need review against the production website, current evidence rules and the intended surface.
Change the source first
Website token changes begin in assets/css/v2.css, then regenerate the minified stylesheet and update this reference. Social changes also update the studio and its guide.
Internal reference
This page is available at /brand/ but remains noindex, excluded from the sitemap and blocked in the general crawler rules.