title: “Principes de Design pour Ingénieurs Logiciels : Le Guide Complet” description: “Maîtrisez les fondamentaux du design visuel pour créer de meilleures interfaces. Psychologie de la Gestalt, typographie, théorie des couleurs, systèmes d’espacement, principes d’animation et leçons de légendes du design comme Dieter Rams. Inclut des études de cas de 16 produits exceptionnels.” date: 2026-01-14 updated: 2026-01-17T13:30:00 author: Blake Crosley category: Design & Development tags: [Design, UI, UX, Typography, Color Theory, Gestalt, Animation, CSS, SwiftUI] url_slugs: - design-principles-software-engineers-complete-guide-2026 - visual-design-fundamentals-developers

Principes de Design pour les Ingénieurs Logiciels : Le Guide Complet

Mis à jour le 17 janvier 2026

Mise à jour janvier 2026 : Ce guide consolide les principes intemporels du design avec les patterns d’implémentation modernes pour le développement web et iOS. Il couvre la psychologie de la Gestalt, les systèmes typographiques, la théorie des couleurs, la hiérarchie visuelle, l’espacement et l’animation—plus les leçons de Dieter Rams. Consultez Études de Design pour des analyses approfondies de 16 produits exceptionnels.

J’ai passé des années à étudier le design tout en construisant des logiciels, absorbant les principes de légendes comme Dieter Rams et disséquant les interfaces de produits comme Linear, Stripe et Raycast. Ce guide distille cette compréhension dans la référence complète que j’aurais aimé avoir quand j’ai commencé à me soucier de l’apparence et du ressenti de mes logiciels.

Le design n’est pas de la décoration. C’est de la communication. Chaque pixel communique une fonction, une hiérarchie et un sens. La différence entre un logiciel qui paraît amateur et un logiciel qui paraît professionnel réside dans la compréhension de ces principes et leur application cohérente.

Ce guide suppose que vous savez déjà coder. Il vous apprend à voir—à comprendre pourquoi certaines interfaces semblent naturelles tandis que d’autres semblent chaotiques, et plus important encore, comment construire les premières.

Table des Matières

Partie 1 : Fondations

1. Psychologie de la Gestalt
2. Typographie
3. Théorie des Couleurs
4. Hiérarchie Visuelle
5. Espacement & Rythme
6. Principes d’Animation

Partie 2 : Philosophie du Design

1. Dieter Rams : Dix Principes

Partie 3 : Implémentation

1. Patterns Web 2025
2. Système de Design Tokens
3. Dark Mode Bien Fait
4. Workflows d’Extraction Figma

Partie 4 : Référence

1. Tableaux de Référence Rapide
2. Checklist Design
3. Études de Design

Psychologie de la Gestalt

« Le tout est autre chose que la somme de ses parties. » — Kurt Koffka

La psychologie de la Gestalt, développée dans l’Allemagne des années 1920, explique comment les humains perçoivent l’information visuelle. Le cerveau ne voit pas des pixels individuels—il organise les éléments en patterns significatifs. Maîtrisez ces principes pour contrôler comment les utilisateurs perçoivent vos interfaces.

Proximité

Les éléments proches les uns des autres sont perçus comme un groupe.

C’est le principe de la Gestalt le plus puissant en design UI. L’espace communique la relation plus que toute autre propriété visuelle.

INCORRECT (espacement égal = pas de groupement) :
┌─────────────────┐
│ Label           │
│                 │
│ Champ de saisie │
│                 │
│ Label           │
│                 │
│ Champ de saisie │
└─────────────────┘

CORRECT (espacement inégal = groupes clairs) :
┌─────────────────┐
│ Label           │
│ Champ de saisie │ ← Serré (4px) - liés
│                 │
│                 │ ← Large (24px) - séparation des groupes
│ Label           │
│ Champ de saisie │ ← Serré (4px) - liés
└─────────────────┘

Implémentation CSS :

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

Implémentation SwiftUI :

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similarité

Les éléments partageant des caractéristiques visuelles semblent liés.

Quand les éléments se ressemblent, les utilisateurs supposent qu’ils fonctionnent de la même manière. C’est pourquoi les design systems utilisent des styles de boutons, des traitements de cartes et une typographie cohérents.

Exemple de Navigation :
┌───────────────────────────────────┐
│ [Tableau de bord] [Projets] [Paramètres] │  ← Même style = même fonction
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Carte│  │Carte│  │Carte│         │  ← Même style = même type de contenu
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ Nouveau Projet]                │  ← Style différent = fonction différente
└───────────────────────────────────┘

Figure-Fond

Le contenu doit clairement se séparer de l’arrière-plan.

