# ZEN — Design Language

Document de référence visuelle. Décrit l'apparence, le ressenti et les règles visuelles du produit. Valable pour toute reproduction, quelle que soit la technologie.

---

## Philosophie

ZEN est un outil de travail. Pas un produit marketing. L'interface disparaît pour laisser place au contenu.

**Un seul principe directeur : ne jamais ajouter un élément sans raison.**

Chaque couleur, bordure, espace ou texte supplémentaire doit justifier sa présence. Le doute se résout toujours en faveur de la suppression.

---

## Palette

### Base

Le produit est **noir et blanc**. Pas de couleurs de marque, pas de teintes bleues ou violettes dans les fonds. Le fond est blanc pur. Le texte est presque noir.

| Rôle | Clair | Sombre |
|---|---|---|
| Fond de page | `#ffffff` | `#0c0c0b` |
| Fond hover | `#f5f5f4` | `#161614` |
| Fond actif / sélectionné | `#ebebea` | `#1f1f1d` |
| Bordure standard | `#e4e4e2` | `#272724` |
| Bordure forte | `#c8c8c4` | `#3a3a36` |
| Texte principal | `#0c0c0b` | `#f0f0ed` |
| Texte secondaire | `#6b6b68` | `#6b6b68` |
| Texte discret | `#a3a39e` | `#3d3d3a` |

### Accents sémantiques

Quatre couleurs uniquement. Utilisées **avec grande parcimonie** — pour les statuts, les alertes, les deltas. Jamais comme couleur décorative. Jamais sur un fond.

| Couleur | Usage |
|---|---|
| **Bleu** | Information, liens, action principale |
| **Vert** | Succès, actif, delta positif |
| **Ambre** | Avertissement, en attente, brouillon |
| **Rouge** | Erreur, danger, suppression, delta négatif |

Chaque couleur existe en trois déclinaisons : la couleur elle-même (pour le texte), un fond très pâle, et une bordure légère. Ces trois valeurs forment toujours un ensemble — on ne mélange pas les déclinaisons de couleurs différentes.

### Ce qu'on n'utilise pas

