Espacement & Grille — Swellr Charte Graphique

1. Principe du système 4px

Toutes les valeurs d'espacement sont des multiples de 4px. Ce système garantit la cohérence visuelle, facilite les calculs et s'adapte naturellement aux grilles et densités d'écran.

4

Base universelle

L'unité de base est 4px. Tout espacement dans l'interface est un multiple entier de cette valeur : 4, 8, 12, 16, 24, 32, 48, 64, 80, 96px.

rem

Unités relatives

Les tokens CSS utilisent les rem (root em) pour garantir l'accessibilité : si l'utilisateur agrandit la police système, les espacements s'adaptent proportionnellement.

⊞

Tokens nommés

Chaque valeur est un token CSS nommé (--space-4, --space-8…) référençant une variable CSS dans style.css. Ne jamais coder les valeurs en dur.

Règle graduée — Multiples de 4px

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

Unité 4px (base)

Multiples principaux

Progression de l'échelle

2. Échelle d'espacement complète

13 tokens d'espacement couvrent tous les cas d'usage, du micro-espacement (2px) aux marges de section larges (96px).

Token CSS

Représentation visuelle

Valeur px

Valeur rem

Usage typique

--space-0-5

2px

0.125rem

Micro-espace, séparateur fin, outline offset

--space-1

4px

0.25rem

Espace de base, gap entre icône et label, dot

--space-2

8px

0.5rem

XS — Padding interne de chip, gap entre badges

--space-3

12px

0.75rem

SM — Padding compact, gap items de liste

--space-4

16px

1rem

MD — Padding standard card, gap grille mobile, padding input

--space-5

20px

1.25rem

LG — Gap entre composants, padding nav card

--space-6

24px

1.5rem

XL — Gutter grille landing, padding card standard

--space-8

32px

2rem

2XL — Margin entre sections, padding de footer

--space-10

40px

2.5rem

3XL — Padding vertical de section, espacement header

--space-12

48px

3rem

4XL — Padding horizontal de contenu, gap hero

--space-16

64px

4rem

5XL — Margin bottom de section, espacement landing

--space-20

80px

5rem

6XL — Padding section hero, grandes sections landing

--space-24

96px

6rem

7XL — Marges de page, espacement maximal

3. Border Radius

10 niveaux de radius définissent le langage de forme des composants Swellr — des micro-éléments au plein arrondi des pills et avatars.

--radius-xs

2px

Micro éléments, tooltips, indicateurs discrets

--radius-sm

4px

Tags, chips compactes, badges de statut

--radius-md

8px

Inputs, boutons secondaires, menus

--radius-base

10px

Cartes compactes, éléments de liste

--radius-lg

14px

Boutons principaux, CTA primaires

--radius-xl

16px

Cartes standard, panels, containers

--radius-2xl

24px

Modals, bottom sheets, drawers

--radius-3xl

32px

Grandes cartes, hero sections mobiles

--radius-4xl

40px

Éléments XL, écrans onboarding

--radius-full

9999px

Pills, avatars, boutons ronds, chips

4. Ombres (Shadows)

6 niveaux d'ombre créent la hiérarchie de profondeur dans l'interface, du composant plat à l'élément en spotlight.

shadow-xs

--shadow-xs

0 1px 2px rgba(0,0,0,0.06)

Carte basique, élément discret légèrement surélevé

shadow-sm

--shadow-sm

0 1px 3px rgba(0,0,0,0.10),
0 1px 2px -1px rgba(0,0,0,0.10)

Carte légèrement élevée, container secondaire

shadow-md

--shadow-md

0 4px 6px rgba(0,0,0,0.07),
0 10px 15px rgba(0,0,0,0.10)

Modale, dropdown, floating element

shadow-lg

--shadow-lg

0 8px 10px rgba(0,0,0,0.07),
0 20px 25px rgba(0,0,0,0.10)

Popup, bottom sheet, dialog plein écran

shadow-xl

--shadow-xl

0 32px 128px rgba(7,55,66,0.15)