Le cerveau a besoin de distinguer la « figure » (ce sur quoi se concentrer) du « fond » (l’arrière-plan). Les mauvaises relations figure-fond créent une confusion visuelle.

Techniques : - Contraste (figure claire sur fond sombre, ou vice versa) - Ombres (élever la figure au-dessus du fond) - Bordures (délimiter les bords de la figure) - Flou (flouter l’arrière-plan, affiner la figure)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Région Commune

Les éléments dans une limite sont perçus comme groupés.

Enfermer des éléments dans un conteneur visuel (carte, boîte, zone bordée) signale qu’ils appartiennent ensemble.

Continuité

L’œil suit les chemins, les lignes et les courbes.

Utilisez l’alignement et le flux visuel pour guider l’attention à travers votre interface.

CONTINUITÉ DANS L'ALIGNEMENT :
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alignés sur l'axe horizontal
├────────────────────────────────┤
│                                │
│ Titre                          │
│ ─────────────────────────────  │  ← L'œil suit le bord gauche
│ Le texte du paragraphe continue│
│ le long du même bord gauche    │
│                                │
│ [Action Principale]            │  ← Toujours sur le bord gauche
└────────────────────────────────┘

Fermeture

Le cerveau complète les formes incomplètes.

Les utilisateurs n’ont pas besoin de voir chaque pixel dessiné—ils complèteront mentalement les formes familières. Cela permet des designs plus minimaux et élégants.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Référence Rapide de la Gestalt

Typographie

« La typographie est l’art de donner au langage humain une forme visuelle durable. » — Robert Bringhurst

La typographie est le fondement du design d’interface. Le texte communique la fonctionnalité, la hiérarchie et la marque. Une mauvaise typographie rend les interfaces plus difficiles à utiliser ; une excellente typographie est invisible—elle fonctionne tout simplement.

Échelle Typographique

Une échelle cohérente crée une harmonie visuelle. Utilisez un ratio mathématique.

L’Échelle 1.25 (Recommandée pour l’UI) :

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Hauteur de Ligne (Interlignage)

La hauteur de ligne affecte dramatiquement la lisibilité. Différents contenus nécessitent différents interlignages.

Longueur de Ligne (Justesse)

La longueur de ligne optimale prévient la fatigue oculaire et améliore la compréhension de lecture.

• Optimale : 45-75 caractères par ligne
• Cible : 50-65 caractères
• Maximum absolu : 85 caractères

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Sélection des Polices

Les polices système d’abord. Elles se chargent instantanément, correspondent à la plateforme et sont optimisées pour les écrans.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Utilisez des polices personnalisées pour : - La différenciation de marque (sites marketing) - Un ressenti éditorial/publication - Une intention de design spécifique non atteignable avec les polices système

Graisse de Police pour la Hiérarchie

Utilisez la graisse pour établir la hiérarchie, pas seulement la taille.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Référence Rapide de Typographie

Théorie des couleurs

« La couleur est une puissance qui influence directement l’âme. » — Wassily Kandinsky

La couleur communique plus vite que les mots. Elle établit l’ambiance, guide l’attention, signale le sens et construit la reconnaissance de marque.

La règle 60-30-10

La distribution de couleurs la plus fiable pour des interfaces équilibrées.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominant (Background)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secondary (Cards, sections)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Accent (Buttons, links)
└──────────────────────────────────────────┘

Construire une palette de couleurs

Chaque interface a besoin de ces couleurs sémantiques :

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psychologie des couleurs

Contraste et accessibilité

Outils : WebAIM Contrast Checker, sélecteur de couleurs Chrome DevTools

Hiérarchie visuelle

« Le design est l’ambassadeur silencieux de votre marque. » — Paul Rand

La hiérarchie visuelle contrôle ce que les utilisateurs voient en premier, en deuxième et en troisième. Sans hiérarchie claire, les utilisateurs doivent faire un effort pour trouver l’information. Avec elle, les interfaces semblent naturelles.

Les six outils de la hiérarchie

1. Taille — Les éléments plus grands attirent l’attention en premier

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Graisse — Le gras ressort, le léger s’efface

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Couleur et contraste — Contraste élevé = attention

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Position — Les positions clés comptent

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espace blanc — L’isolation crée l’importance

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profondeur et élévation — Les éléments qui ressortent demandent de l’attention

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

Le test du plissement des yeux

Plissez les yeux devant votre design. Pouvez-vous encore voir la hiérarchie ? Si oui, elle est efficace.

Espacement et rythme

« L’espace blanc est comme l’air : il est nécessaire pour que le design respire. » — Wojciech Zieliński

