Coiffure Bernina — Styleguide

A no-appointment-needed neighbourhood barbershop on Schaffhauserstrasse in Zürich Unterstrass, run by owner-barber Nouri Ali — heritage crest branding, walk-in-first, unpretentious.

Brand DNA

• Atmosphere: heritage, unpretentious, confident, warm, no-frills.
• Audience: neighbourhood walk-ins — men, women, kids — who want a reliably good cut without booking ahead. Mobile-first; many arrive via Google Maps directions, not a homepage visit.
• Inspirations: the business's own logo (content/assets/extracted/logo-candidate-01.jpeg) — an ornate "B" crest wordmark, the kind of mark you'd see stamped on a straight razor or a barbershop mirror. The old site's actual fonts (Gilda Display headline serif, Nunito Sans body) and true-white background are kept; the WordPress theme-preset rainbow of unused brand colors in extracted-palette.json is not (see Anti-patterns).
• Differentiators: walk-in friendly with short waits (every seeded review calls this out) — not a book-ahead salon. Single named owner-operator, not a team of stylists. 4.9★ across 223 reviews is unusually strong for a walk-in shop; the copy can lean on that without embellishment.
• Anti-references: not a moody industrial barbershop (leather/exposed-brick cliché). Not a pastel/soft salon. Not the WordPress-default look of the old site (generic Pexels stock tiles, no real photography, HTTP-only).

Voice

