Styleguide (notes)

Kenna coiffure — Styleguide

A one-woman hair salon on Rue de Lausanne in Renens: 4.9★ over 138 reviews, known for

balayage and colour work that leaves hair healthy — bright, urban, personal.

Greenfield brand build — no existing site or logo. Every token below is derived from

the salon's own interior as seen in customers' Google photos (brand/inspiration/):

the vivid orange glass accent panel (eyedropped, core cluster #E85500–#F87030), white

daylight walls, black storefront frames, grey-taupe wood floor, exposed-duct industrial

ceiling. Confirm with Kenna at first contact; adjust if she has print materials or a logo.

Brand DNA

Atmosphere: vivid, precise, warm, urban, confident
Audience: women in the Renens/Lausanne-Ouest area choosing on colour results and

trust; mobile-first, Instagram-adjacent, often arriving from the Google listing

Inspirations: the salon's own orange-glass + industrial-daylight interior;

editorial colour-salon sites (bold type over photography)

Differentiators: one stylist who does everything herself — reviews repeat "elle

prend le temps", "à l'écoute", hair health after colour; near-perfect rating

Anti-references: not sage-green wellness, not cream + serif "premium coiffure",

not SaaS-startup Inter-on-white, not moody-dark barbershop

Voice

Register: vous (fr-CH). Warm-professional, first person singular where Kenna

speaks ("je prends le temps…") — it's her salon, not a "nous" chain.

Tone: direct, concrete, caring. Short sentences. No hype.
Do say: "balayage", "couleur sur mesure", "cheveux en bonne santé", "je prends le

temps", "sur rendez-vous"

Don't say: "expérience capillaire unique", "bienvenue dans l'univers de…",

"sublimez votre beauté", medical claims for "soin botox"

Good/bad pair:
☑« Un balayage qui respecte vos cheveux — doux, brillants, pas brûlés. »
❌ « Découvrez une expérience capillaire unique qui sublimera votre beauté. »
Reading level: 8th–10th grade French.

Color

| Token | Hex | Use |

|--------------|----------|------------------------------------------------|

| primary | #C64A05 | CTA background, links — AA (5.0:1) on white |

| primary-ink | #FFFFFF | Text on primary |

| accent | #F5601C | The signature panel orange — large display type, rules, graphic blocks only (not body-size text on white) |

| accent-soft | #FDE9DD | Tinted section backgrounds, badges |

| bg | #FAF7F3 | Page background (daylight warm white) |

| surface | #FFFFFF | Cards |

| ink | #211B16 | Body text (warm near-black) |

| dark | #26201B | Footer / dark sections (black storefront frames) |

| muted | #6E645B | Secondary text — AA on bg |

| line | #E7DFD6 | Hairline borders |

Contrast: primary on white 5.0:1 ✓, ink on bg 14.9:1 ✓, muted on bg 5.2:1 ✓.

The vivid accent (#F5601C, 3.1:1) is reserved for ≥24px bold display type or

non-text graphics — never body copy.

Typography

Headings: Archivo (variable, weights 700–800), tight tracking, sentence case for

H2/H3; the display hero may set one word in accent orange. Uppercase 0.14em-tracked

kickers (Archivo 700) label sections — the "signage" gesture.

Body: Karla 400/700, 17px base, line-height 1.6.
Webfont source: self-hosted via @fontsource (no CDN).

Scale

|---------|-----------------------------|------|------------------|

| h1 | clamp(2.25rem…3rem) | 1.05 | page titles |

| h2 | clamp(1.75rem…2.25rem) | 1.1 | section headings |

| h3 | 1.25rem | 1.3 | sub-sections |

| body | 1.0625rem | 1.6 | paragraphs |

| small | 0.875rem | 1.45 | captions, footer |

Spacing & layout

Base unit: 8px; scale 4→128.
Container: 1160px max, 24px gutter, single column on mobile.
Rhythm: generous — sections breathe 64–96px vertical; the orange blocks bleed

full-width like the glass panel.

Layout DNA: left-aligned, asymmetric. Hero text sits left with an orange panel

block bleeding off the right edge (direct quote of the salon wall). No centered-hero

+ two-buttons cliché.

Shape & surface

Radii: sharp — 2px buttons, 4px cards, 10px only for photos. Echoes the glass

panel and black window frames.

Borders: 1px hairlines in line; orange 3px left-rules mark review quotes.
Shadows: flat by default; md only on the sticky mobile call bar.
Imagery treatment: full-colour photography, generous crops, hair as the subject

(backs of heads, texture close-ups — the shot list from the Google photos). Until real

photos arrive: warm gradient placeholders (accent→dark), never stock.

Motion

Subtle: 120–200ms ease-out on hover/focus; no entrance animations, no parallax.

Components

Button (primary)

bg primary, ink white, radius sm (2px), padding 14px 24px, Archivo 700, letter-spacing 0.02em.
hover: darken to #A83E04; focus: 2px accent outline offset 2px.

Button (secondary)

transparent, 1px ink border, ink text; hover: ink bg + bg text.

Card

surface bg, 1px line border, radius md, 24px padding, no shadow.

Review quote

3px accent left-rule, italic Karla, attribution in muted small.

Hero

Left-aligned display type over bg; orange accent block bleeding right; rating badge

(★ 4.9 · 138 avis Google) as proof chip; primary CTA "Appeler" + secondary "Itinéraire".

Mobile: sticky bottom call bar (primary bg, white ink, shadow md).

Nav

Slim top bar on bg, hairline bottom border; wordmark "KENNA" Archivo 800 with orange

full-stop; anchor links (one-pager); "Appeler" button right.

Section

64px mobile / 96px desktop vertical padding; alternating bg / accent-soft / dark.

Accessibility

Body ≥17px; focus rings always visible (2px accent, 2px offset).
All text ≥4.5:1 in default and hover states; vivid accent restricted as above.
Dark footer uses ink-inverse text at ≥7:1.
Gallery alt text describes the look ("balayage caramel sur base brune"), not "hair".

Anti-patterns specific to this site

No stock photos of models — placeholders until Kenna supplies real ones.
No invented prices, no "nous"-speak, no team grid (solo stylist).
Don't tone the orange down to terracotta/pastel — the wall is *vivid*; commit.