Beauté en Héritage — Styleguide

Institut de beauté réservé aux femmes à Chavannes-près-Renens, où le savoir-faire se transmet

de mère (Ana) en fille (Luana) — épilation, soins du visage, onglerie. Chaleureux, soigné,

familial, dans un écrin moderne de béton et de fleurs de cerisier.

Greenfield brand build — rationale

No existing website. Tokens are derived from the salon's own visual world, eyedropped from the

6 salon-authored Google photos in brand/inspiration/:

• Rosewood primary #9E4E59 — the dusty-rose velvet armchair (photo1) and the coral-rose

ring + wordmark of the round logo on the storefront poster (photo5). ⚠️ The poster was sampled

through window glass with reflections — verify against a clean logo file at first contact (T20).

• Sakura accent #E5B3C0 / #F7E7EC — the cherry-blossom garlands present in every room

(photos 1, 2, 3, 6). This is *their* signature decoration, not a category cliché.

• Ivory bg #FAF6F2 + sand #E6D6B4 — curtains, towels, heart-print storage boxes (photo2).
• Stone #A19D98 / surface-stone #EEECE8 — the raw concrete walls of the building

(photos 2, 3, 6). The concrete-meets-blossom contrast IS the place's identity; the site keeps a

cool mineral neutral against the warm rose rather than going all-pink.

• Warm charcoal ink #2B2226 — plum-tinted near-black, echoing the armchair shadows.

Brand DNA

• Atmosphere: chaleureux, familial, soigné, féminin, apaisant — "presque comme à la maison"

(verbatim from a review).

• Audience: women in the Ouest lausannois; loyal regulars of 10–16 years plus their

daughters; students (-20%); mobile-first, booking-oriented.

• Inspirations: the salon itself — raw concrete + sakura garlands + rosewood velvet +

cream towels; the round mother-daughter logo badge.

• Differentiators: mother-and-daughter team (Ana: épilation & soins, Luana: onglerie);

16+ years of documented client loyalty; modern premises in a new Chavannes development.

• Anti-references: not a luxe Didone-serif "medispa" (that's the sister project's territory);

not influencer-glam; not clinical white; not SaaS-startup Inter on white.

Voice

• Register: vous (fr-CH). Warm but professional — an institut, not a boutique hotel.
• Tone: first-person plural ("nous"), concrete, affectionate without gushing. The reviews

give the voice: douceur, confiance, "un vrai moment pour soi".

• Do say: "de mère en fille" · "depuis plus de 15 ans" · "sur rendez-vous" · "un moment

pour vous" · exact prices ("dès 20 CHF").

• Don't say: "expérience unique", "havre de paix", "sublimez votre beauté", "découvrez",

miracle/anti-âge claims, invented credentials.

• Good/bad pair:
• ☑"Ana s'occupe de vos épilations et soins du visage; sa fille Luana, certifiée nail

designer, prend soin de vos ongles. Prenez rendez-vous sur Salonkee ou appelez-nous."

• ❌ "Plongez dans un univers d'exception où l'excellence rencontre la passion pour une

expérience beauté inoubliable."

• Reading level: 8th–10th grade French.

Color

| Token | Hex | Use |

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

| primary | #9E4E59 | CTAs, links, brand accents (rosewood) |

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

| primary-deep | #7E3A44 | Hover, dark accents, footer bg |

| accent | #E5B3C0 | Sakura highlights, decorative petals |

| accent-soft | #F7E7EC | Tinted section bg, badges |

| accent-text | #8F414C | Small emphasized text on light bg (AA) |

| bg | #FAF6F2 | Page background (ivory) |

| surface | #FFFFFF | Cards |

| surface-stone | #EEECE8 | Alternating "concrete" sections |

| sand | #E6D6B4 | Warm details, dividers on dark |

| stone | #A19D98 | Concrete-grey details, icons |

| ink | #2B2226 | Body text |

| muted | #6F6167 | Secondary text (AA on bg & surface) |

| line | #E9DEDB | Borders |

Contrast (computed): primary/white 5.69 · primary-deep/white 8.15 · ink/bg 14.36 ·

muted/bg 5.45 · accent-text/bg 6.45 — all AA at body size.

