Brand guidelines
Five ways your brand could look.
Each option is a full set: colours, whites, fonts and components. A, B and C build on your current brand. D and E are completely new directions. Your logo stays exactly as it is in all five. Scroll through them here, or tap A to E at the bottom of any page to see the whole site in that option.
Option A
Rose & Slate
Your kit, evolved. Blush pages, slate panels and buttons, rose as the thread that runs through everything. Headings in a soft serif that echoes your wordmark.
Colour · ten roles, the same in every option
#FCF7F8 · 252 247 248From your kit: Blush
#F5EAED · 245 234 237#FFFFFF · 255 255 255#F2DEE3 · 242 222 227#E0B6C0 · 224 182 192From your kit: Rose
#8A4960 · 138 73 96#E4EEEF · 228 238 239#2F4858 · 47 72 88From your kit: Slate
#FCF7F8 · 252 247 248From your kit: Blush
#1F3140 · 31 49 64#4F5F6B · 79 95 107Whites
#FCF7F8Every page background
#F5EAEDAlternating bands
#FFFFFFCards, forms, the booking box
Typography
Hear better. Live better.
I’m passionate about hearing health.
Body text is set at 17px with generous line spacing, so a 60-year-old reading on a phone never has to zoom. Secondary text uses the muted colour, never lighter.
Kicker label
Components
Service card
Cards lift on hover and a rose line draws along the bottom.
Read moreReadability · WCAG AA needs 4.5 : 1
| Sample | Pair | Contrast | Result |
|---|---|---|---|
| Aa | Text on page | 12.6 : 1 | AA pass |
| Aa | Text on section | 11.4 : 1 | AA pass |
| Aa | Text on card | 13.4 : 1 | AA pass |
| Aa | Muted on page | 6.2 : 1 | AA pass |
| Aa | Muted on section | 5.6 : 1 | AA pass |
| Aa | Muted on card | 6.6 : 1 | AA pass |
| Aa | Rose deep on page | 6.2 : 1 | AA pass |
| Aa | Rose deep on section | 5.6 : 1 | AA pass |
| Aa | Rose deep on soft | 5.1 : 1 | AA pass |
| Aa | Text on soft | 10.4 : 1 | AA pass |
| Aa | Light type on slate | 9.0 : 1 | AA pass |
| Aa | Rose on slate | 5.3 : 1 | AA pass |
| Aa | Slate on rose | 5.3 : 1 | AA pass |
| Aa | Text on mist | 11.3 : 1 | AA pass |
| Aa | Slate type on light button | 9.0 : 1 | AA pass |
Option B
Coastal Calm
Cooler and more clinical. Your mint white as the page, a deeper slate, and rose kept to accents. Headings in an elegant editorial serif.
Colour · ten roles, the same in every option
#F3FFFE · 243 255 254From your kit: Mint white
#E5F1F1 · 229 241 241#FFFFFF · 255 255 255#F4E4E8 · 244 228 232#E0B6C0 · 224 182 192From your kit: Rose
#8A4B5E · 138 75 94#D6E6E7 · 214 230 231#1E3441 · 30 52 65#F3FFFE · 243 255 254From your kit: Mint white
#18282F · 24 40 47#4A5C66 · 74 92 102Whites
#F3FFFEEvery page background
#E5F1F1Alternating bands
#FFFFFFCards, forms, the booking box
Typography
Hear better. Live better.
I’m passionate about hearing health.
Body text is set at 17px with generous line spacing, so a 60-year-old reading on a phone never has to zoom. Secondary text uses the muted colour, never lighter.
Kicker label
Components
Service card
Cards lift on hover and a rose line draws along the bottom.
Read moreReadability · WCAG AA needs 4.5 : 1
| Sample | Pair | Contrast | Result |
|---|---|---|---|
| Aa | Text on page | 14.9 : 1 | AA pass |
| Aa | Text on section | 13.1 : 1 | AA pass |
| Aa | Text on card | 15.2 : 1 | AA pass |
| Aa | Muted on page | 6.8 : 1 | AA pass |
| Aa | Muted on section | 6.0 : 1 | AA pass |
| Aa | Muted on card | 7.0 : 1 | AA pass |
| Aa | Rose deep on page | 6.3 : 1 | AA pass |
| Aa | Rose deep on section | 5.6 : 1 | AA pass |
| Aa | Rose deep on soft | 5.3 : 1 | AA pass |
| Aa | Text on soft | 12.4 : 1 | AA pass |
| Aa | Light type on slate | 12.7 : 1 | AA pass |
| Aa | Rose on slate | 7.2 : 1 | AA pass |
| Aa | Slate on rose | 7.2 : 1 | AA pass |
| Aa | Text on mist | 11.8 : 1 | AA pass |
| Aa | Slate type on light button | 12.7 : 1 | AA pass |
Option C
Your Brand, Our Layout
Closest to your brand kit. Your four exact colours and your own fonts, Lato and Source Sans, set in the new layout.
Colour · ten roles, the same in every option
#FCF7F8 · 252 247 248From your kit: Blush
#F3FFFE · 243 255 254From your kit: Mint white
#FFFFFF · 255 255 255#F3E1E6 · 243 225 230#E0B6C0 · 224 182 192From your kit: Rose
#2F4858 · 47 72 88From your kit: Slate
#E6F1F1 · 230 241 241#2F4858 · 47 72 88From your kit: Slate
#FCF7F8 · 252 247 248From your kit: Blush
#2F4858 · 47 72 88From your kit: Slate
#51646F · 81 100 111Whites
#FCF7F8Every page background
#F3FFFEAlternating bands
#FFFFFFCards, forms, the booking box
Typography
Hear better. Live better.
I’m passionate about hearing health.
Body text is set at 17px with generous line spacing, so a 60-year-old reading on a phone never has to zoom. Secondary text uses the muted colour, never lighter.
Kicker label
Components
Service card
Cards lift on hover and a rose line draws along the bottom.
Read moreReadability · WCAG AA needs 4.5 : 1
| Sample | Pair | Contrast | Result |
|---|---|---|---|
| Aa | Text on page | 9.0 : 1 | AA pass |
| Aa | Text on section | 9.4 : 1 | AA pass |
| Aa | Text on card | 9.6 : 1 | AA pass |
| Aa | Muted on page | 5.8 : 1 | AA pass |
| Aa | Muted on section | 6.0 : 1 | AA pass |
| Aa | Muted on card | 6.2 : 1 | AA pass |
| Aa | Rose deep on page | 9.0 : 1 | AA pass |
| Aa | Rose deep on section | 9.4 : 1 | AA pass |
| Aa | Rose deep on soft | 7.6 : 1 | AA pass |
| Aa | Text on soft | 7.6 : 1 | AA pass |
| Aa | Light type on slate | 9.0 : 1 | AA pass |
| Aa | Rose on slate | 5.3 : 1 | AA pass |
| Aa | Slate on rose | 5.3 : 1 | AA pass |
| Aa | Text on mist | 8.3 : 1 | AA pass |
| Aa | Slate type on light button | 9.0 : 1 | AA pass |
Option D · new direction
Noir & Champagne
A completely new direction. Dark luxury: near-black and charcoal, champagne gold, ivory type, sharp square edges. The feel of a private clinic on a quiet street.
Colour · ten roles, the same in every option
#0F1012 · 15 16 18#15161A · 21 22 26#1A1B1F · 26 27 31#2A2620 · 42 38 32#C9A96E · 201 169 110#D9BF8C · 217 191 140#1D2024 · 29 32 36#1F2024 · 31 32 36#F1ECE3 · 241 236 227#F1ECE3 · 241 236 227#A9A398 · 169 163 152Whites
#0F1012Every page background
#15161AAlternating bands
#1A1B1FCards, forms, the booking box
Typography
Hear better. Live better.
I’m passionate about hearing health.
Body text is set at 17px with generous line spacing, so a 60-year-old reading on a phone never has to zoom. Secondary text uses the muted colour, never lighter.
Kicker label
Components
Service card
Cards lift on hover and a rose line draws along the bottom.
Read moreReadability · WCAG AA needs 4.5 : 1
| Sample | Pair | Contrast | Result |
|---|---|---|---|
| Aa | Text on page | 16.2 : 1 | AA pass |
| Aa | Text on section | 15.4 : 1 | AA pass |
| Aa | Text on card | 14.6 : 1 | AA pass |
| Aa | Muted on page | 7.6 : 1 | AA pass |
| Aa | Muted on section | 7.2 : 1 | AA pass |
| Aa | Muted on card | 6.9 : 1 | AA pass |
| Aa | Rose deep on page | 10.7 : 1 | AA pass |
| Aa | Rose deep on section | 10.1 : 1 | AA pass |
| Aa | Rose deep on soft | 8.4 : 1 | AA pass |
| Aa | Text on soft | 12.8 : 1 | AA pass |
| Aa | Light type on slate | 13.8 : 1 | AA pass |
| Aa | Rose on slate | 7.3 : 1 | AA pass |
| Aa | Slate on rose | 7.3 : 1 | AA pass |
| Aa | Text on mist | 13.9 : 1 | AA pass |
| Aa | Slate type on light button | 13.8 : 1 | AA pass |
Option E · new direction
Porcelain & Midnight
A completely new direction. Crisp modern clinic: porcelain white, midnight navy and ice blue, confident sans-serif headings and neat squared corners. Precise, calm, technical.
Colour · ten roles, the same in every option
#FAFAF8 · 250 250 248#EFF2F6 · 239 242 246#FFFFFF · 255 255 255#E2EAF5 · 226 234 245#8DB0E2 · 141 176 226#1D4D93 · 29 77 147#EDF1F6 · 237 241 246#0C1A2E · 12 26 46#F4F7FB · 244 247 251#0D1726 · 13 23 38#4C5667 · 76 86 103Whites
#FAFAF8Every page background
#EFF2F6Alternating bands
#FFFFFFCards, forms, the booking box
Typography
Hear better. Live better.
I’m passionate about hearing health.
Body text is set at 17px with generous line spacing, so a 60-year-old reading on a phone never has to zoom. Secondary text uses the muted colour, never lighter.
Kicker label
Components
Service card
Cards lift on hover and a rose line draws along the bottom.
Read moreReadability · WCAG AA needs 4.5 : 1
| Sample | Pair | Contrast | Result |
|---|---|---|---|
| Aa | Text on page | 17.2 : 1 | AA pass |
| Aa | Text on section | 16.0 : 1 | AA pass |
| Aa | Text on card | 18.0 : 1 | AA pass |
| Aa | Muted on page | 7.1 : 1 | AA pass |
| Aa | Muted on section | 6.6 : 1 | AA pass |
| Aa | Muted on card | 7.4 : 1 | AA pass |
| Aa | Rose deep on page | 7.9 : 1 | AA pass |
| Aa | Rose deep on section | 7.4 : 1 | AA pass |
| Aa | Rose deep on soft | 6.8 : 1 | AA pass |
| Aa | Text on soft | 14.8 : 1 | AA pass |
| Aa | Light type on slate | 16.2 : 1 | AA pass |
| Aa | Rose on slate | 7.8 : 1 | AA pass |
| Aa | Slate on rose | 7.8 : 1 | AA pass |
| Aa | Text on mist | 15.9 : 1 | AA pass |
| Aa | Slate type on light button | 16.2 : 1 | AA pass |
Shared by all three
Logo and voice.
Your logo is the one thing that never changes between options.
Logo rules
- Use the full logo in rose, on blush, white or slate
- Use the AC monogram alone where space is small: the header, the favicon, social avatars. Your current site already does this.
- Give it room: clear space at least the height of the monogram’s C
- Recolour, outline or add effects to the logo
- Stretch it or rebuild the wordmark in another font
- Place it over busy photos
Tagline
Hear better. Live better.
Brand words
Voice
- “Hi there, I’m Lex!” First person, warm, direct.
- Plain language. “The middle of speech”, not “mid-frequency range”.
- Prevention first: book the test before it is a problem.
- A clinic brochure written in the third person
- Fear or pressure to buy
- Promises about results, prices or medical aid cover