LR Coiffure — Styleguide

Premium neighbourhood hair salon on Av. de Lavaux in Pully — "Coiffeur Créateur" — a two-chair

salon with a 5.0★ reputation built on listening first, colour technique that grows out

gracefully, and a welcome that extends from babies to grandmothers.

Greenfield brand build — no prior website. Every token below is derived from the salon's own

materials: the current gold monogram logo (window decal, photos 01/07), the bordeaux interior

walls (photos 05/08/09), charcoal floors and chairs, and the old burgundy script signage.

Rationale per token in build/decisions.md D6/D7.

Brand DNA

• Atmosphere: intimate, warm, precise, quietly premium, personal
• Audience: Pully/Lausanne-Est locals of all ages — loyal regulars (10+ years), families with

children, women and men ("Elle / Lui"); browses on phone, books by phone

• Inspirations: the salon's own rebrand — antique-gold serif monogram in a thin circle on dark

glass; deep bordeaux textured walls; silver-framed mirrors; charcoal slate floor. Photos in

brand/inspiration/.

• Differentiators: the manager takes her time (verbatim from a review), colour with natural

discreet regrowth, children/babies genuinely welcome, 5.0★ across 68 Google reviews

• Anti-references: NOT a barbershop-industrial site, NOT a pastel beauty-influencer site,

NOT SaaS-startup Inter-on-white, NOT a booking-platform template

Voice

• Register: vous (fr-CH). Secondary locale: en.
• Tone: warm, assured, first-person plural ("nous"); short sentences; concrete over evocative.
• Do say: "Coiffeur Créateur" (their tagline) · "prendre le temps" (their clients' words) ·

"repousse naturelle et discrète" (review language) · "Elle & Lui" · "sur rendez-vous"

• Don't say: invented prices/credentials/partnerships; "luxe" (show, don't claim);

superlatives the reviews didn't earn.

• Banned AI-fluff: "bienvenue dans l'univers de…", "découvrez", "unique" as filler,

"sublimer" chains, seamless/elevate/unlock equivalents, exclamation-mark enthusiasm.

• Good/bad pair:
• ☑"Chaque rendez-vous commence par une écoute. La coupe vient après."
• ❌ "Bienvenue dans l'univers unique de LR Coiffure, où l'excellence sublime votre beauté !"
• Reading level: everyday French, ~9th grade.

Color

| Token | Hex | Use |

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

| primary | #52312c | Bordeaux — CTAs, links, brand accents |

| primary-ink | #faf7f3 | Text on primary |

| accent | #a07a3e | Antique gold — eyebrows, rules, small accents |

| accent-soft | #e7b76b | Amber gold — accents ON dark surfaces only |

| dark | #1c1717 | Charcoal — footer, hero overlay, dark sections |

| dark-ink | #f3ece2 | Text on dark |

| bg | #faf7f3 | Warm ivory page background |

| surface | #ffffff | Cards |

| ink | #221c1b | Body text |

| muted | #6f6560 | Secondary text |

| line | #e8ded6 | Hairline borders |

Contrast: ink/bg 15.6:1 · primary-ink/primary 8.6:1 · accent-soft/dark 7.5:1 — AA passes.

Gold accent is never used for body-size text on light backgrounds (3.1:1) — decorative and

large-type only; dark+accent-soft is the accessible gold pairing.

Typography

• Headings: Playfair Display 500 (Didone-adjacent — closest free match to the LR monogram's

high-contrast serif), tight tracking, sentence case. Italic 500 for pull-quotes.

• Body: Jost 400/500 — geometric sans with Parisian character; 17px base, line-height 1.6.
• Eyebrow labels: Jost 500, 13px, letter-spacing 0.18em, uppercase, gold.
• Webfont source: self-hosted woff2 (no Google Fonts CDN — privacy policy stays clean).

Scale

| Token | Size | Line | Use |

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

| display | clamp(2.75rem…4.25rem) | 1.05 | hero h1 |

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

| h2 | clamp(1.75rem…2.125rem) | 1.15 | section headings |

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

| eyebrow | 0.8125rem / 0.18em caps | 1.4 | section labels |

| body | 1.0625rem | 1.6 | paragraphs |

| small | 0.875rem | 1.5 | captions, footer |

Spacing & layout

• Base unit: 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 72, 104, 144.
• Container: 1160px max, 24px gutter, single column on mobile.
• Rhythm: editorial and airy — sections breathe at 72–144px vertical; imagery gets full-bleed

or generous asymmetric placements, text columns stay ≤ 34em.

• Layout DNA: left-aligned headings; asymmetric two-column blocks (image offset from text);

thin gold rules as section dividers — echoes the circle-line of the logo.

Shape & surface

• Radii: 2px (near-sharp — the brand is classic, not bubbly); pill only for the eyebrow tag.
• Borders: 1px hairlines in line; gold 1px rules used sparingly as dividers/frames.
• Shadows: none on cards by default; one soft md shadow allowed on sticky elements.
• Imagery: full-color, warm; the salon's own photos only (interior, colour work, chignons).

Slight warm grade acceptable; no duotones, no stock.

Motion

• Subtle only: 120–200ms ease-out on hover/focus; a single fade-up on hero copy.
• No parallax, no autoplay, no per-section entrance animations.

Components

Button (primary)

• bg: primary, ink: primary-ink, radius: sm (2px), padding: 14px 28px, Jost 500, letter-spacing 0.04em.
• hover: darken to #4a2829; focus: 2px accent outline offset 2px.

Button (secondary / on-dark)

• transparent bg, 1px border (primary on light, accent-soft on dark), same metrics.

Card

• bg: surface, 1px line border, radius: lg (4px), padding: 32px, no shadow.

Hero

• Full-width dark (dark) with the salon photo as a subdued backdrop; left-aligned Playfair

display headline in dark-ink, gold eyebrow above ("Coiffeur Créateur — Pully"),

primary CTA = tel: link. Mobile: sticky bottom call bar.

Nav

• Transparent over hero → solid bg with hairline on scroll; wordmark "LR coiffure" in

Playfair; mobile: simple sheet menu. Language switch FR/EN top right.

Section

• sm 48px · md 72–104px · lg 144px vertical padding.

Accessibility

• Body 17px; focus always visible (2px accent outline); AA contrast verified per pairing table

above; gallery alt text describes the look ("balayage cuivré sur cheveux longs"), not "hair".

Anti-patterns specific to this site

• No sage/cream wellness palette, no Inter/SaaS look (suite-wide drift guard).
• No stock photography — the salon's own images or nothing.
• No invented pricing tables, staff bios, or brand-partnership badges.
• Gold restraint: accents and rules, never large gold text blocks on light backgrounds.