L’espacement est la structure invisible du design. Un espacement cohérent crée un rythme visuel — le sentiment que les éléments appartiennent ensemble dans un système cohérent.

La grille de 8px

La grille de 8px est le standard de l’industrie parce que : - Elle se divise uniformément (8, 16, 24, 32, 40, 48…) - Elle fonctionne avec les densités d’écran courantes (1x, 1.5x, 2x, 3x) - Elle crée un rythme cohérent sans calculs

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Espacement interne vs externe

Interne (padding) : Espace à l’intérieur d’un élément Externe (margin) : Espace entre les éléments

Règle : L’espacement interne devrait généralement être plus grand que l’espacement externe au sein de groupes liés.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Modèles d’espacement des composants

Cartes :

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Boutons :

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formulaires :

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Référence rapide des espacements

Principes d’animation

« L’animation n’est pas l’art des dessins qui bougent mais l’art des mouvements qui sont dessinés. » — Norman McLaren

L’animation donne vie aux interfaces. Bien réalisée, elle guide l’attention, communique l’état et crée une connexion émotionnelle. Mal réalisée, elle frustre et distrait.

Le principe fondamental

L’animation doit sembler inévitable, pas décorative.

Une bonne animation : 1. Communique quelque chose que le design statique ne peut pas 2. Réduit la charge cognitive en montrant les relations 3. Semble naturelle et attendue 4. Disparaît de la conscience

Une mauvaise animation : 1. Existe uniquement parce que « ça a l’air cool » 2. Ralentit l’utilisateur 3. Attire l’attention sur elle-même 4. Crée de l’anxiété ou de l’impatience

Principes clés pour l’UI

1. Anticipation — Préparez les utilisateurs à ce qui va arriver.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Prolongement — Laissez le mouvement se terminer naturellement avec un effet ressort.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Rien dans la nature ne bouge à vitesse constante.

4. Mise en scène — Dirigez l’attention vers ce qui compte. Une seule chose devrait bouger à la fois, sauf si chorégraphiée en groupe.

5. Échelonnement — Les éléments devraient arriver en séquence, pas tous en même temps.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Recommandations de durée

Performance : la règle d’or

N’animez que transform et opacity — ils sont accélérés par le GPU et ne déclenchent pas de recalcul de mise en page.

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Quand NE PAS animer

1. L’utilisateur a activé prefers-reduced-motion css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. L’animation n’apporte aucune information — spinners gratuits, éléments rebondissants

3. Les utilisateurs sont pressés — états d’erreur, validation de formulaire, résultats de recherche
4. L’animation ralentirait des actions répétées — les raccourcis clavier devraient contourner l’animation

Référence rapide d’animation

