Coiffeur Ali Barber — Styleguide

Barbershop masculin à Crissier (VD) — coupe, barbe, dégradés — 5.0★ sur Google, un salon chaleureux en bois de chêne, cuir noir et laiton, tenu par Ali.

Greenfield brand build. Il n'existe aucun site web. Chaque token est dérivé des photos du salon lui-même (brand/inspiration/), pas de la catégorie :

• Chêne clair (surface-oak #C08A4F) — les murs à lattes verticales en chêne qui tapissent tout le salon.
• Noir profond (bg #181410, surface #221D17) — canapés Chesterfield en cuir noir, fauteuils de barbier noirs, plans de travail en pierre sombre, sections de lattes noires.
• Or / laiton (primary #C9A254) — cadres de miroirs à liseré laiton, écusson doré « ALI » brodé sur les fauteuils.
• Rouge & bleu barbier (accent #B03A34, accent-blue #2D4B8E) — l'enseigne lumineuse de barbier (pole) à l'entrée. Accent patrimonial, utilisé avec parcimonie (filet décoratif, détails).
• Blanc cassé chaud (ink #F3ECDF) — les LED blanches hexagonales au plafond, les décalcomanies en ligne blanche de la vitrine.
• Motif hexagonal — plafonniers LED en nid d'abeille + motif hexagonal de la vitrine → motif décoratif SVG discret de la marque.

Brand DNA

• Atmosphere: masculin, chaleureux, soigné, patrimonial-moderne, convivial
• Audience: hommes de Crissier et de l'ouest lausannois, tous âges ; forte fidélité (« je vais chez lui depuis 10 ans ») ; mobile-first, souvent depuis Google Maps.
• Inspirations: le salon physique uniquement — voir brand/inspiration/ (murs chêne, cuir noir, laiton, pole de barbier, LED hexagonales).
• Differentiators: 5.0★/163 avis Google ; l'expérience (« on a droit à un spectacle ») ; fidélité décennale ; salon récent et très soigné.
• Anti-references: pas de sage-green/cream wellness ; pas de SaaS Inter-sur-blanc ; pas de barbershop grunge/tatoo-parlor sombre-sale — ici c'est chaleureux et premium.

Voice

• Register: vouvoiement (fr-CH). Locale primaire fr-CH, secondaire en.
• Tone: direct, confiant, chaleureux — la voix d'un artisan fier de son travail, pas d'une agence.
• Do say: « coupe et barbe », « dégradé », « sur rendez-vous ou sans rendez-vous » (à confirmer), « au cœur de Crissier », « le meilleur barbier du coin » (citation d'avis, attribuée).
• Don't say: « expérience capillaire ultime », « univers de la coiffure », « bienvenue dans notre monde », jargon marketing.
• Banned AI-fluff: « découvrez », « unique » en remplissage, « sublimez », chaînes de trois adjectifs, enthousiasme à points d'exclamation.
• Good/bad example pair:
• ☑« Coupe, barbe, dégradé — du travail précis, dans un salon en chêne et cuir au centre de Crissier. »
• ❌ « Découvrez une expérience capillaire unique et laissez-vous sublimer dans notre univers dédié à l'élégance masculine ! »
• Reading level: 8e–10e année.

Color

| Token | Hex | Use |

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

| primary | #C9A254 | CTA, liens, liseré laiton, écusson |

| primary-ink | #181410 | Texte sur or |

| accent | #B03A34 | Rouge barbier — filet décoratif, détails rares |

| accent-blue | #2D4B8E | Bleu barbier — uniquement dans le motif pole |

| bg | #181410 | Fond de page (noir chaud) |

| surface | #221D17 | Cartes, surfaces élevées |

| surface-oak | #C08A4F | Sections chêne (bandeaux, encarts photo) |

| ink | #F3ECDF | Texte courant (blanc cassé chaud) |

| muted | #A79A85 | Texte secondaire, légendes |

| line | #3B342A | Bordures, filets |

Contraste : ink sur bg ≈ 13:1 ; primary sur bg ≈ 7.5:1 ; primary-ink sur primary ≈ 8:1 — AA passé partout. Sur surface-oak, texte en primary-ink uniquement.

Typography

• Headings: Marcellus (Google Fonts) — capitales romaines gravées, écho direct de l'écusson « ALI » ; regular uniquement, casse majuscule pour les labels de section avec tracking large.
• Body: Jost (Google Fonts) — géométrique chaleureuse, light 300 pour le courant, 400/500 pour l'UI.
• Webfont source: Google Fonts, self-hosted au build (astro).

Scale

| Token | Size | Line | Use |

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

| display | 3.75rem | 1.05 | hero h1 |

| h1 | 2.75rem | 1.1 | titres de page |

| h2 | 2rem | 1.15 | sections |

| h3 | 1.25rem | 1.3 | sous-sections, labels caps |

| body | 1.0625rem | 1.6 | paragraphes |

| small | 0.875rem | 1.5 | légendes, footer |

Spacing & layout

• Base unit: 8px ; échelle 4, 8, 12, 16, 24, 32, 48, 72, 104, 144.
• Container: max 1160px, gouttière 24px, une colonne sur mobile.
• Rhythm: sections généreuses (72–104px vertical) ; le noir a besoin d'air pour rester premium et lisible.
• Layout DNA: aligné à gauche, éditorial ; photos hautes (portrait) comme au salon ; filets verticaux fins rappelant les lattes de chêne.

Shape & surface

• Radii: sm 2px, md 4px, lg 8px — angles nets, mobilier masculin ; pas de pill sauf badges.
• Borders: filets 1px line ; encadrés « laiton » 1px primary réservés aux éléments à mettre en valeur (comme les miroirs du salon).
• Shadows: discrètes (sm, md) ; glow doré 1px pour les hovers de cartes.
• Imagery treatment: photos réelles du salon, pleine couleur, chaudes ; crops portrait généreux ; jamais de stock générique.
• Motif: trame hexagonale SVG très discrète (opacité ≤ 6 %) sur les fonds de section, dérivée des LED du plafond.

Motion

• Default: subtile, ≤ 200ms ease-out ; hover/focus uniquement.
• Don't: animations d'entrée par section, parallax, autoplay.

Components

Button (primary)

• bg: primary, ink: primary-ink, radius: md, padding: 14px 24px, weight: 500, tracking 0.04em, casse haute.
• hover: éclaircir primary 8 % ; focus: outline 2px primary offset 2px.

Button (secondary)

• transparent, texte primary, bordure 1px primary ; hover: fond primary à 10 %.

Card

• bg: surface, border: 1px line, radius: lg, padding: 24px ; hover: shadow glow.

Hero

• Pleine hauteur ~80vh, photo du salon en fond (voile noir dégradé), titre display Marcellus aligné à gauche, sous-titre une ligne, CTA « Appeler » + secondaire « Horaires & accès » ; badge 5.0★ discret. Sticky call CTA sur mobile.

Nav

• Sticky, fond bg translucide (blur), logo wordmark « ALI BARBER SHOP » en Marcellus, liens Jost caps small ; CTA téléphone à droite.

Section

• Vertical padding : sm 48px, md 72px, lg 104px. Alternance bg / surface ; un bandeau surface-oak maximum par page.

Accessibility

• Corps 17px minimum ; thème sombre → contraste vérifié sur chaque paire (voir Color).
• Focus visible partout ; alt descriptifs sur les photos de coupes (« dégradé bas, cheveux épais » — décrire le look).
• Galerie lazy-loaded, AVIF/WebP, poids ≤ 500KB par image.

Anti-patterns specific to this site

• Ne pas hardcoder la note 5.0/163 dans la copy (snapshot — badge dynamique ou formulation générique « Noté 5 étoiles sur Google »).
• Pas de photos Google Places en production (droits + URLs expirantes) — placeholders stylés + shot-list pour Ali.
• Pas de réservation en ligne inventée : aucun système de booking connu → CTA = appel / venir au salon. [TBD à confirmer avec Ali]
• Le rouge/bleu barbier reste décoratif — jamais en couleur de CTA ni de lien.