- Dégradés
- Couleurs de fond dans la sidebar ou les sections (sauf hover/actif)
- Couleurs de marque personnalisées
- Transparence et flou (sauf l'overlay des modales)

---

## Typographie

**Police unique : IBM Plex Sans.** Pour les codes, IDs, montants et dates : IBM Plex Mono.

### Hiérarchie

| Rôle | Taille | Graisse | Notes |
|---|---|---|---|
| Titre de page | 20px | 600 | Lettre-espacement -0.01em |
| Titre de section | 16–20px | 600 | |
| Corps de texte | 14px | 400 | |
| Texte secondaire | 13px | 400 | Dans les tableaux, les listes |
| Labels / captions | 12px | 400–500 | |
| Labels colonnes | 11px | 500 | Uppercase, lettre-espacement +0.04em |
| Codes / IDs / montants | 11–13px | 400 | IBM Plex Mono |

**Taille minimale : 11px.** En dessous, on ne descend pas.

### Règles d'écriture

- **Sentence case partout.** "Tableau de bord", pas "TABLEAU DE BORD".
- Seule exception : les en-têtes de colonnes de tableau, en majuscules petits.
- Texte court et direct. Pas de phrase là où un mot suffit.
- Les montants financiers, les dates ISO et les identifiants sont toujours en monospace.

---

## Espace

Base : **4px**. Tout espacement est un multiple de 4.

| Valeur | Usage typique |
|---|---|
| 4px | Espacement interne minimal (gap entre icône et texte) |
| 8px | Padding compact, gap entre éléments proches |
| 12px | Padding interne des petits composants |
| 16px | Padding standard des cartes et panneaux |
| 24px | Espacement entre sections |
| 32px | Padding latéral du contenu principal |
| 48–64px | Espacement entre blocs majeurs |

La densité est **moyenne**. Pas étouffant, pas aéré. Un admin est un outil qu'on utilise plusieurs heures par jour — la densité confortable prime sur l'esthétique aérée.

---

## Formes et bordures

### Rayon de bordure

| Contexte | Rayon |
|---|---|
| Badges, étiquettes, petits éléments | 8px |
| Boutons, champs de saisie, cartes | 12px |
| Modales, panneaux flottants importants | 16px |
| Avatars, indicateurs ronds | Cercle complet |

**12px est le rayon standard.** On ne mélange pas les rayons dans un même composant.

### Bordures

Toutes les séparations sont des **bordures 1px solid**. Pas d'ombres sur les cartes et surfaces statiques. Pas de lignes de 2px ou plus.

Les ombres existent uniquement pour les éléments qui **flottent au-dessus** de l'interface : menus déroulants, modales, toasts. Elles sont discrètes — juste assez pour indiquer la profondeur.

---

## Structure de la page

```
┌─────────────────────────────────────────────┐
│ Sidebar 230px    │ Barre supérieure 48px      │
│                  ├─────────────────────────── │
│  Logo            │                            │
│                  │   Zone de contenu          │
│  Nav principale  │   padding 28px / 32px      │
│                  │                            │
│  ──────────────  │                            │
│  Paramètres      │                            │
└─────────────────────────────────────────────┘
```

- **Sidebar** : fixe, 230px. Fond blanc (`#ffffff`). Séparée par une bordure droite.
- **Barre supérieure** : fixe, 48px. Fond blanc. Fil d'Ariane à gauche, utilisateur à droite.
- **Contenu** : gris très pâle (`#fafafa` / `neutral-50`). Les cartes et tableaux ont un fond blanc, ce qui crée naturellement la séparation visuelle sans avoir besoin de bordures de section.

---

## Navigation sidebar

- Les items inactifs sont en texte secondaire (`#6b6b68`).
- Au survol : fond légèrement grisé, texte principal.
- L'item actif : fond légèrement grisé plus prononcé, texte principal gras.
- Les icônes sont toujours à gauche du texte. Taille 15×15px.
- Les sous-menus se révèlent par accordéon (chevron qui tourne).
- Rayon des items : 8px.
- Padding interne : 7px vertical, 10px horizontal.

---

## Boutons

Quatre variantes seulement :

| Variante | Apparence | Usage |
|---|---|---|
| **Primaire** | Fond noir, texte blanc | Action principale de la page |
| **Secondaire** | Fond transparent, bordure, texte sombre | Actions secondaires, annulation |
| **Fantôme** | Fond transparent, pas de bordure, texte sombre | Actions tertiaires |
| **Danger** | Fond rouge très pâle, texte rouge, bordure rouge pâle | Suppression uniquement |

**Taille standard : petite.** Padding 6px vertical / 12px horizontal, texte 12px.  
Il ne doit jamais y avoir plus d'un bouton primaire par section ou en-tête de page.

---

## Cartes et panneaux

- Fond blanc.
- Bordure 1px.
- Rayon 12px.
- Padding interne 16–20px.
- **Pas d'ombre.**
- En-tête interne séparé du contenu par une bordure horizontale.
- Pied de panneau (actions de formulaire) séparé par une bordure horizontale.

---

## Tableaux

- En-têtes de colonnes : texte 11px uppercase, couleur secondaire.
- Lignes : fond blanc. Hover : fond légèrement grisé.
- Bordure horizontale entre chaque ligne. Pas de bordure sur la dernière ligne.
- Données numériques, IDs, dates : IBM Plex Mono.
- Actions (modifier, supprimer) : à l'extrême droite, boutons icône discrets.
- Pas de fond alterné sur les lignes.

---

## Badges de statut

Petits éléments inline qui indiquent un état. Toujours composés de trois éléments : fond pâle de la couleur sémantique, bordure légère, texte de la couleur sémantique.

Les statuts "vivants" (actif, en attente, en retard) ont un point coloré à gauche du texte.  
Les statuts terminaux (archivé, publié) n'ont pas de point.

Rayon : 8px. Taille du texte : 11px.

---

## États interactifs

| État | Apparence |
|---|---|
| Hover | Fond légèrement plus sombre (4–5% de gris) |
| Actif / focus | Bordure de 1px devient la couleur du texte principal |
| Désactivé | Opacité 50%, curseur interdit |
| Chargement | Pas défini — à traiter au cas par cas |

Toutes les transitions durent **120ms**, courbe `ease-out`. Aucune animation décorative.

---

## Ce qu'on n'utilise jamais

- Dégradés de couleur sur les fonds ou les boutons
- Cartes avec une bordure colorée uniquement sur le côté gauche
- Ombres internes
- Texte en gras uniquement pour l'emphase décorative
- Icônes sans fonction claire
- Statistiques ou chiffres inventés pour remplir l'espace
- Couleurs de fond dans les sections de contenu

---

## Thème sombre

Le thème sombre est une inversion calibrée : les fonds passent au quasi-noir, les textes s'éclaircissent, les accents gagnent légèrement en luminosité pour rester lisibles. La structure, les espaces et les proportions restent identiques. Détection automatique via la préférence système — pas de toggle manuel.
