Spacing

Le spacing Sirdata organise la densite, les relations entre elements et le rythme des pages. Un espacement coherent rend les interfaces plus rapides a scanner, facilite la comparaison des donnees et limite les ecarts entre Figma, Astro et React.

Les valeurs primitives expriment une distance. Les tokens semantiques inline, stack et layout expriment une intention. Dans les composants et les pages, privilegier les tokens semantiques.

Principes

• Utiliser inline pour les espacements horizontaux et les paddings lateraux.
• Utiliser stack pour le rythme vertical entre contenus lies.
• Utiliser layout pour les sections, panneaux et grandes zones de page.
• Utiliser les tokens de composants quand une decision est propre a Button, Card, Modal ou Table.
• Eviter les valeurs locales qui ne correspondent pas a l’echelle Figma.

Primitive scale

L’echelle primitive est exprimee en pixels dans le nom du token et convertie en rem dans le CSS. Elle couvre les ajustements fins jusqu’aux espacements de grandes sections.

Space 2 --space-2

2px var(--space-2)

Separateur minimal ou ajustement technique.

Space 4 --space-4

4px var(--space-4)

Micro-gap entre icone et label compact.

Space 8 --space-8

8px var(--space-8)

Elements fortement lies, tags et controles denses.

Space 12 --space-12

12px var(--space-12)

Padding compact et gap standard dans un controle.

Space 14 --space-14

14px var(--space-14)

Padding inline standard des controles Sirdata.

Space 16 --space-16

16px var(--space-16)

Rythme courant entre contenus et padding de base.

Space 24 --space-24

24px var(--space-24)

Groupes de contenu, cartes et formulaires.

Space 32 --space-32

32px var(--space-32)

Separation forte entre groupes d'une meme section.

Space 40 --space-40

40px var(--space-40)

Respiration importante dans une page produit.

Space 48 --space-48

48px var(--space-48)

Sections et panneaux larges.

Space 64 --space-64

64px var(--space-64)

Rythme de layout desktop.

Space 80 --space-80

80px var(--space-80)

Grandes respirations marketing.

Space 96 --space-96

96px var(--space-96)

Separation maximale entre sections editoriales.

Echelle complete

Tokens	Valeurs
--space-2, --space-4, --space-5, --space-7	2px, 4px, 5px, 7px
--space-8, --space-9, --space-10, --space-11	8px, 9px, 10px, 11px
--space-12, --space-13, --space-14, --space-16, --space-18	12px, 13px, 14px, 16px, 18px
--space-20, --space-24, --space-28, --space-30	20px, 24px, 28px, 30px
--space-32, --space-40, --space-44, --space-48	32px, 40px, 44px, 48px
--space-64, --space-80, --space-84, --space-96	64px, 80px, 84px, 96px

Les valeurs intermediaires existent pour couvrir les exports Figma existants. Pour une nouvelle composition, commencer par les paliers principaux 4, 8, 12, 16, 24, 32, 48, 64 et 96.

Semantic spacing

Inline

Les tokens inline gerent les gaps horizontaux, les paddings lateraux et les relations entre icones, labels et actions.

Token	Primitive	Usage
--spacing-inline-xs	--space-4	Icones et micro-controles
--spacing-inline-sm	--space-8	Tags et boutons compacts
--spacing-inline-md	--space-14	Inputs et controles standard
--spacing-inline-lg	--space-16	Cellules de table et panneaux
--spacing-inline-20	--space-20	Boutons medium et controles intermediaires
--spacing-inline-xl	--space-24	Boutons larges et conteneurs
--spacing-inline-xxl	--space-32	Cards, modals, surfaces riches
--spacing-inline-3xl	--space-48	Grands panneaux et pages marketing

Stack

Les tokens stack organisent les contenus verticalement. Plus les elements sont lies, plus le token doit etre petit.

Token	Primitive	Usage
--spacing-stack-xs	--space-4	Label et aide courte
--spacing-stack-sm	--space-8	Elements d’un meme controle
--spacing-stack-md	--space-12	Champs de formulaire compacts
--spacing-stack-lg	--space-16	Groupes de contenu lies
--spacing-stack-xl	--space-24	Sections internes d’une card
--spacing-stack-xxl	--space-32	Groupes majeurs d’un panneau
--spacing-stack-3xl	--space-48	Sections de page

