Spacing
Rythme vertical généreux, containers, échelle de gaps. Le blanc est structurel.
REF-DS/SPACING v1.0 — 2026-04-09
LiteOps utilise un rythme vertical généreux. La densité est évitée. Le blanc est structurel, pas décoratif.
Grille de base
L'écosystème utilise une grille de 4px :
--sp-14pxMicro — icônes inline--sp-28pxPadding interne compact--sp-416pxGaps standard--sp-832pxGroupements de composants--sp-1248pxGrilles de cartes--sp-1664pxSous-divisions de sections--sp-2080pxDivisions majeures de layout--sp-32128pxPadding sections pleine largeurToutes les valeurs d'espacement doivent être des multiples de 4px.
Sections
py-32 lg:py-40Les sections pleine largeur utilisent 128px de padding vertical en desktop et 80px en mobile par défaut.
Containers
max-w-7xl mx-auto px-8 lg:px-20Le contenu est contraint à 1280px de largeur maximale avec 32px de padding horizontal en mobile et 80px en desktop.
Échelle de gaps
| Échelle | Valeur | Contexte |
|---|---|---|
gap-8 | 32px | Groupements serrés de composants, éléments inline |
gap-12 | 48px | Grilles de cartes, rangées de features |
gap-16 | 64px | Sous-divisions de sections |
gap-20 | 80px | Divisions majeures de layout |
Les valeurs de gap sont choisies en fonction de la hiérarchie du contenu séparé. Plus la distance visuelle est grande, plus la distance structurelle est importante.
REF-DS/SPACING v1.0 · AVRIL 2026