Fondations
Espacements, formes et ombres
Échelle
| Token | Valeur | Usage courant |
|---|---|---|
--space-1 | 4 px | entre une icône et son texte, sous un libellé |
--space-2 | 8 px | entre deux boutons, padding d'une puce |
--space-3 | 12 px | entre les éléments d'une ligne, padding d'un champ |
--space-4 | 16 px | padding d'une carte compacte, entre deux champs |
--space-5 | 24 px | padding d'une carte, gouttière de page |
--space-6 | 32 px | entre deux sections |
--space-7, --space-8 | 48, 64 px | état vide, erreur de page |
Rayons : --radius-sm (puces, cases, codes), --radius-md (boutons, champs, menus), --radius-lg (cartes, listes, dialogues), --radius-full (avatars, badges ronds). Le rayon suit la taille : plus la surface est grande, plus il est grand, jamais un rayon unique partout.
Ombres et élévation
Quatre niveaux. Chaque ombre a deux couches : une courte et nette qui pose l'objet sur la surface, une longue et diffuse qui dit sa hauteur. Elles sont teintées par le métier (--shade, --shade-strong) : une ombre grise neutre sur un fond légèrement bleuté ou chaud paraît sale.
| Niveau | Token | Pour |
|---|---|---|
| 1 | --shadow-sm | bouton, touche, puce : juste décollé |
| 2 | --shadow-card | carte, liste, tableau, tuile posés sur la page grisée |
| 3 | --shadow-md | menu, barre collée, bouton flottant : au-dessus du contenu |
| 4 | --shadow-lg | dialogue, panneau latéral : le seul niveau qui masque ce qu'il recouvre |
En thème sombre, une ombre ne se voit presque plus : les surfaces élevées sont plus claires que la page (--surface-raised sur --surface) et portent un liseré clair d'un pixel en haut, qui fait le travail de l'ombre.
Code
<div class="hb-row" style="gap:var(--space-5);padding:var(--space-3) 0">
<div style="width:120px;height:72px;border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-sm);display:grid;place-items:center" class="hb-small">sm</div>
<div style="width:120px;height:72px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-card);display:grid;place-items:center" class="hb-small">card</div>
<div style="width:120px;height:72px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md);display:grid;place-items:center" class="hb-small">md</div>
<div style="width:120px;height:72px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-lg);display:grid;place-items:center" class="hb-small">lg</div>
</div>Mise en page
hb-row aligne horizontalement avec un espace de 12 px et passe à la ligne ; hb-stack empile verticalement. hb-page pose les gouttières d'une page (24 px, 16 px sur téléphone), hb-page--narrow la borne à --content-max.
Code
<div class="hb-stack">
<div class="hb-row"><button class="hb-btn hb-btn-primary">Enregistrer</button><button class="hb-btn">Annuler</button><span class="hb-small">hb-row : alignés, 12 px entre eux</span></div>
<div class="hb-card hb-card-body hb-stack" style="max-width:360px"><span class="hb-label">hb-stack dans une carte</span><input class="hb-field" placeholder="Champ"><input class="hb-field" placeholder="Champ"></div>
</div>Règles
- Les écarts viennent de l'échelle, jamais d'un nombre libre ; un écart de 10 ou 14 px est une erreur.
- Une carte n'a pas d'ombre dans une carte : à l'intérieur, on sépare par un filet (
--line) ou une zone en retrait (hb-sunken). - Une surface prend le niveau de son rôle, pas celui qui « rend bien » : une carte n'a jamais
--shadow-md. Une ombre n'est pas une bordure : la carte garde son filet--line. - Pas d'ombre colorée vive, pas d'ombre au survol d'une carte inerte : le survol d'une carte cliquable change son fond, pas sa hauteur.