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.1

4pxMicro

space.2

8pxPetit

space.3

12px

space.4

16pxStandard

space.5

20px

space.6

24px

space.8

32pxGrand

space.10

40px

space.12

48pxMacro

space.16

64pxMacro 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)

Densité — math tokensDensity — math tokens

Trois modes calculés via math tokens (Sam's Math Equations, Tokens Studio). L'arrondi floor()/ceil() garantit l'alignement 4px quel que soit le facteur. Voir ADR-025. Three modes computed via math tokens (Sam's Math Equations, Tokens Studio). floor()/ceil() rounding guarantees 4px alignment regardless of the factor. See ADR-025.

compact — ×0.75

Dashboards, tableaux, outils proDashboards, tables, pro tools

floor(16 × 0.75 / 4) × 4 = 12px

normal — ×1.0

Formulaires, settings, SaaS quotidienForms, settings, everyday SaaS

16px (valeur primitive directe)

comfortable — ×1.25

Marketing, onboarding, lectureMarketing, onboarding, reading

ceil(16 × 1.25 / 4) × 4 = 20px

floor(valeur × facteur / 4) × 4 — compact utilise floor(), comfortable utilise ceil(). Voir ADR-020 + ADR-025. floor(value × factor / 4) × 4 — compact uses floor(), comfortable uses ceil(). See ADR-020 + ADR-025.

Règles absoluesAbsolute rules

padding: 16px — utiliseruse var(--sda-semantic-space-control-padding-x)
margin: 32px — utiliseruse var(--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)