Shiny coiffure la pura barberia — Styleguide

A warm, unisex neighbourhood salon in Prilly (Rte de Cossonay) run by owner Shiny with colleague Nancy — meticulous, affordable, and personal, for men's cuts/beard/facial as much as women's colour and cuts.

Brand DNA

• Atmosphere: warm, welcoming, meticulous, unpretentious, personal.
• Audience: local Prilly/Lausanne-area residents of all ages and genders; students and AVS clients get reduced rates (repeated in reviews) — price-conscious but quality-seeking; mobile-first, browses on phone before walking in.
• Inspirations: the salon's own interior, captured in content/assets/source-photos/photo-1.jpg through photo-5.jpg (from Google Places) — bright white walls, black ceiling slats, warm oak floor, a gilt vintage mirror, a dusty-rose velvet accent chair, a brass vintage cash register. No existing website to draw from (greenfield build).
• Differentiators: genuinely unisex (barbershop-style grooming for men *and* colour/cut work for women, same chairs, same owner) — most competitors in this category pick one lane. Reviews consistently praise the *owner relationship* ("Shiny is incredible", "you can't help but like her") over any single technical specialty — this is a people-first salon, not a technique-first one.
• Anti-references: not a moody all-black "barbershop bro" aesthetic (that's the interior's *accent*, not its whole story — the velvet chair and gilt mirror soften it). Not a glossy fashion-editorial salon site either — this is a neighbourhood shop, not a flagship.

Voice

• Register: French-first (Prilly, VD), tu/vous — default to *vous* for a first-time-visitor site tone, warm rather than formal (confirm with owner once contacted — see build/decisions.md).
• Tone: warm, direct, personal — first-person-plural ("chez nous", "on s'occupe de vous"), never corporate.
• Do say: "un accueil chaleureux", "tout le monde est bienvenu" (unisex framing), "coupe, barbe, couleur — on fait tout", concrete service names.
• Don't say: "expérience holistique", "univers de la coiffure", generic beauty-industry hype, invented certifications, exclamation-heavy enthusiasm.
• Banned AI-fluff: "seamless"/"nahtlos", "découvrez", "unique" as filler, "delve", "elevate", "unlock", rule-of-three adjective chains.
• Good/bad example pair:
• Good (grounded, specific): "Coupe, barbe et soin du visage, tout compris — sur rendez-vous ou en passant."
• Bad (AI-fluff): "Découvrez une expérience de coiffure unique, alliant tradition et modernité pour sublimer votre beauté."
• Reading level: plain, roughly 8th–10th grade equivalent in French.

Color

| Token | Hex | Use |

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

| primary | #8F5866 | Primary CTA, brand accents — deepened from the salon's own dusty-rose velvet accent chair (photo-2) |

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

| accent | #9A8264 | Secondary highlights — muted warm oak, sampled directly from the salon's floor (photo-4/photo-5) |

| bg | #FAF7F5 | Page background — the salon's own warm-white walls |

| surface | #FFFFFF | Cards, raised surfaces |

| ink | #2B2A2C | Body text — from the black barber chairs / ceiling slats |

| muted | #6B5A5C | Secondary text, captions |

| line | #E4DAD8 | Borders, dividers |

| success | #3F7A46 | Confirmation states only |

| warn | #B07A1A | Warning states only |

| danger | #9B3A2E | Error states only |

Contrast checked: primary (#8F5866) on white = 5.59:1 (AA), ink (#2B2A2C) on bg (#FAF7F5) = 13.4:1 (AAA), muted on bg = 6.07:1 (AA).

Distinctiveness note: this category already has several gold/brass-on-dark-charcoal barbershop sites in the portfolio (andre-coiffeur, coiffeur-ali-barber, the-barber-shop-prilly, lr-coiffure-pully). Rather than default to that cliché — even though the source photos do contain brass (cash register, mirror frame) — this palette leads with the salon's more distinctive, less-copied element: the dusty-rose velvet accent, kept light and warm rather than dark and moody. Brass/oak is present only as a secondary accent, not the lead color.

Typography

• Headings: Newsreader (serif), weights 400/500, slight negative tracking on display sizes, sentence case (not all-caps) — warm and editorial without the heavy drama of Playfair/Bebas/Marcellus already used elsewhere in the portfolio.
• Body: Work Sans, weight 400/500, 17px base, line-height 1.6.
• Webfont source: Google Fonts (Newsreader, Work Sans).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.12 | hero h1 |

| h1 | 2.375rem | 1.18 | page titles |

| h2 | 1.75rem | 1.22 | section headings |

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

| body | 1.0625rem| 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 8px.
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: max 1120px, gutter 24px, single-column on mobile.
• Rhythm: generous section padding (64–96px desktop, 48px mobile) — let the photography breathe per the hairdresser category spec.

Shape & surface

• Radii: sm 4px, md 10px (buttons), lg 20px (cards, image crops).
• Borders: 1px line color, used sparingly (card outlines, dividers) — mostly relying on whitespace and shadow instead.
• Shadows: sm for buttons/small cards, md for raised cards, none for flat sections.
• Imagery treatment: full-colour, warm-toned, generous crops of the actual salon (not stock) — faces of the owner/team where photos exist and consent is confirmed (see content/cautions.md); otherwise environment/detail shots (chairs, mirror, tools).

Motion

• Default: subtle, ≤200ms ease-out.
• Use motion for: hover/focus states, gallery lightbox open, mobile nav reveal.
• Don't use motion for: entrance animations on every section, parallax, autoplay carousels.

Components

Button (primary)

• bg: primary (#8F5866), ink: primary-ink (#FFFFFF), radius: md (10px), padding: 12px 20px, weight: 600.
• hover: darken primary ~8%; focus: 2px primary outline, offset 2px.

Button (secondary)

• bg: transparent, ink: primary, border: 1px primary, otherwise as above.

Card

• bg: surface, border: 1px line, radius: lg (20px), padding: 24px, shadow: sm.

Hero

• Layout: rose-panel-photo-right-light — left-aligned headline + one-line positioning + "Prendre rendez-vous" CTA on a soft bg-tinted panel, full-height salon photo on the right (desktop); stacked photo-above-text on mobile. Deliberately light/bright, not a dark photo scrim — counter-programs the dark-charcoal-gold hero already used by several sibling barbershop sites in the portfolio.
• Sticky mobile "Book" bar (tap-to-call + tap-to-directions) per the category spec.

Nav

• Simple top nav, transparent over hero on desktop, solid surface on scroll; mobile hamburger with full-screen overlay menu.

Section

• Vertical padding: sm 48px, md 64px, lg 96px (desktop); reduce by ~1/3 on mobile.

Accessibility

• Body text minimum 17px.
• Focus state visible on all interactive elements; never outline: none without a styled replacement.
• All interactive elements ≥4.5:1 contrast in default and hover states.
• Decorative imagery: empty alt; informative imagery (team, work): descriptive alt (e.g. "coupe dégradée réalisée en salon", not just "cheveux").

Anti-patterns specific to this site

• No dark/moody all-black barbershop theme — already overused across sibling hairdresser builds in this portfolio; this salon's own interior is bright and warm, not moody.
• No gold/brass as the *lead* color — present only as a secondary accent, true to the photos but not the dominant identity.
• No stock photography — the source photos (Google Places) are real; use them, or clearly-marked placeholders if more are needed, never generic salon stock.
• No claims of specific certifications, brand partnerships, or booking-platform integration — none confirmed by the operator yet (see content/cautions.md, TODO.md T2/T7).