Layout

Les tokens layout sont reserves aux grandes structures. Ils ne doivent pas servir a corriger localement un composant.

Token	Primitive	Usage
--spacing-layout-xs	--space-16	Conteneur mobile compact
--spacing-layout-sm	--space-24	Header, sidebar et panneaux
--spacing-layout-md	--space-32	Sections produit
--spacing-layout-lg	--space-48	Sections larges et groupes de pages
--spacing-layout-xl	--space-64	Grandes respirations desktop

Responsive spacing

Le layout est mobile-first. Les tokens de conteneur changent avec la largeur disponible, tandis que les composants conservent leur echelle interne autant que possible.

Contexte	Padding X	Padding Y
Mobile	--spacing-inline-lg (16px)	--spacing-stack-lg (16px)
Tablet	--spacing-inline-xl (24px)	--spacing-stack-xl (24px)
Desktop	--spacing-inline-xxl (32px)	--spacing-stack-xl (24px)

Ne pas reduire automatiquement tous les espacements sur mobile. Une cible tactile, un input ou une modal doivent conserver une taille utilisable. Adapter d’abord les marges de layout et la disposition.

Component spacing

Les composants utilisent des alias dedies afin que leur densite puisse evoluer sans modifier les primitives.

Composant	Tokens principaux
Button	--button-*-padding-x, --button-*-padding-y, --button-*-gap
Input	--input-padding-x, --input-padding-y, --input-gap
Card	--card-padding-x, --card-padding-y
Modal	--modal-padding-x, --modal-padding-y, --modal-gap
Sidebar	--sidebar-padding-*, --sidebar-item-padding-*, --sidebar-gap
Table	--table-cell-padding-x, --table-row-height
Tag	--tag-*-padding-*, --tag-*-gap

Tokens CSS

:root {
  /* Primitives */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Semantics */
  --spacing-inline-md: var(--space-14);
  --spacing-inline-xl: var(--space-24);
  --spacing-stack-sm: var(--space-8);
  --spacing-stack-lg: var(--space-16);
  --spacing-layout-md: var(--space-32);

  /* Components */
  --button-medium-padding-x: var(--spacing-inline-20);
  --button-medium-padding-y: var(--spacing-stack-md);
  --input-padding-x: var(--spacing-inline-md);
  --input-padding-y: var(--spacing-stack-md);
  --card-padding-x: var(--spacing-inline-xxl);
  --card-padding-y: var(--spacing-stack-xxl);
}

Exemples d’usage

Dans un formulaire, utiliser un petit stack entre label, input et aide, puis un stack plus important entre deux groupes de champs.

Dans un tableau, utiliser un padding inline stable pour faciliter l’alignement des colonnes. La densite doit venir de la hauteur de ligne, pas d’une accumulation de valeurs arbitraires.

Dans une page marketing, utiliser les grands tokens layout pour donner du rythme entre les sections, tout en gardant des espacements plus resserres a l’interieur des preuves, listes et CTA.

Do / Don’t

Do	Don’t
Utiliser un token semantique selon la relation entre les elements.	Choisir une valeur uniquement parce qu’elle semble correcte visuellement.
Garder les petits espaces pour les contenus fortement lies.	Utiliser 48px entre un label et son input.
Utiliser les tokens composant pour Button, Input ou Card.	Reappliquer une primitive directement dans chaque implementation.
Adapter les marges de layout selon le viewport.	Compresser toutes les cibles interactives sur mobile.
Conserver un rythme coherent entre les sections.	Accumuler margins et paddings sur des conteneurs imbriques.

Accessibilite et densite

Cibles tactiles : le spacing participe directement a la taille des zones interactives. Les boutons, toggles et lignes actionnables doivent conserver une surface suffisante sur mobile comme sur desktop.

Lisibilite : un espacement trop faible peut fusionner visuellement des groupes qui ont des fonctions differentes. Un espacement trop grand peut casser la relation entre un label, une valeur et son aide.

Zoom et reflow : utiliser des valeurs en rem permet aux espacements de suivre les preferences utilisateur. Verifier les pages a 200 % de zoom et sans scroll horizontal inutile.

Densite SaaS : les interfaces operationnelles peuvent etre denses, mais la densite doit rester systematique. Reduire une echelle entiere ou choisir une variante compacte est preferable a des exceptions locales.