Tokens

Tokens

Toutes les valeurs du système, en variables CSS. Les rôles suivent la couleur source et le thème ; les variantes n'ajoutent que de la matière.

Couleur

39 rôles, en clair et en sombre. On consomme le rôle, jamais une valeur en dur.

Rôle	Clair	Sombre	Usage
`--surface`	`#fef7ff`	`#141218`	Fond de page. Sur le portfolio, porte la trame de points `dot`.
`--scl`	`#f7f2fa`	`#1d1b20`	Surface container low : zones calmes, rail de navigation au repos, fonds de blocs « À faire / À éviter ».
`--sc`	`#f3edf7`	`#211f26`	Surface container : fond par défaut des cartes (`.card`, MetricCard). Pas d'ombre : la teinte suffit.
`--sch`	`#ece6f0`	`#2b2930`	Surface container high : dialogues, séparateurs de lignes (`.row` border-top), bordure du rail.
`--schh`	`#e6e0e9`	`#36343b`	Surface container highest : barre de recherche pilule, piste du switch éteint.
`--scc`	`#ffffff`	`#0f0d13`	Surface container lowest : fond des puces de code et des journaux.
`--primary`	`#6750a4`	`#d0bcff`	Action principale : bouton filled, switch allumé, liens, anneau de focus. Un seul élément primary dominant par écran.
`--on-primary`	`#ffffff`	`#381e72`	Texte et icônes sur `primary`.
`--pc`	`#eaddff`	`#4f378b`	Primary container : badges de section (cookie), logo, carte « Série en cours », FAB.
`--on-pc`	`#21005d`	`#eaddff`	Texte sur `pc`.
`--secc`	`#e8def8`	`#4a4458`	Secondary container : bouton tonal, indicateur actif de navigation, chips pleines, piste inactive du slider.
`--on-secc`	`#1d192b`	`#e8def8`	Texte sur `secc`.
`--tertiary`	`#7d5260`	`#efb8c8`	Accent tertiaire, rare : mise en avant secondaire, séries de graphiques hors statut.
`--on-tertiary`	`#ffffff`	`#492532`	Texte sur `tertiary`. Puce active et interrupteur des variantes Chrome.
`--tc`	`#ffd8e4`	`#633b48`	Tertiary container : formes décoratives d'accent (MetricCard), tuiles « favoris ».
`--on-tc`	`#31111d`	`#ffd8e4`	Texte sur `tc`.
`--error`	`#b3261e`	`#f2b8b5`	Erreur et action destructive (`.btn-danger`).
`--on-error`	`#ffffff`	`#601410`	Texte sur `error`.
`--ec`	`#f9dedc`	`#8c1d18`	Error container : snackbar d'erreur, bandeau SOS de Stabilité.
`--on-ec`	`#410e0b`	`#f9dedc`	Texte sur `ec`.
`--on-surface`	`#1d1b20`	`#e6e0e9`	Texte principal sur `surface`, `scl`, `sc`, `sch`, `schh`.
`--on-sv`	`#49454f`	`#cac4d0`	Texte secondaire, labels, icônes au repos, sur toutes les surfaces container.
`--outline`	`#79747e`	`#938f99`	Bordures de contrôles : bouton outlined, champ de texte, switch éteint. 3:1 sur les surfaces.
`--outline-v`	`#cac4d0`	`#49454f`	Outline variant : bordures décoratives, chips outline, filet des titres de section, rail de progression. Jamais seule pour signaler un état.
`--dot`	`rgba(73, 69, 79, 0.18)`	`rgba(202, 196, 208, 0.16)`	Trame de points 30px du fond de page (portfolio). Décor uniquement.
`--ok`	`#2e7d32`	`#8fd694`	Statut OK (service actif, conteneur en marche). Toujours accompagné d'un mot ou d'une icône.
`--on-ok`	`#ffffff`	`#0b3a12`	Texte sur `ok`.
`--warn`	`#8a5a00`	`#f6c177`	Statut avertissement (disque presque plein, mise à jour dispo).
`--on-warn`	`#ffffff`	`#3a2600`	Texte sur `warn`.
`--bad`	`#b3261e`	`#f2b8b5`	Statut en panne / arrêté. Même valeur que `error`, rôle sémantique distinct.
`--on-bad`	`#ffffff`	`#601410`	Texte sur `bad`.
`--series-1`	`#6750a4`	`#9478e8`	Série 1 des graphiques (CPU). Validée daltonisme sur `surface`.
`--series-2`	`#008a73`	`#1e9e81`	Série 2 des graphiques (RAM).
`--hero-on`	`#e6e0e9`	`#e6e0e9`	Texte sur la photo sombre du hero (portfolio), identique dans les deux thèmes.
`--hero-primary`	`#d0bcff`	`#d0bcff`	Bouton principal du hero sur photo sombre.
`--hero-on-primary`	`#381e72`	`#381e72`	Texte sur `hero-primary`.
`--gloss-hi`	`rgba(255, 255, 255, 0.75)`	`rgba(255, 255, 255, 0.10)`	VARIANTE Plaza / Chrome : reflet du haut d'une bulle, posé en dégradé par-dessus un rôle de surface (`scl`, `sc`). Sans teinte, donc compatible Material You.
`--gloss-edge`	`rgba(255, 255, 255, 0.95)`	`rgba(255, 255, 255, 0.16)`	VARIANTE : liseré lumineux interne de 1px en haut des bulles et du chrome.
`--shade`	`rgba(0, 0, 0, 0.14)`	`rgba(0, 0, 0, 0.45)`	VARIANTE : ombre interne des champs et pistes en creux, ombre douce sous les bulles.

