Tokens

Variables CSS préfixées --hz-, définies dans assets/tokens.css. Valeurs mesurées sur la maquette, à caler sur le fichier Figma source (V-04) ; elles font foi d'ici là. Les ajouts du pack (neutre, fs-lg) sont marqués.

Couleurs · primaires

--hz-primary-900

#152B54 · bouton primaire, info-bulle, point actif

--hz-primary-700

#1F3B70 · actif sidebar, courbe, segment Actions

--hz-primary-500

#2F6FED · liens, progression, sparklines, Obligations

--hz-primary-200

#A7C3F2 · segment Fonds €, survols légers

--hz-primary-100

#DCE7FA · Liquidités, fonds actif sidebar, médaillon

Couleurs · fonds, textes, structure

--hz-bg-app

#F5F7FA · fond général

--hz-bg-card

#FFFFFF · cartes, tableaux, barre latérale

--hz-border

#E5E9F0 · bordures, séparateurs, contours de champs

--hz-text-strong

#1C2A3A · titres et valeurs principales

--hz-text-muted

#6B7A90 · libellés secondaires, axes, légendes

--hz-chart-grid

#E9EDF3 · grille du graphique, piste de progression

--hz-versements

#9AA7B8 · série « Versements » (pointillés)

Couleurs · états sémantiques (badges, alertes)

Validé

--hz-success-bg/-fg

#E7F6EE / #12805A · Validé, KYC à jour, variations positives

En cours

--hz-warning-bg/-fg

#FEF0DB / #B54708 · En cours, KYC à renouveler

Planifié

--hz-info-bg/-fg

#EAF1FE / #175CD3 · Planifié, Profil équilibré

Expiré

--hz-danger-bg/-fg

#FCE8E6 / #C0392B · Expiré, erreurs, pastille de notification

Cliente depuis 2016

--hz-neutral-bg/-fg

#EEF2F7 / #6B7A90 · ancienneté, Annulé [calé maquette, P-03]

Typographie

Police : Inter, repli system-ui, Segoe UI, Roboto (aucune dépendance réseau : le repli système s'applique si Inter n'est pas installée).

--hz-fs-xxl · 24/70042 350 €valeurs des cartes d'indicateurs

--hz-fs-xl · 18/700Marie Dupontnom du client

--hz-fs-lg · 16/700Projection du capital sur 10 anstitres de cartes [calé maquette]

--hz-fs-md · 14/500Corps, cellules de tableau, ongletstexte courant

--hz-fs-sm · 12/500Libellés secondaires, badges, légendes

Espacements · grille de 8

--hz-sp-1 · 4

--hz-sp-2 · 8

--hz-sp-3 · 12

--hz-sp-4 · 16gouttières de la grille

--hz-sp-5 · 24marge latérale de la zone de contenu

--hz-sp-6 · 32

Rayons et élévations

--hz-radius · 8px

boutons, champs, segments

--hz-radius-card · 12px

cartes et tableaux

--hz-radius-pill · 999

badges, recherche, avatars

--hz-shadow-card

0 1px 2px rgba(16,24,40,.06)

--hz-shadow-pop

menus, modales, panneaux

Grille et gabarit d'écran

Résolution de référence 1440 px, fonctionnelle dès 1280 px (RNF-23). Barre latérale fixe 232 px, barre supérieure 64 px, zone de contenu en grille 12 colonnes, gouttières 16 px, marge 24 px. Projection : 8 colonnes · Allocation : 4 colonnes ; échéancier pleine largeur. Sous 1280 px, l'allocation passe sous la projection.

232

Barre supérieure 64 px

8 colonnes · Projection

4 col. · Allocation