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
Couleurs · fonds, textes, structure
Couleurs · états sémantiques (badges, alertes)
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).
Espacements · grille de 8
Rayons et élévations
Compléments intégrés au système
Éléments ajoutés au même jeu de tokens (aucune valeur en dur ailleurs) pour couvrir tout l'écran de référence : fond de champ de saisie, hauteurs et rayons de contrôles, échelle typographique nommée, et couleurs de statut complètes des badges.
Couleurs de statut des badges (jeu complet)
Réconciliation avec les jetons client officiels
Le client fournit son propre jeu de jetons. Chaque jeton client est rattaché à un jeton --hz-*, seule source de vérité du code. Les écarts de valeur sont assumés et justifiés ligne par ligne : la maquette prime, le jeton client donne l'intention.
| Jeton client | Valeur client | Jeton HORIZON | Valeur retenue | Écart |
|---|---|---|---|---|
color.primary | #1F3864 | --hz-primary-700 | #1F3B70 | Teinte relevée sur la maquette, plus claire de 3 points de bleu. |
color.accent | #2E75B6 | --hz-primary-500 | #2F6FED | Accent plus saturé, exigé par le contraste AA sur fond blanc. |
color.chart.series2 | #9DC3E6 | --hz-versements | #9AA7B8 | Gris neutre : la série « versements » ne doit pas concurrencer la courbe de capital. |
color.surface | #FFFFFF | --hz-bg-card | #FFFFFF | Identique. |
color.surface.muted | #F2F6FC | --hz-bg-app | #F5F7FA | Fond d'application légèrement moins bleuté, relevé sur la maquette. |
color.input.bg | #F7FAFF | --hz-input-bg | #F7FAFF | Identique. |
color.border | #D0D7E2 | --hz-border | #E5E9F0 | Bordure plus discrète, conforme au rendu de la maquette. |
color.text | #1A1A1A | --hz-text-strong | #1C2A3A | Noir bleuté, cohérent avec la primaire. |
color.text.secondary | #667085 | --hz-text-muted | #6B7A90 | Écart imperceptible, contraste AA vérifié. |
status.success | #2E7D32 / #E7F4E8 | --hz-success-fg / -bg | #12805A / #E7F6EE | Vert tirant sur le turquoise, relevé sur les badges de la maquette. |
status.warning | #B54708 / #FEF0E7 | --hz-warning-fg / -bg | #B54708 / #FEF0DB | Texte identique, fond légèrement plus ambré. |
status.info | #2E75B6 / #E7F0F9 | --hz-info-fg / -bg | #175CD3 / #EAF1FE | Bleu plus soutenu pour le contraste du badge « Planifié ». |
font.family | Inter, Arial, sans-serif | --hz-font | Inter, system-ui, Segoe UI, Roboto, … | Même famille, pile de repli élargie. |
radius.input / radius.card | 8px / 12px | --hz-radius / --hz-radius-card | 8px / 12px | Identiques. |
input.height / button.height | 40px / 44px | --hz-input-h / --hz-btn-h | 40px / 44px | Identiques. |
space.base | 8px (4/8/16/24) | --hz-sp-1..6 | 4/8/12/16/24/32 | Échelle étendue de deux crans pour les gouttières de grille. |
États et adaptation à l'écran (exigés partout)
Chaque composant prévoit : champ normal / focus / erreur ; bouton normal / survol / chargement ; ligne de tableau normale / survolée / sélectionnée ; écran état initial (valeurs « — ») / résultat / vide / chargement (squelettes). Adaptation automatique à la fenêtre desktop, sans débordement : la mise en page remplit l'écran et se contracte de 1280 à 1920 px (tableau à défilement interne, graphiques en largeur 100 %)..
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.