On utilise la couleur par rôle, jamais par valeur. Un rôle est un token avec une valeur papier et une valeur nuit ; changer de mode change tous les rôles d’un coup. Utilisez la variable CSS (--okr-ui-bg-canvas) ou la classe Tailwind de @okrado/brand, et rien d’autre.
- Le bouton principal est encre : nuit sur papier, crème sur nuit. Le remplissage ambre est réservé à l’unique action de validation d’une vue.
- Un seul élément ambre par écran sur les surfaces de marketing : le carré du logo, plus au plus un marqueur d’enregistrement.
- L’avertissement est orange-rouge, jamais ambre. Montrez-le avec un point et un mot. L’ambre veut dire « enregistrement », jamais « attention ».
- Les liens utilisent le rôle link et sont soulignés. Jamais ambre.
- Pas de dégradés, sauf un halo ambre radial à 10 % derrière un hero nuit. Jamais sur du texte ni sur le logo.
- Un statut n’est jamais porté par la couleur seule : un mot ou une icône l’accompagne toujours.
| Token | Papier | Nuit |
|---|
ui.bg.canvas | #faf8f3 | #0d1015 |
|---|
ui.bg.surface | #fefdfa | #161a22 |
|---|
ui.bg.raised | #fefdfa | #1e232b |
|---|
ui.bg.hover | #f3efe6 | #262b34 |
|---|
ui.bg.active | #ebe7de | #2e343d |
|---|
| Token | Papier | Nuit |
|---|
ui.text.primary | #161a22 | #f3efe6 |
|---|
ui.text.secondary | #52575f | #c1bdb4 |
|---|
ui.text.tertiary | #63676e | #97938c |
|---|
ui.text.inverse | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.border.subtle | #e2ded6 | #2e343d |
|---|
ui.border.default | #d8d4cc | #383e47 |
|---|
ui.border.strong | #b4b1a9 | #646973 |
|---|
ui.border.control | #7c8088 | #86837b |
|---|
| Token | Papier | Nuit |
|---|
ui.primary.solid | #161a22 | #f3efe6 |
|---|
ui.primary.hover | #52575f | #c1bdb4 |
|---|
ui.primary.on | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.accent.solid | #f6b048 | #f6b048 |
|---|
ui.accent.hover | #e78d02 | #fcc05c |
|---|
ui.accent.subtle | #fdeedb | #30200b |
|---|
ui.accent.border | #e8bb7f | #6e4400 |
|---|
ui.accent.text | #9c5906 | #fcd180 |
|---|
ui.accent.on | #161a22 | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.record.solid | #c47500 | #f6b048 |
|---|
ui.record.logo | #e48a00 | #f6b048 |
|---|
ui.record.text | #9c5906 | #fcd180 |
|---|
ui.record.subtle | #fdeedb | #30200b |
|---|
| Token | Papier | Nuit |
|---|
ui.success.solid | #008451 | #2fcf8d |
|---|
ui.success.hover | #00784a | #47dc9d |
|---|
ui.success.subtle | #e0f7e9 | #0f2a1c |
|---|
ui.success.border | #8fd7ad | #085d3c |
|---|
ui.success.text | #14764a | #5ee6a8 |
|---|
ui.success.on | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.warning.solid | #bb5300 | #f77f20 |
|---|
ui.warning.hover | #ae4800 | #ff9645 |
|---|
ui.warning.subtle | #ffece2 | #361c0d |
|---|
ui.warning.border | #fdaf88 | #7a3a0b |
|---|
ui.warning.text | #a84811 | #fca864 |
|---|
ui.warning.on | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.danger.solid | #d22632 | #f1424e |
|---|
ui.danger.hover | #c01c2b | #ff4d5e |
|---|
ui.danger.subtle | #ffebe9 | #3a1717 |
|---|
ui.danger.border | #ffaaa7 | #852b2e |
|---|
ui.danger.text | #be222d | #ff898b |
|---|
ui.danger.on | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.info.solid | #3769e0 | #6294fa |
|---|
ui.info.hover | #2e5dd0 | #71a0ff |
|---|
ui.info.subtle | #e8f1ff | #17233a |
|---|
ui.info.border | #a4c5ff | #2d4c87 |
|---|
ui.info.text | #2f5bc2 | #7aa7ff |
|---|
ui.info.on | #fefdfa | #0d1015 |
|---|
| Token | Papier | Nuit |
|---|
ui.focus.ring | #3769e0 | #7aa7ff |
|---|
Chaque paire ci-dessous est vérifiée dans les deux modes par le build de la marque : texte à 4,5:1, grand texte et éléments non textuels à 3:1 (WCAG 2.2 AA). Un nouveau rôle qui porte du texte ou un état arrive avec ses paires dans le même changement. Ce tableau est généré depuis le même rapport que celui sur lequel les tests de la marque bloquent.
| Premier plan / fond | Type | Seuil | Papier | Nuit | Résultat |
|---|
text.primary / bg.canvas | Texte | 4.5 | 16.42 | 16.61 | Réussi |
|---|
text.secondary / bg.canvas | Texte | 4.5 | 6.85 | 10.17 | Réussi |
|---|
text.primary / bg.surface | Texte | 4.5 | 17.13 | 15.19 | Réussi |
|---|
text.secondary / bg.surface | Texte | 4.5 | 7.15 | 9.30 | Réussi |
|---|
text.primary / bg.raised | Texte | 4.5 | 17.13 | 13.75 | Réussi |
|---|
text.secondary / bg.raised | Texte | 4.5 | 7.15 | 8.42 | Réussi |
|---|
text.primary / bg.hover | Texte | 4.5 | 15.19 | 12.39 | Réussi |
|---|
text.secondary / bg.hover | Texte | 4.5 | 6.34 | 7.58 | Réussi |
|---|
text.primary / bg.active | Texte | 4.5 | 14.12 | 10.93 | Réussi |
|---|
text.secondary / bg.active | Texte | 4.5 | 5.89 | 6.69 | Réussi |
|---|
text.tertiary / bg.canvas | Texte | 4.5 | 5.35 | 6.23 | Réussi |
|---|
text.tertiary / bg.surface | Texte | 4.5 | 5.59 | 5.70 | Réussi |
|---|
text.tertiary / bg.raised | Texte | 4.5 | 5.59 | 5.16 | Réussi |
|---|
text.tertiary / bg.hover | Texte | 4.5 | 4.95 | 4.65 | Réussi |
|---|
text.tertiary / bg.active | Grand texte | 3 | 4.60 | 4.10 | Réussi |
|---|
text.inverse / text.primary | Texte | 4.5 | 17.13 | 16.61 | Réussi |
|---|
primary.on / primary.solid | Texte | 4.5 | 17.13 | 16.61 | Réussi |
|---|
primary.on / primary.hover | Texte | 4.5 | 7.15 | 10.17 | Réussi |
|---|
text.primary / selection | Texte | 4.5 | 14.14 | 10.98 | Réussi |
|---|
accent.text / bg.canvas | Texte | 4.5 | 5.15 | 13.22 | Réussi |
|---|
accent.text / bg.surface | Texte | 4.5 | 5.37 | 12.09 | Réussi |
|---|
accent.text / accent.subtle | Texte | 4.5 | 4.79 | 10.90 | Réussi |
|---|
link / bg.canvas | Texte | 4.5 | 5.83 | 7.98 | Réussi |
|---|
link / bg.surface | Texte | 4.5 | 6.08 | 7.30 | Réussi |
|---|
accent.on / accent.solid | Texte | 4.5 | 9.31 | 10.18 | Réussi |
|---|
accent.on / accent.hover | Texte | 4.5 | 6.81 | 11.65 | Réussi |
|---|
record.solid / bg.canvas | Non textuel | 3 | 3.36 | 10.18 | Réussi |
|---|
record.solid / bg.surface | Non textuel | 3 | 3.50 | 9.31 | Réussi |
|---|
record.solid / bg.hover | Non textuel | 3 | 3.11 | 7.60 | Réussi |
|---|
record.text / bg.canvas | Texte | 4.5 | 5.15 | 13.22 | Réussi |
|---|
record.text / bg.surface | Texte | 4.5 | 5.37 | 12.09 | Réussi |
|---|
record.text / record.subtle | Texte | 4.5 | 4.79 | 10.90 | Réussi |
|---|
chart.now / bg.surface | Non textuel | 3 | 3.50 | 9.31 | Réussi |
|---|
success.text / bg.canvas | Texte | 4.5 | 5.32 | 12.12 | Réussi |
|---|
success.text / bg.surface | Texte | 4.5 | 5.55 | 11.09 | Réussi |
|---|
success.text / success.subtle | Texte | 4.5 | 5.01 | 9.76 | Réussi |
|---|
success.on / success.solid | Texte | 4.5 | 4.67 | 9.46 | Réussi |
|---|
success.on / success.hover | Texte | 4.5 | 5.45 | 10.88 | Réussi |
|---|
success.solid / bg.canvas | Non textuel | 3 | 4.48 | 9.46 | Réussi |
|---|
warning.text / bg.canvas | Texte | 4.5 | 5.50 | 9.91 | Réussi |
|---|
warning.text / bg.surface | Texte | 4.5 | 5.73 | 9.07 | Réussi |
|---|
warning.text / warning.subtle | Texte | 4.5 | 5.10 | 8.22 | Réussi |
|---|
warning.on / warning.solid | Texte | 4.5 | 4.75 | 7.27 | Réussi |
|---|
warning.on / warning.hover | Texte | 4.5 | 5.54 | 8.80 | Réussi |
|---|
warning.solid / bg.canvas | Non textuel | 3 | 4.55 | 7.27 | Réussi |
|---|
danger.text / bg.canvas | Texte | 4.5 | 5.72 | 8.35 | Réussi |
|---|
danger.text / bg.surface | Texte | 4.5 | 5.97 | 7.64 | Réussi |
|---|
danger.text / danger.subtle | Texte | 4.5 | 5.30 | 7.00 | Réussi |
|---|
danger.on / danger.solid | Texte | 4.5 | 5.08 | 5.11 | Réussi |
|---|
danger.on / danger.hover | Texte | 4.5 | 6.00 | 5.88 | Réussi |
|---|
danger.solid / bg.canvas | Non textuel | 3 | 4.87 | 5.11 | Réussi |
|---|
info.text / bg.canvas | Texte | 4.5 | 5.83 | 7.98 | Réussi |
|---|
info.text / bg.surface | Texte | 4.5 | 6.08 | 7.30 | Réussi |
|---|
info.text / info.subtle | Texte | 4.5 | 5.43 | 6.58 | Réussi |
|---|
info.on / info.solid | Texte | 4.5 | 4.85 | 6.47 | Réussi |
|---|
info.on / info.hover | Texte | 4.5 | 5.75 | 7.42 | Réussi |
|---|
info.solid / bg.canvas | Non textuel | 3 | 4.65 | 6.47 | Réussi |
|---|
border.control / bg.canvas | Non textuel | 3 | 3.73 | 5.03 | Réussi |
|---|
focus.ring / bg.canvas | Non textuel | 3 | 4.65 | 7.98 | Réussi |
|---|
border.control / bg.surface | Non textuel | 3 | 3.90 | 4.60 | Réussi |
|---|
focus.ring / bg.surface | Non textuel | 3 | 4.85 | 7.30 | Réussi |
|---|
border.control / bg.raised | Non textuel | 3 | 3.90 | 4.17 | Réussi |
|---|
focus.ring / bg.raised | Non textuel | 3 | 4.85 | 6.61 | Réussi |
|---|
chart.1 / bg.surface | Non textuel | 3 | 17.13 | 15.19 | Réussi |
|---|
chart.2 / bg.surface | Non textuel | 3 | 3.65 | 8.09 | Réussi |
|---|
chart.3 / bg.surface | Non textuel | 3 | 3.35 | 8.62 | Réussi |
|---|
chart.4 / bg.surface | Non textuel | 3 | 3.81 | 7.72 | Réussi |
|---|
chart.5 / bg.surface | Non textuel | 3 | 3.41 | 8.48 | Réussi |
|---|
chart.6 / bg.surface | Non textuel | 3 | 3.89 | 7.59 | Réussi |
|---|