• Register: Sie (German-formal — default for a service business's public-facing site; unconfirmed with the operator, see build/decisions.md). Language variant: de-CH (no ß).
• Tone: direct, matter-of-fact, a little proud — the old site's own line "Unser Ziel ist zufriedene Kundschaft" (satisfied customers is the goal) already has the right register; keep that plainness rather than dressing it up.
• Do say: "kommen Sie vorbei" (drop by), "ohne Wartezeit" / "kurze Wartezeiten" (short waits), "seit [Jahr]" once a real founding year is confirmed, "Qualität zu fairen Preisen."
• Don't say: invented specialties or certifications, "premium experience," "verwöhnen," anything that implies appointment-only.
• Banned AI-fluff: "nahtlos"/seamless, "ganzheitliches Erlebnis," "Willkommen in der Welt von …," "entdecken Sie," "einzigartig" as filler, "delve," "elevate," "unlock," rule-of-three adjective chains, exclamation-mark enthusiasm.
• Good/bad example pair:
• Good (old site's own words, kept): *"Durch die langjährige Erfahrung in der Coiffeurbranche wissen wir, was Sie glücklich macht."*
• Bad (AI-fluff version to avoid): *"Tauchen Sie ein in ein einzigartiges Coiffure-Erlebnis, das Ihre Erwartungen übertrifft!"*
• Reading level: 8th–10th grade equivalent; short sentences.

Color

| Token | Hex | Use |

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

| primary | #111111 | Header/footer ink, primary CTA fill |

| primary-hover| #2b2b2b | Primary CTA hover |

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

| accent | #6E2332 | Secondary highlights, active nav, small accents (oxblood — a barber-chair leather tone, not in the old theme's preset list) |

| accent-ink | #ffffff | Text on accent |

| bg | #ffffff | Page background (matches the old site's actual computed body background — kept deliberately) |

| surface | #F7F5F1 | Cards, alternating section bands |

| ink | #111111 | Body text |

| muted | #68635C | Secondary text, captions |

| line | #E4E0D8 | Borders, dividers |

| warn | #9C6B1E | Only if used (form validation) |

| danger | #9b3a2e | Only if used (form validation) |

Contrast: primary (#111111) on white and white on primary both exceed WCAG AA. Accent (#6E2332) on white ≈ 8.9:1 — passes AA for text use, not just decoration.

Typography

• Headings: 'Gilda Display' serif, weight 400 only (it has no bold cut — use size/spacing for emphasis, never faux-bold). This is the old site's actual heading font, confirmed via computed styles in extracted-palette.json.
• Body: 'Nunito Sans', default 17px, line-height 1.6 — also the old site's real body font.
• Webfont source: Google Fonts (both families available there).

Scale

| Token | Size | Line | Use |

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

| display | 3.75rem | 1.05 | hero h1 |

| h1 | 2.75rem | 1.1 | page titles |

| h2 | 2rem | 1.18 | section headings |

| h3 | 1.375rem| 1.3 | 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-width 1140px, gutter 24px, single column on mobile.
• Rhythm: generous vertical section padding (64–96px desktop, 48px mobile) — the old site's sections breathe; keep that, don't cram.

Shape & surface

• Radii: sm 0px, md 0px, lg 2px — sharp, square edges matching the crest logo's engraved-plaque feel. Pill (9999px) reserved for the phone-number chip only.
• Borders: 1px line color, used sparingly (card outlines, table rows) — not as decoration.
• Shadows: sm for raised chips/buttons on hover, md for the sticky mobile CTA bar. No shadow on flat sections.
• Imagery treatment: full-color, real environments over posed portraits — the one genuine interior/owner photo available (image-07.jpg, Nouri Ali in the salon) sets the tone: warm, unstaged, working shop. Everything else is a placeholder until real photography exists (see content/cautions.md — do not reuse the old site's stock Pexels tiles).

Motion

• Default: subtle, ≤220ms ease-out (cubic-bezier(0.25, 0.46, 0.45, 0.94) — matches the old theme's own transition curve, one of the few extraction values worth keeping).
• Use motion for: hover/focus states, mobile nav open/close.
• Don't use motion for: entrance animations, parallax, autoplay carousels.

Components

Button (primary)

• bg: primary (#111111), ink: white, radius: 0px, padding: 14px 28px, weight: 600, letter-spacing 0.02em, uppercase small text (matches the old site's "HERREN / DAMEN / KINDER / SHOP" tile-label treatment).
• hover: bg → primary-hover; focus: 2px accent outline, offset 2px.

Button (secondary)

• bg: transparent, ink: primary, border: 1px primary, otherwise as above. Used for "Route planen" (get directions) next to the primary "Anrufen" (call) CTA.

Card

• bg: surface, border: 1px line, radius: 2px, padding: 24px, shadow: none by default, sm on hover for interactive cards (service tiles).

Hero

• Full-bleed image (placeholder until real interior photography is confirmed) with a dark overlay, large centered/left display-size headline in white, single-line subhead, primary "Anrufen" + secondary "Route planen" CTA pair. No video — the old site used a static hero and it suits a walk-in shop (fast load matters more than motion here).

Nav

• Sticky on scroll, white background with 1px bottom line border once scrolled (starts transparent-over-hero only if the hero is dark enough for white nav text; otherwise solid white nav from the top — confirm once real hero imagery exists). Mobile: hamburger → full-screen overlay menu, phone number visible in the overlay.

Section

• Vertical padding: sm sections 48px, md sections 64px, lg (hero, closing CTA) 96px desktop / 64px mobile.

Accessibility

• Body text 17px minimum.
• Visible focus ring (2px accent, 2px offset) on every interactive element — never outline: none without a replacement.
• All interactive elements ≥4.5:1 contrast in default and hover states.
• Decorative imagery: empty alt. Informative imagery (owner photo, service photos): descriptive alt naming what's shown, not just "haircut."

Anti-patterns specific to this site

• Don't reuse the old site's stock Pexels tile images (image-02 through image-05 in content/assets/extracted/) as if they were this business's own work — see content/cautions.md.
• Don't imply appointment-only booking anywhere — this is a walk-in shop; a prominent "Book Now" widget would misrepresent it.
• Don't invent a founding year, certifications, or product-brand partnerships not present in any source.
• Don't adopt the WordPress theme's leftover preset color swatches (the pink/purple/teal/orange gradients visible in extracted-palette.json's customProperties) — none of them appear anywhere in the actual rendered site; they're unused editor defaults, not brand colors.