CouleursColors
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. Three-level color system: Radix UI primitive palettes → semantic intentions → component contracts. Agents use semantic tokens, never primitive values.
Palette primitive — Radix UIPrimitive palette — Radix UI
36 é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. 36 color scales, each with 12 numbered steps following a perceptually uniform system designed for accessibility and dark mode.
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. Why Radix UI? Each palette is tested to guarantee WCAG AA contrast at steps 11–12, and designed to work in light and dark mode without token overhead. Steps are perceptually uniform — the visual jump between two consecutive steps is constant regardless of hue.
Tokens sémantiquesSemantic tokens
Ces 16 tokens encodent les intentions UX. Chaque composant les référence — jamais les primitives directement. These 16 tokens encode UX intentions. Every component references them — never the primitives directly.
| CouleurColor | Token CSS | ValeurValue | IntentionIntent |
|---|---|---|---|
--sda-semantic-color-action-primary |
#12a594 | Action principale — CTA, bouton primairePrimary action — CTA, primary button | |
--sda-semantic-color-action-primary-hover |
#0d9b8a | État survol de l'action principalePrimary action hover state | |
--sda-semantic-color-action-primary-disabled |
#d9d9d9 | Action principale désactivéeDisabled primary action | |
--sda-semantic-color-feedback-danger |
#ce2c31 | Erreur, action destructrice, alerte critiqueError, destructive action, critical alert | |
--sda-semantic-color-feedback-danger-subtle |
#feebec | Fond subtil pour état dangerSubtle background for danger state | |
--sda-semantic-color-feedback-success |
#18794e | Confirmation, succès, validationConfirmation, success, validation | |
--sda-semantic-color-feedback-info |
#0d74ce | Information neutre, aide contextuelleNeutral information, contextual help | |
--sda-semantic-color-background-page |
#fcfcfc | Fond de page principaleMain page background | |
--sda-semantic-color-background-surface |
#ffffff | Fond de carte, panneau, modalCard, panel, modal background | |
--sda-semantic-color-background-subtle |
#f0f0f0 | Fond secondaire, survol discretSecondary background, subtle hover | |
--sda-semantic-color-text-primary |
#202020 | Texte principal, haute lisibilitéPrimary text, high readability | |
--sda-semantic-color-text-secondary |
#646464 | Texte secondaire, labels, métadonnéesSecondary text, labels, metadata | |
--sda-semantic-color-text-disabled |
#767676 | Texte désactivéDisabled text | |
--sda-semantic-color-border-default |
#e8e8e8 | Bordure standardDefault border | |
--sda-semantic-color-border-focus |
#12a594 | Bordure focus — accessibilité clavierFocus border — keyboard accessibility | |
--sda-semantic-color-border-danger |
#ce2c31 | Bordure état erreurError state border |
Les agents comprennent
color.action.primarycomme une intention. Ils ne comprennent pas#0d74cecomme une intention — c'est juste une valeur. Agents understandcolor.action.primaryas an intention. They do not understand#0d74ceas an intention — it is just a value.