Coiffeur Yanu Central — Styleguide

A vintage-badge barbershop in the heart of Zürich's Niederdorf old town — walk-in, fast,

confident — set in a bright, industrial-modern space rather than a dark moody barbershop.

Brand DNA

• Atmosphere: confident, walk-in-friendly, industrial-bright, precise, unpretentious.
• Audience: old-town foot traffic and tourists (Niederdorf is Zürich's pedestrian core),

students (a 10% student discount is advertised on the window), and regulars who want a fast,

reliable cut without booking ahead. Mobile-first — visitors are on the cobblestones outside,

phone in hand.

• Inspirations: the business's own storefront and interior, photographed directly —

content/assets/source-photos/. Badge logo (mustache + scissors, black + mustard-gold oval),

matte black Belmont-style barber chairs, warm-oak plank floor next to grey plank tile, a

black geometric zigzag LED wall feature, walnut reception desk, hanging plants, an Apple iMac

and Sonos speaker at the front desk.

• Differentiators: real, current, photographed pricing (rare for a lead build); a genuinely

bright, tech-comfortable interior rather than a dark old-world barbershop; a badge logo that

is already public and recognizable on the actual street.

• Anti-references: not a moody, candle-lit "gentleman's den" barbershop cliché — the real

space is bright and light-filled. Not a generic SaaS/startup look (no Inter-on-white, no

centered-hero-two-buttons template feel).

Voice

• Register: German-first (Sie), Zürich audience; EN secondary for the international/tourist

clientele the reviews clearly come from. Confirm with the operator once in contact (TODO.md T6).

• Tone: direct, confident, no-nonsense — short sentences, walk-in energy, not flowery.
• Do say: "ohne Voranmeldung" / "walk in, no appointment needed", "Cut & Go", concrete prices,

the street name (Niederdorfstrasse).

• Don't say: "einzigartiges Erlebnis", "ganzheitlich", "entdecken Sie die Welt von…", invented

craft/heritage claims ("seit Generationen") not backed by any source fact.

• Banned AI-fluff: "seamless", "elevate", "unlock", "nahtlos", rule-of-three adjective chains,

exclamation-mark enthusiasm.

• Good/bad example pair:
• Good (on-voice): "Cut & Go: CHF 33.–. Kein Termin nötig — einfach reinkommen."
• Bad (AI-fluff): "Erleben Sie ein einzigartiges Grooming-Erlebnis, das Tradition und Moderne

nahtlos vereint."

• Reading level: 8th–10th grade equivalent; short, plain sentences.

Color

| Token | Hex | Use |

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

| primary | #141A24 | Header/footer bands, dark text blocks, primary structure |

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

| accent | #6E6316 | Primary CTA, links, badge/logo gold — true to the real sign |

| accent-ink | #FFFFFF | Text on accent buttons |

| accent-2 | #B17A4F | Warm-oak secondary accent — dividers, photo frames, tags |

| accent-3 | #5C6E52 | Sage green, used sparingly — ties to the photographed plants |

| bg | #F5F3EE | Page background — bright, matches the real interior |

| surface | #FFFFFF | Cards, raised surfaces |

| ink | #24262A | Body text |

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

| line | #E1DED4 | Borders, dividers |

Contrast (WCAG 2.1 AA, verified): ink/bg 13.7:1 · accent/bg 5.5:1 · white/accent 6.1:1 ·

primary-ink/primary 15.7:1. All pass at body text size.

Distinctiveness note

Colors were sampled directly from the salon's own Google Places photos

(content/assets/source-photos/), not chosen from category vibes — see palette samples in the

build log. The logo's badge gold is real and kept (#6E6316, darkened/saturated from the raw

sampled pixel #47441b–#6d6855 for AA contrast, not invented). The portfolio registry already

has two hairdresser sites pairing gold accents with a dark background

(coiffeur-ali-barber, the-barber-shop-prilly) and two more pairing gold/brown with a light

background (andre-coiffeur, mad-the-barber-shop) — so the light-bg-plus-gold structure isn't

unique on its own. Differentiation instead comes from: (1) fidelity to what's actually

photographed — a bright, airy, tech-forward interior, not a dark "gentleman's den"; (2) a cool

navy-charcoal primary (#141A24, sampled from blue-grey tile-shadow tones) instead of the warmer

near-blacks used by andre/mad; (3) the warm-oak (#B17A4F) and sage-green (#5C6E52) secondary

accents, both sourced from real photo elements (the plank floor, the hanging plants) and unused

elsewhere in the portfolio; (4) the zigzag LED wall motif as a reusable graphic device (see Shape

& surface below), which no sibling hairdresser site has; (5) Fraunces/Manrope typography, not

used by any sibling site.

check-distinctiveness.mjs (advisory, compared against the 5 most recent client sites) initially

flagged primary at 8 RGB units and accent at 44 units from silvia-jayet-reflexologie

(the operator's own reflexology site, a different category) — both nudged (primary toward a

more saturated navy, accent toward a more olive/mustard gold, both still within the photographed

sample range) to 32 and 58 units respectively, while improving contrast in both cases. Accepted

at that distance rather than chased further, same judgment call as prior lead builds: the check

is advisory, the category differs, and the swap test (real photo, zigzag motif, typography) is

what actually carries distinctiveness here, not color distance alone.

The hero layout (left-text-photo-right) matches 2 of the last 5 portfolio sites — kept

anyway because it's the layout that actually fits the real asset (a rectangular storefront photo

with the badge logo legible in it); forcing a scrim/arch/centered treatment would crop or obscure

the one real, owner-attributed photo this lead build has. Differentiated instead through the

zigzag divider motif immediately below the hero (unique to this project) and the photo itself.

Typography

• Headings: Fraunces (Google Fonts), weight 600, tight tracking on display sizes. A

characterful display serif that nods to the vintage badge without being generic Georgia/

Newsreader (already used by a sibling hairdresser site).

• Body: Manrope (Google Fonts), weight 400/500, default 17px, line-height 1.55. Clean and

geometric — ties to the modern tech detail at reception (iMac, Sonos) without going full

startup-sans (avoiding Inter).

• Webfont source: Google Fonts, self-hosted subset via the Astro starter's font pipeline.

Scale

| Token | Size | Line | Use |

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

| display | 3.5rem | 1.08 | hero h1 |

| h1 | 2.5rem | 1.12 | page titles |

| h2 | 1.875rem| 1.2 | section headings |

| h3 | 1.375rem| 1.3 | sub-sections |

| body | 1.0625rem| 1.55| paragraphs |

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

Spacing & layout

• Base unit: 4px, scale 4/8/12/16/24/32/48/64/96/128.
• Container: max-width 1120px, gutter 24px, single column on mobile.
• Rhythm: generous section padding (space.7–8, 48–64px) — the real salon isn't cramped, the

site shouldn't feel cramped either.

Shape & surface

• Radii: sm 3px, md 6px, lg 14px — slightly squared-off, matching the black anthracite

window frames and Belmont chair hardware rather than a soft rounded SaaS look.

• Borders: 1px line on cards; none on buttons (fill instead).
• Shadows: sm/md only, no heavy drop shadows — the real space is matte and flat-lit, not glossy.
• Imagery treatment: full-color, generous crops, environment-forward (chairs, floor, badge)

over posed headshots until real client/stylist photos exist.

• Graphic motif: the black geometric zigzag LED wall feature is real and distinctive —

reuse as a thin zigzag rule/divider between sections (SVG, in line/accent-2), not overused.

Motion

• Subtle, ≤200ms ease-out. Hover/focus only — no entrance animations, no parallax, no autoplay.

Components

Button (primary)

• bg: accent, ink: accent-ink (white), radius: md, padding: 12px 20px, weight: 600.
• hover: darken accent 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

• Left-aligned headline + tap-to-call/directions CTAs over a full-bleed photo (storefront or

chairs) on the right/behind with a dark-to-transparent gradient scrim on the left only —

bright photo, not a dark full-scrim, to match the real light interior. Sticky "Call now" CTA

on mobile.

Nav

• Sticky, opaque surface bg with line bottom border after scroll (not transparent-over-hero

— the badge logo needs a stable light background to read against, since it's dark-on-gold).

Section

• Vertical padding: sm sections 48px, md 64px, hero/CTA-band sections 96px.

Accessibility

• Body text 17px minimum.
• Visible focus states (2px accent outline, never removed without replacement).
• All interactive elements ≥4.5:1 contrast, default and hover.
• Decorative imagery: empty alt. Gallery/service imagery: descriptive alt (e.g. "Cropped fade

haircut with tapered sides", not just "haircut").

Anti-patterns specific to this site

• No dark "gentleman's club" barbershop cliché — the real interior is bright, not moody.
• No invented heritage/tradition copy ("seit Generationen", "traditionelle Handwerkskunst") —

nothing in the dossier supports a founding-story claim.

• No booking-platform embed — there isn't one; walk-in + call is the real conversion path.
• No stock photography of generic barbershops — use the salon's own Google Places photos as

placeholders (flagged in cautions.md) until real photos are supplied.