Typography

• Headings: Fraunces (Google Fonts, weights 400–600 + italic). An old-style serif with

warmth and a slight vintage soul — "héritage" without stiffness, and clearly distinct from the

Didone look used elsewhere in the portfolio. Optical size axis on; use SOFT/WONK defaults off.

• Body: Karla (Google Fonts, 400/500/700). Humanist grotesque, warm and slightly quirky;

17px base, line-height 1.6.

• Webfont source: Google Fonts, self-hosted via astro/fontsource; swap-safe fallbacks.

Scale

| Token | Size | Line | Use |

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

| display | clamp(2.6rem, 6vw, 4rem) | 1.06 | hero h1 |

| h1 | clamp(2.1rem, 4.5vw, 2.75rem) | 1.1 | page titles |

| h2 | clamp(1.6rem, 3.2vw, 2rem) | 1.15 | section headings |

| h3 | 1.3125rem | 1.3 | cards, service names |

| body | 1.0625rem | 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 8px; scale 4→144 (generous top end — the salon is airy, the site breathes).
• Container: max 1120px, 24px gutter, single column on mobile.
• Rhythm: hero and section paddings from space-8/9; alternating bg (ivory → stone → ivory →

accent-soft) instead of boxes-on-boxes.

• Layout DNA: left-aligned text on desktop; asymmetric two-column blocks (text + arch

image); centered only for the review strip and CTAs on mobile.

Shape & surface

• Radii: buttons pill (echoes the round logo badge); cards lg (20px); images md, and the

signature arch (radius.arch, 999px top) for portrait images — echoing the ornate white

baroque mirror in the cabine (photo2).

• Borders: 1px line on cards; a 2px sand rule under section eyebrows.
• Shadows: rose-tinted sm/md, used sparingly (cards on stone sections only).
• Imagery treatment: real photography, warm and daylight; portraits in arch masks; never

stock-glam. Until rights-cleared photos exist, use soft accent-soft/stone placeholder blocks

with the petal motif — clearly placeholders, never fake stock.

• Signature motif: small sakura petal accents (5-petal dot cluster, accent color) used as

section eyebrow markers and list bullets — drawn SVG, max 1 per section.

Motion

• Subtle only: hover lift 2px on cards, 200ms ease-out color transitions. No entrance

animations, no parallax, no autoplay.

Components

Button (primary)

• bg primary, ink white, radius pill, padding 13px 26px, weight 600 (Karla), letter-spacing 0.01em.
• hover: primary-deep; focus: 2px primary outline, offset 2px.

Button (secondary)

• transparent bg, ink accent-text, 1.5px primary border, radius pill, same padding.
• On dark (footer): border sand, ink sand.

Card (service)

• bg surface, 1px line border, radius lg, padding 24px, shadow none on ivory / sm on stone.
• Service name in Fraunces h3, price right-aligned in Karla 600 accent-text, "dès" in muted small.

Hero

• Two-column on desktop: left — eyebrow (petal motif + "Institut de beauté · Chavannes-près-Renens"),

display headline, one-sentence positioning, primary CTA "Prendre rendez-vous" (Salonkee) +

secondary "Nos soins"; right — arch-masked image (placeholder until photos cleared).

• Mobile: stacked, sticky bottom bar with call + book actions.

Nav

• Sticky, ivory with blur, 1px line bottom on scroll; logo wordmark in Fraunces; right-aligned

links + pill CTA. Mobile: sheet menu.

Section

• Vertical padding: 72px mobile / 104px desktop; eyebrow (petal + small caps Karla) → h2 → content.

Accessibility

• Body 17px; focus states always visible (2px primary outline); all interactive contrast ≥4.5:1

in default and hover; decorative petals aria-hidden; informative images get descriptive

French alt text.

Anti-patterns specific to this site

• No all-pink wash — the concrete/stone neutral must stay present (it's the actual place).
• No Didone/fashion-magazine serif (sister-project territory; also not this salon's warmth).
• No invented team photos or stock model faces — placeholders until real photos are cleared.
• No fake "before/after" gallery; no ratings hardcoded in copy.
• No booking widget imitation — the CTA goes straight to Salonkee (their channel).