Pas d'ombre portée : un panneau flotte parce qu'il est un ton plus clair.
--color-borderrgba(30,40,80,0.14)Bordure par défaut--color-border-subtlergba(30,40,80,0.08)Séparateurs internes discrets--color-border-strongrgba(30,40,80,0.28)Accentué, focus-adjacent--color-border-interactivergba(26,26,46,0.52)Bordure qui sert de limite cliquable (liens, cartes-liens) — contraste garanti par thème--color-border-gain#BBF7D0Bord surface-gain--color-border-warning#FCD34DBord surface-warning--color-border-error#FCA5A5Bord surface-error--color-border-success#34D399Bord surface-success--color-kpi-accent reprend --color-accent dans Aurora et Sombre. Dans Clair, il garde sa propre valeur #4DE8D4, ancrée sombre.
Polices variables auto-hébergées, sous licence SIL Open Font License 1.1.
Hanken Grotesk pour le display et les KPI, Figtree pour l'interface, IBM Plex Mono pour la donnée technique.
--shell-content-max / --shell-gutter — Largeur de contenu maximale et marge horizontale fluide, portées par le shell applicatif.
--content-max-width — Largeur de colonne pour un gabarit de contenu (fiscal, formulaires longs) — 760px, distincte de la coque applicative.
--touch-target-min / --dvh — Taille minimale des cibles tactiles (44px) et hauteur de viewport dynamique pour les drawers et modales mobiles.
--touch-target-min-dense — Exception pour les menus dédiés : cibles pleine largeur, empilées, jusqu'à 40px.
--sidebar-w-expanded / --sidebar-w-rail — Largeurs de la sidebar, repliée (icônes seules) ou déployée (icônes et libellés).
Mobile-first : chaque palier enrichit le précédent, il ne le corrige pas.
| Token | Valeur | Cible | Comportement du shell |
|---|---|---|---|
| --bp-sm | 480px | Grand mobile | 1 colonne, drawer, padding 16px |
| --bp-md | 768px | Tablette | Grilles 2 colonnes, drawer, padding 24px |
| --bp-lg | 1024px | Desktop | Sidebar fixe apparaît (248px) |
| --bp-xl | 1280px | Desktop large | Contenu 960px max, densité augmentée |
En thème clair, l'élévation se lit par l'ombre, pas par la teinte.
--dur-fast120msMicro-interactions, hover--dur-base180msTransitions standard--dur-slow300msPanels, modales--dur-reveal700msEntrées de page, stagger--dur-drift80sAurora drift (fond animé)--dur-rep2600msTempo d'une répétition d'exercice (Alcyone)--dur-press2200msTempo d'une poussée/traction (Alcyone)--dur-hold20000msTempo d'un maintien isométrique (Alcyone)--ease-out-expocubic-bezier(0.16,1,0.3,1)Accélération standard--ease-springcubic-bezier(0.34,1.56,0.64,1)Spring — bouncy--ease-repcubic-bezier(0.45,0,0.2,1)Cadence de répétition (Alcyone)Animations nommées : aurora drift · count-up · stagger reveal · glow pulse.
| Token | Rôle |
|---|---|
| --shell-footer-mark-box | Côté de la boîte carrée de la mark — déduit du taux d'encre de l'Orbit Arc. |
| --shell-footer-mark-shift | Décalage vertical, pour recentrer la bande sur la partie signifiante. |
| --shell-footer-mark-crop-inline | Débordement par la droite, plafonné à la marge d'encre de la marque. |
| --shell-footer-mark-crop-block | Débordement par le bas, pour une marque dont la marge d'encre est basse. |
| --shell-footer-mark-opacity | Opacité finale — plus haute en thème clair, où le plasma doit être plus dense. |
| --shell-footer-mark-ring-stroke | Épaisseur de la couronne, en unités du viewBox (64) : à ce taux d'encre, l'épaisseur nominale du composant s'efface. |
| --shell-footer-mark-trail-stroke | Épaisseur du sillage, même échelle, un cran sous la couronne. |
| --shell-footer-gap | Espacement de la rangée — mark, wordmark, point et mention légale. |
| --shell-footer-dot-size | Diamètre du point plasma qui articule marque et mention légale. |
| --shell-footer-dot-color | Couleur du point, propre à chaque identité : l'accent du thème, ou la teinte de marque quand le thème n'en définit pas. |
| --shell-footer-wordmark-tracking | Interlettrage du wordmark sur une ligne de 45px. |
Surface niveau 1, barre accent 3px, valeur tabulaire, footer métadonnée.