MUZISYSTEM - Design System AVNIR

Philosophie

AVNIR-Studio utilise une échelle d'espacement sémantique, répartie en trois familles selon l'intention : --gap-*pour l'espace entre les éléments, --margin-*pour l'espace autour, et --padding-* pour l'espace intérieur.

Toujours utiliser ces tokens plutôt que des valeurs en dur, pour garantir un rythme visuel cohérent. Les anciens tokens --space-* sont supprimés.

Échelle Gap

Espace entre éléments (--gap-*)

--gap-2xs

2px

Minuscule — icônes serrées, hairlines

--gap-xs

4px

Petit — boutons, badges, chips

--gap-sm

8px

Compact — champs de formulaire, listes

--gap-md

16px

Standard — cartes, espacements par défaut

--gap-lg

24px

Large — séparation de composants

--gap-xl

32px

Extra — sections majeures

Marges & Paddings

Espace autour (--margin-*) et intérieur (--padding-*)

Padding (intérieur)

--padding-xs — 4px · boutons, badges
--padding-sm — 8px · inputs, petites cartes
--padding-md — 16px · cartes, modales
--padding-lg — 24px · grandes cartes
--padding-xl — 32px · conteneurs de page
--padding-2xl — 48px · sections

Margin (autour)

--margin-sm — 8px · éléments serrés
--margin-md — 16px · espacement standard
--margin-lg — 32px · séparation de blocs
--margin-xl — 48px · sections majeures

Layout

--padding-container — 64px · gouttières de page
--padding-section-sm…xl — 32→128px · sections

Exemples

Comment utiliser les tokens d'espacement

/* CSS */
.card {
  padding: var(--padding-md);
  margin-bottom: var(--margin-md);
  gap: var(--gap-sm);
}

/* React/JSX */
<div style={{
  padding: 'var(--padding-md)',
  marginBottom: 'var(--margin-md)',
  gap: 'var(--gap-sm)'
}}>
  Content
</div>

Bonnes pratiques

Choisir la bonne famille— gap entre éléments, margin autour, padding à l'intérieur
Toujours des tokens — jamais de valeurs en dur
Rester cohérent — mêmes valeurs pour des éléments similaires
Suivre l'échelle — ne pas inventer de valeurs hors échelle
Hiérarchie visuelle— plus d'espace pour séparer les sections majeures

Spacing System