Espacement
Le Design System b.connect definit 23 tokens d'espacement et 4 tokens de border-radius.
Echelle d'espacement
--bc-space-00px
--bc-space-22px
--bc-space-44px
--bc-space-66px
--bc-space-88px
--bc-space-1010px
--bc-space-1212px
--bc-space-1414px
--bc-space-1616px
--bc-space-1818px
--bc-space-2020px
--bc-space-2424px
--bc-space-2828px
--bc-space-3232px
--bc-space-4040px
--bc-space-4242px
--bc-space-4848px
--bc-space-5656px
--bc-space-6060px
--bc-space-6464px
--bc-space-7272px
--bc-space-8080px
--bc-space-100100px
Border radius
--bc-r
8px
Default (cards, inputs, badges)
--bc-r2
12px
Medium (panels, modals)
--bc-r3
16px
Large (hero cards)
--bc-rpill
99px
Pill (buttons, toggles, chips)
Usage recommande
| Contexte | Token | Valeur |
|---|---|---|
| Gap entre elements d'un groupe | --bc-space-6 a --bc-space-8 | 6-8px |
| Padding interne d'une carte | --bc-space-16 a --bc-space-24 | 16-24px |
| Marge entre sections | --bc-space-32 a --bc-space-48 | 32-48px |
| Padding de page | --bc-space-40 a --bc-space-64 | 40-64px |
| Espacement grille dashboard | --bc-space-16 a --bc-space-24 | 16-24px |