Colour-system

Aperçu#

L’explorateur regroupe chaque jeton de couleur public selon son rôle dans le système. L’index d’ancrage partagé permet de passer d’un groupe à l’autre, tandis que la rangée de filtres partagée limite la collection visible sans recharger la page. Chaque échantillon ouvre une boîte de dialogue native qui présente les données générées d’implémentation et de contraste. Enveloppez le shortcode dans theme-preview lorsque les lecteurs doivent comparer les collections claire et sombre délimitées.

Rôles d’interface

8

Détails du jeton

Texte principal

Couleur principale du texte pour les interfaces et les textes de marque à contraste élevé.

Couche
Sémantique
Jeton
color.ink
Variable CSS
--color-ink
Déclaration source
{color.palette.near-black}
Valeur claire
#101010
Valeur sombre
#f8f8f5
Premier plan approuvé
color.paper

Preuve de contraste WCAG 2.2

Clair 17.88:1 texte normal AA des WCAG
Sombre 17.88:1 texte normal AA des WCAG

Détails du jeton

Surface de lecture

Couleur d’arrière-plan par défaut des pages.

Couche
Sémantique
Jeton
color.paper
Variable CSS
--color-paper
Déclaration source
{color.palette.warm-paper}
Valeur claire
#f8f8f5
Valeur sombre
#101010
Premier plan approuvé
color.ink

Preuve de contraste WCAG 2.2

Clair 17.88:1 texte normal AA des WCAG
Sombre 17.88:1 texte normal AA des WCAG

Détails du jeton

Séparateur discret

Couleur discrète pour les séparateurs et les bordures.

Couche
Sémantique
Jeton
color.line
Variable CSS
--color-line
Déclaration source
{color.palette.quiet-line}
Valeur claire
#d7d7d2
Valeur sombre
oklch(37.1% 0 none)
Premier plan approuvé
color.ink

Preuve de contraste WCAG 2.2

Clair 13.17:1 texte normal AA des WCAG
Sombre 9.76:1 texte normal AA des WCAG

Détails du jeton

Accent

Couleur d’accent principale pour l’emphase, les états actifs et les signaux de marque.

Couche
Sémantique
Jeton
color.accent
Variable CSS
--color-accent
Déclaration source
{color.palette.signal-orange}
Valeur claire
#e6461a
Valeur sombre
#e6461a
Premier plan approuvé
color.palette.near-black

Preuve de contraste WCAG 2.2

Clair 4.76:1 texte normal AA des WCAG
Sombre 4.76:1 texte normal AA des WCAG

Détails du jeton

Texte d’accent

Couleur d’accent adaptée au thème pour le texte de taille normale sur la surface de page.

Couche
Sémantique
Jeton
color.accent-text
Variable CSS
--color-accent-text
Déclaration source
{color.palette.deep-signal-orange}
Valeur claire
#c43810
Valeur sombre
#e6461a
Premier plan approuvé
color.paper

Preuve de contraste WCAG 2.2

Clair 5.03:1 texte normal AA des WCAG
Sombre 4.76:1 texte normal AA des WCAG

Détails du jeton

Sur l’accent

Couleur de premier plan accessible pour le texte et les icônes sur l’arrière-plan d’accent.

Couche
Sémantique
Jeton
color.on-accent
Variable CSS
--color-on-accent
Déclaration source
{color.palette.near-black}
Valeur claire
#101010
Valeur sombre
#101010
Premier plan approuvé
color.accent

Preuve de contraste WCAG 2.2

Clair 4.76:1 texte normal AA des WCAG
Sombre 4.76:1 texte normal AA des WCAG

Détails du jeton

Blanc

Blanc utilisé pour le texte inversé et les surfaces élevées.

Couche
Sémantique
Jeton
color.white
Variable CSS
--color-white
Déclaration source
{color.palette.white}
Valeur claire
#ffffff
Valeur sombre
#ffffff
Premier plan approuvé
color.palette.near-black

Preuve de contraste WCAG 2.2

Clair 19.03:1 texte normal AA des WCAG
Sombre 19.03:1 texte normal AA des WCAG

Détails du jeton

Noir

Noir utilisé pour les superpositions et les contrôles de code très contrastés.

