Fondations visuelles — thème Aurora — source de vérité unique (fusion /tokens + /charte). Couleurs · Typographie · Espacement · Élévation · Motion.
Fondations visuelles — thème Aurora — source de vérité unique (fusion /tokens + /charte). Couleurs · Typographie · Espacement · Élévation · Motion.
Source : dist/tokens-v2.css · Miroir TS : tokens/index.ts
L'élévation est portée par la luminosité. Plus une surface est haute dans la hiérarchie, plus elle est claire — sans bordure dure.
Le duo cyan/magenta est l'accent fondateur. Cyan = patrimoine, gains, marque. Magenta = IA, insights. Jamais les deux en aplat sur la même zone.
Gain vert teinté plasma — perte rose-rouge : jamais un vert criard ou un rouge alarme agressif.
Blanc bleuté plutôt que blanc pur (fatigue oculaire réduite sur écran sombre).
Les gradients ne sont jamais en dur dans les composants — toujours via les CSS vars.
Définis sous [data-theme="light"] dans tokens/themes/light.css. Rendu en contexte thème 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-gain#BBF7D0Bord surface-gain--color-border-warning#FCD34DBord surface-warning--color-border-error#FCA5A5Bord surface-error--color-border-success#34D399Bord surface-successSelf-hostées par Lyra (design/aurora/fonts.css → @lyra/tokens/dist/fonts.css) — variable fonts, licence SIL Open Font License 1.1. Aucune app ne charge ses propres polices (DEC-LYRA-TOKENS-SOURCE).
8 paliers. Utiliser uniquement les tokens — aucune valeur px en dur dans un composant.
--shell-content-max / --shell-gutter — Largeur de contenu partagée (PleiadeShell) : --shell-content-max (1440px, plafond de largeur du contenu applicatif — évite le vide sur grand écran) et --shell-gutter (clamp(16px, 4vw, 40px), marge horizontale fluide portée par le shell — les écrans ne redéfinissent plus leur propre padding horizontal).
--touch-target-min / --dvh — Plancher de cible tactile unifié (WCAG 2.2 §2.5.8) : --touch-target-min (44px — min-width/min-height des boutons, liens de nav et icônes interactives, tout Pléiades) et --dvh (100dvh, hauteur de viewport dynamique pour drawers/modales mobiles). ADR-054.
--touch-target-min-dense — Exception « menu » de WCAG 2.5.8 (40px) : cibles d'un menu dédié, pleine largeur, empilées avec un espacement suffisant. Consommé par AppSwitcher (.app-switcher__item) et ShellUserMenu (.shell-user-menu__item). DEC-TOUCH-TARGET-DENSE (2026-07-10) — valeur unique, remplace deux magic numbers divergents (36px/40px) qui appliquaient la même règle.
--sidebar-w-expanded / --sidebar-w-rail — Largeurs de la sidebar du PleiadeShell layout="sidebar" (tablette/desktop, ≥768px) : --sidebar-w-expanded (260px, lockup + libellés visibles) et --sidebar-w-rail (72px, icônes seules — état replié, défaut tablette). Consommé par PleiadeShell (lyra-ds/components), 1er consommateur : Alcyone.
5 paliers. La cohérence des rayons signale l'appartenance visuelle — ne pas mélanger dans un même composant.
L'élévation se lit dans la luminosité de la surface. Les ombres teintées complètent les composants flottants.
Règle d'élévation aurora-light — surfaces hautes = blanches, fond = bleuté (#EFF6FF). L'élévation se lit par l'ombre portée, pas par la teinte.
Tokens : --theme-shadow-sm/md/lg(teintés navy). Pas d'intermédiaires deep/void clairs.
Tokens de durée et d'easing disponibles dans dist/tokens-v2.css. Jamais de valeurs ms en dur dans un composant.
--dur-fast120msMicro-interactions, hover--dur-base180msTransitions standard--dur-slow300msPanels, modales--dur-reveal700msEntrées de page, stagger--dur-drift80sAurora drift (fond animé)--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 — bouncyAnimations nommées : aurora drift · count-up · stagger reveal · glow pulse.
Anatomie d'une card : surface niveau 1, barre accent 3px, valeur tabulaire dominante, footer métadonnée.