Fondations

Typographie

stableClasses hb-display hb-h1 hb-h2 hb-h3 hb-small hb-num mono hb-kbd

Styles

Chaque style est un token --text-* qui fixe graisse, taille, interligne et famille d'un coup ; la densité (data-density) les redimensionne tous ensemble : 15 px en normal, 13,5 px en compact, 17 px en touch.

Classe	Token	Usage
`hb-display`	`--text-display`	mot-symbole Hublot, Paytone One ; nulle part ailleurs
`hb-h1`	`--text-h1`	titre de page et de fiche, en couleur métier
`hb-h2`	`--text-h2`	titre de section, de dialogue, de panneau latéral
`hb-h3`	`--text-h3`	titre de carte, de ligne
(corps)	`--text-body`, `--text-body-strong`	texte courant, libellé d'une ligne
`hb-small`	`--text-small`	texte secondaire, métadonnées, aide
`hb-label`	`--text-label`	libellé de champ, en-tête de tableau
`mono`	`--text-mono`	PLU, EAN, identifiants, SQL
`hb-num`		chiffres tabulaires pour aligner des colonnes
	`--text-number`, `--text-number-xl`	montants et quantités, voir Prix et poids
	`--text-clock`	grande heure ou durée lue de loin (barre du haut d'une tablette)

Hublot

Titre de page

Titre de section

Titre de carte ou de ligne

Texte courant : vérifier les DLC du rayon libre-service avant 9 h et noter les retraits sur la fiche.

Texte secondaire : créée le 05/11/2026 · 3 tâches, 1 faite PLU 164 · EAN 3250390001234 · raccourci ⌘ K

Code

<div class="hb-stack">
  <span class="hb-display">Hublot</span>
  <h1 class="hb-h1">Titre de page</h1>
  <h2 class="hb-h2">Titre de section</h2>
  <h3 class="hb-h3">Titre de carte ou de ligne</h3>
  <p style="margin:0">Texte courant : vérifier les DLC du rayon libre-service avant 9 h et noter les retraits sur la fiche.</p>
  <span class="hb-small">Texte secondaire : créée le 05/11/2026 · 3 tâches, 1 faite</span>
  <span><span class="mono">PLU 164</span> · <span class="mono">EAN 3250390001234</span> · raccourci <kbd class="hb-kbd">⌘</kbd> <kbd class="hb-kbd">K</kbd></span>
</div>

Règles

Casse de phrase partout : « Ajouter une tâche », pas « Ajouter Une Tâche » ni « AJOUTER ». Les capitales sont réservées aux titres de section de navigation ; une légende de groupe (hb-legend) a le style d'un libellé de champ.
Un titre de page est en couleur métier ; un titre de carte en encre. Pas de titre en gras supplémentaire.
Les nombres d'une colonne ou d'une liste sont en chiffres tabulaires (hb-num, ou font-variant-numeric: tabular-nums posé par les classes de tableau, de tuile et de mesure).
Les polices se chargent une fois par application (Roboto 400, 500, 600 ; Paytone One ; Roboto Mono) ; sur Android, Roboto est la police système.