Couleurs
Système de couleur en trois niveaux : palettes primitives Radix UI → intentions sémantiques → contrats de composant. Les agents utilisent les tokens sémantiques, jamais les valeurs primitives.
Palette primitive — Radix UI
34 échelles de couleur, chacune avec 12 paliers numérotés selon un système perceptuellement uniforme, conçu pour l'accessibilité et le mode sombre.
Pourquoi Radix UI ? Chaque palette est testée pour garantir un contraste WCAG AA aux paliers 11–12, et conçue pour fonctionner en mode clair et sombre sans surcharge de tokens. Les paliers sont perceptuellement uniformes — le saut visuel entre deux paliers consécutifs est constant quelle que soit la teinte.
Tokens sémantiques
Ces 16 tokens encodent les intentions UX. Chaque composant les référence — jamais les primitives directement.
| Couleur | Token CSS | Valeur | Intention |
|---|---|---|---|
--sda-semantic-color-action-primary |
#0d74ce | Action principale — CTA, bouton primaire | |
--sda-semantic-color-action-primary-hover |
#113264 | État survol de l'action principale | |
--sda-semantic-color-action-primary-disabled |
#d9d9d9 | Action principale désactivée | |
--sda-semantic-color-feedback-danger |
#ce2c31 | Erreur, action destructrice, alerte critique | |
--sda-semantic-color-feedback-danger-subtle |
#feebec | Fond subtil pour état danger | |
--sda-semantic-color-feedback-success |
#18794e | Confirmation, succès, validation | |
--sda-semantic-color-feedback-info |
#0d74ce | Information neutre, aide contextuelle | |
--sda-semantic-color-background-page |
#fcfcfc | Fond de page principale | |
--sda-semantic-color-background-surface |
#ffffff | Fond de carte, panneau, modal | |
--sda-semantic-color-background-subtle |
#f0f0f0 | Fond secondaire, survol discret | |
--sda-semantic-color-text-primary |
#202020 | Texte principal, haute lisibilité | |
--sda-semantic-color-text-secondary |
#646464 | Texte secondaire, labels, métadonnées | |
--sda-semantic-color-text-disabled |
#767676 | Texte désactivé | |
--sda-semantic-color-border-default |
#e8e8e8 | Bordure standard | |
--sda-semantic-color-border-focus |
#0d74ce | Bordure focus — accessibilité clavier | |
--sda-semantic-color-border-danger |
#ce2c31 | Bordure état erreur |
Les agents comprennent
color.action.primarycomme une intention. Ils ne comprennent pas#0d74cecomme une intention — c'est juste une valeur.