# 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.