feat(ui): redesign GeoIntel as Atlas Workbench

docs/UI_DESIGN_SYSTEM.md

@@ -0,0 +1,91 @@
+# GeoIntel Atlas Workbench
+
+## Purpose
+
+The Atlas Workbench is the visual and interaction system for GeoIntel. It
+keeps the product map-first, task-oriented and understandable without hiding
+source authority, observation time or GIS limitations.
+
+The redesign was developed in Stitch under:
+
+- project: `GeoIntel Complete Workbench Redesign`
+- project id: `18332842433441398219`
+- design system: `GeoIntel Atlas Workbench`
+- design-system asset: `4667932515738184526`
+- Map Explorer screen: `c24113d1f1474c91b332b2365be24993`
+- Sources screen: `239796f2d66a44e7983e5fc588305ff8`
+- AI Questions screen: `246aa57bbe974861885325ff9d10c6bd`
+
+The React implementation remains the source of truth for behavior. Stitch is
+the design reference for hierarchy, spacing and component treatment.
+
+## Product hierarchy
+
+1. `Kaart` is the primary workspace.
+2. `Bronnen` explains available and missing official data.
+3. `AI-vragen` answers only from persisted area evidence.
+4. `Kwaliteit` reviews stored checks and provenance.
+5. `Beeldanalyse` contains detection and segmentation workflows.
+6. `Downloads` stores and previews traceable outputs.
+7. `Status` summarizes readiness and source freshness.
+8. `Beheer` exposes provider and technical administration.
+
+The navigation rail is the only persistent workspace navigation. Duplicate
+command bars or competing shortcut rows must not be reintroduced.
+
+## Layout rules
+
+- Desktop uses an 88-pixel navigation rail and a 56-pixel context bar.
+- The normal map layout is `theme drawer / map / insight inspector`.
+- Theme and insight rails stay stable on ultrawide displays; the map receives
+  the additional width.
+- Non-map workspaces use one task header and one primary work surface.
+- Panels scroll internally when their function requires stable surrounding
+  context.
+- Mobile navigation is horizontally scrollable. The theme list is bounded so
+  the map remains reachable early in the page flow.
+- Typography never scales with viewport width.
+
+## Visual tokens
+
+| Role | Value |
+| --- | --- |
+| Canvas | `#f3f6f5` |
+| Surface | `#ffffff` |
+| Ink | `#152522` |
+| Muted text | `#687773` |
+| Border | `#dce4e1` |
+| Primary teal | `#0b6b62` |
+| Context blue | `#315d73` |
+| Attention amber | `#a55c23` |
+| Error red | `#a33c39` |
+| Radius | `4px` |
+
+The UI does not use gradients, decorative blobs, oversized hero sections,
+nested cards or pill-heavy status presentation.
+
+## Interaction rules
+
+- One primary action per task surface.
+- Use icons plus short labels for navigation and familiar commands.
+- `Laatste toestand / Evolutie` is a segmented control.
+- Rectangle drawing is the primary spatial-selection action.
+- Technical model, provider and provenance detail stays available through
+  explicit disclosures.
+- Empty states state the next useful action in one short sentence.
+- Unavailable data or model states remain honest and are never replaced with
+  fabricated output.
+
+## Implementation boundaries
+
+- Shared shell and navigation:
+  `frontend/src/components/shell/WorkbenchNavigation.tsx`
+- Shared visual implementation:
+  `frontend/src/styles/atlas-workbench.css`
+- Map workflow:
+  `frontend/src/components/map/MapWorkspace.tsx`
+- API, persistence and GIS behavior remain outside the design system.
+
+Any future visual change must retain the browser acceptance widths of
+390 pixels, 1280 pixels and 3440 pixels and must pass frontend typecheck,
+unit tests, production build and the UX browser audit.