Focus ring, spotlight, états de mise en avant

shadow-card

--shadow-card

0 8px 40px rgba(7,55,66,0.08),
0 0 0 1px rgba(2,132,144,0.06)

Carte spéciale Swellr — teinté teal, effet premium

5. Grille Landing Page

La landing page utilise une grille 12 colonnes avec des gouttières de 24px et un container maximum de 1237px, adapté aux écrans desktop.

Spécifications landing : 12 colonnes · Gutter 24px · Container max-width 1237px · Padding latéral 48px (desktop)

Conteneur — max-width : 1237px

12 colonnes — Full width (hero, images full-bleed)

8 / 12 colonnes — Contenu principal centré (article, features)

6 / 12 colonnes — Deux colonnes égales (features, comparaison)

4 / 12 colonnes — Trois colonnes (cards features, équipe)

3 / 12 colonnes — Quatre colonnes (stats, icônes, logos partenaires)

Spécifications techniques

Container max-width

1237px

Nombre de colonnes

12

Gouttière (gutter)

24px

Padding latéral desktop

48px (--space-12)

Alignement

centré (margin: 0 auto)

Code CSS

.container {
  max-width: 1237px;
  margin: 0 auto;
  padding: 0 48px;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

6. Grille App Mobile

L'application mobile utilise un écran de référence de 393px (iPhone 14 Pro) avec 16px de padding, 4 colonnes et des gouttières de 8px.

16px

1 colonne (full)

2 colonnes

4 colonnes

🗺

Carte

🌤

Météo

🔍

Spots

👤

Profil

Écran de référence : iPhone 14 Pro — 393 x 852px · @3x · 460 PPI

Largeur container

393px (référence iPhone 14 Pro)

Padding latéral

16px (--space-4) de chaque côté

Gouttière (gap)

8px (--space-2) entre colonnes

Colonnes maximales

4 colonnes (layout dense, bottom nav)

Bottom nav height

80px (avec safe area iOS)

Status bar

54px (Dynamic Island / notch)

Largeur utile max

393 - 32 = 361px

Largeur 1 colonne (4col)

(361 - 24) / 4 = ~84px

.screen {
  padding: 0 16px; /* --space-4 */
  max-width: 393px;
}

.grid-4-mobile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; /* --space-2 */
}

7. Breakpoints

4 breakpoints définissent les seuils de réactivité du design, du téléphone paysage aux grands écrans desktop.

Plage des viewports

Mobile

Phone Land.

Tablet

Desktop

Large

480px

768px

1024px

1280px

📱

Small — Phone Landscape

Smartphones en mode paysage, petites tablettes 7"

480px

4 col / 8px gap

@media (min-width: 480px)

📲

Medium — Tablet

Tablettes iPad (portrait / paysage), Surface Go

768px

8 col / 16px gap

@media (min-width: 768px)

💻

Large — Desktop

Laptops, écrans 13-15", MacBook Pro

1024px

12 col / 24px gap

@media (min-width: 1024px)

🖥

XLarge — Large Desktop

Grands écrans, moniteurs 27"+, TV 4K

1280px

12 col / 24px gap

@media (min-width: 1280px)

Breakpoint	Min-width	Colonnes	Gutter	Padding conteneur	Cas d'usage
XS — Mobile	0px (défaut)	4	8px	16px (--space-4)	App mobile, portrait smartphone
SM — 480px	480px	4–6	12px	24px (--space-6)	Phone landscape, petites tablettes
MD — 768px	768px	8	16px	32px (--space-8)	Tablettes iPad, navigation hybride
LG — 1024px	1024px	12	24px	48px (--space-12)	Desktop, landing page principale
XL — 1280px	1280px	12	24px	auto (container centré)	Grands écrans, container max 1237px

Mobile First : Le design Swellr suit l'approche mobile-first. Les styles de base sont définis pour mobile (0px), puis enrichis via des min-width media queries. Ne jamais utiliser max-width pour les breakpoints principaux.