Beauty by Dilek — Styleguide

A one-woman beauty studio in Zürich's Wiedikon/Alstetten area, built on personal attention —

WhatsApp booking, coffee, music, and a stylist who remembers your free days.

Brand DNA

• Atmosphere: intimate, warm, confident, a little glam, unhurried.
• Audience: neighbourhood regulars and referrals — clients who want a specific result (brows, lashes, nails) delivered by someone they trust, not a walk-in chain.
• Inspirations: the salon's own logo badge and interior, recovered from its Google Business Profile photos — see "Source material" below. No existing website to extract from (greenfield build).
• Differentiators: solo-practitioner intimacy (clients name Dilek by name in every review), flexible WhatsApp booking, a genuinely photogenic black-and-rose-gold brand mark the business already owns.
• Anti-references: not a clinical medi-spa (too cold for this brand); not a loud influencer-pink beauty-bar template; not sage-green wellness (that's a different category's cliché, not this one).

Source material (greenfield build — no existing website)

Two real photos from the Google Business Profile carried the brand DNA:

1. content/assets/places-photos/photo6.jpg — the salon's actual logo: a black circular badge, a double-ring rose-gold/copper foil outline, a glitter-foil eyebrow icon, and a script "Beauty by Dilek" wordmark in the same rose-gold foil.

2. content/assets/places-photos/photo3.jpg — a real interior shot: warm cream/greige walls, grey tile floor, black leather salon chairs, a gold-framed floor mirror, a gold wire side table, and a graphic black-and-teal face-portrait wall print.

Every color below was eyedropped from these two photos with sample-colors.mjs, not chosen from vibes:

| Sample | Source | Pixel | Sampled hex |

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

| Badge black | photo6.jpg | (100, 1900) region, dark background cluster | #2e2b2c cluster → used as ink/primary |

| Gold foil, highlight | photo6.jpg | (700, 970) | #f0ddc4 → lightened into primary-ink (#f4ead3, same family) |

| Gold foil, shadow | photo6.jpg | (600, 1050) | #987a60 → used as accent |

| Cream wall | photo3.jpg | (400, 300) | #cdc6b6 → lightened for screen legibility into bg (#faf7f2) |

| Grey tile floor | photo3.jpg (auto-palette cluster) | — | #8a8a8e → used as muted |

bg and primary-ink are legibility-adjusted (lightened) derivatives of the sampled wall/foil colors, not raw pixel copies — a photographed wall at screen-background scale needs to be lighter than it reads in a photo lit by ambient light. Everything else is used as sampled.

Voice

• Register: de-CH primary language; Sie (formal) as the safer default for a beauty-services business until the operator confirms — beauty/wellness sometimes goes du, but nothing in the source material confirms that register. [TBD: confirm du/Sie with operator].
• Tone: warm, confident, personal — first-person "I" (Dilek) reads truer to this brand than corporate "we", since every review addresses her by name. Not hypey; no "miracle", "flawless", "transformation".
• Do say: short, concrete, service-first ("Brow lift, 75 CHF, 45 minutes"). Personal-touch language echoing the reviews: easy booking via WhatsApp, taking time, getting it exactly right.
• Don't say: "seamless", "elevate your beauty journey", "unlock your glow", "einzigartig" as filler, exclamation-heavy enthusiasm.
• Good/bad example pair:
• Good: *"Brow lift and tint, done properly — book by WhatsApp, no rush."*
• Bad (AI-fluff to avoid): *"Discover a seamless journey to elevate your natural beauty and unlock your best self!"*
• Reading level: 8th–10th grade, in both DE and EN.

Color

| Token | Hex | Use |

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

| primary | #2b2523| Nav bar, footer, primary buttons — the badge's black |

| primary-ink | #f4ead3| Text/icons on primary — the badge's champagne-gold foil |

| accent | #987a60| Icon fills, borders, section dividers, hover states, decorative rules — the deeper foil gold |

| bg | #faf7f2| Page background — lightened cream wall |

| surface | #ffffff| Cards, raised panels |

| ink | #2b2523| Body text |

| muted | #8a8a8e| Secondary text, captions — the tile grey |

| line | #e5ddd0| Borders, dividers |

Contrast (checked):

• ink (#2b2523) on bg (#faf7f2): 14.1:1 ✓ AAA
• primary-ink (#f4ead3) on primary (#2b2523): 12.6:1 ✓ AAA
• accent (#987a60) on white: ~4:1 — fine for icons/borders/large elements (3:1 UI threshold), not used for small body-size text; use ink for any accent-colored text that needs to read at body size.

Typography

• Headings: Playfair Display — an elegant, editorial contrast-serif that nods to the wordmark's cursive elegance without literally recreating illegible script at UI sizes.
• Body: Jost — geometric humanist sans. Chosen deliberately (not Inter) for its circular, almost Art-Deco letterforms, which echo the ring motif in the real logo badge.
• The script in the actual logo is reproduced only as an image/SVG of the mark itself (e.g. header logo, footer), never rendered as live heading or body text — script fails legibility and accessibility at UI sizes.
• Webfont source: Google Fonts (Playfair Display, Jost).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.1 | 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.5 | captions, footer |

Spacing & layout

• Base unit: 8px (falls back to 4px for fine adjustments).
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: max-width 1120px, gutter 24px, single column on mobile.
• Rhythm: generous — this is a boutique/personal-attention brand, not a discount chain; let sections breathe (space.7–space.9 between major sections).

Shape & surface

• Radii: sm 6px, md 12px, lg 24px, pill 9999px — skewed rounder than a typical local-business site, a deliberate callback to the circular ring in the real logo badge. Buttons use pill, cards use lg, form inputs use md.
• Borders: hairline line color, used sparingly (card edges, table rows) — not on every element.
• Shadows: sm only, soft and low-contrast; no heavy drop shadows — matches the soft ambient lighting seen in the interior photo.
• Imagery treatment: full-color photography, generous crops, faces and hands (results-focused) over empty-room shots — once real photos exist (T5). Until then, treat all imagery slots as placeholders per cautions.md.

Motion

• Default: subtle, ≤200ms ease-out.
• Use motion for: hover states on cards/buttons, gallery lightbox open/close, accordion expand (FAQ/policies).
• Don't use motion for: hero entrance animation, parallax, autoplay carousels.

Components

Button (primary)

• bg: primary (#2b2523), ink: primary-ink (#f4ead3), radius: pill, padding: 14px 28px, weight: 600.
• hover: lighten bg ~8%; focus: 2px accent outline, offset 2px.

Button (secondary)

• bg: transparent, ink: primary, border: 1px accent, radius: pill, otherwise as above.
• hover: bg bg tint.

Card

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

Hero

• Left-aligned headline + subhead over a full-bleed interior/portrait photo (once real photos land) or a warm bg field with the logo mark reproduced large; primary CTA ("Book via WhatsApp" or "Book now") pill button, sticky on mobile scroll.

Nav

• Sticky, bg background with a hairline bottom border once scrolled; logo mark left, nav links + CTA right; mobile: hamburger → full-screen primary overlay with primary-ink text (mirrors the badge's black/gold reversal).

Section

• Alternate bg and surface backgrounds section-to-section for rhythm; section padding space.8 top/bottom on desktop, space.6 on mobile.