diff --git a/CLAUDE.md b/CLAUDE.md
index eb5f670..34f55a4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -22,6 +22,8 @@ npm run dev # Vite on :3000, proxies /api to VITE_BACKEND_URL
npm run build # outputs web/dist, which `serv` serves if present
npm run build:check # tsc + build (type check)
npm run lint
+npm test # Vitest (jsdom)
+npm run tokens # regenerate src/design/tokens.css from src/design/tokens.json (runs before dev and builds)
npm run build:static # demo build with VITE_STATIC_MODE=true (GitHub Pages), see web/README.static.md
task dev:all # backend + frontend together
@@ -48,6 +50,25 @@ CI (`.github/workflows/go-test.yml`) runs golangci-lint, gosec (`-exclude=G103,G
**Frontend (`web/src`).** `lib/api.ts` is the single API client (axios, base `/api/v1alpha1`); it swaps in `lib/staticApi.ts` when `VITE_STATIC_MODE=true`. The backend returns proto enums as numbers; `lib/apiConverters.ts` maps them to/from the string enums in `types/api.ts`. Runtime config (Jira, Slack, demo mode, Homer URL, Clarity ID) is injected by the backend's `/config.js` as `window.TRACKER_CONFIG` and read in `src/config.ts`. Data fetching uses TanStack Query; routes are in `App.tsx`; pages under `pages/` are large single-file components. `@/` aliases `src/`.
+## Design system
+
+`docs/design-system/` is the source of truth for the UI, identity "Surligneur": `README.md` (brand book: principles, colour rule, status grammar, type, voice, density, motion, navigation), `tokens.json` (colours light and dark, type, spacing, radii, sizes, shadow), `components/*.md` (one spec per component), `reference/` (reference React implementation: re-implement in TypeScript, never import it), `mockups/` (validated pages; read `mockups/README.md` first) and `IMPLEMENTATION.md` (the plan in five lots). It supersedes the old `design.md`.
+
+How tokens reach the code: `web/src/design/tokens.json` is a copy of `docs/design-system/tokens.json`; `web/scripts/build-tokens.mjs` generates `web/src/design/tokens.css` (light under `:root, .light`, dark under `.dark`); `web/src/index.css` exposes them as utilities (`bg-paper`, `text-ink`, `border-rule-strong`, `bg-signature`, `text-impact`, `text-title`, `text-data-sm`…). Map API statuses and event types with `web/src/lib/status.ts`. `/theme-test` is the living showcase: add every new component there, in all its states, light and dark. The `--hud-*` variables are a temporary bridge to the tokens, removed in lot 5.
+
+Non-negotiable rules:
+
+1. **No hard-coded colour** in components and pages (no hex, no rgb, no Tailwind palette class such as `blue-500`). Everything goes through the tokens.
+2. **Colour signals a deviation.** Only `failed` and `warning` carry a status colour. `done` and `open` stay neutral, never a success green. `impact` (magenta) marks a user impact whatever the status. `type-*` colours are for charts only.
+3. **`signature` (chartreuse) marks the present only**: the "now" needle, what is running, the active page and the selection (`signature-wash`). Always a fill under `on-signature` text, never a text colour.
+4. **A status always goes through `StatusMark`, an impact through `ImpactMark`.** Never draw a status by hand.
+5. **Spline Sans Mono for facts** (times, figures, versions, identifiers, lowercase metadata joined by " · "), **Spline Sans for sentences**. Tabular figures, no zero padding, no letter-spaced uppercase labels.
+6. **Rules rather than shadows.** `shadow-overlay` is reserved for the drawer, the palette and menus.
+7. **Light and dark are equal.** Every screen is checked in both themes.
+8. **Accessibility**: 2 px `focus-ring` on every interactive element, accessible names for icon buttons, glyphs and impact, listbox and option roles on navigable lists, `prefers-reduced-motion` respected, README contrasts held.
+9. **Interface text in English**, sentence case. No emoji, no exclamation mark.
+10. **No gradients, no generic purple or blue accent, no multicoloured pills** for type or environment, and no coloured left border on cards.
+
## Conventions
- Conventional Commits (enforced by a CI workflow); releases and `CHANGELOG.md` are managed by release-please, so don't edit the changelog or versions by hand.
diff --git a/docs/design-system/IMPLEMENTATION.md b/docs/design-system/IMPLEMENTATION.md
new file mode 100644
index 0000000..2e45fbc
--- /dev/null
+++ b/docs/design-system/IMPLEMENTATION.md
@@ -0,0 +1,125 @@
+# Implémenter le design system Tracker « Surligneur » dans `web/`
+
+Tu vas refondre l'interface de Tracker (`web/`, React 19, TypeScript, Vite, Tailwind 4) pour appliquer le design system documenté dans `docs/design-system/`. Le travail est découpé en cinq lots. Chaque lot fait l'objet d'une PR séparée, et l'application doit rester fonctionnelle à la fin de chacun.
+
+## Sources, à lire avant tout code
+
+- `docs/design-system/README.md` : le livre de marque. Ses principes, la règle de couleur, la grammaire des statuts, la typographie, la voix, la densité, le mouvement et l'architecture de navigation font foi.
+- `docs/design-system/tokens.json` : la source de vérité des couleurs (clair et sombre), de la typographie, des espacements, des rayons, des tailles et de l'ombre.
+- `docs/design-system/components/*.md` : la spécification de chaque composant (rôle, variantes, règles d'usage, accessibilité).
+- `docs/design-system/reference/` : `bundle.js` et `bundle.css` sont une implémentation de référence en React (sans JSX, avec un namespace global), et `index.d.ts` donne les props attendues. **Ne les importe pas.** Réimplémente proprement en TypeScript, mais reprends exactement les rendus, les classes visuelles, les tracés SVG (icônes, glyphes de statut) et les comportements.
+- `docs/design-system/mockups/` : les maquettes de pages validées. Lis d'abord `mockups/README.md` pour comprendre leur format.
+- `docs/design-system/assets/logos/` et `docs/design-system/fonts/` : le logo en SVG, et les polices Spline Sans et Spline Sans Mono (licence OFL, en secours si les paquets Fontsource posent problème).
+- `CLAUDE.md`, `web/src/index.css`, `web/src/contexts/ThemeContext.tsx`, `web/src/components/Layout.tsx`, `web/src/components/ui/*`, `web/src/types/api.ts` et `proto/event/v1alpha1/event.proto` : l'existant à respecter.
+
+Ignore l'ancien `design.md` : il est remplacé par `docs/design-system/`.
+
+## Règles non négociables
+
+1. **Aucune couleur en dur** dans les composants et les pages (ni hex, ni rgb, ni classes de palette Tailwind comme `blue-500`). Tout passe par les tokens.
+2. **La couleur signale l'écart.** Seuls `failed` et `warning` portent une couleur de statut. `done` et `open` restent neutres, et il n'y a jamais de vert de succès. `impact` (magenta) signale un impact utilisateur, quel que soit le statut. Les couleurs `type-*` ne servent que dans les graphiques.
+3. **`signature` (chartreuse) marque uniquement le présent** : l'aiguille « now », ce qui est en cours, la page active et la sélection (`signature-wash`). On l'utilise toujours en aplat sous un texte `on-signature`, jamais comme couleur de texte.
+4. **Un statut passe toujours par `StatusMark`, un impact par `ImpactMark`.** On ne dessine jamais un statut à la main.
+5. **Spline Sans Mono pour les faits** (heures, chiffres, versions, identifiants, métadonnées en minuscules séparées par « · »), **Spline Sans pour les phrases**. Chiffres tabulaires, sans zéro de remplissage, et pas de labels en capitales espacées.
+6. **Filets plutôt qu'ombres.** `shadow-overlay` est réservée au drawer, à la palette et aux menus.
+7. **Clair et sombre sont égaux.** Chaque écran est vérifié dans les deux thèmes.
+8. **Accessibilité** : anneau de focus `focus-ring` de 2 px sur tout élément interactif, noms accessibles pour les boutons icône, les glyphes et l'impact, rôles listbox et option sur les listes navigables, `prefers-reduced-motion` respecté, contrastes du README tenus.
+9. **Textes de l'interface en anglais**, en casse de phrase. Pas d'emoji, pas de point d'exclamation.
+10. **Pas de dégradés, pas d'accent violet ou bleu générique, pas de pastilles multicolores** pour le type ou l'environnement, et pas de bordure gauche colorée sur les cartes.
+
+## Méthode de travail
+
+- Au début de chaque lot, présente un plan court : fichiers touchés, décisions, risques. **Attends ma validation avant de coder.**
+- Ne modifie ni le backend ni `proto/` sans me le demander. Quand une donnée manque, propose l'option côté client et l'option côté API.
+- Avant de rendre un lot : `npm run lint`, `npm run build:check` et `npm test` doivent passer dans `web/`. Ajoute des tests Vitest pour la logique pure.
+- Transforme `web/src/pages/ThemeTest.tsx` en vitrine vivante du design system : chaque nouveau composant y apparaît dans tous ses états, en clair et en sombre. Mets-la à jour à chaque lot.
+- Garde les routes et les fonctionnalités existantes. Un écran pas encore refondu doit continuer de fonctionner.
+- Fais des commits petits et explicites.
+
+## Lot 1 — Fondations
+
+1. Copie `docs/design-system/tokens.json` vers `web/src/design/tokens.json`, puis écris `web/scripts/build-tokens.mjs`, qui génère `web/src/design/tokens.css` : les tokens de couleur clairs sous `:root`, les sombres sous `.dark`, et les autres familles (espacement, rayon, taille, ombre) sous `:root`. Branche le script sur `prebuild` et `predev`. Le fichier généré porte une mention « ne pas modifier à la main ».
+2. Dans `web/src/index.css`, importe `tokens.css` et déclare un bloc `@theme inline` qui expose les tokens à Tailwind : `--color-paper: var(--paper)`, et de même pour tous les tokens de couleur, plus les polices, les rayons et les espacements. Les utilitaires deviennent `bg-paper`, `text-ink`, `border-rule-strong`, `text-impact`, `bg-signature`, etc. Crée des utilitaires `@utility` pour les styles typographiques de `tokens.json` (`text-metric`, `text-title`, `text-summary`, `text-data-sm`…).
+3. Polices : installe `@fontsource-variable/spline-sans` et `@fontsource-variable/spline-sans-mono`, et retire Plus Jakarta Sans, IBM Plex Mono et Space Grotesk.
+4. **Pont de compatibilité** : redéfinis les variables `--hud-*` existantes (des composantes RGB utilisées par `rgb(var(--hud-…))`) à partir des nouveaux tokens, en clair et en sombre. `--hud-bg` reprend `paper`, `--hud-surface` reprend `surface`, `--hud-primary` reprend `ink`, `--hud-on-surface-var` reprend `muted`, `--hud-outline-var` reprend `rule`, `--hud-error` reprend `failed`, `--hud-warning` reprend `warning`, et `--hud-success` reprend `muted` (le succès reste neutre). Toute l'application adopte ainsi la palette sans toucher les fichiers qui utilisent `hud-*`. Marque ce bloc comme temporaire.
+5. Crée `web/src/lib/status.ts`, avec ses tests :
+ - `toDsStatus(apiStatus)` : `failure` et `error` donnent `failed` ; `warning` donne `warning` ; `start` et `in_progress` donnent `running` ; `success`, `done` et `close` donnent `done` ; tout le reste (`open`, `planned`, `waiting_approval`, `snapshot`, `user_update`, `recommandation`, non spécifié) donne `open`.
+ - `toTypeIcon(type)` : `deployment`, `operation`, `drift` (icône `drifts`), `incident` et `rpa_usage` (icône `rpa`).
+6. Ajoute à `CLAUDE.md` une section « Design system » qui pointe vers `docs/design-system/` et reprend les dix règles ci-dessus.
+
+Le lot 1 est terminé quand l'application tourne avec la nouvelle palette et les nouvelles polices dans les deux thèmes, sans régression fonctionnelle, et quand la vitrine affiche les couleurs et les styles typographiques.
+
+## Lot 2 — Composants de base, dans `web/src/components/ui`
+
+Implémente en TypeScript, avec `class-variance-authority` quand il y a des variantes, en suivant `components/*.md`, `reference/index.d.ts` et le rendu de `reference/bundle.js` et `bundle.css` :
+
+- **`Icon`** : le jeu d'icônes sur mesure. Reprends les tracés de `icons` dans `bundle.js`, sur une grille de 16 px, trait de 1.5, extrémités carrées. Expose `name`, `size` et `title`.
+- **`Logo`** : symbole et logotype, à partir des tokens. Les SVG de `assets/logos` servent hors application (favicon, README).
+- **`Button`** : variantes `primary`, `secondary` et `ghost`, tailles `md` et `sm`, bouton icône. Fusionne avec l'actuel `button.tsx` et `button-variants.ts`, ou remplace-les.
+- **`Kbd`** et **`Highlight`**.
+- **`StatusMark`** : étiquette de 22 px avec glyphe à signe intérieur, ou glyphe seul avec `label={false}`. Les tracés des glyphes sont dans `Glyph` de `bundle.js`. La rotation de `running` s'arrête avec `prefers-reduced-motion`.
+- **`ImpactMark`** : versions compacte et avec libellé.
+- **`SegmentedControl`** : sur `@radix-ui/react-toggle-group`, ou des boutons avec `aria-pressed`.
+- **`MetricStrip`** : avec `tone` (`failed`, `warning`, `impact`), `delta` et `trend`. Seul `trend: 'worse'` est coloré.
+- **`EventRow`** et **`EventList`** : trois colonnes (heure, titre avec métadonnées, puis `ImpactMark` et `StatusMark` à droite), densités confort et compacte, `role="listbox"`, sélection et navigation ↑ ↓ au clavier.
+- **`Sidebar`** : groupes, page active en `signature`, compteurs, et mode `collapsed` en rail de 60 px avec infobulles.
+- **`TimeRuler`** : props `startHour` et `endHour`.
+- **`EventDrawer`** : mise en page « bandeau » (type, statut, titre, pastilles service, environnement et owner qui déclenchent `onFilter`, liens PR et ticket avec emplacement vide en pointillé, bande d'impact, détails, historique tiré du changelog).
+- **`CommandPalette`** : sur `cmdk` dans un Dialog Radix, avec groupes, raccourcis et navigation clavier.
+
+Chaque composant apparaît dans la vitrine et a au moins un test de rendu et d'accessibilité : nom accessible, rôle, état.
+
+## Lot 3 — Coquille et navigation
+
+- **`Layout.tsx`** : la nouvelle `Sidebar` (quatre groupes : operations, services, infrastructure, resources), une barre du haut avec le bouton « Search or jump to… ⌘K » qui ouvre la `CommandPalette`, et **un seul bouton `New`** avec menu (event, lock, drift, service, RPA), branché sur `CreatePanelContext`, à la place des cinq boutons actuels. Supprime les emojis du pied de page.
+- **Hook de raccourcis** : `/` focalise le filtre de la page, ⌘K ouvre la palette, G puis D, T ou S navigue, esc ferme. Les raccourcis sont ignorés pendant la saisie dans un champ.
+- **`QueryBar`**, nouveau composant décrit dans `mockups/search-and-filters.dc.html` et `mockups/streamline.dc.html` :
+ - syntaxe `key:value`, `key:a,b`, `-key:value`, `"phrase"` et texte libre ;
+ - clés `env`, `status`, `type`, `owner`, `service`, `priority`, `impact` ;
+ - autocomplétion des clés, puis des valeurs avec leur nombre de résultats ;
+ - jetons supprimables, ⌫ sur un champ vide retire le dernier jeton.
+- **Parseur `parseQuery` et `serializeQuery`**, testé, avec l'état des filtres dans l'URL. Les filtres et la période sont partagés entre Timeline, Streamline et Calendar. Traduis les filtres vers les paramètres de `SearchEvents` quand ils existent. `owner` n'y est pas : filtre côté client et signale-le-moi.
+- **Vues enregistrées** (onglets avec compteur, « Save view ») stockées en localStorage pour commencer.
+
+## Lot 4 — Pages, dans cet ordre
+
+Pour chaque page, suis la maquette correspondante. La mise en page, les textes, les composants et les comportements de `renderVals()` font foi. Remplace les données d'exemple par celles de l'API.
+
+1. **Dashboard** (`mockups/dashboard.dc.html`) :
+ - phrase de synthèse dont chaque segment filtre l'activité ;
+ - `MetricStrip`, dont la métrique « users impacted » ;
+ - Needs attention (échecs, impacts, chevauchements à venir, warnings) et Up next (planifié, chevauchements, locks) ;
+ - Activity avec filtres par statut et leurs compteurs, histogramme des 24 h cliquable, `EventList` et `EventDrawer` ;
+ - sélecteur everyone / my team.
+2. **Timeline** (pas de maquette dédiée) : `QueryBar`, `TimeRuler` en tête, `EventList` dans les deux densités et `EventDrawer`. Remplace `EventDetailsModal`, et fais en sorte que `/events/:id` ouvre le drawer.
+3. **Streamline** (`mockups/streamline.dc.html`) : garde la logique de `EventsStreamline.tsx` et rhabille-la.
+ - vues enregistrées, `QueryBar`, regroupement par environnement ou par équipe, option « Overlaps only » ;
+ - navigateur de chevauchements Previous / Next (raccourcis P et N), qui réutilise le calcul de `EventsOverlaps` ;
+ - aperçu des 24 h, couloirs, passé grisé, aiguille « now », barres stylées selon le statut avec un liseré `impact`, hachures de chevauchement et de lock ;
+ - drawer de résolution de chevauchement.
+4. **Architecture** (`mockups/architecture.dc.html`) : garde React Flow.
+ - type de nœud `ServiceNode`, et disposition automatique de gauche à droite via `dagre` ou `elkjs` (les points d'entrée à gauche) ;
+ - clic sur un service : simulation de panne, avec le rayon d'impact calculé côté client à partir de `dependencies_in` et `dependencies_out` ;
+ - panneau d'impact (phrase, métriques, services touchés directement et en cascade, équipes à prévenir via `communication_channels`, événements du jour), mode « what it needs », vue classement par rayon d'impact ;
+ - `Sidebar` repliée par défaut, et KPI ainsi que filtres en pastilles supprimés.
+5. **Insights** (`mockups/insights.dc.html`) : garde Recharts, avec des couleurs en `var(--type-*)`, `var(--impact)` et `var(--ink)`.
+ - `MetricStrip` comparée à la période précédente ;
+ - activité quotidienne empilée par type avec la période précédente en pointillé ;
+ - répartition par type ;
+ - tableau « Reliability and impact by service », triable ;
+ - tendance sur 12 mois avec un sélecteur de mesure ;
+ - **pas de phrase de synthèse en haut de cette page**.
+
+ Calculs : taux d'échec = déploiements en échec ÷ déploiements (via `GetEventStats` filtré) ; rétablissement = médiane de `metadata.duration` des incidents ; impact = durée cumulée des événements avec `impact = true` ; tendance via `GetEventStatsByMonth`. Signale-moi ce qui demanderait un endpoint dédié.
+6. **Le reste**, avec les mêmes composants et règles : Calendar (surcharge le thème Schedule-X avec les tokens), Overlaps, Catalog, Compliance, Drifts, RPA usage, Locks, Links, Docs, ainsi que les formulaires de création.
+
+## Lot 5 — Nettoyage et garde-fous
+
+- Supprime le pont `--hud-*`, puis toute référence restante à `hud-*`. Supprime aussi les couleurs en dur (`T.primary`…), les `.icon-gradient`, Font Awesome et Lucide, une fois toutes les icônes passées au jeu sur mesure.
+- Ajoute une règle de lint qui interdit les couleurs en dur et les classes de palette Tailwind dans `web/src`, sauf dans `web/src/design/`.
+- Fais une passe d'accessibilité : navigation clavier complète, focus visible, contrastes, `prefers-reduced-motion`.
+- Mets à jour `web/README.md` et les captures de `docs/assets/screenshots/`.
+
+## Pour commencer
+
+Lis toutes les sources listées plus haut, puis présente-moi le plan du lot 1. N'écris pas de code avant ma validation.
diff --git a/docs/design-system/README.md b/docs/design-system/README.md
new file mode 100644
index 0000000..b7a9f13
--- /dev/null
+++ b/docs/design-system/README.md
@@ -0,0 +1,115 @@
+# Tracker
+
+L'instrument de bord des équipes ops : ce qui s'est passé, ce qui se passe, ce qui coince.
+
+Tracker suit les déploiements, incidents, drifts, opérations et locks d'une infrastructure distribuée. Il est ouvert par tout le monde : le SRE d'astreinte qui creuse un échec, le dev qui vérifie son déploiement, le lead qui veut savoir en trois secondes si la journée est calme. L'identité, baptisée **Surligneur**, s'inspire du carnet d'ingénieur : papier chaud, encre, trame millimétrée, et un trait de surligneur chartreuse pour ce qui compte maintenant.
+
+## Principes
+
+1. **La couleur signale l'écart.** Seuls `failed` et `warning` portent une couleur de statut, et `impact` signale un impact utilisateur. Ce qui s'est bien passé (`done`) et ce qui attend (`open`) restent dans les neutres (`muted`, `chart-done`, `chart-open`). Le principe a été testé sur le dashboard face à une version « succès en vert » : en neutre, les deux échecs ressortent seuls, et un taux de succès de 60 % n'envoie plus de signal positif trompeur.
+2. **Le chartreuse marque le présent.** `signature` signale l'aiguille « now », un événement en cours, la page active de la navigation et la sélection (`signature-wash`). Rien d'autre. S'il apparaît ailleurs, il perd son sens.
+3. **Le mono pour les faits, la sans pour les phrases.** Heures, chiffres, versions, identifiants et métadonnées sont en Spline Sans Mono. Les titres et les phrases sont en Spline Sans.
+4. **Deux niveaux de lecture.** Chaque écran commence par une phrase de synthèse (style `summary`), puis viennent les chiffres, et le détail s'ouvre au clic dans le drawer. On ne force jamais le lecteur pressé à décoder un graphique.
+5. **Filets, pas d'ombres.** Les panneaux se posent sur `paper` et se délimitent par un filet `rule`. `shadow-overlay` est réservée à ce qui flotte : drawer, palette ⌘K, menus.
+6. **Deux thèmes égaux.** Clair et sombre sont conçus ensemble. Chaque token a ses deux valeurs, et aucun écran n'est validé tant que les deux n'ont pas été regardés.
+
+## Couleur
+
+Les neutres sont chauds et ne descendent jamais au blanc ou au noir purs : `paper` (#F3F1EC / #131210), `surface`, `sunken`, `overlay`, avec l'encre `ink` et le secondaire `muted`. Les bords décoratifs utilisent `rule` et `rule-soft`. Un contrôle interactif est toujours bordé de `rule-strong`, qui atteint 3:1.
+
+`signature` (#D4F53C) s'utilise toujours en aplat avec `on-signature` par-dessus. Ne jamais écrire en chartreuse sur `paper` : le contraste est d'environ 1.1:1. Dans les graphiques, l'aiguille « now » utilise `needle` (encre le jour, chartreuse la nuit), et le libellé « now 15:31 » est un surligneur.
+
+Les types d'événements ont chacun une couleur de série, réservée aux graphiques : `type-deployment` (cobalt), `type-operation` (sarcelle), `type-drift` (violet), `type-rpa` (ardoise). Les incidents restent en `ink`. Ces teintes ont été choisies pour ne se confondre ni avec les statuts (`failed`, `warning`), ni avec `signature`, ni avec `impact`. On ne les utilise jamais pour colorer une ligne, une étiquette ou un fond : un type se lit par son icône dans l'interface, et par sa couleur seulement dans un graphique.
+
+Les autres données catégorielles (environnements, équipes) utilisent la rampe neutre `data-1` à `data-4`, jamais les couleurs de statut. Au-delà de quatre séries, on regroupe le reste en « other ».
+
+`impact` (magenta, #B5126F en clair, #FF5CB0 en sombre) est la seule couleur hors statut. Elle signale qu'un événement touche les utilisateurs (attribut `impact` de l'événement), quel que soit son statut : un déploiement réussi peut avoir un impact, un échec peut ne pas en avoir. On l'utilise en aplat (`impact` avec `on-impact`) pour la bande du drawer, ou en fond discret (`impact-wash`) pour un marqueur dans une liste. Jamais pour un statut, une catégorie ou une décoration.
+
+L'impact doit se voir sur chaque page, pas seulement dans le détail : marqueur `ImpactMark` dans chaque ligne d'événement et dans les listes de triage, liseré sur les barres de Streamline, métrique « users impacted » dans les bandes de métriques, segment dédié dans la phrase de synthèse, clé `impact:true` dans les filtres et vue enregistrée « Impact ».
+
+À ne pas faire : dégradés, violet ou bleu d'accent, badges de toutes les couleurs, vert de succès, couleur sur un élément purement décoratif.
+
+## Grammaire des statuts
+
+Un statut s'affiche comme une **étiquette** : un glyphe de 12 px à signe intérieur et un libellé mono, dans un contenant de 22 px. Chaque glyphe porte un signe (✕, !, ✓, arc ouvert), pour rester identifiable en niveaux de gris comme pour un lecteur daltonien.
+
+| Statut | Glyphe | Étiquette | Poids visuel |
+| --- | --- | --- | --- |
+| failed | carré plein marqué d'un ✕ | fond `failed-wash`, texte `failed` | fort |
+| warning | triangle plein marqué d'un ! | fond `warning-wash`, texte `warning` | fort |
+| running | arc ouvert et point, rotation lente | fond `signature`, texte `on-signature` | fort, c'est le présent |
+| done | cercle et ✓ | filet plein `tag-line`, texte `muted` | faible |
+| open | cercle vide | filet pointillé `tag-line`, texte `muted` | faible |
+
+Dans une liste, les étiquettes s'alignent sur le bord droit : en descendant la colonne, l'œil ne s'arrête que sur les écarts et sur ce qui est en cours. Le ✓ de done reste gris : il confirme sans célébrer, ce qui garde intact le principe « la couleur signale l'écart ». Ce choix a été testé face à trois autres lectures (glyphes seuls, symboles sans contenant, colonne de statut en tête de ligne).
+
+Hors des listes, quand l'étiquette serait trop lourde (historique du drawer, légendes, cellules de calendrier), on affiche le glyphe seul, coloré par son ton. Le composant `StatusMark` porte cette grammaire : on ne dessine jamais un statut à la main.
+
+## Typographie
+
+Deux familles de la même superfamille, fournies en fichiers variables (OFL) : **Spline Sans** (`--font-sans`) et **Spline Sans Mono** (`--font-mono`).
+
+- Les chiffres sont toujours en mono, avec `font-variant-numeric: tabular-nums`, sans zéro de remplissage : on écrit `2`, pas `02`.
+- Les métadonnées sont en minuscules, en mono `data-sm`, séparées par « · » : `deployment · pré-production · P2 · platform-team`.
+- On n'utilise pas de labels en capitales espacées. Un label de métrique s'écrit `events / 24h`, pas `TOTAL EVENTS`.
+- Les titres sont en casse de phrase. L'interlettrage est négatif sur les grandes tailles, comme l'indique chaque style.
+
+## Voix et contenu
+
+L'interface est en anglais, en casse de phrase, avec des verbes concrets.
+
+- **Heures** au format 24 h : `15:04`, avec les secondes dans le drawer (`15:04:12`).
+- **Dates** au format `07 apr 2026`, ou `today` et `yesterday` quand c'est plus clair.
+- **Cibles de déploiement** avec une flèche : `Deploy monitoring v2.5.5 → mco`.
+- **Phrase de synthèse** construite selon la formule « ce qui demande une action, puis ce qui est en cours, puis ce qui va bien » : *2 deployments failed and need attention. 1 deployment is running on production. 3 events completed, no scheduling overlaps.*
+- **États vides** factuels plutôt qu'enjoués : `No overlaps in the last 7 days.`
+- Pas d'emoji, pas de points d'exclamation, pas de « Oops ».
+
+## Espace et densité
+
+Grille de 4 px (`space-1` à `space-16`). Les pages ont une marge de `space-8` et les panneaux un padding de `space-5`. Les blocs sont séparés de `space-6`.
+
+Les listes et tableaux existent en deux densités, réglables par l'utilisateur et mémorisées :
+
+| Densité | Padding de ligne | Hauteur | Contenu |
+| --- | --- | --- | --- |
+| Confort (défaut) | `row-pad-comfy` 12 px | ≈ 62 px | titre puis métadonnées sur deux lignes |
+| Compact | `row-pad-compact` 6 px | ≈ 32 px | titre et métadonnées sur une ligne, tronqués |
+
+## Motif : la règle graduée
+
+Le temps est la matière de Tracker, donc l'axe du temps est le motif de la marque. Le composant `TimeRuler` affiche des graduations sur une trame millimétrée `grid` au pas de 8 px, des repères majeurs à l'heure en `ink`, des marques d'événements colorées selon leur statut, et l'aiguille `needle` surmontée d'un surligneur « now ». On le trouve en tête de Timeline, de Streamline et dans le graphique de vélocité. On ne l'utilise pas comme décor.
+
+## Iconographie
+
+Le jeu d'icônes est dessiné pour Tracker. Il est exposé par `Tracker.Icon` et visible dans la carte Icon.
+
+- Grille de 16 px, trait de 1.5 px, extrémités carrées, angles vifs, sans remplissage.
+- Les formes viennent du vocabulaire de l'instrument : axes, graduations, aiguilles, barres.
+- On ne trouve ni robot, ni fusée, ni bouclier, ni clé à molette. Le triangle est réservé au statut warning et n'apparaît jamais dans une icône.
+- Les glyphes de statut forment une famille à part : extrémités arrondies et signe intérieur, là où les icônes ont des extrémités carrées et restent vides.
+- Les icônes servent à la navigation, aux types d'événements, aux faits d'un événement (`service`, `environment`, `owner`, `impact`, `pull-request`, `ticket`) et aux actions. Elles ne décorent pas un titre ou une carte.
+- Couleur `muted` au repos, `ink` au survol, `on-signature` sur la page active.
+
+## Mouvement
+
+Le mouvement est bref et n'a qu'une seule direction.
+
+- **Durées** : 120 ms pour les survols et les fondus, 180 ms pour le drawer.
+- **Courbe** : `cubic-bezier(0.2, 0, 0, 1)`, sans rebond.
+- **Drawer** : il glisse depuis la droite sans voile, pour que la liste reste visible.
+- **Palette ⌘K** : elle apparaît en fondu, avec un léger déplacement de 4 px.
+- **Statut running** : l'arc ouvert du glyphe tourne en 1.6 s. Avec `prefers-reduced-motion`, plus rien ne bouge.
+
+## Architecture et patterns
+
+- **Navigation** : barre latérale de `sidebar-w`, en quatre groupes (operations, services, infrastructure, resources). La page active est surlignée en `signature`.
+- **Vues temporelles** : Timeline, Streamline et Calendar restent trois pages, mais partagent une `FilterBar` commune. La période et les filtres suivent l'utilisateur d'une vue à l'autre.
+- **Création** : un seul bouton `New` avec menu (event, lock, drift, service, RPA), doublé de la palette ⌘K qui sert aussi à chercher et à naviguer.
+- **Détail** : un clic sur un événement ouvre l'`EventDrawer` à droite (`drawer-w`). La liste reste visible et navigable au clavier (↑ ↓), et le drawer suit la sélection.
+- **Densité** : un réglage confort ou compact, global, dans le menu utilisateur.
+- **Impact** : présent sur toutes les pages qui listent ou résument des événements (voir `ImpactMark`). Une page qui montre des événements sans leur impact est incomplète.
+
+## Logo
+
+Le symbole est un T dont la barre est un trait de surligneur : un fût `surface` sur un carré `ink`, barré de `signature`. Le logotype « tracker » est composé en Spline Sans SemiBold, en minuscules, avec un interlettrage de −0.035 em. Les fichiers se trouvent dans le groupe d'assets Logos, en version encre (fonds clairs) et inverse (fonds sombres). On ne recolore pas le logo, on ne remplace pas le chartreuse, et on ne pose jamais le symbole sur un fond `signature`.
diff --git a/docs/design-system/assets/logos/README.md b/docs/design-system/assets/logos/README.md
new file mode 100644
index 0000000..c956d41
--- /dev/null
+++ b/docs/design-system/assets/logos/README.md
@@ -0,0 +1,10 @@
+# Logos
+
+Quatre fichiers vectoriels, avec un logotype vectorisé depuis Spline Sans SemiBold, donc sans dépendance à la police.
+
+- `tracker-lockup.svg` : symbole et logotype en encre #141311, pour les fonds `paper` et `surface` clairs.
+- `tracker-lockup-inverse.svg` : symbole inversé (carré #EDEAE3, fût #141311) et logotype #EDEAE3, pour les fonds sombres.
+- `tracker-mark.svg` : symbole seul, carré #141311 et fût #FAF8F3. Sert de favicon et d'avatar.
+- `tracker-mark-inverse.svg` : symbole seul pour les fonds sombres.
+
+La barre du T est toujours `signature` (#D4F53C). La zone de protection autour du logo vaut la largeur du fût du T, soit 6/44 de la hauteur du symbole. Le symbole ne descend pas sous 16 px de haut, et le logotype complet pas sous 20 px.
diff --git a/docs/design-system/assets/logos/tracker-lockup-inverse.svg b/docs/design-system/assets/logos/tracker-lockup-inverse.svg
new file mode 100644
index 0000000..2f662ac
--- /dev/null
+++ b/docs/design-system/assets/logos/tracker-lockup-inverse.svg
@@ -0,0 +1 @@
+
diff --git a/docs/design-system/assets/logos/tracker-lockup.svg b/docs/design-system/assets/logos/tracker-lockup.svg
new file mode 100644
index 0000000..f4e2f85
--- /dev/null
+++ b/docs/design-system/assets/logos/tracker-lockup.svg
@@ -0,0 +1 @@
+
diff --git a/docs/design-system/assets/logos/tracker-mark-inverse.svg b/docs/design-system/assets/logos/tracker-mark-inverse.svg
new file mode 100644
index 0000000..7d05ecd
--- /dev/null
+++ b/docs/design-system/assets/logos/tracker-mark-inverse.svg
@@ -0,0 +1 @@
+
diff --git a/docs/design-system/assets/logos/tracker-mark.svg b/docs/design-system/assets/logos/tracker-mark.svg
new file mode 100644
index 0000000..ba268e1
--- /dev/null
+++ b/docs/design-system/assets/logos/tracker-mark.svg
@@ -0,0 +1 @@
+
diff --git a/docs/design-system/components/Button.md b/docs/design-system/components/Button.md
new file mode 100644
index 0000000..01e5510
--- /dev/null
+++ b/docs/design-system/components/Button.md
@@ -0,0 +1,10 @@
+# Button
+
+Trois variantes, deux tailles. Le bouton primary en encre est rare : un seul par zone.
+
+- **primary** (`ink` / `on-ink`) : l'action principale de la page ou du drawer, par exemple `New` dans la barre du haut ou `Edit event` dans le drawer.
+- **secondary** (`surface`, bord `rule-strong`) : les actions courantes comme `Lock service` ou `Export`.
+- **ghost** : les actions tertiaires et les boutons icône (fermer, copier).
+- **sm** (`control-sm`, 30 px) : à utiliser dans les barres de filtres et les en-têtes de panneau.
+
+Le bouton `New` porte un chevron (`iconRight="chevron-down"`) et ouvre un menu : event, lock, drift, service, RPA. On n'aligne jamais plusieurs boutons « New … » côte à côte. Le chartreuse n'est jamais une couleur de bouton : il marque le présent, pas une action. Le focus clavier dessine un anneau `focus-ring` de 2 px.
diff --git a/docs/design-system/components/CommandPalette.md b/docs/design-system/components/CommandPalette.md
new file mode 100644
index 0000000..44fbc1e
--- /dev/null
+++ b/docs/design-system/components/CommandPalette.md
@@ -0,0 +1,10 @@
+# CommandPalette
+
+La palette ⌘K : chercher, créer et naviguer depuis un seul champ. Elle double le bouton `New`.
+
+- Elle s'ouvre avec ⌘K, ou avec `/` hors d'un champ, au-dessus d'un voile `scrim`. Elle utilise `overlay`, `shadow-overlay` et `radius-lg`.
+- Les groupes s'affichent dans un ordre fixe : Jump to, Create, puis les résultats (events, services, teams).
+- Chaque création a une lettre de raccourci (`E` event, `L` lock, `D` drift, `S` service, `R` RPA).
+- L'item actif prend `signature-wash`. On le déplace avec ↑ ↓, ↵ l'ouvre et esc ferme la palette.
+- Un résultat d'événement porte son statut et son heure en indice (`failed · 15:04`).
+- Pour une recherche sans résultat, on affiche `No results for “…”` sans illustration.
diff --git a/docs/design-system/components/EventDrawer.md b/docs/design-system/components/EventDrawer.md
new file mode 100644
index 0000000..4353a45
--- /dev/null
+++ b/docs/design-system/components/EventDrawer.md
@@ -0,0 +1,24 @@
+# EventDrawer
+
+Le détail d'un événement, dans un panneau latéral de `drawer-w` ouvert à droite de la liste. Sa mise en page « bandeau » met en avant les faits sur lesquels on agit, tous dans l'en-tête.
+
+**En-tête, sur fond `sunken` :**
+
+- Le type en étiquette (icône du type et nom : deployment, operation, drift, incident, rpa usage), le `StatusMark`, l'heure, puis le bouton de fermeture.
+- Le titre, en style `title`.
+- Les pastilles service, environnement et owner, avec leurs icônes. Chaque pastille est un bouton qui filtre les vues temporelles sur sa valeur (`onFilter('service' | 'env' | 'owner', valeur)`). Les stakeholders figurent dans l'infobulle de l'owner. La priorité suit, en pastille discrète non cliquable.
+- Les liens : `PR #1287` et la clé du ticket, en boutons qui ouvrent la source dans un nouvel onglet. Un lien absent (`null`) devient un emplacement en pointillé avec un bouton +. On le montre volontairement, pour inciter à compléter l'événement.
+
+**Bande d'impact.** Si `impact` vaut `true`, une bande pleine largeur en `impact` / `on-impact` affiche « Users impacted » et une note (canal notifié, status page). Si `impact` vaut `false`, une ligne discrète indique « No user impact declared ». L'impact est indépendant du statut : un déploiement réussi peut avoir un impact. C'est la seule couleur hors statut du système.
+
+**Corps :** la phrase de résumé si elle existe, puis `details` pour les champs secondaires (source, horaires, notifications, identifiant), et `history`, le changelog avec ses glyphes.
+
+**Pied :** au plus trois actions, avec une seule primary.
+
+**Comportement :**
+
+- Il n'y a pas de voile : la liste reste visible, et ↑ ↓ dans la liste font défiler le drawer d'un événement à l'autre. esc le ferme.
+- Il glisse depuis la droite en 180 ms, `cubic-bezier(0.2, 0, 0, 1)`, et apparaît sans animation avec `prefers-reduced-motion`.
+- Le drawer peut s'ouvrir via une URL (`?event=`), pour qu'un lien partagé ouvre directement le détail.
+
+Rétrocompatibilité : sans service, environnement ni owner, l'en-tête revient à la ligne de métadonnées `meta`, et la zone de liens n'apparaît que si `pullRequest` ou `ticket` est fourni.
diff --git a/docs/design-system/components/EventRow.md b/docs/design-system/components/EventRow.md
new file mode 100644
index 0000000..96f0b25
--- /dev/null
+++ b/docs/design-system/components/EventRow.md
@@ -0,0 +1,14 @@
+# EventRow
+
+La ligne d'événement, la brique la plus répétée de Tracker. On la trouve dans Timeline, dans le flux d'activité du dashboard, dans Overlaps et dans les résultats de recherche.
+
+Sa structure est fixe sur trois colonnes : l'heure en mono `muted`, le titre en `body-strong` avec la ligne de métadonnées en dessous, puis l'étiquette `StatusMark` alignée à droite sur la première ligne du titre. Il n'y a pas de glyphe en tête de ligne : le statut se lit en descendant le bord droit, où seuls les écarts (failed, warning) et ce qui est en cours (running) ressortent.
+
+- **Densité confort** (par défaut, `row-pad-comfy`) : le titre et les métadonnées tiennent sur deux lignes.
+- **Densité compacte** (`density="compact"`, `row-pad-compact`) : tout tient sur une ligne, les métadonnées sont tronquées.
+- La ligne sélectionnée prend `signature-wash`. Une sélection ouvre l'`EventDrawer`, et ↑ ↓ déplacent la sélection.
+- `impact` ajoute un `ImpactMark` compact, en magenta, juste avant l'étiquette de statut. L'impact se lit ainsi sur le même bord droit que le statut, sans changer la structure de la ligne.
+- Les métadonnées se passent sous forme de liste ordonnée : type, environnement, priorité, équipe. Elles sont jointes par « · ».
+- Pas de pastilles colorées pour le type ou l'environnement. La couleur appartient au statut.
+
+Utilisez `EventList` pour une liste : elle porte le rôle `listbox` et gère la sélection.
diff --git a/docs/design-system/components/FilterBar.md b/docs/design-system/components/FilterBar.md
new file mode 100644
index 0000000..9bcd20a
--- /dev/null
+++ b/docs/design-system/components/FilterBar.md
@@ -0,0 +1,8 @@
+# FilterBar
+
+La barre de filtres partagée par Timeline, Streamline et Calendar. La période et les filtres suivent l'utilisateur d'une vue à l'autre.
+
+- Chaque filtre est un jeton `clé valeur` en mono (`env production`), bordé de `rule-strong`, avec un bouton de retrait accessible.
+- `+ Filter` ouvre un sélecteur de clés : type, environment, priority, status, owner, service.
+- `scope` rappelle discrètement où s'appliquent les filtres (`synced · timeline, streamline, calendar`). C'est ce qui rend la synchronisation compréhensible.
+- L'état des filtres vit dans l'URL, pour qu'une vue filtrée puisse se partager par lien.
diff --git a/docs/design-system/components/Highlight.md b/docs/design-system/components/Highlight.md
new file mode 100644
index 0000000..8c435ee
--- /dev/null
+++ b/docs/design-system/components/Highlight.md
@@ -0,0 +1,9 @@
+# Highlight
+
+Le surligneur : un aplat `signature` sous un texte `on-signature`, signature visuelle de Tracker.
+
+Il ne sert qu'à marquer le présent : ce qui est en cours dans une phrase de synthèse, le libellé « now » de la règle, le statut running. Si deux surligneurs se disputent l'attention sur un écran, l'un des deux est de trop.
+
+- Dans du texte courant, utilisez la version par défaut.
+- Pour une donnée (`running`, `now 15:31`), utilisez `data`, en mono 11 px.
+- Ne jamais l'utiliser pour mettre en valeur un mot important, une nouveauté ou une promotion.
diff --git a/docs/design-system/components/Icon.md b/docs/design-system/components/Icon.md
new file mode 100644
index 0000000..78c4d7d
--- /dev/null
+++ b/docs/design-system/components/Icon.md
@@ -0,0 +1,10 @@
+# Icon
+
+Le jeu d'icônes dessiné pour Tracker : grille de 16 px, trait de 1.5 px, extrémités carrées, angles vifs.
+
+Les formes viennent de l'instrument de mesure : axes, graduations, aiguilles, barres. Chaque icône hérite de `currentColor`.
+
+- Au repos, une icône est en `muted`. Elle passe en `ink` au survol, et en `on-signature` dans l'item de navigation actif.
+- Une icône décorative n'a pas de `title` et reste masquée aux lecteurs d'écran. Une icône seule dans un bouton a besoin d'un `aria-label` sur le bouton.
+- Le triangle est réservé au statut warning, donc aucune icône n'en contient.
+- Pour ajouter une icône, on la dessine sur la même grille, avec les mêmes extrémités, et on l'ajoute à `Tracker.icons`.
diff --git a/docs/design-system/components/ImpactMark.md b/docs/design-system/components/ImpactMark.md
new file mode 100644
index 0000000..d25dc73
--- /dev/null
+++ b/docs/design-system/components/ImpactMark.md
@@ -0,0 +1,21 @@
+# ImpactMark
+
+Le marqueur d'impact utilisateur : l'icône impact (des ondes) en magenta `impact` sur un fond `impact-wash`, à la même hauteur de 22 px que l'étiquette de statut.
+
+Il signale qu'un événement touche les utilisateurs (attribut `impact` du modèle), quel que soit son statut. Il ne remplace jamais le statut : il s'affiche à côté de lui.
+
+Où il apparaît, sur chaque page :
+
+- **Lignes d'événement** (`EventRow` avec `impact`) : version compacte, juste avant l'étiquette de statut.
+- **Listes de triage et d'agenda** (Needs attention, Up next) : version compacte à côté du titre.
+- **Barres de Streamline** : liseré magenta en bas de la barre, et version compacte dans le libellé.
+- **Métriques** : la valeur « users impacted » en `tone="impact"`.
+- **Drawer** : la bande pleine largeur « Users impacted » (portée par `EventDrawer`).
+- **Filtres** : la clé `impact:true` dans la barre de filtre, et une vue enregistrée « Impact ».
+
+Variantes :
+
+- **`compact`** : l'icône seule dans un carré de 22 px, avec « Users impacted » comme nom accessible et comme infobulle. C'est la variante par défaut dans les listes.
+- **Avec libellé** (`text`, « impact » par défaut) : pour les légendes et les en-têtes, quand la place le permet.
+
+On ne l'utilise pas pour une alerte générique, ni pour une notion de gravité ou de priorité.
diff --git a/docs/design-system/components/Kbd.md b/docs/design-system/components/Kbd.md
new file mode 100644
index 0000000..c6f1384
--- /dev/null
+++ b/docs/design-system/components/Kbd.md
@@ -0,0 +1,5 @@
+# Kbd
+
+Une touche ou un raccourci clavier, en mono 11 px dans un filet `rule`.
+
+À utiliser dans le champ de recherche (`⌘K`), dans les items de la palette et dans les infobulles. On écrit les symboles Mac (`⌘`, `⌥`, `↵`) et on laisse l'application les traduire sur Windows et Linux (`Ctrl`).
diff --git a/docs/design-system/components/Logo.md b/docs/design-system/components/Logo.md
new file mode 100644
index 0000000..b4dd976
--- /dev/null
+++ b/docs/design-system/components/Logo.md
@@ -0,0 +1,10 @@
+# Logo
+
+Le symbole « T surligné » et le logotype « tracker », rendus avec les tokens pour suivre le thème.
+
+Utilisez `Logo` dans l'interface (barre latérale, écran de connexion). Pour un usage hors produit (README, slides, favicon), prenez les fichiers SVG du groupe d'assets Logos.
+
+- `size` règle la hauteur du symbole. Le logotype suit à 78 % de cette hauteur.
+- `word={false}` affiche le symbole seul, par exemple dans une barre latérale repliée.
+- Le carré utilise `ink`, le fût `surface` et la barre `signature`. En thème sombre, le carré devient clair automatiquement.
+- Ne pas recolorer, ne pas poser sur `signature`, ne pas descendre sous 16 px.
diff --git a/docs/design-system/components/MetricStrip.md b/docs/design-system/components/MetricStrip.md
new file mode 100644
index 0000000..2a25fe6
--- /dev/null
+++ b/docs/design-system/components/MetricStrip.md
@@ -0,0 +1,10 @@
+# MetricStrip
+
+La bande de métriques, posée dans un creux `sunken` sous la phrase de synthèse. Elle compte trois à cinq valeurs.
+
+- Le libellé est en mono minuscule (`events / 24h`), la valeur en style `metric`, et une précision en `caption` peut la compléter (`3 of 5 finished`).
+- `tone="failed"` ou `tone="warning"` ne s'applique que si la valeur elle-même est un problème, par exemple un nombre d'échecs supérieur à zéro.
+- `tone="impact"` colore en magenta la métrique « users impacted », et seulement quand elle est supérieure à zéro. Elle a sa place sur chaque page qui résume une période.
+- Un taux de succès reste neutre, même à 100 %.
+- Pas de zéros de remplissage, pas d'icône décorative, pas de petite flèche de tendance colorée.
+- **Comparaison avec la période précédente** : `delta` affiche l'écart en mono sous la valeur (« −3.2 pts vs prev. », « +7 min vs prev. »), et `trend` dit si c'est mieux ou moins bien. Seul `worse` prend une couleur (ambre, avec le glyphe warning). `better` reste neutre, comme tout ce qui va bien. Le signe du delta suit la valeur, pas le jugement : un taux d'échec qui baisse s'écrit « −3.2 pts » avec `trend: 'better'`.
diff --git a/docs/design-system/components/SegmentedControl.md b/docs/design-system/components/SegmentedControl.md
new file mode 100644
index 0000000..9da2bfd
--- /dev/null
+++ b/docs/design-system/components/SegmentedControl.md
@@ -0,0 +1,5 @@
+# SegmentedControl
+
+Un choix exclusif parmi deux à cinq options courtes : période, densité, vue.
+
+Les options sont en mono, et l'option active se pose en `surface` dans une piste `sunken`. Pour plus de cinq options, ou des libellés longs, utilisez un menu.
diff --git a/docs/design-system/components/Sidebar.md b/docs/design-system/components/Sidebar.md
new file mode 100644
index 0000000..3a92139
--- /dev/null
+++ b/docs/design-system/components/Sidebar.md
@@ -0,0 +1,9 @@
+# Sidebar
+
+La navigation principale, en quatre groupes, avec des libellés de groupe en mono minuscule.
+
+- La page active est surlignée en `signature`, avec le texte et l'icône en `on-signature`. C'est le « vous êtes ici » de la marque.
+- `count` n'affiche qu'un nombre qui appelle une action, par exemple les locks actifs ou les drifts ouverts. On ne met pas de compteur sur une page de consultation.
+- La largeur vaut `sidebar-w`. Sous 960 px, la barre se replie en symbole seul, avec les icônes et des infobulles.
+- **`collapsed`** donne un rail de 60 px : le symbole du logo, les icônes seules (le nom devient infobulle et nom accessible), les groupes séparés par un filet, les compteurs en petites pastilles. On l'utilise par défaut sur les pages plein écran (Architecture, Streamline en grand) et sous 960 px de large.
+- `onToggle` affiche en bas un bouton pour replier ou déplier la barre. Le choix de l'utilisateur est mémorisé par page.
diff --git a/docs/design-system/components/StatusMark.md b/docs/design-system/components/StatusMark.md
new file mode 100644
index 0000000..222e138
--- /dev/null
+++ b/docs/design-system/components/StatusMark.md
@@ -0,0 +1,23 @@
+# StatusMark
+
+L'étiquette de statut : un glyphe à signe intérieur et un libellé mono, dans un contenant de 22 px. C'est le seul endroit où les couleurs `failed` et `warning` apparaissent.
+
+| status | glyphe (12 px dans l'étiquette) | étiquette |
+| --- | --- | --- |
+| failed | carré plein marqué d'un ✕ | fond `failed-wash`, texte `failed`, graisse 500 |
+| warning | triangle plein marqué d'un ! | fond `warning-wash`, texte `warning`, graisse 500 |
+| running | arc ouvert et point central, en rotation lente | fond `signature`, texte `on-signature`, graisse 500 |
+| done | cercle et ✓ | filet plein `tag-line`, texte `muted`, graisse 400 |
+| open | cercle vide | filet pointillé `tag-line`, texte `muted`, graisse 400 |
+
+**Pourquoi des étiquettes.** Dans une liste, les écarts doivent se repérer de loin, sans lire. Les deux étiquettes lavées (failed, warning) et le surligneur (running) ressortent seules. Les neutres (done, open) restent de simples filets gris, que l'œil saute. Le ✓ de done reste gris : il confirme, il ne célèbre pas.
+
+**Pourquoi un signe dans chaque glyphe.** À petite taille, un carré et un cercle se confondent. Le ✕, le !, le ✓ et l'arc ouvert rendent chaque statut identifiable en niveaux de gris ou pour un lecteur daltonien. Les glyphes ont des extrémités arrondies, ce qui les distingue du jeu d'icônes, dessiné en extrémités carrées.
+
+Règles d'usage :
+
+- Dans une ligne d'événement, l'étiquette se place à droite, alignée sur la première ligne du titre. Il n'y a pas de glyphe en tête de ligne.
+- `label={false}` affiche le glyphe seul, à 14 px par défaut, coloré par son ton (`tk-tone--*`), avec le libellé comme nom accessible. On l'utilise là où l'étiquette serait trop lourde : historique du drawer, légendes de graphiques, cellules de calendrier.
+- Une seule étiquette par ligne. Pas d'étiquette pour le type, l'environnement ou la priorité, qui restent dans la ligne de métadonnées.
+- Le libellé ne se traduit pas et reste en minuscules : `failed`, `warning`, `running`, `done`, `open`.
+- La rotation de running s'arrête avec `prefers-reduced-motion`.
diff --git a/docs/design-system/components/TimeRuler.md b/docs/design-system/components/TimeRuler.md
new file mode 100644
index 0000000..855d78f
--- /dev/null
+++ b/docs/design-system/components/TimeRuler.md
@@ -0,0 +1,9 @@
+# TimeRuler
+
+La règle graduée, motif de la marque et axe du temps de Tracker.
+
+Elle se compose d'une trame millimétrée `grid` au pas de 8 px, de repères horaires en `ink` avec leur libellé mono, de marques d'événements colorées selon leur statut, et de l'aiguille `needle` surmontée d'un surligneur « now ».
+
+- On la trouve en tête de Timeline et de Streamline, et sous le graphique de vélocité. Les graduations doivent toujours correspondre aux données affichées dessous.
+- `startHour` et `endHour` définissent la fenêtre en heures (`from` et `to` restent acceptés comme alias, mais `from` est réservé sur `x-import` : utilisez `start-hour` et `end-hour` dans un canevas). `now` place l'aiguille au format `HH:MM`, et `marks` place les événements.
+- Ce n'est pas un élément décoratif : on ne l'utilise pas dans un en-tête sans données temporelles.
diff --git a/docs/design-system/fonts/OFL-SplineSans.txt b/docs/design-system/fonts/OFL-SplineSans.txt
new file mode 100644
index 0000000..ee2bacd
--- /dev/null
+++ b/docs/design-system/fonts/OFL-SplineSans.txt
@@ -0,0 +1,93 @@
+Copyright 2021 The Spline Sans Project Authors (https://github.com/SorkinType/SplineSans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/design-system/fonts/OFL-SplineSansMono.txt b/docs/design-system/fonts/OFL-SplineSansMono.txt
new file mode 100644
index 0000000..ebcad12
--- /dev/null
+++ b/docs/design-system/fonts/OFL-SplineSansMono.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Spline Sans Mono Project Authors (https://github.com/SorkinType/SplineSansMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/design-system/fonts/SplineSans.ttf b/docs/design-system/fonts/SplineSans.ttf
new file mode 100644
index 0000000..00a7644
Binary files /dev/null and b/docs/design-system/fonts/SplineSans.ttf differ
diff --git a/docs/design-system/fonts/SplineSansMono.ttf b/docs/design-system/fonts/SplineSansMono.ttf
new file mode 100644
index 0000000..41f36d3
Binary files /dev/null and b/docs/design-system/fonts/SplineSansMono.ttf differ
diff --git a/docs/design-system/mockups/README.md b/docs/design-system/mockups/README.md
new file mode 100644
index 0000000..e2324f6
--- /dev/null
+++ b/docs/design-system/mockups/README.md
@@ -0,0 +1,21 @@
+# Maquettes de pages
+
+Ces fichiers sont les maquettes interactives validées, exportées du canevas de conception. Ce sont des **spécifications**, pas du code à réutiliser.
+
+Format d'un fichier `.dc.html` :
+
+- Le balisage HTML décrit la mise en page exacte : structure, espacements, tailles, ordre des éléments, textes de l'interface.
+- `{{ … }}` est une valeur calculée. `` répète un bloc, `` l'affiche sous condition.
+- `` monte un composant du design system avec ses props (en kebab-case dans l'attribut, en camelCase dans le composant). C'est la liste des composants à utiliser à cet endroit.
+- Le `
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a service to simulate its failure
+ arrows point to what a service calls
+
+
+ down
+ breaks directly
+ breaks in cascade
+ unaffected
+
+
+ selected
+ needed directly
+ needed in cascade
+
+