:root {
  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Dieter Rams : Dix principes

« Moins, mais mieux. » — Dieter Rams

Dieter Rams est le designer industriel le plus influent du 20e siècle. En tant que directeur du design chez Braun de 1961 à 1995, il a créé des produits qui restent intemporels des décennies plus tard. Son travail a directement inspiré le langage de design d’Apple.

Les dix principes du bon design

1. Un bon design est innovant Ne copiez pas. Associez la technologie avancée à un design innovant.

2. Un bon design rend un produit utile Chaque élément doit servir un objectif. La forme suit la fonction.

3. Un bon design est esthétique La beauté n’est pas superficielle — elle est essentielle. Les produits que nous utilisons quotidiennement affectent notre bien-être.

4. Un bon design rend un produit compréhensible Les utilisateurs ne devraient pas avoir besoin d’instructions. L’interface s’enseigne elle-même.

5. Un bon design est discret Le design doit soutenir, pas submerger. Le contenu de l’utilisateur est la star, pas votre UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. Un bon design est honnête N’utilisez pas de dark patterns. Ne survendez pas. Soyez transparent sur les limitations.

7. Un bon design est durable Évitez les tendances qui dateront rapidement. Classique plutôt que tendance.

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

8. Un bon design est minutieux jusqu’au dernier détail Rien ne doit être arbitraire. États de chargement, états vides, états d’erreur — tout est designé.

9. Un bon design est respectueux de l’environnement La performance est environnementale. Respectez l’attention de l’utilisateur. Code efficace.

10. Un bon design est aussi peu de design que possible Supprimez tout ce qui n’est pas nécessaire. Le meilleur design est invisible.

Modèles Web 2025

Le design web moderne exploite les capacités CSS natives qui éliminent le besoin de JavaScript dans de nombreux cas.

Container Queries

Dimensionnez les composants en fonction de leur conteneur, pas de la fenêtre d’affichage.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

Le Sélecteur :has()

Sélection du parent basée sur les enfants — auparavant impossible sans JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

CSS Nesting

Imbrication native sans préprocesseurs.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Intégration HTMX

Interactivité pilotée par le serveur sans frameworks JavaScript lourds.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Système de Design Tokens

Un système de tokens complet pour la cohérence à travers votre application.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Le Mode Sombre Bien Fait

N’inversez pas simplement — reconcevoir pour les contextes sombres.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Principes du mode sombre : - Réduire la saturation sur les grandes surfaces - Augmenter la luminosité des couleurs d’accent - Renforcer les ombres (elles nécessitent plus de contraste) - Concevoir le mode sombre intentionnellement, pas après coup

Flux de Travail d’Extraction Figma

Transformer les fichiers de design en code de production nécessite une extraction systématique des design tokens — couleurs, typographie, espacement et effets qui définissent votre langage visuel.

Export des Variables Figma

La fonctionnalité native Variables de Figma offre le chemin d’extraction le plus propre :

Étapes d’Export : 1. Ouvrir le fichier Figma → panneau Local Variables 2. Cliquer sur le menu de la collection → “Export to JSON” 3. Enregistrer sous figma-variables.json

Structure JSON des Tokens :

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformation Token vers CSS

Propriétés Personnalisées CSS :

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens Mode Sombre :

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformation Token vers SwiftUI

Extension Color :

import SwiftUI

extension Color {
    // MARK: - Primitive Colors
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Standard hex parsing implementation
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes d’Espacement :

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Usage
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Checklist de Transmission Designer

Ce que les Designers Doivent Exporter :

Critères de Validation Qualité :

• [ ] Toutes les couleurs définies comme variables (pas de hex codé en dur)
• [ ] La typographie utilise des styles de texte définis
• [ ] L’espacement suit le système de grille (base 8px)
• [ ] Variantes mode sombre fournies
• [ ] États interactifs documentés (hover, actif, désactivé)
• [ ] Points de rupture responsive annotés
• [ ] Exigences d’accessibilité notées (ratios de contraste)

Le Développeur Reçoit :

1. Fichiers de tokens (JSON/CSS/Swift selon la plateforme)
2. Spécifications des composants avec mesures
3. Exports d’assets aux formats requis
4. Documentation des interactions (états, animations)
5. Annotations d’accessibilité

Tableaux de Référence Rapide

Principes de Gestalt

Typographie

Rôles des Couleurs

Échelle d’Espacement

Checklist de Design

Avant de livrer toute interface, vérifiez :

Gestalt

• [ ] Les éléments liés sont plus proches que les éléments non liés (Proximité)
• [ ] Les fonctions similaires ont des styles similaires (Similarité)
• [ ] Séparation claire entre premier plan et arrière-plan (Figure-Fond)
• [ ] L’œil parcourt naturellement la mise en page (Continuité)

Typographie

• [ ] La taille de police de base est d’au moins 16px
• [ ] La hauteur de ligne est de 1.5+ pour le corps de texte
• [ ] La longueur de ligne est inférieure à 75 caractères
• [ ] La hiérarchie est claire (3 niveaux distinguables)
• [ ] Échelle cohérente utilisée partout

Couleur

• [ ] Tout le texte passe le contraste 4.5:1 (WCAG AA)
• [ ] La couleur n’est pas le seul indicateur (icônes/labels aussi)
• [ ] Mode sombre conçu intentionnellement
• [ ] Distribution 60-30-10 respectée

Hiérarchie Visuelle

• [ ] Peut identifier l’élément n°1 le plus important
• [ ] L’œil suit l’ordre prévu
• [ ] Un CTA clair par section
• [ ] Échelle typographique cohérente

Espacement

• [ ] Tout l’espacement utilise une échelle définie (pas de nombres magiques)
• [ ] Les cartes/composants ont un padding cohérent
• [ ] L’espacement mobile est confortable
• [ ] L’alignement de grille est cohérent (base 8px)

Test Dieter Rams

• [ ] Quelque chose peut-il être supprimé ?
• [ ] Chaque élément sert-il une fonction ?
• [ ] Ceci semblerait-il daté dans 5 ans ?
• [ ] Ai-je conçu chaque état ?

Ressources

Livres : - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Outils : - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gestion des design tokens

Systèmes de design : - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Études de design

Analyses approfondies de 16 produits exceptionnels, documentant les patterns et principes à adopter.

Outils pour développeurs

iOS natif (lauréats Apple Design Award)

Productivité & IA

Ce guide évolue par la pratique. Les principes de design sont intemporels, mais leur application évolue avec la technologie et la compréhension.