8.6 KiB
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.