2 · Brand

Quelle palette du catalogue joue quel rôle. Le seul endroit à éditer pour rebrander un projet.

const BRAND = {
  primary: 'turquoise',   // était 'violet'
  neutral: 'slateBlue', success: 'green', …
};

Les polices

Même principe que les couleurs : le brand désigne quelle pile du catalogue joue les titres (heading), le corps (body) et le code (mono). Titres et corps portent volontairement deux polices distinctes. Changer l'une, c'est une ligne — BRAND_FONT dans scripts/generate-theme.js.

Sans cette couche

Si un rôle sémantique pointait directement sur une palette (role.primary.main → {color.violet.600}), rebrander obligerait à réécrire chaque rôle, en light ET en dark. Des dizaines d'éditions à la main, avec la certitude d'en oublier une.

Couleurs catégorielles

Teintes distinguables pour graphiques, avatars et tags.

Elles ne suivent volontairement pas le contrat de rôle (seulement main + tint) : ce ne sont pas des rôles sémantiques, juste des couleurs qu'on doit pouvoir différencier les unes des autres.