Charte graphique
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
Couleurs — Surfaces (élévation par luminance)
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.
Void
--aurora-void
#070B16
Fond orbital — niveau −1
Deep
--aurora-deep
#0D1426
Surface niveau 0
Surface
--aurora-surface
#141D33
Cards — niveau 1
Raised
--aurora-raised
#1C2A47
Hover / actif — niveau 2
Overlay
--aurora-overlay
#243557
Dropdowns, modales — niveau 3
Couleurs — Signature plasma
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.
Plasma Cyan
--plasma-cyan
#4DE8D4
Marque · patrimoine · gains
Plasma Cyan Dim
--plasma-cyan-dim
#2BA697
Cyan atténué — hover, disabled
Plasma Magenta
--plasma-magenta
#C04DFF
IA · insights · secondaire
Plasma Magenta Dim
--plasma-magenta-dim
#8A2BC2
Magenta atténué
Solar Amber
--solar-amber
#FFB84D
Alertes · attention
Couleurs — Fonctionnel
Gain vert teinté plasma — perte rose-rouge : jamais un vert criard ou un rouge alarme agressif.
Gain Green
--gain-green
#3DDC97
Valeur positive
Loss Red
--loss-red
#FF5C7C
Valeur négative
Couleurs — Texte
Blanc bleuté plutôt que blanc pur (fatigue oculaire réduite sur écran sombre).
Text Primary
--text-primary
#EAF0FF
Corps, titres, valeurs
Text Secondary
--text-secondary
#8A97B8
Labels, descriptions
Text Tertiary
--text-tertiary
#515D7E
Métadonnées, timestamps
Couleurs — Gradients signature
Les gradients ne sont jamais en dur dans les composants — toujours via les CSS vars.
Plasma
--grad-plasma
Titres héros, accents forts — clip text ou fond
Core radial
--grad-core
Halo derrière le KPI patrimoine principal
Aurora BG
--grad-aurora-bg
Fond de page — couche sous le contenu
Tokens financiers — thème light
Définis sous [data-theme="light"] dans tokens/themes/light.css. Rendu en contexte thème clair.
Comptes enregistrés
--color-tfsa
#167A50
CELI — vert forêt, AA
--color-rrsp
#1A56A0
REER — bleu institutionnel, AA
--color-fhsa
#6D28D9
CELIAPP / régime PD — violet, AA
États d'enveloppe budget
--color-envelope-ok
#167A50
Enveloppe OK (< 80 %)
--color-envelope-near
#A06800
Proche limite (80–99 %)
--color-envelope-over
#8B1A1A
Dépassement (> 100 %)
Surfaces de statut
--color-surface-gain
bg: #F0FDF4
border: #BBF7D0
Épargne investie / positif
--color-surface-warning
bg: #FFFBEB
border: #FCD34D
Hors-enveloppe / ambre
--color-surface-error
bg: #FEF2F2
border: #FCA5A5
Erreur inline
--color-surface-success
bg: #D1FAE5
border: #34D399
Succès inline
Bordures (par défaut / subtil / fort + sémantiques)
--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-successKPI surface + chiffres tabulaires
--color-kpi-surface
847 230 $
font-variant-numeric: var(--font-tnum)
--font-tnum (tabular-nums)
Avec var(--font-tnum)
1 111 $
8 888 $
Sans (proportionnel)
1 111 $
8 888 $
Typographie — Familles
--font-displayDisplay · KPI · grands titres
847 230 $
Inter Tight · font-variant-numeric: tabular-nums — chiffres tabulaires activés
--font-uiInterface · corps · navigation
Patrimoine net — actifs enregistrés
Inter · Poids : regular 400, medium 500, semibold 600
--font-monoTickers · timestamps · codes
RRSP · 2026-06-04 · #070B16
JetBrains Mono · Réservé aux données techniques brutes — pas pour les titres
Typographie — Échelle de tailles
12 345 $--fs-core56px — Patrimoine total — KPI dominant
12 345 $--fs-2xl40px — KPI secondaires importants
Aa 123--fs-xl28px — Titres de widgets
Aa 123--fs-lg20px — Sous-titres de sections
Aa 123--fs-md16px — Base — corps principal
Aa 123--fs-sm14px — Texte courant, descriptions
Aa 123--fs-xs12px — Labels de formulaire
Aa 123--fs-2xs11px — Métadonnées, timestamps
Espacement — Échelle sur base 4px
8 paliers. Utiliser uniquement les tokens — aucune valeur px en dur dans un composant.
Rayons de bordure
5 paliers. La cohérence des rayons signale l'appartenance visuelle — ne pas mélanger dans un même composant.
Élévation — Niveaux de surface + ombres
L'élévation se lit dans la luminosité de la surface. Les ombres teintées complètent les composants flottants.
--glow-magentaGlow Magenta Motion — Durées & easing
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-drift40sAurora 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 — bouncy
Animations nommées : aurora drift · count-up · stagger reveal · glow pulse.
Exemple d'application — Card AuroraCard
Anatomie d'une card : surface niveau 1, barre accent 3px, valeur tabulaire dominante, footer métadonnée.
REER
44 272 $
Droits disponibles 2026
Mis à jour : 2026-06-04
Insight IA
3 recommandations
Augmenter contribution REER avant mars
Généré le 2026-06-04
Budget — juin
2 340 $ / 3 000 $
78% utilisé — 660 $ restants
Réinitialisation le 1er juillet