Easy Solutions - Principes / Espacement

Règle fondamentale

On n'utilise que les valeurs de l'échelle, jamais de valeurs intermédiaires comme 10px ou 18px.

Interdit

padding: 10px 18px

Valeurs hors échelle

Correct

padding: var(--ds-space-8) var(--ds-space-16)

Tokens de l'échelle

L'échelle est basée sur des multiples de 4, c'est le standard de l'industrie (Material, Atlassian, Carbon). Chaque valeur a un rôle précis. Même usage = même token.

Échelle d'espacement

6 valeurs disponibles, de 4px à 48px. Chacune correspond à un usage spécifique.

--ds-space-4 4px Micro-espacement (icône / texte)

A

B

4px

--ds-space-8 8px Éléments proches (label / input)

A

B

8px

--ds-space-16 16px Padding standard (cards, boutons)

A

B

16px

--ds-space-24 24px Séparation de blocs

A

B

24px

--ds-space-32 32px Sections

A

B

32px

--ds-space-48 48px Grandes sections / pages

A

B

48px

Do & Don't

Utiliser uniquement var(--ds-space-*)
Même usage = même token sur tous les produits
Combiner deux tokens pour des besoins composés (space-8 space-16)
Utiliser gap plutôt que margin dans les layouts flex/grid
Choisir le token en fonction du rôle, pas de la valeur visuelle

Utiliser margin: 10px ou toute valeur hors échelle
Inventer une valeur intermédiaire comme 12px ou 20px
Mélanger margin et gap sans cohérence
Utiliser padding: 0 pour compenser un mauvais espacement parent
Choisir un token différent pour le même usage selon le composant

Règles

Règle

Utiliser uniquement les valeurs de l'échelle. Éviter les valeurs intermédiaires comme 10px, 18px...

Règle

Même usage = même spacing. Un padding de card est toujours --ds-space-24.

Règle

Préférer gap à margin dans les layouts flex et grid, plus prévisible et sans effets de collapse.

Règle

Un composant ne gère que son espacement interne. L'espacement entre composants appartient au layout parent.