Typographie
Le Design System b.connect utilise Poppins comme fonte principale.
Familles de fontes
| Token | Valeur | Apercu |
|---|---|---|
--bc-sans | Poppins, system-ui, sans-serif | The quick brown fox |
--bc-display | Poppins, sans-serif | Design System V3 |
--bc-mono | SF Mono, Fira Code, monospace | const x = 42; |
Echelle de tailles
Display XLLe design system b.connect2.4rem (~38px) · 800
Display LGLe design system b.connect1.6rem (~26px) · 700
Display MDLe design system b.connect1.1rem (~18px) · 700
Body LGLe design system b.connect0.95rem (~15px) · 400
Body MDLe design system b.connect0.82rem (~13px) · 400
LabelSTATUT METIER · ETAPE TECHNIQUE · DERNIERE ACTIVITE0.7rem (~11px) · 700
Poids
400Regular — Corps de texte
500Medium — Sous-titres
600SemiBold — Labels, boutons, badges
700Bold — Titres, accents
800ExtraBold — Titre page, hero
Combinaisons recommandees
| Role | Taille | Poids | Token fonte | Exemple |
|---|---|---|---|---|
| Titre page (hero) | 2.4rem | 800 | --bc-display | Titre |
| Titre section | 1.6rem | 700 | --bc-display | Section |
| Sous-titre panel | 1.1rem | 700 | --bc-display | Sous-titre |
| Corps principal | 0.95rem | 400 | --bc-sans | Corps de texte |
| Corps secondaire | 0.82rem | 400 | --bc-sans | Description secondaire |
| Label uppercase | 0.7rem | 700 | --bc-sans | Label |
| Code | 0.82rem | 400 | --bc-mono | code() |