Couleurs
Les jetons de couleur semantiques qui alimentent toutes les surfaces d'interface.
Les 68 jetons de couleur définis dans packages/design-system/globals.css. Cliquez sur les valeurs hex pour les copier. Les badges W/D indiquent le contraste sur blanc (#FFFFFF) et sur fond foncé (#1A2332). Relancer `pnpm --filter storefront docs:colors` après toute modification.
Marque
ep-teal
ep-blue
ep-cyan
ep-amber
ep-indigo
ep-pink
Texte
ep-text-heading
#F0F0F0
ep-text-body
#D1D5DB
ep-text-muted
#939393
ep-text-inverse
ep-text-teal
#009FCA
ep-text-link
#009FCA
Surfaces
ep-bg
#1A1A1A
ep-bg-secondary
#1E293B
ep-bg-tertiary
#0F172A
ep-bg-3
#2D3748
ep-bg-page-dark
ep-surface-card
#1E293B
ep-surface-elevated
#252525
ep-surface-navy
Bordures
ep-border
#2D3748
ep-border-subtle
#1E293B
ep-border-strong
#3B4759
Sémantique
ep-success
#22C55E
ep-warning
#FBBF24
ep-error
#EF4444
ep-info
#38BDF8
ep-semantic-error
#EF4444
ep-semantic-warning
#FBBF24
Teintes sémantiques
ep-semantic-success-tint
#123527
ep-semantic-success-fg
#6EE7B7
ep-semantic-success-tint-border
#1D4E38
ep-semantic-warning-tint
#3A2A08
ep-semantic-warning-fg
#FCD34D
ep-semantic-warning-tint-border
#55400F
ep-semantic-error-tint
#3B1516
ep-semantic-error-fg
#FCA5A5
ep-semantic-error-tint-border
#571E1F
ep-semantic-info-tint
#122A4D
ep-semantic-info-fg
#93C5FD
ep-semantic-info-tint-border
#1E3A5F
Fonds sémantiques
ep-semantic-success-bg
ep-semantic-error-bg
ep-semantic-info-bg
Bouton primaire
ep-btn-primary-bg
ep-btn-primary-hover
#008095
Neutre
ep-neutral-500
#9CA3AF
Palette de graphiques
chart-merch
chart-ticket
chart-package
chart-pass
chart-free
Code-barres
ep-barcode-fg
#FFFFFF
ep-barcode-bg
#0A0A0A
ep-barcode-quiet-zone
#0A0A0A
Superposition
ep-overlay-scrim-light
ep-overlay-trace
ep-overlay-faint
ep-overlay-soft
ep-overlay-medium
ep-overlay-scrim
ep-overlay-border-subtle
ep-overlay-border-medium
ep-overlay-text-strong
ep-overlay-text-muted
ep-overlay-text-subtle
ep-overlay-text-icon
QR
ep-qr-bg
Exigences de contraste
- W = contraste sur blanc (#FFFFFF), D = contraste sur fond foncé (#1A2332)
- ● Vert = AA (4,5:1+) / AAA (7,0:1+)
- ● Jaune = AA grand texte seulement (3,0:1+)
- ● Rouge = Ne rencontre pas le minimum
Les pastilles marquées ◉ sont stables au thème — même valeur hex en mode clair et en mode foncé par conception (couleurs de marque, fonds sémantiques, surfaces foncées). Les pastilles partagées montrent la variante clair (gauche) vs foncé (droite).
Surfaces d'accent de marque
Quatre teintes de marque — teal, indigo, amber, pink — animent les surfaces d'accent à titre décoratif. Chaque accent doit s'attacher à une identité stable : une action fixe, un rôle, une colonne ou un item de menu. Formalisé dans l'ADR-031.
La règle AA — le décoratif ne porte pas de sens
Règle 2 de l'ADR-031 : la latitude décorative s'arrête là où commence le sens.
- Texte porteur de sens : text-ep-text-teal uniquement — le seul jeton d'accent texte conforme WCAG AA.
- Autres teintes sur du texte : usage décoratif aria-hidden seulement, ou pastille sur fond solide bg-ep-surface-card avec l'information dupliquée de façon accessible.
- Les CTA interactives passent par bg-ep-btn-primary (5,70:1 sur blanc) — jamais du bg-ep-teal brut (3,08:1).
Contexte 1 — BrandSurface
Variante teintée, pour fonds clairs : bg-ep-{accent}/10 + bordure /50 + texte de l'accent. Chaque palier d'opacité doit être enregistré via la factory alphaVariants() — une classe non enregistrée compile en rien (ghost utility).
Variante solide, pour les surfaces sur photos : bg-ep-surface-card + bordure d'accent + ombre. Une teinte à 10–15 % toute seule disparaît sur les photos d'événements (blocage §89.1) — la pastille solide reste lisible sur n'importe quelle image.
Contexte 2 — BrandRibbon
4 px — au-dessus de l'en-tête
1 px — en haut du pied de page
aria-hidden, bookend décoratif au-dessus de l'en-tête / en haut du pied de page.
Contexte 3 — AccentUnderline
Événements
Support
Entreprise
Infolettre
Attachements aux identités stables
| Identité | Accent |
|---|---|
| Survol des icônes d'en-tête | |
search | teal |
cart | indigo |
theme | amber |
user-chip | pink |
| Cartes d'aide de l'accueil | |
phone | teal |
email | indigo |
hours | amber |
| Colonnes du pied de page | |
events | teal |
support | indigo |
company | amber |
newsletter | pink |
| Items du menu latéral | |
menu item [n] | cycle selon la position stable de l'item |
Chaque accent doit correspondre à une identité stable. Le cyclage d'index n'est permis que lorsque les items sont eux-mêmes des identités stables (items du menu latéral).
À ne pas faire
['teal','indigo','amber','pink'][idx % 4]Cyclage d'index arbitraire sur une collection dynamique — la position n'est pas une identité.
<CategoryCard accent={event.category} />Accent attaché à des données inexistantes — ep_event n'a pas de champ category.
<button className="bg-ep-teal">Subscribe</button>Bouton CTA sur du bg-ep-teal brut — 3,08:1, échec WCAG AA.