Rita Beauté Esthétique — Styleguide

A one-woman beauty institute in Renens (VD): warm, personal esthetic care — facials, wellness treatments, laser hair removal — where clients feel looked after, not processed.

Greenfield brand build. No existing website, logo, or Google-listing photos existed at build time. Every token below is derived from the only real signals available — the business name, the voice of 29 Google reviews (4.6★), and the Renens context — with the rationale stated inline. All of it is an operator/client override point.

Brand DNA

• Atmosphere: warm, personal, soigné, trustworthy, unpretentious
• Audience: local women in Renens / Ouest lausannois comparing salons on Google; mobile-first; want to see services, prices, and how to book fast
• Inspirations: review language ("accueillante et chaleureuse", "douce et à l'écoute", "très professionnelle") — a personal cabinet, not a chain institute
• Differentiators: solo practitioner (Rita) — every visit is with her; careful intake (health questionnaire before laser — reviewers single this out as rare); warm Brazilian hospitality
• Anti-references: not a clinical medi-spa (cold white + teal); not influencer-luxe (gold foil, marble everything); not the AI-builder house style — and specifically not the portfolio's own emerging beauty-lead style (wine/rose + Fraunces + arch hero: rm-beauty-lounge, beaute-en-heritage)

Token rationale (greenfield)

• Royal plum #6B3E7E — feminine and composed without being bubble-gum pink; serious enough for laser/esthetic care. Chosen in the violet family because the registry's recent beauty sites already own the wine/rose slot (rm-beauty-lounge #6B1F32, beaute-en-heritage #9E4E59) — check-distinctiveness flagged the first draft (mulberry #7C2949) as convergent, and the palette was re-derived.
• Framboise #B0486B — warmth and femininity as the accent; passes AA as text on the background (the first draft's terracotta did not).
• Whisper lilac #F8F4F9 — a violet-tinted off-white; every other portfolio background is cream/ecru/beige.
• Prata + Figtree — Prata is an elegant single-weight display serif unused in the portfolio (Fraunces was the first choice but is already on three portfolio sites); Figtree is a friendly humanist sans, also unused.
• Petal motif — radius.petal (teardrop: rounded except one corner) frames hero/feature panels; the arch motif was dropped because both recent beauty sites use left-text-arch-photo-right heroes. The petal reads botanical/soft, fits beauty, and is unique in the portfolio.

Voice

• Register: vouvoiement (fr-CH). Rita speaks in the first person ("je") — it's her cabinet.
• Tone: warm, direct, reassuring; competence shown through care taken (the health questionnaire, explaining each step), never through jargon or hype.
• Do say: "je prends le temps de vous expliquer chaque soin" · "un questionnaire de santé avant tout traitement laser" · "sur rendez-vous" · concrete service names and durations
• Don't say: "expérience unique", "moment d'exception", "sublimez votre beauté", miracle/résultats garantis, invented credentials
• Banned AI-fluff: "seamless", "découvrez l'univers de…", "écrin de douceur", "élever", rule-of-three adjective chains, exclamation-mark enthusiasm. Concrete beats evocative: name the treatment, the duration, the street.
• Good/bad pair:
• ☑"Avant toute première séance de laser, vous remplissez un questionnaire de santé — je veux savoir si votre peau est sensible ou allergique avant de commencer."
• ❌ "Plongez dans un univers de douceur où la technologie laser de pointe sublime votre peau en toute sérénité."
• Reading level: everyday French, ~8th–10th grade.

Color

| Token | Hex | Use |

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

| primary | #6B3E7E | Primary CTA, headings accents, links |

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

| accent | #B0486B | Secondary highlights, eyebrow labels, stars |

| bg | #F8F4F9 | Page background |

| surface | #FFFFFF | Cards, raised surfaces |

| ink | #2B2431 | Body text |

| muted | #695F70 | Secondary text, captions |

| line | #E6DFE9 | Borders, dividers |

| success | #3E7A50 | Form success only |

| danger | #A63A32 | Form errors only |

Contrast: primary-ink on primary ≈8:1; ink on bg ≈13:1 — both pass WCAG 2.1 AA (and AAA) at body size. Muted on bg ≈5.6:1, accent on bg ≈4.9:1 — AA.

Typography

• Headings: Prata (Google Fonts, single weight 400), sentence case — its high contrast carries the elegance, so no bold needed.
• Body: Figtree (Google Fonts), 17px default, line-height 1.6.
• Webfont source: Google Fonts, self-hosted via the starter's font pipeline (no runtime Google requests).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.08 | hero h1 |

| h1 | 2.375rem | 1.15 | page titles |

| h2 | 1.75rem | 1.2 | section headings |

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

| body | 1.0625rem | 1.6 | paragraphs |

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

Spacing & layout

• Base unit: 4px; scale 4, 8, 12, 16, 24, 32, 48, 72, 104, 144.
• Container: max 1140px, gutter 24px, single column on mobile.
• Rhythm: generous — beauty needs air. Sections breathe at space-8/9 (72/104px) on desktop, space-7 (48px) on mobile.

Shape & surface

• Radii: sm 6px (inputs), md 10px (buttons), lg 18px (cards), petal (999px 999px 0 999px) for hero/feature panels, pill for tags.
• Borders: 1px line on cards and dividers; accent-colored top rules never used (dated).
• Shadows: sm on cards, md on sticky elements — both violet-tinted, not gray-blue.
• Imagery treatment: when photos arrive: full-color, warm white balance, environments + hands-at-work over posed faces. Until then: petal-framed panels in plum/lilac tints — no stock photos of models.

Motion

• Subtle only: hover/focus transitions ≤200ms ease-out. No entrance animations, no parallax.

Components

Button (primary)

• bg primary, ink primary-ink, radius md, padding 12px 24px, weight 600 (Figtree).
• hover: darken primary ~8%; focus: 2px primary outline, offset 2px.

Button (secondary)

• transparent bg, primary ink, 1px primary border; same paddings/radius.

Card

• bg surface, 1px line border, radius lg, padding 24px, shadow sm.

Hero

• Split layout: left text block (eyebrow · display h1 · one-sentence promise · primary CTA "Prendre rendez-vous" + tel link), right a petal-shaped decorative panel (plum gradient with framboise glow; photo slot once real photos exist). Mobile: stacked, text first, sticky call CTA bar at the bottom.

Nav

• Sticky, bg surface with hairline bottom border. Wordmark "Rita Beauté Esthétique" set in Prata. Mobile: disclosure menu; phone number always visible.

Section

• Vertical padding: 104px desktop / 48px mobile; alternate bg/surface bands for rhythm.

Accessibility

• Body 17px; focus states always visible; interactive contrast ≥4.5:1 in all states; decorative arch panels get empty alt/aria-hidden.

Anti-patterns specific to this site

• No stock photos of models pretending to be Rita or clients — petal placeholder panels until real photos are approved (T5).
• No fake urgency, discounts, or invented "med-spa" credentials; laser is presented with the care/intake angle, not "clinical-grade technology" claims.
• No aggregateRating markup from Google reviews (policy).