Fondations
Couleurs
Principe
Un écran ne choisit jamais une couleur : il nomme un emplacement (--brand, --surface-raised, --ink-muted, --danger) et les tokens le résolvent selon le métier (data-activity) et le thème (data-theme). La liste complète, avec les valeurs clair, sombre et Boucherie, est dans le catalogue.
Dominance du métier
Le métier se reconnaît en un coup d'œil, sans que l'écran devienne bleu ou rouge. La répartition visée :
| Part | Où | Couleur |
|---|---|---|
| la majorité | fond de page, cartes, tableaux, texte | neutres : --surface*, --ink*, --line* |
| une part franche | barre latérale, titre de page, bandeau de fiche, action principale, onglet actif | --nav, --brand, --brand-soft |
| une touche | élément actif de la navigation, filet des tuiles, série principale d'un graphique | --accent |
| ponctuel | ce qui demande une réaction | --success, --warning, --danger |
Le métier passe aussi là où on ne le voit pas directement : les ombres prennent sa teinte (bleu pétrole en Poissonnerie, bordeaux en Boucherie, voir Espacements, formes et ombres), et le halo de focus des champs est en --brand-soft. Deux écrans côte à côte, un par métier, se distinguent à la barre latérale et au titre ; le reste a le même poids.
Code
<div class="hb-row" style="align-items:stretch;gap:var(--space-4)">
<div data-activity="poissonnerie" class="hb-card" style="flex:1 1 260px;overflow:hidden"><div class="hb-card-banner"><div class="hb-h1" style="font-size:22px;line-height:28px">Poissonnerie</div><div class="hb-list-meta">brand, brand-soft, ombre bleu pétrole</div></div><div class="hb-card-body hb-row"><button class="hb-btn hb-btn-primary">Valider</button><button class="hb-btn">Imprimer</button><span class="hb-badge hb-badge-info">Nouveau</span></div></div>
<div data-activity="boucherie" class="hb-card" style="flex:1 1 260px;overflow:hidden"><div class="hb-card-banner"><div class="hb-h1" style="font-size:22px;line-height:28px">Boucherie</div><div class="hb-list-meta">brand, brand-soft, ombre bordeaux</div></div><div class="hb-card-body hb-row"><button class="hb-btn hb-btn-primary">Valider</button><button class="hb-btn">Imprimer</button><span class="hb-badge hb-badge-info">Nouveau</span></div></div>
</div>Les emplacements à connaître
| Emplacement | Rôle | Exemples |
|---|---|---|
--brand, --brand-hover, --brand-soft, --on-brand | la couleur du métier : titres de page, action principale, élément actif | hb-btn-primary, onglet actif, hb-h1 |
--accent, --accent-soft, --on-accent | le second ton du métier : tuiles, barre latérale active, graphiques | hb-tile (filet du haut), hb-nav |
--nav, --nav-ink, --nav-muted, --nav-active, --nav-hover | la barre latérale sombre | hb-nav |
--surface, --surface-raised, --surface-sunken, --surface-hover | page grisée, carte blanche, zone en retrait, survol | hb-card, hb-sunken, en-têtes de tableau |
--ink, --ink-muted, --ink-faint | texte, texte secondaire, placeholder et poignées | hb-small, hb-muted |
--line, --line-strong | filet de séparation, bordure de champ (3:1 au repos) | hb-field, hb-card |
--success, --warning, --danger, --info et leurs -soft | états, avec le fond doux pour les badges et alertes | hb-badge-*, hb-alert-* |
--slate, --slate-soft, --on-slate | neutre marqué : avatar, bouton secondaire, badge « Archivée » | hb-avatar, hb-btn-secondary |
--link | lien dans un texte | a.hb-link |
--chart-1 … --chart-5, --chart-grid | séries de graphiques, dans l'ordre | voir Graphiques |
--shade, --shade-strong | teinte des ombres, suit le métier | utilisées par --shadow-* seulement |
Règles
- Le rouge ne porte que l'erreur et la suppression ; il n'apparaît qu'au survol d'une action destructive, jamais au repos.
- Un texte lisible fait au moins 4,5:1 sur son fond dans les deux thèmes : le build le vérifie (
dist/json/contrast.json). Un texte en--ink-faintn'est jamais une information nécessaire. - Les composants ne lisent jamais
--poissonnerieou--boucheriedirectement : ils passent par--brand,--accent,--nav. Un écran ne mélange pas les deux métiers.
Code
<div class="hb-row">
<span class="hb-badge hb-badge-info">brand</span>
<span class="hb-badge hb-badge-success">success</span>
<span class="hb-badge hb-badge-warning">warning</span>
<span class="hb-badge hb-badge-danger">danger</span>
<span class="hb-badge hb-badge-slate">slate</span>
<span class="hb-muted">texte secondaire</span>
<a class="hb-link" href="#">lien</a>
</div>