Design System
⚓ Berth — Design System
Section titled “⚓ Berth — Design System”Produit : Berth — Gestion de conteneurs Docker Identité : Fraîche, technologique et fiable (Mint & Slate)
1. Principes Directeurs
Section titled “1. Principes Directeurs”1.1 Univers de Marque
Section titled “1.1 Univers de Marque”Berth évoque le poste d’amarrage : un endroit stable où les ressources sont organisées et surveillées. L’identité visuelle délaisse le bleu marine traditionnel pour un vert menthe (“Mint”) apportant clarté et modernité. Les références maritimes restent discrètes et professionnelles.
1.2 Principes fondamentaux
Section titled “1.2 Principes fondamentaux”| Principe | Définition |
|---|---|
| Clarté avant décoration | Chaque couleur doit aider à comprendre l’état ou l’action. |
| Mint en accent | Utilisé comme repère de marque et d’interaction, pas comme fond omniprésent. |
| Un état = une convention | Les couleurs de statut sont constantes dans toute l’application. |
| Surfaces ancrées | Cartes et panneaux structurés avec une bordure fine et une élévation mesurée. |
2. Palette de Couleurs
Section titled “2. Palette de Couleurs”2.1 Couleurs de Marque
Section titled “2.1 Couleurs de Marque”- Mint (Primaire) :
#6EE7B7(Accent principal, Logo) - Mint accessible :
#16866A(Boutons primaires, Liens) - Slate (Secondaire) :
#17262E(Texte principal sombre, CTA secondaires)
2.2 Couleurs Sémantiques (Statuts)
Section titled “2.2 Couleurs Sémantiques (Statuts)”- Success (Running) :
#15803D(Vert) - Warning (Paused) :
#B45309(Ambre) - Error (Stopped/Critical) :
#C2413A(Rouge)
3. Typographie
Section titled “3. Typographie”- Titres (Headings) : Poppins (ExtraBold pour un aspect géométrique et robuste)
- Interface & Corps : Inter (Maximise la lisibilité des données et des tableaux)
- Logs & Code : JetBrains Mono (Clarté absolue pour le terminal)
4. Composants UI
Section titled “4. Composants UI”4.1 Boutons
Section titled “4.1 Boutons”- Primary : Fond
Mint 700, texte blanc. - Secondary : Fond
Slate 900, texte blanc. - Ghost : Transparent, texte
Slate 700, hoverMint 50.
4.2 Formes & Radius
Section titled “4.2 Formes & Radius”- 6px : Tags compacts.
- 8px : Inputs, boutons, tableaux.
- 12px : Cartes et panneaux principaux.
5. Mode Sombre (Dark Mode)
Section titled “5. Mode Sombre (Dark Mode)”Le mode sombre est le standard opérationnel de Berth. Il utilise des surfaces slate très foncées (#0E181B) avec des accents Mint plus lumineux (#51E6B0) pour conserver une lisibilité optimale en environnement de monitoring.