geointel/docs/UI_DESIGN_SYSTEM.md

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.