feat(shared): ThemeToggle + Logo + design system rules (Sprint 0.5 étape 8)

docs/DEVELOPMENT_PRINCIPLES.md

@@ -143,6 +143,24 @@ Voir `SECURITY.md` pour le détail.
 Claude Code ne crée jamais de worktree Git.
 Toutes les modifications se font directement dans le dossier du projet principal.
 
+### Règle L — Tokens du design system, jamais de valeurs brutes
+Toutes les couleurs dans le JSX passent exclusivement par les tokens Direction H :
+- Utilitaires Tailwind : `bg-canvas`, `text-ink-2`, `border-line`, `bg-expria`, `text-danger`, etc.
+- Jamais de classes couleur Tailwind par défaut : `bg-slate-100`, `text-gray-500`, `blue-600`…
+- Jamais de valeurs inline brutes : `#1B4FD8`, `oklch(…)`, `rgb(…)` dans les className ou style
+- Pour les inline styles dynamiques uniquement : `style={{ background: 'var(--color-expria)' }}`
+- Tout nouveau token est ajouté exclusivement dans `@theme {}` (et `.dark {}`) de `src/index.css`
+
+```tsx
+// ❌ JAMAIS
+<div className="bg-blue-600 text-gray-500" />
+<div style={{ color: '#1B4FD8' }} />
+
+// ✅ TOUJOURS
+<div className="bg-expria text-ink-3" />
+<div style={{ color: 'var(--color-expria)' }} />  {/* inline style dynamique uniquement */}
+```
+
 ---
 
 ## 3. Structure du code — conventions
@@ -461,3 +479,4 @@ Avant chaque session Claude Code, vérifier :
 | Version | Date | Changements |
 |---|---|---|
 | 1.0 | 2026-04-17 | Création, adaptée de la version backend |
+| 1.1 | 2026-04-18 | Ajout Règle L — tokens du design system (Sprint 0.5) |