← Retour

Style guide

Palette

Couleurs et dégradés officiels (charte Wallace 2025).

Synchronisé avec le système maquette

Couleurs de marque

Teintes officielles — ne pas modifier.

Dégradés

Usage ponctuel pour l'or ; le dégradé sombre sert de référence aux sections dark + footer.

Couleurs sémantiques — thème clair

Rôles d'interface (fonds, texte, bordures, accents).

Jeu « on-dark »

Textes et bordures posés sur les sections sombres (hero, storytelling, footer).

Voiles & overlays

Calques semi-transparents posés sur la fresque / les médias (lisibilité, assombrissement du fond).

Typographie

Familles de polices

Trois rôles typographiques — équivalents web validés par la charte Wallace.

Aa
Bajada Pale Ale
Titres principaux
--font-display · Bebas Bajada

Bebas Neue (OFL) avec le « A » redessiné en arche, self-hosted. Graisse unique, capitales, interlettrage resserré.

Aa
L'élégance désaltérante
Titres secondaires & eyebrow
--font-subtitle · Pathway Gothic One

Condensée haute, en capitales pour les sur-titres (eyebrow) et accroches secondaires.

Aa
Une Pale Ale douce, agrumes & florale.
Corps de texte
--font-body · Barlow Condensed

Condensée lisible pour les paragraphes, labels et éléments d'interface (400 à 700).

Échelle des styles

Classes utilitaires rendues à leur taille réelle (fluides via clamp()).

Bajada
.heading-1--font-display--text-h1 · clamp(3.25rem → 6.5rem)UPPERCASE
L'élégance désaltérante
.heading-2--font-display--text-h2 · clamp(2.5rem → 4.5rem)UPPERCASE
Qu'est-ce qu'une Pale Ale ?
.heading-3--font-display--text-h3 · clamp(1.875rem → 2.875rem)UPPERCASE
L'élégance désaltérante
.subtitle-1--font-subtitle--text-h3 · clamp(1.875rem → 2.875rem)UPPERCASE · titre secondaire
Une histoire, une saveur, un numéro
.eyebrow--font-subtitle--text-eyebrow · 3remtracking .06em · UPPERCASE
Une Pale Ale douce, agrumes & florale
.subtitle-min--font-subtitle--text-eyebrow · 3remtracking .06em · casse normale

Née des matchs de padel, où l'on prolonge le moment convivial autour d'une bière — Bajada, c'est avant tout un voyage.

.prose-lead--font-body--text-lg · clamp(1.25rem → 1.5rem)line-height 1.65

Pale Ale non filtrée, VOL 5 %. Profil agrumes, florale, douce et fraîche. Houblon US, malt de Nogent-sur-Seine et de Belgique.

body--font-body--text-base · clamp(1.0625rem → 1.25rem)line-height 1.55

Boutons

Variantes

Base .btn + une variante. Capitales, forme pilule (--radius-pill), léger soulèvement au survol.

.btn.btn--primary
.btn.btn--gold
.btn.btn--ghost
.btn.btn--primary.btn--sm

Sur fond sombre

Mêmes variantes sur section sombre — .btn--ghost s'adapte au contexte via currentColor.

.btn.btn--primary
.btn.btn--gold
.btn.btn--ghost