=feat-stitch-intelligence-cockpit

docs/design/DESIGN_SYSTEM.md

@@ -1,37 +1,44 @@
 # Design system
 
+> Geactualiseerd voor VR-118. De volledige Stitch-mapping en bewuste afwijkingen staan in
+> `docs/design/STITCH_INTEGRATION_PLAN.md`.
+
 ## 1. Merkgevoel
 
-Rustig, betrouwbaar, helder en licht technisch. De interface moet focus geven, niet gamificeren. Geen confetti, eindeloze badges of agressieve notificatiekleuren.
+Rustig, betrouwbaar, helder en technisch precies. De interface voelt als een professionele intelligence-cockpit:
+donker marineblauw als standaard, signaalcyaan voor primaire interactie en tonale lagen in plaats van zware schaduwen.
+De lichte variant behoudt dezelfde hiërarchie. Geen confetti, fictieve grafieken, eindeloze badges of agressieve notificatiekleuren.
 
 ## 2. Visuele tokens
 
 De implementatie staat in `static/css/app.css`. Gebruik semantische custom properties in plaats van losse kleuren in componenten.
 
-Aanbevolen tokenrollen:
+Geïmplementeerde tokenrollen omvatten onder meer:
 
 ```css
---surface-page
---surface-card
---surface-raised
---text-primary
---text-secondary
---text-muted
---border-subtle
---accent
---accent-strong
---success
+--bg
+--bg-deep
+--surface
+--surface-low
+--surface-high
+--surface-bright
+--text
+--text-soft
+--muted
+--border
+--border-strong
+--primary
+--primary-strong
+--positive
 --warning
 --danger
---focus-ring
---shadow-card
+--signal-glow
 --radius-sm
---radius-md
---radius-lg
---space-1 ... --space-8
+--radius
 ```
 
-Donkere modus volgt `prefers-color-scheme` en behoudt semantische contrastrollen.
+Donkere modus is de productstandaard. De gebruiker kan lokaal wisselen via `data-theme`; opslag is progressief en
+mag in een afgeschermde browsercontext uitvallen zonder de bediening te breken.
 
 ## 3. Typografie
 
@@ -45,10 +52,11 @@ Donkere modus volgt `prefers-color-scheme` en behoudt semantische contrastrollen
 ## 4. Spacing en layout
 
 - 4/8px-gebaseerde schaal;
-- contentcontainer ongeveer 1180–1280px;
+- contentcontainer maximaal 1600px zodat de cockpit op brede schermen bruikbaar blijft;
 - kaarten met consistente padding 20–24px desktop, 16px mobiel;
 - minimaal 44×44px touch targets voor primaire interactie;
-- grids breken onder 900px en 640px logisch af;
+- vaste zijbalk van 272px boven 900px, toegankelijke uitschuifnavigatie daaronder;
+- grids breken onder 1180px, 900px en 680px logisch af;
 - vaste/sticky elementen mogen content niet bedekken.
 
 ## 5. Componenten