Branding & Style Guide
Color Palette
Dark Mode (Principal)
| Color Type |
Hex Code |
Usage |
| Background |
#0F172A |
Fond principal (slate-900) |
| Foreground |
#F8FAFC |
Texte principal |
| Card |
#1E293B |
Fond cartes (slate-800) |
| Primary |
#60A5FA |
Actions principales (blue-400) |
| Secondary |
#94A3B8 |
Texte secondaire (slate-400) |
| Accent |
#A78BFA |
Highlights (violet-400) |
| Border |
#475569 |
Bordures (slate-600) |
Semantic Colors
| Color Type |
Hex |
Usage |
| Success |
#4ADE80 |
Confirmations, complété |
| Warning |
#FBBF24 |
Alertes |
| Error |
#F87171 |
Erreurs |
| Info |
#60A5FA |
Informations |
Typography
| Element |
Size |
Weight |
Line Height |
| H1 |
32px |
700 |
1.2 |
| H2 |
24px |
600 |
1.3 |
| H3 |
20px |
600 |
1.4 |
| Body |
14px |
400 |
1.5 |
| Small |
12px |
400 |
1.4 |
Font: Inter (system-ui fallback)
Iconography
Library: Lucide Icons
| Context |
Size |
| Navigation |
20px |
| Buttons |
16px |
| Inline |
14px |
Spacing Scale (base 4px)
| Token |
Value |
space-1 |
4px |
space-2 |
8px |
space-3 |
12px |
space-4 |
16px |
space-6 |
24px |
space-8 |
32px |
Layout Constants
| Element |
Value |
| Sidebar width |
240px (collapsed: 64px) |
| Max content width |
1280px |
| Border radius |
8px (cards), 6px (buttons) |
