The Barber Shop — Styleguide

A no-fuss neighbourhood barbershop on Route de Prilly (Lausanne), running since 2016 — walk in, get a sharp cut at a fair price, come back next month.

Brand DNA

• Atmosphere: dark, warm, honest, masculine, unpretentious
• Audience: men and boys in Prilly/West Lausanne; regulars on loyalty, newcomers checking "open now" and prices on a phone
• Inspirations: the owner's own price poster (chalkboard black + gold + cream), the shop interior (rough wood slats, concrete, warm spots of light), the window vinyl (geometric caps). Photos in brand/inspiration/.
• Differentiators: one barber, ten years in the same spot, walk-in-first, prices on the door (a 20.– cheaper than downtown), kids welcome.
• Anti-references: not a downtown "gentlemen's grooming lounge" (no leather-armchair luxury styling); not pastel unisex salon; not SaaS-white-with-Inter.

Voice

• Register: fr-CH "vous" (client-facing), plain and direct. EN secondary locale mirrors the same tone.
• Tone: confident, brief, concrete — like the poster itself: service, price, done.
• Do say: "Avec ou sans rendez-vous", "Coupe homme 25.–", "Depuis 2016", "Passez quand vous voulez".
• Don't say: invented credentials, "expérience capillaire", "premium grooming journey", superlatives the reviews don't back.
• Banned AI-fluff: "seamless", "découvrez l'univers de", "unique en son genre" as filler, "elevate", rule-of-three adjective chains, exclamation-mark enthusiasm.
• Good/bad pair: ✅ "Coupe + barbe, 38.–. Sans rendez-vous ou au 078 938 11 33." / ❌ "Découvrez une expérience de barbier unique alliant tradition et modernité !"
• Reading level: 8th grade.

Color

| Token | Hex | Use |

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

| primary | #d9a157 | CTAs, price accents, section markers (poster gold) |

| primary-ink | #1c1510 | Text on gold |

| accent | #f7d288 | Highlight gold — hover states, small marks |

| bg | #16161a | Page background (poster chalkboard) |

| surface | #232127 | Cards, price rows, nav |

| ink | #f2ecdd | Body text (poster cream) |

| muted | #b0a58e | Secondary text, captions |

| line | #3b362f | Hairline borders, dashed price rules |

| bronze | #9e7b54 | Deep gold — borders on emphasis, footer marks |

| wood | #4a3a2c | Wood-note surfaces (footer band, dividers) |

| success | #9fc37a | "Ouvert maintenant" indicator |

Contrast: ink #f2ecdd on bg #16161a ≈ 15:1; primary-ink on primary ≈ 8:1; muted on bg ≈ 8:1 — all pass AA. Gold text (#d9a157) on bg only at ≥h3 sizes.

Typography

• Headings: Bebas Neue (Google Fonts), 400, ALL-CAPS by nature, tracking +0.02–0.03em — the poster's condensed chalkboard caps.
• Body: Jost (Google Fonts), 400/500/600 — geometric sans echoing the Century-Gothic-style window vinyl ("MESSIEURS").
• Webfont source: Google Fonts, self-hosted via astro starter (no CDN at runtime if starter inlines; otherwise standard).

Scale

| Token | Size | Line | Use |

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

| display | 4.25rem | 0.95 | hero h1 (Bebas) |

| h1 | 3rem | 1.0 | page titles (Bebas) |

| h2 | 2.125rem | 1.05 | section headings (Bebas) |

| h3 | 1.1875rem | 1.3 | sub-sections (Jost 600, caps, +0.06em) |

| body | 1.0625rem | 1.6 | paragraphs (Jost) |

| small | 0.875rem | 1.5 | captions, footer |

Spacing & layout

• Base unit: 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 72, 104, 144.
• Container: max 1080px, gutter 20px, single column on mobile.
• Rhythm: generous dark space between sections (72–104px); price list rows tight (12–16px) like the poster.

Shape & surface

• Radii: sharp — sm 2px (buttons), md 4px (cards), pill only for the "open now" badge.
• Borders: 1px line hairlines; dashed bronze rules between price rows (straight from the poster's dashed boxes).
• Shadows: mostly none (flat chalkboard); md soft black for the mobile sticky bar.
• Imagery treatment: dark, warm photography; where photos are missing, flat charcoal surfaces with gold line-icons (scissors/razor) — no stock hipster barbers (the real shop's cardboard cutout already covers that).

Motion

• Subtle only: 120–200ms ease-out on hover/focus. No entrance animations, no parallax.

Components

Button (primary)

• bg: primary, ink: primary-ink, radius: sm, padding: 14px 24px, Jost 600, letter-spacing 0.04em, caps.
• hover: accent bg; focus: 2px accent outline offset 2px.

Button (secondary)

• transparent bg, ink: primary, border: 1px bronze; hover: surface bg.

Card / price row

• bg: surface, border: 1px line (dashed bronze for price rows), radius: md, padding: 20–24px, no shadow.

Hero

• Full-bleed bg (charcoal, optional dark photo wash), left-aligned. Bebas display line, one-line positioning in Jost, then two CTAs: "Voir les prix" (primary) + "078 938 11 33" (secondary). "Ouvert maintenant"-style hours line under CTAs. Sticky bottom bar on mobile: hours dot + tap-to-call.

Nav

• Sticky, bg (not transparent), hairline bottom border. Wordmark "THE BARBER SHOP" in Bebas. 4 links + phone number right-aligned.

Section

• Vertical padding: 72px mobile / 104px desktop. Section headings preceded by a short gold rule.

Accessibility

• Body 17px; cream-on-charcoal everywhere ≥4.5:1 (checked above).
• Gold only for large type or non-text accents; never gold body text.
• Focus states: 2px accent outline — visible on dark.
• Alt text describes the cut/space, not "image".

Anti-patterns specific to this site

• No online-booking widget mockup — the shop converts by walk-in and phone.
• No stock photography of model-barbers; placeholders stay abstract until the owner supplies photos.
• No "Prilly – Saint-François" second-location claim until confirmed (poster mentions it; unverified).
• Don't reuse the old "The Next Cut" name or logo anywhere on the new site.