style(admin): reduce header height and simplify layout spacing and menu item focus styles
This commit is contained in:
+232
@@ -0,0 +1,232 @@
|
||||
# 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 220px │ Barre supérieure 48px │
|
||||
│ ├─────────────────────────── │
|
||||
│ Logo │ │
|
||||
│ │ Zone de contenu │
|
||||
│ Nav principale │ padding 28px / 32px │
|
||||
│ │ │
|
||||
│ ────────────── │ │
|
||||
│ Paramètres │ │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- **Sidebar** : fixe, 220px. 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.
|
||||
Reference in New Issue
Block a user