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

---