Couche
Sémantique
Jeton
color.black
Variable CSS
--color-black
Déclaration source
{color.palette.black}
Valeur claire
#000000
Valeur sombre
#000000
Premier plan approuvé
color.palette.warm-paper

Preuve de contraste WCAG 2.2

Clair 19.74:1 texte normal AA des WCAG
Sombre 19.74:1 texte normal AA des WCAG

Échelle neutre

8

Détails du jeton

color.neutral.50

Surface neutre la plus claire.

Couche
Sémantique
Jeton
color.neutral.50
Variable CSS
--color-neutral-50
Déclaration source
{color.palette.neutral.50}
Valeur claire
oklch(98.5% 0 none)
Valeur sombre
oklch(26.9% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.100

Surface neutre claire.

Couche
Sémantique
Jeton
color.neutral.100
Variable CSS
--color-neutral-100
Déclaration source
{color.palette.neutral.100}
Valeur claire
oklch(97% 0 none)
Valeur sombre
oklch(37.1% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.300

Ton neutre discret pour les repères et séparateurs.

Couche
Sémantique
Jeton
color.neutral.300
Variable CSS
--color-neutral-300
Déclaration source
{color.palette.neutral.300}
Valeur claire
oklch(87% 0 none)
Valeur sombre
oklch(43.9% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.400

Ton neutre pour le texte secondaire.

Couche
Sémantique
Jeton
color.neutral.400
Variable CSS
--color-neutral-400
Déclaration source
{color.palette.neutral.400}
Valeur claire
oklch(70.8% 0 none)
Valeur sombre
oklch(55.6% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.500

Ton neutre atténué pour le texte.

Couche
Sémantique
Jeton
color.neutral.500
Variable CSS
--color-neutral-500
Déclaration source
{color.palette.neutral.500}
Valeur claire
oklch(55.6% 0 none)
Valeur sombre
oklch(70.8% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.600

Ton neutre pour le texte d’appoint.

Couche
Sémantique
Jeton
color.neutral.600
Variable CSS
--color-neutral-600
Déclaration source
{color.palette.neutral.600}
Valeur claire
oklch(43.9% 0 none)
Valeur sombre
oklch(87% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.700

Ton neutre fort pour le texte et les bordures.

Couche
Sémantique
Jeton
color.neutral.700
Variable CSS
--color-neutral-700
Déclaration source
{color.palette.neutral.700}
Valeur claire
oklch(37.1% 0 none)
Valeur sombre
oklch(97% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.neutral.800

Surface neutre foncée.

Couche
Sémantique
Jeton
color.neutral.800
Variable CSS
--color-neutral-800
Déclaration source
{color.palette.neutral.800}
Valeur claire
oklch(26.9% 0 none)
Valeur sombre
oklch(98.5% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Couleurs d’état

6

Détails du jeton

status.note

Accent d’état informatif pour les notes et les avis de changement neutres.

Couche
Sémantique
Jeton
status.note
Variable CSS
--status-note
Déclaration source
oklch(62.3% 0.214 259.815)
Valeur claire
oklch(62.3% 0.214 259.815)
Valeur sombre
oklch(62.3% 0.214 259.815)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

status.success

Accent d’état positif pour les éléments confirmés ou nouvellement disponibles.

Couche
Sémantique
Jeton
status.success
Variable CSS
--status-success
Déclaration source
oklch(72.3% 0.219 149.579)
Valeur claire
oklch(72.3% 0.219 149.579)
Valeur sombre
oklch(72.3% 0.219 149.579)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

status.important

Accent d’état important pour les décisions qui demandent de l’attention.

Couche
Sémantique
Jeton
status.important
Variable CSS
--status-important
Déclaration source
oklch(62.7% 0.265 303.9)
Valeur claire
oklch(62.7% 0.265 303.9)
Valeur sombre
oklch(62.7% 0.265 303.9)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

status.warning

Accent d’état d’avertissement pour les changements ou contraintes à surveiller.

Couche
Sémantique
Jeton
status.warning
Variable CSS
--status-warning
Déclaration source
oklch(76.9% 0.188 70.08)
Valeur claire
oklch(76.9% 0.188 70.08)
Valeur sombre
oklch(76.9% 0.188 70.08)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

status.danger

Accent d’état critique pour les mises en garde, erreurs et obsolescences.

Couche
Sémantique
Jeton
status.danger
Variable CSS
--status-danger
Déclaration source
oklch(63.7% 0.237 25.331)
Valeur claire
oklch(63.7% 0.237 25.331)
Valeur sombre
oklch(63.7% 0.237 25.331)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

status.archived

Accent d’état atténué pour le contenu archivé.

Couche
Sémantique
Jeton
status.archived
Variable CSS
--status-archived
Déclaration source
{color.neutral.500}
Valeur claire
oklch(55.6% 0 none)
Valeur sombre
oklch(55.6% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Couleurs du code

6

Détails du jeton

color.code.background

Couleur d’arrière-plan des surfaces de code technique.

Couche
Sémantique
Jeton
color.code.background
Variable CSS
--color-code-background
Déclaration source
#272822
Valeur claire
#272822
Valeur sombre
#272822
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.code.foreground

Couleur de premier plan des surfaces de code technique.

Couche
Sémantique
Jeton
color.code.foreground
Variable CSS
--color-code-foreground
Déclaration source
#f8f8f2
Valeur claire
#f8f8f2
Valeur sombre
#f8f8f2
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.code.copy.success.foreground

Couleur du texte de confirmation du contrôle de copie.

Couche
Sémantique
Jeton
color.code.copy.success.foreground
Variable CSS
--color-code-copy-success-foreground
Déclaration source
oklch(87.1% 0.15 154.449)
Valeur claire
oklch(87.1% 0.15 154.449)
Valeur sombre
oklch(87.1% 0.15 154.449)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.code.copy.success.border

Couleur de bordure de confirmation du contrôle de copie.

Couche
Sémantique
Jeton
color.code.copy.success.border
Variable CSS
--color-code-copy-success-border
Déclaration source
oklch(79.2% 0.209 151.711)
Valeur claire
oklch(79.2% 0.209 151.711)
Valeur sombre
oklch(79.2% 0.209 151.711)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.code.copy.error.foreground

Couleur du texte d’erreur du contrôle de copie.

Couche
Sémantique
Jeton
color.code.copy.error.foreground
Variable CSS
--color-code-copy-error-foreground
Déclaration source
oklch(80.8% 0.114 19.571)
Valeur claire
oklch(80.8% 0.114 19.571)
Valeur sombre
oklch(80.8% 0.114 19.571)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

color.code.copy.error.border

Couleur de bordure d’erreur du contrôle de copie.

Couche
Sémantique
Jeton
color.code.copy.error.border
Variable CSS
--color-code-copy-error-border
Déclaration source
oklch(70.4% 0.191 22.216)
Valeur claire
oklch(70.4% 0.191 22.216)
Valeur sombre
oklch(70.4% 0.191 22.216)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Alias de composants

11

Détails du jeton

component.announcement.background

Surface d’arrière-plan de la bannière d’annonce présente sur tout le site.

Couche
Composant
Jeton
component.announcement.background
Variable CSS
--component-announcement-background
Déclaration source
{color.paper}
Valeur claire
#f8f8f5
Valeur sombre
#f8f8f5
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.announcement.foreground

Couleur de texte de la bannière d’annonce présente sur tout le site.

Couche
Composant
Jeton
component.announcement.foreground
Variable CSS
--component-announcement-foreground
Déclaration source
{color.ink}
Valeur claire
#101010
Valeur sombre
#101010
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.announcement.border

Couleur de bordure signal de la bannière d’annonce présente sur tout le site.

Couche
Composant
Jeton
component.announcement.border
Variable CSS
--component-announcement-border
Déclaration source
{color.accent}
Valeur claire
#e6461a
Valeur sombre
#e6461a
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

Couche
Composant
Jeton
component.announcement.link
Variable CSS
--component-announcement-link
Déclaration source
{color.accent-text}
Valeur claire
#c43810
Valeur sombre
#c43810
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.avatar.background

Surface d’avatar de repli pour l’attribution d’une recommandation.

Couche
Composant
Jeton
component.avatar.background
Variable CSS
--component-avatar-background
Déclaration source
{color.neutral.100}
Valeur claire
oklch(97% 0 none)
Valeur sombre
oklch(97% 0 none)
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.avatar.foreground

Couleur des initiales de l’avatar de repli dans l’attribution d’une recommandation.

Couche
Composant
Jeton
component.avatar.foreground
Variable CSS
--component-avatar-foreground
Déclaration source
{color.ink}
Valeur claire
#101010
Valeur sombre
#101010
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.avatar.border

Couleur de contour de l’avatar dans l’attribution d’une recommandation.

Couche
Composant
Jeton
component.avatar.border
Variable CSS
--component-avatar-border
Déclaration source
{color.line}
Valeur claire
#d7d7d2
Valeur sombre
#d7d7d2
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.back-to-top.background

Surface derrière le lien de retour en haut.

Couche
Composant
Jeton
component.back-to-top.background
Variable CSS
--component-back-to-top-background
Déclaration source
{color.paper}
Valeur claire
#f8f8f5
Valeur sombre
#f8f8f5
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.back-to-top.foreground

Couleur du texte et de la flèche du lien de retour en haut.

Couche
Composant
Jeton
component.back-to-top.foreground
Variable CSS
--component-back-to-top-foreground
Déclaration source
{color.ink}
Valeur claire
#101010
Valeur sombre
#101010
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.back-to-top.border

Bordure au repos du lien de retour en haut.

Couche
Composant
Jeton
component.back-to-top.border
Variable CSS
--component-back-to-top-border
Déclaration source
{color.line}
Valeur claire
#d7d7d2
Valeur sombre
#d7d7d2
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

component.back-to-top.hover-border

Bordure au survol et au focus du lien de retour en haut.

Couche
Composant
Jeton
component.back-to-top.hover-border
Variable CSS
--component-back-to-top-hover-border
Déclaration source
{color.accent}
Valeur claire
#e6461a
Valeur sombre
#e6461a
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Sorties de diagrammes

5

Détails du jeton

diagram.canvas

Arrière-plan de canevas pour les diagrammes dans les outils de rédaction pris en charge.

Couche
Composant
Jeton
diagram.canvas
Variable CSS
--diagram-canvas
Déclaration source
{color.paper}
Valeur claire
#f8f8f5
Valeur sombre
#f8f8f5
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

diagram.node

Surface de nœud de diagramme par défaut.

Couche
Composant
Jeton
diagram.node
Variable CSS
--diagram-node
Déclaration source
{color.paper}
Valeur claire
#f8f8f5
Valeur sombre
#f8f8f5
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

diagram.node-ink

Couleur par défaut des libellés de nœud de diagramme.

Couche
Composant
Jeton
diagram.node-ink
Variable CSS
--diagram-node-ink
Déclaration source
{color.ink}
Valeur claire
#101010
Valeur sombre
#101010
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

diagram.node-line

Couleur par défaut des bordures de nœud et des connecteurs de diagramme.

Couche
Composant
Jeton
diagram.node-line
Variable CSS
--diagram-node-line
Déclaration source
{color.line}
Valeur claire
#d7d7d2
Valeur sombre
#d7d7d2
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Détails du jeton

diagram.accent

Couleur d’emphase des diagrammes et des flux actifs.

Couche
Composant
Jeton
diagram.accent
Variable CSS
--diagram-accent
Déclaration source
{color.accent}
Valeur claire
#e6461a
Valeur sombre
#e6461a
Premier plan approuvé
Non déclaré

Ce jeton n’a aucune association de premier plan déclarée; l’explorateur ne prétend donc pas établir un résultat de contraste du texte.

Limite#

Le shortcode lit les données de jetons générées et n’accepte aucune valeur de couleur arbitraire. Ajoutez ou modifiez un jeton gouverné dans tokens/core.tokens.json ou dans une collection de thème, régénérez les sorties et laissez l’explorateur suivre la source.

Exemple

{{< colour-system >}}

Quand l’utiliser

Un explorateur filtrable des jetons de couleur publics, des valeurs de thème, des alias et des preuves WCAG déclarées.

Implémentation

layouts/shortcodes/colour-system.html

Options

OptionLu par le gabarit du shortcode
colourSystemInstanceLu par le gabarit du shortcode

Manifeste d’interface

Nature
Shortcode
Catégorie
Données
Statut
Implémenté
Implémentation
Partial:layouts/partials/data-page/anchor-index.htmllayouts/partials/data-page/filter-row.htmlShortcode:layouts/shortcodes/colour-system.htmlDonnées:data/brand/tokens.ymlCSS:assets/css/generated/themes.cssassets/css/site.cssJavaScript:assets/js/site.js