MAD THE BARBER SHOP — Styleguide

A modern, no-nonsense men's barbershop in Zürich-Altstetten — fast, friendly, walk-in-first, with a real shop floor of black barber chairs, warm wood, and vintage barber photography under a grid of diamond-cut LED lighting.

Brand DNA

• Atmosphere: confident, fast, unpretentious, warm-under-the-hood, modern-industrial
• Audience: local men (and the shop's window signage shows "MEN / WOMEN"), walk-in-heavy, mobile-first, price- and speed-conscious, international/expat clientele (Zürich-Altstetten, reviews written by visitors from Berlin etc.)
• Inspirations: Google Places storefront + interior photos in brand/inspiration/ — black barber chairs on a honey-toned wood floor, white ceiling with a diamond LED grid, framed vintage b&w barber photography on the wall, bold black "MAD" wordmark with smaller gold "THE BARBER SHOP" line beneath on the shopfront glass.
• Differentiators: genuinely fast service and walk-in availability (recurring review theme — "almost no time to wait", "immediate availability"), free coffee while you wait, best-fades reputation, friendly/returning-client loyalty.
• Anti-references: not a moody dark-mode gold-on-black "premium barbershop" cliché (several sibling barbershop builds already use that look — see build/decisions.md); not vintage-Americana rope-and-leather kitsch; not SaaS-startup Inter-on-white. The real shop is bright, not dim.

Voice

• Register: de-CH primary (Zürich), EN secondary — no ß, no invented Sie/du choice without a client confirming; default to the neutral, direct register common to Swiss local-business sites (short sentences, Sie as the safe default for a barbershop's public site) — flag for the owner to confirm once contacted.
• Tone: direct, brief, practical — no hype. This is a fast, reliable neighbourhood barbershop, not a luxury grooming lounge.
• Do say: "Walk-ins welcome", "Fast, clean fades", "No wait, no fuss", "Coffee's on us while you wait".
• Don't say: "elevate your look", "unlock your best self", "bespoke grooming experience", "leverage", "delve", "einzigartig" as filler, exclamation-heavy enthusiasm.
• Banned AI-fluff: "nahtlos"/"seamless", "ganzheitliches Erlebnis", "Willkommen in der Welt von …", "entdecken Sie", rule-of-three adjective chains.
• Good/bad example pair:
• Good: "Fades, cuts, beard trims — walk in, no appointment needed most days."
• Bad (AI-fluff to avoid): "Discover a seamless grooming experience tailored uniquely to you."
• Reading level: 8th–10th grade.

Color

| Token | Hex | Use |

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

| primary | #17181a | Header/nav, primary buttons, footer — from the chairs & "MAD" wordmark |

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

| accent | #9c5e1e | Links, icon accents, section rules — from the wood floor |

| bg | #f5f3ee | Page background — from the white ceiling/walls |

| surface | #ffffff | Cards, raised surfaces |

| ink | #1c1c1c | Body text |

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

| line | #e2ddd2 | Borders, dividers |

| warn | #a8672c | Draft-placeholder ribbon (this is a lead build) |

Contrast checked: primary/primary-ink and ink/bg both exceed WCAG AA (>10:1). Accent on bg ≈ 4.7:1 — passes AA at body-text size. Accent was nudged more saturated/orange from the initial sampled average (still within the photographed wood-floor range) after check-distinctiveness.mjs flagged it as close to a sibling portfolio site's palette — see build/decisions.md.

Typography

• Headings: Space Grotesk, weight 700 (600 for h3), tight tracking (-0.01em to -0.005em), sentence case — not full caps (the shopfront wordmark is bold/blocky, not a script — this is the closest legible commercial match).
• Body: IBM Plex Sans, 17px base, line-height 1.55.
• Webfont source: Google Fonts (both families).
• Neither family is used elsewhere in the portfolio (Space Grotesk/IBM Plex Sans is a fresh pairing — see distinctiveness note below).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.05 | hero h1 |

| h1 | 2.5rem | 1.1 | 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: 8px.
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: max 1120px, gutter 24px, single column on mobile.
• Rhythm: generous — the shop photos are airy (white ceiling, open floor) even though the vibe is fast/no-fuss; don't cram.

Shape & surface

• Radii: sm 4px, md 8px, lg 14px — modest rounding, echoing the shop's rectangular black slab counters, not full-pill softness.
• Borders: hairline (1px line) on cards and dividers only; no double-rules.
• Shadows: sm only for raised cards (0 1px 2px rgba(23,24,26,.08)); the shop is lit by hard overhead LEDs, not soft ambient light — keep shadows crisp and minimal, never diffuse/glowy.
• Imagery treatment: full-color, real-shop photography (chairs, floor, storefront) once available; Google Places photos are placeholders only per content/cautions.md. Favor environment shots (the shop floor, the chairs, the diamond ceiling grid) over posed stock portraits.

Motion

• Default: subtle, ≤200ms ease-out.
• Use motion for: hover/focus states, mobile nav open/close.
• Don't use motion for: entrance animations per section, parallax, autoplay carousels.

Components

Button (primary)

• bg: primary (#17181a), ink: primary-ink (#f5f3ee), radius: md, padding: 12px 20px, weight: 600.
• hover: lighten to #2a2b2d; 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 environment photo (shop floor / chairs) on the right or as background with a dark gradient scrim on the left third; left-aligned headline + one-line positioning + primary "Call now" / "Get directions" CTA pair. Sticky mobile CTA bar (call + directions) once scrolled past the hero.

Nav

• Solid primary header (not transparent-over-hero — the wordmark reads better as a fixed dark bar, matching the real shopfront signage), logo left, phone number + hours-today visible on desktop, hamburger on mobile.

Section

• Vertical padding: sm 32px, md 64px, lg 96px.

Accessibility

• Body text 17px minimum.
• Focus states always visible (2px accent outline, never outline:none without replacement).
• All interactive elements ≥4.5:1 contrast in default and hover states.
• Decorative imagery: empty alt. Informative imagery (shop floor, chairs): descriptive alt.

Anti-patterns specific to this site

• No dark-mode "moody gold-on-black premium barbershop" theme — genuinely not this shop's actual look (bright interior, white ceiling) and already overused among sibling barbershop builds in this portfolio.
• No invented pricing beyond what's documented as [TBD:] in the copy deck.
• No fabricated booking-platform embed — CTA is call + directions + contact form until a real booking system is confirmed.
• No stock photography of generic barbershops — Google Places photos (clearly the real shop) as placeholders, real photography pass before any true go-live.