Institut de beauté « Si j'étais moi » — Styleguide

A solo beauty institute in Lutry run by Sandrine: facials, massage, lashes and nails in a

white-and-gold boho cocoon — personal, warm, meticulous. Greenfield brand build — no

existing website; every token below is derived from the institute's own Google listing

photos (signage + interior), sampled with sample-colors.mjs.

Brand DNA

• Atmosphere: *chaleureux, soigné, cocon, lumineux, personnel* (warm, meticulous, cocoon-like, luminous, personal)
• Audience: women in Lutry / Lavaux / Lausanne-Est looking for a personal esthetician rather than a chain; mobile-first; often referred by word of mouth.
• Inspirations (in brand/inspiration/):
• photo-04 / photo-09 — the actual signage: gold handwritten script "Si j'étais moi" over thin letter-spaced caps "INSTITUT" with a hairline underline, on glossy white.
• photo-05 — reception corner: blush velvet sofa with gold legs, gold wire coffee table, whitewashed branch screen, fairy lights, jute rug.
• photo-10 — treatment room: draped cream tulle ceiling, rattan pendant, round mirror.
• photo-07 — wood floor, thin black metal furniture, wicker baskets.
• Differentiators: one person, her taste, her hands — reviews call out "mains de fée", up-to-date techniques, a space clients describe as "un vrai havre de paix"; Payot treatment lines; a small handmade-jewelry corner at reception.
• Anti-references: not a clinical med-spa (no cold white + teal); not Calm.com wellness gradients; not sage-green-and-cream AI-template boho; not Inter-on-white SaaS.

Rationale for the palette (greenfield derivation)

• Gold is the brand: the signage script sampled #745b2b (shadow) → #b0894a (lit) with

highlights #f0ebb2; the wire table/furniture golds sampled #a87332–#b88850.

primary #8c6b2f is that gold darkened to pass AA on white; accent #c29a55 is the lit

champagne vinyl tone, decorative only.

• Warm charcoal ink #2c2825 from the "INSTITUT" lettering and black metal window/furniture frames.
• Warm whites bg #fbf8f3 / surface #ffffff from the glossy white desk and walls (sampled #e9eae7, #eeefef).
• Blush #f3e7dc / accent-soft #efe3cd from the velvet sofa, tulle ceiling and pampas/rattan naturals.

Voice

• Register: fr-CH, vouvoiement. EN secondary locale, plain and warm.
• Tone: first-person singular ("je") — it's Sandrine's institute; warm, direct, precise. Never hypey.
• Do say: "prendre soin de vous", "sur rendez-vous", "conseils personnalisés", "à Lutry", "soin du visage Payot".
• Don't say: "miracle", "rajeunissement garanti", invented diplomas, "luxe" as filler.
• Banned AI-fluff: "bienvenue dans l'univers de…", "découvrez", "unique en son genre", "sublimez", "expérience holistique", seamless/elevate/unlock equivalents, rule-of-three adjective chains, exclamation-mark enthusiasm.
• Good vs bad: ✅ "Je vous reçois sur rendez-vous, du lundi au samedi, dans mon institut au chemin de Burquenet." / ❌ "Découvrez un univers unique où beauté et bien-être s'unissent pour sublimer votre éclat !"
• Reading level: everyday French, short sentences.

Color

| Token | Hex | Use |

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

| primary | #8c6b2f | CTAs, links, active states (deep brand gold) |

| primary-ink | #ffffff | Text on primary |

| accent | #c9a352 | Champagne gold — hairline rules, icons, large decorative type |

| accent-soft | #efe3cd | Soft gold tint — chips, highlights |

| blush | #f3e7dc | Alternate section background (sofa/tulle tone) |

| bg | #fbf8f3 | Page background (warm white) |

| surface | #ffffff | Cards, nav, raised surfaces |

| ink | #2c2825 | Body text (warm charcoal) |

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

| line | #e7dfd3 | Hairline borders, dividers |

Contrast: primary on white 4.9:1 ✓; ink on bg 13.7:1 ✓. accent never carries body-size text.

Typography

• Headings: Jost (Google Fonts), weights 300–500. H1/display in light weight; overlines/nav in caps with 0.22em tracking — the "INSTITUT" signage pattern, always paired with a short champagne hairline rule.
• Script accent: Alex Brush — the closest Google-font match to the signage script. Used ONLY for the wordmark echo and at most one flourish per page (hero line). Never for body or UI.
• Body: Lora (serif), 17px, line-height 1.6 — warm and literary, keeps the site off the SaaS baseline.
• Webfont source: Google Fonts, self-hosted via astro starter (woff2, preloaded).

Scale

| Token | Size | Line | Use |

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

| display | 3.5rem | 1.1 | hero H1 (Jost 300) |

| script | 4.25rem | 1.1 | hero script flourish |

| h1 | 2.5rem | 1.15 | page titles |

| h2 | 1.875rem | 1.2 | section headings |

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

| overline | 0.8125rem | 1.4 | caps section kickers, 0.22em tracking |

| body | 1.0625rem | 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 8px; scale 4→144 (generous top end — the space itself is airy).
• Container: max 1160px, 24px gutter, single column on mobile.
• Rhythm: tall sections (72–144px vertical), alternating bg → blush → bg; content blocks breathe like the salon does.

Shape & surface

• Radii: buttons pill (echoes the round wire table/mirror); cards md 10px; images arch (999px top / 10px bottom) — the signature shape, echoing the arch mirror, ring lamp and wreath.
• Borders: 1px line hairlines; champagne accent hairline rules under overlines (the sign's underline).
• Shadows: mostly none; md (soft warm gold blur) reserved for the sticky mobile CTA and hero card.
• Imagery treatment: full-color, warm; environments and detail shots over faces; generous whitespace around images; no duotones.

Motion

• Subtle only: hover/focus transitions ≤200ms ease-out; one gentle fade-up on hero. No parallax, no scroll-triggered section animations, no autoplay.

Components

• Button (primary): bg primary, ink white, pill, 12px 24px, Jost 500 caps 0.06em tracking; hover darken 8%; focus 2px primary outline offset 2px.
• Button (secondary): transparent, ink primary, 1px primary border, pill, same paddings.
• Card: surface, 1px line, radius md, 24px padding, shadow none.
• Hero: centered — script flourish above a Jost-light display line, CTAs, then a full-width arch-topped panoramic photo (like the salon's arch mirror seen straight on); primary CTA = tel: link; sticky bottom CTA bar on mobile.
• Nav: surface, hairline bottom border, wordmark left (script "Si j'étais moi"), caps links right, tel button; not transparent-over-image; mobile burger → full-screen sheet.
• Section: 104px vertical desktop / 72px mobile; each opens overline + hairline rule + h2.

Accessibility

• Body 17px min; visible focus states everywhere; interactive contrast ≥4.5:1 (accent gold is decorative only); informative images get descriptive alt, decorative get empty alt; keyboard-navigable burger menu.

Anti-patterns specific to this site

• No sage green, no eucalyptus stock photos, no stones-and-orchid spa clichés.
• The script font is a seasoning, not a heading system — one use per page.
• Don't fake a big-team clinic: it's one person, the copy stays "je".
• No invented prices, diplomas or product claims; [TBD:] markers instead.