68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
# 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) |
|
|
|
|
---
|