Design
Design tokens aux frontières du système
Tokens sémantiques pour le design system ; couches produit seulement là où marketing et UX doivent diverger — sans casser l’ingénierie ni l’accessibilité.
Principe : gardez les tokens sémantiques (ex. `--surface-elevated`, `--text-muted`, `--focus-ring`) sous la responsabilité du design system. Laissez les couches produit composer ces tokens en dégradés, skins de campagne ou accents saisonniers uniquement sur les composants feuilles — jamais en forkant les primitives bouton ou champ de base.
Quand chaque squad invente une nuance de « primaire » pour une landing, vous n’avez pas un design system — vous avez un zoo de couleurs. La frontière n’est pas « design vs code » ; c’est stabilité sémantique vs expression contextuelle.
Checklist de handoff
- Nommez les tokens d’après le **rôle** (ce qu’ils font), pas d’après le hex ou le nom de calque Figma.
- Documentez les paires dark à côté du light dans le **même** tableau — la dérive se cache dans les tableaux séparés.
- Livrez un export JSON (ou variables CSS) qui correspond **à l’identique** à ce que l’app consomme.
- Définissez focus, contraste et mouvement au niveau système — les skins produit ne doivent pas fragiliser les parcours critiques WCAG.
Quand Figma et la prod divergent, le bug est souvent un troisième thème implicite — mode sombre, contraste élevé, ou « marketing » — que personne n’a nommé dans le contrat design ↔ ingénierie.