EspacementSpacing
Toute valeur dimensionnelle est un multiple de 4px. L'échelle compte 10 échelons (4px → 64px). Jamais de valeur en dur — toujours via un token sémantique. Every dimension is a multiple of 4px. The scale has 10 steps (4px → 64px). No hardcoded values — always via a semantic token.
Grille 4px — échelle primitive4px grid — primitive scale
Module de base : 4px. Toute valeur hors de cette échelle est une dérive.
Base unit: 4px. Any value outside this scale is a drift.
space.14px
Micro
space.28px
Petit
space.312px
space.416px
Standard
space.520px
space.624px
space.832px
Grand
space.1040px
space.1248px
Macro
space.1664px
Macro XL
Tokens sémantiquesSemantic tokens
Les composants utilisent exclusivement ces tokens — jamais les primitifs directement. Components exclusively use these tokens — never primitives directly.
| Token CSS | RéférenceReference | ValeurValue | IntentionIntent |
|---|---|---|---|
--sda-semantic-space-control-padding-x | semantic.space.control.padding-x | 16px | Padding horizontal des contrôles interactifsHorizontal padding for interactive controls |
--sda-semantic-space-control-padding-y | semantic.space.control.padding-y | 8px | Padding vertical des contrôles interactifsVertical padding for interactive controls |
--sda-semantic-space-control-gap | semantic.space.control.gap | 8px | Écart interne (icône + label dans un contrôle)Internal gap (icon + label inside a control) |
--sda-semantic-space-layout-section | semantic.space.layout.section | 32px | Séparation entre sections de pageSpacing between page sections |
--sda-semantic-space-layout-component | semantic.space.layout.component | 20px | Séparation entre composantsSpacing between components |
--sda-semantic-radius-control | semantic.radius.control | 6px | Rayon pour contrôles interactifsRadius for interactive controls |
--sda-semantic-radius-card | semantic.radius.card | 10px | Rayon pour conteneurs (cartes, panneaux)Radius for containers (cards, panels) |
Règles absoluesAbsolute rules
-
padding: 16px— utiliserusevar(--sda-semantic-space-control-padding-x) -
margin: 32px— utiliserusevar(--sda-semantic-space-layout-section) -
var(--sda-primitive-space-4)dans un composant — passer par le token sémantiquein a component — use the semantic token instead - Valeur hors-grille :Off-grid value:
14px,18px,22px— choisir l'échelon le plus prochechoose the closest step - Toujours via CSS Custom Properties référençant un token sémantiqueAlways via CSS Custom Properties referencing a semantic token
- Si aucun token sémantique ne correspond, en créer un (PR requise)If no semantic token matches, create one (PR required)