Typographie

Quatre familles, quinze styles. Titres en graisse 500, libellés en 600.

M3 · Affichage

Beedy

displayTaille 68pxGraisse 500Interligne 72px

Nom en couverture (carte du README GitHub). Un seul par page.

42 %

metricTaille 48pxGraisse 400Interligne 1

Valeur d'une MetricCard. 34px en compact. Chiffres tabulaires.

Projets

section-titleTaille 36pxGraisse 500Interligne 44px

Titre de section du portfolio, clamp(28px, 4vw, 36px), précédé du badge cookie numéroté.

VPS ADMIN

brandTaille 30pxGraisse 500Interligne 36px

Nom de l'app en capitales espacées dans la barre du haut.

Containers

page-titleTaille 30pxGraisse 500Interligne 36px

Titre de page (h1) d'une app.

M3 · Texte

Redémarrer le serveur ?

dialog-titleTaille 22pxGraisse 500Interligne 28px

Titre de dialogue.

Services

card-titleTaille 20pxGraisse 500Interligne 26px

Titre de carte (.card-head h2).

Les variables s'appliquent au prochain déploiement.

bodyTaille 15pxGraisse 400Interligne 1.45

Texte courant.

Redéployer

labelTaille 14pxGraisse 600Interligne 20px

Libellé de bouton, graisse 600.

il y a 3 h 05

smallTaille 13pxGraisse 400Interligne 18px

Sous-texte, métadonnées, légendes.

Ubuntu 24.04

chipTaille 12pxGraisse 600Interligne 16px

Texte de chip et de libellé de navigation (500).

M3 · Code

docker compose up -d

codeTaille 13pxGraisse 400Interligne 20px

Commandes et valeurs techniques, dans une puce scc.

Variante · Plaza (Wii U / 3DS)

Aujourd’hui

plaza-titleTaille 26pxGraisse 800Interligne 32px

VARIANTE. Titres en arrondi gras, façon Rodin du menu Wii U.

Le bouton Repas prend moins de 5 secondes.

plaza-bodyTaille 15pxGraisse 500Interligne 22px

VARIANTE. Texte courant Plaza.

Variante · Chrome (Y2K)

VPS ADMIN

y2k-displayTaille 22pxGraisse 400Interligne 28px

VARIANTE. Affichage étiré, en capitales, titres et boutons seulement. Le texte courant reste en sans.

Espacement

Neuf pas, de 4px à 48px.

Nom	Valeur	Usage
`--space-1`	`4px`	Écart icône/libellé de navigation, gap de piste de progression.
`--space-1-5`	`6px`	Gap entre items du rail, padding vertical des chips.
`--space-2`	`8px`	Gap dans les boutons et entre boutons de pied de dialogue.
`--space-3`	`12px`	Gap des en-têtes de carte, de la barre du haut, padding vertical des lignes.
`--space-4`	`16px`	Gap entre cartes d'une page, gouttière mobile minimale.
`--space-5`	`20px`	Padding vertical des cartes, padding des dialogues, marge sous la barre du haut.
`--space-6`	`24px`	Padding horizontal des dialogues, padding des boutons portfolio.
`--space-8`	`32px`	Padding horizontal de la colonne principale (desktop).
`--space-12`	`48px`	Respiration en bas de page.

Rayon

Neuf rayons. Un rayon intérieur est toujours plus petit que son parent.

Nom	Valeur	Usage
`--radius-xs`	`3px`	Case à cocher.
`--radius-sm`	`6px`	Tooltip, puce de code.
`--radius-chip`	`8px`	Chips (rectangle arrondi, jamais pilule).
`--radius-md`	`12px`	Champ de texte outlined, snackbar.
`--radius-lg`	`16px`	Indicateur de navigation 56×32, tuiles d'image.
`--radius-btn`	`20px`	Bouton 40px (moitié de la hauteur : pilule).
`--radius-xl`	`24px`	Bouton 48px, MetricCard compacte, cartes Stabilité.
`--radius-card`	`28px`	Cartes, dialogues, barre de recherche 56px.
`--radius-hero`	`36px`	Grande carte de couverture (README GitHub).

Ombre

L'élévation passe par la teinte. L'ombre est réservée aux éléments flottants et aux variantes.

Nom	Valeur	Usage
`--shadow-float`	`0 6px 20px rgba(0, 0, 0, 0.35)`	Snackbar et éléments flottants uniquement.
`--shadow-plaza`	`inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.12) / inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.4)`	VARIANTE Plaza : volume d'une bulle. Neutre, la teinte vient du rôle de surface dessous.
`--shadow-chrome`	`inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3)`	VARIANTE Chrome : biseau métallique. Neutre.

Opacité

Le calque d'état est en currentColor.

Nom	Valeur	Usage
`--state-hover`	`0.08`	Calque d'état au survol, couleur = currentColor.
`--state-press`	`0.12`	Calque d'état à l'appui.
`--state-ripple`	`0.16`	Ondulation (ripple) au clic.
`--state-disabled`	`0.5`	Contrôle désactivé.