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
37 é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. 37 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.
Couleurs de marqueBrand colors
Trois palettes de marque — Teal (primaire), Rose-corail (accent), Bordeaux (secondaire). Toujours consommées via les tokens sémantiques color.brand.*, jamais en valeur brute.
Three brand palettes — Teal (primary), Rose-coral (accent), Bordeaux (secondary). Always consumed via color.brand.* semantic tokens, never as raw values.
| CouleurColor | Token CSS | ValeurValue | IntentionIntent |
|---|---|---|---|
--agtc-semantic-color-brand-primary |
#12a594 | Couleur principale de la marque — TealPrimary brand color — Teal | |
--agtc-semantic-color-brand-primary-hover |
#0d9b8a | Survol de la couleur principalePrimary brand hover | |
--agtc-semantic-color-brand-primary-subtle |
#e0f8f3 | Fond subtil teal — badges, chipsSubtle teal background — badges, chips | |
--agtc-semantic-color-brand-primary-text |
#0d3d38 | Texte teal sur fond clair — WCAG AATeal text on light background — WCAG AA | |
--agtc-semantic-color-brand-accent |
#ed6b86 | Couleur accent — Rose-corail (CTA secondaire, highlights)Accent color — Rose-coral (secondary CTA, highlights) | |
--agtc-semantic-color-brand-accent-hover |
#e05f7b | Survol de l'accentAccent hover | |
--agtc-semantic-color-brand-accent-subtle |
#ebdadc | Fond subtil accent — badges versionSubtle accent background — version badges | |
--agtc-semantic-color-brand-accent-text |
#a6294c | Texte accent — 7.1:1 WCAG AA+Accent text — 7.1:1 WCAG AA+ | |
--agtc-semantic-color-brand-secondary |
#463239 | Couleur secondaire — Bordeaux (tags éditoriaux, type ADR)Secondary brand color — Bordeaux (editorial tags, ADR type) | |
--agtc-semantic-color-brand-secondary-hover |
#5f404b | Survol de la couleur secondaireSecondary brand hover | |
--agtc-semantic-color-brand-secondary-text |
#432f36 | Texte secondaire bordeaux — haute lisibilitéBordeaux secondary text — high readability |
Tokens sémantiques UIUI semantic tokens
Ces 38 tokens encodent les intentions UX. Chaque composant les référence — jamais les primitives directement. These 38 tokens encode UX intentions. Every component references them — never the primitives directly.
| CouleurColor | Token CSS | ValeurValue | IntentionIntent |
|---|---|---|---|
--agtc-semantic-color-action-primary |
#007a68 | Action principale — CTA, bouton primairePrimary action — CTA, primary button | |
--agtc-semantic-color-action-primary-hover |
#0d3d38 | État survol de l'action principalePrimary action hover state | |
--agtc-semantic-color-action-primary-disabled |
#d9d9d9 | Action principale désactivéeDisabled primary action | |
--agtc-semantic-color-feedback-danger |
#ce2c31 | Erreur, action destructrice, alerte critiqueError, destructive action, critical alert | |
--agtc-semantic-color-feedback-danger-subtle |
#feebec | Fond subtil pour état dangerSubtle background for danger state | |
--agtc-semantic-color-feedback-success |
#18794e | Confirmation, succès, validationConfirmation, success, validation | |
--agtc-semantic-color-feedback-info |
#0d74ce | Information neutre, aide contextuelleNeutral information, contextual help | |
--agtc-semantic-color-background-page |
#fcfcfc | Fond de page principaleMain page background | |
--agtc-semantic-color-background-surface |
#ffffff | Fond de carte, panneau, modalCard, panel, modal background | |
--agtc-semantic-color-background-subtle |
#f0f0f0 | Fond secondaire, survol discretSecondary background, subtle hover | |
--agtc-semantic-color-background-hover |
#fafafa | Fond au survolHover background | |
--agtc-semantic-color-background-inverse |
#0f1117 | Fond sombre inversé — hero, footer, sections darkDark inverse background — hero, footer, dark sections | |
--agtc-semantic-color-background-inverse-raised |
#1a1e24 | Fond sombre élevé — tooltips, popovers sur fond inverseRaised dark surface — tooltips, popovers on inverse bg | |
--agtc-semantic-color-background-code |
#202020 | Fond des blocs de codeCode block background | |
--agtc-semantic-color-background-code-raised |
#646464 | Fond code élevé — inline code sur surfaceRaised code background — inline code on surface | |
--agtc-semantic-color-text-primary |
#202020 | Texte principal, haute lisibilitéPrimary text, high readability | |
--agtc-semantic-color-text-secondary |
#646464 | Texte secondaire, labels, métadonnéesSecondary text, labels, metadata | |
--agtc-semantic-color-text-disabled |
#767676 | Texte désactivéDisabled text | |
--agtc-semantic-color-text-on-action |
#ffffff | Texte sur fond d'action — boutonsText on action background — buttons | |
--agtc-semantic-color-text-on-dark |
rgba(255,255,255,1.00) | Texte principal sur fond inversé (hero, footer)Primary text on inverse background (hero, footer) | |
--agtc-semantic-color-text-on-dark-muted |
rgba(255,255,255,0.52) | Texte atténué sur fond inversé — métadonnées sombresMuted text on inverse background — dark metadata | |
--agtc-semantic-color-text-on-dark-secondary |
rgba(255,255,255,0.75) | Texte secondaire sur fond inverséSecondary text on inverse background | |
--agtc-semantic-color-text-on-danger |
#ffffff | Texte sur fond dangerText on danger background | |
--agtc-semantic-color-text-on-code |
#e8e8e8 | Texte sur fond codeText on code background | |
--agtc-semantic-color-text-on-code-muted |
#bbbbbb | Texte atténué sur fond codeMuted text on code background | |
--agtc-semantic-color-border-default |
#e8e8e8 | Bordure standardDefault border | |
--agtc-semantic-color-border-focus |
#007a68 | Bordure focus — accessibilité clavierFocus border — keyboard accessibility | |
--agtc-semantic-color-border-danger |
#ce2c31 | Bordure état erreurError state border | |
--agtc-semantic-color-feedback-warning |
#cc4e00 | Avertissement, attention requiseWarning, attention required | |
--agtc-semantic-color-feedback-warning-subtle |
#ffefd6 | Fond subtil avertissementSubtle warning background | |
--agtc-semantic-color-feedback-warning-text |
#582d1d | Texte avertissement accessibleAccessible warning text | |
--agtc-semantic-color-feedback-info-subtle |
#e6f4fe | Fond subtil informationSubtle info background | |
--agtc-semantic-color-feedback-info-border |
#acd8fa | Bordure état infoInfo state border | |
--agtc-semantic-color-feedback-info-text |
#113264 | Texte info accessibleAccessible info text | |
--agtc-semantic-color-feedback-success-subtle |
#e6f6eb | Fond subtil succèsSubtle success background | |
--agtc-semantic-color-feedback-success-border |
#addfc0 | Bordure état succèsSuccess state border | |
--agtc-semantic-color-feedback-danger-border |
#fdbdbe | Bordure état dangerDanger state border | |
--agtc-semantic-color-illustration-ink |
#211f26 | Encre illustration — tracés et icons decoratifsIllustration ink — decorative strokes and icons |
Les agents comprennent
color.action.primarycomme une intention. Ils ne comprennent pas#007a68comme une intention — c'est juste une valeur. Agents understandcolor.action.primaryas an intention. They do not understand#007a68as an intention — it is just a value.