Styleguide (Notizen)

AYN. STUDIO — Styleguide

A quiet, editorial beauty studio in Zürich Wiedikon, run by Ayshen — eyebrow/lash specialist and

aesthetic treatments (laser hair removal), five-star reviewed, calm and detail-obsessed.

Brand DNA

Atmosphere: quiet, editorial, warm-minimal, precise, calm-confident.
Audience: clients booking a specific treatment (brows, lashes, laser) who want to see the

space and the work before they book — reassurance through craft, not hype.

Inspirations (from Google Places photos, greenfield — no existing site):
Storefront: minimalist glass-front unit, "AYN. STUDIO" in a slim white wordmark on the door,

no clutter in the window display.

Reception desk: a custom two-tone paint job (warm taupe base, white countertop) — a

deliberate design choice, not an accident.

Treatment room: dark walnut wood-grain accent wall behind a lit vanity mirror, true-black

leatherette styling chairs, white marble-look tile.

Waiting area: cream boucle/corduroy armchairs, a soft arched doorway, orchids and dried

pampas/gypsophila arrangements repeated across three separate photos — a consistent styling

choice, not incidental.

Front desk trust shelf: a framed "Treatwell Top Rated" award and a 5.0-star Google plaque —

the business already visibly cares about displaying trust signals.

See content/assets/places-photos/ for the source photos and build/decisions.md for how

each token below was derived.

Differentiators: solo-specialist intimacy (reviews consistently name "Ayshen" personally,

not "the salon") + a genuinely calm, uncluttered space — not a high-volume chain.

Anti-references: not a loud beauty-influencer palette (neon pink, glitter, emoji-heavy);

not a clinical/cold medi-spa look either — the space is warm, not sterile, despite the laser

equipment. Not generic sage-green-and-cream wellness template.

Voice

Register: Sie (German-language beauty/aesthetic business, professional service — default

to formal register per multilingual.md; confirm with the operator when contacted — [TBD]).

Language variant: de-CH (no ß).
Tone: warm, precise, understated confidence — closer to "your eyebrows, done properly" than

"unlock your best self."

Do say: name the treatment plainly ("Augenbrauen", "Lamination", "Laser-Haarentfernung"),

reference care/precision/attention to detail (echoed by every single review), keep sentences short.

Don't say: "ganzheitliches Erlebnis", "einzigartig" as filler, "entdecken Sie", invented

certifications, exclamation-heavy enthusiasm, any specific treatment result/outcome claim

(regulated language — see content/cautions.md).

Good/bad example pair:
Good: "Augenbrauen in natürlicher Form, sorgfältig und mit viel Liebe zum Detail."
Bad (AI-fluff to avoid): "Erleben Sie eine ganzheitliche Beauty-Reise und entdecken Sie Ihre

einzigartige Schönheit!"

Reading level: roughly 8th–10th grade equivalent in German (klar, kurz, direkt).

Color

| Token | Hex | Use | Source |

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

| accent | #B97164 | Links, icons, badges, secondary highlights | Interpretive blend of the repeated dusty-pink floral styling + warm wood tones (not an exact-pixel sample — documented hypothesis, see decisions.md) |

| ink | #221F1B | Body text | Softened from sampled black |

Contrast: ink on bg and primary-ink on primary both pass WCAG AA comfortably (near-black

on near-white, white on near-black). accent is used for icons/badges/links at ≥18px or paired

with underline, not for small dense body text.

Explicitly excluded: the storefront's steel-blue window frames. Confirmed against wider

photo evidence (a neighboring business's sign is visible in the same blue frame) — this is the

building facade's color, not a choice AYN. STUDIO made. Not used as a brand color.

Typography

Headings: Italiana (Google Fonts) — a slim, high-contrast display serif. Reserved for

display/h1/h2 at generous size and letter-spacing; matches the minimalist wordmark

aesthetic seen on the studio's actual door signage.

Sub-headings/labels (h3): set in the body face (Sora), uppercase, tracked wide

(0.08em), semibold — Italiana has no bold weight and reads as too delicate below ~24px.

Body: Sora — a warm, rounded-geometric grotesk. Chosen specifically to avoid Inter/Work

Sans/Jost/Karla, all already used elsewhere in this portfolio (see build/decisions.md).

Webfont source: Google Fonts, self-hosted via the astro-starter font pipeline.

Scale

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

| display | 3.25rem | 1.1 | hero h1 |

| h1 | 2.5rem | 1.15 | page titles |

| h2 | 1.75rem | 1.2 | section headings |

| h3 | 1.0625rem (tracked caps) | 1.4 | sub-sections |

| body | 1.0625rem | 1.6 | paragraphs |

| small | 0.875rem | 1.5 | 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 — the physical space reads as uncluttered and calm; sections should

breathe (use space.8/space.9 between major sections, not space.5).

Shape & surface

Radii: sm 4px, md 10px, lg 20px — soft, not sharp. The space has an arched doorway,

rounded barrel chairs, and round vases/tables throughout; sharp minimalist corners would

contradict the source material.

Borders: hairline line color only, used sparingly (card edges, table rows).
Shadows: sm for cards, md for the sticky mobile CTA bar. Nothing heavier — the interior

photos have soft, diffused lighting, no hard shadows.

Imagery treatment: full-color, natural light, generous crops of the real space and real

work (brow close-ups already exist in the Places photos) over staged stock beauty photography.

Motion

Default: subtle, ≤200ms ease-out.
Use motion for: hover/focus states, mobile nav reveal, accordion (FAQ/policies).
Don't use motion for: entrance animations per section, parallax, autoplay carousels.

Components

Button (primary)

bg: primary (#211D19), ink: primary-ink (white), radius: md, padding: 14px 28px, weight: 600,

letter-spacing: 0.02em.

hover: lighten primary ~8%; focus: 2px accent outline, offset 2px.

Button (secondary)

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

Card

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

Hero

Full-bleed photo of the actual space (waiting area or treatment room) on the right/background,

text block left-aligned over a soft dark scrim or on a solid bg panel — not centered-stacked.

Primary CTA ("Termin anfragen" / phone) + secondary link to Services.

Nav

Sticky, transparent over hero, solidifies to surface with a hairline line border on scroll.

Mobile: hamburger, full-screen overlay nav in primary.

Section

Vertical padding: space.9 (96px) desktop, space.7 (48px) mobile.

Accessibility

Body text minimum 17px.
Focus state visible (2px accent outline), never removed without replacement.
All interactive elements ≥4.5:1 contrast in default and hover states.
Decorative imagery (florals, texture shots) gets empty alt; treatment/space photos get

descriptive alt.

Anti-patterns specific to this site

No stock "influencer" beauty photography — use the real space photos and, once available,

the operator's own work photos (see content/cautions.md on Places-photo licensing).

No invented pricing, certifications, or treatment outcome claims — everything not confirmed

by the operator stays [TBD] (see TODO.md).

No sage-green wellness-template drift — this brand is warm-neutral + near-black + dusty

terracotta-rose, not green.