Atelier design system

Definitie

Het Atelier Design System is het visuele fundament van de vault-app (Tauri + React desktop-applicatie). Het is een apart systeem van het jimvandenbreemen.nl DS en combineert Space Grotesk, Space Mono, een oklch-gebaseerd donker kleurenpalet en Tailwind v4-tokens.

Context

De Atelier-app (vault-app) heeft een donker, redactioneel-technisch karakter dat past bij een journalist-ontwerper die werkt met assets, documenten en publicatieflows. Het systeem is gedistribueerd als Atelier Design System.zip en vastgelegd in colors_and_type.css als normatieve bron. De DS werd toegepast op 2026-04-22 na een vorige sessie waarbij de fonts nog Outfit + JetBrains Mono waren.

Kernpunten

Fonts

Rol	Familie	Fallback
Sans (UI-tekst)	Space Grotesk	system-ui, sans-serif
Mono (code, paden, meta)	Space Mono	SF Mono, monospace

Space Grotesk: geometrisch grotesque met subtiele onregelmatigheden, uitstekend leesbaar op 11-14px donker. Space Mono: typografische tegenhanger, slab-achtige streken voor bestandsnamen en metadata. Beide geladen via Google Fonts in index.html.

Kleurenpalet (oklch)

--color-bg-app:      oklch(0.13 0.004 280);
--color-bg-surface:  oklch(0.17 0.005 280);
--color-bg-elevated: oklch(0.21 0.005 280);
--color-accent:      oklch(0.65 0.19 255);
--color-success:     oklch(0.72 0.17 155);
--color-error:       oklch(0.65 0.22  25);
--color-warning:     oklch(0.78 0.16  75);
--color-text-primary:   oklch(0.93 0.005 280);
--color-text-secondary: oklch(0.62 0.010 280);
--color-text-muted:     oklch(0.45 0.008 280);

Type-coded kleuren per asset-type: --color-type-photo (groen), --color-type-video (paars), --color-type-document (blauw), --color-type-audio (amber).

Tailwind v4 tokens

Alle kleuren zijn gedefinieerd in het @theme {} blok in src/index.css. Tailwind v4 maakt hiervan automatisch utilities:

• bg-success/15 — success-kleur met 15% opaciteit
• text-error — error-kleur als tekstkleur
• border-accent/30 — accent met 30% opaciteit

Vuistregel: nooit hardcoded Tailwind-kleuren zoals green-500, red-500, blue-500 in DS-componenten. Altijd semantische tokens (text-success, text-error, text-accent).

Volledige token-set in index.css

Naast kleuren en fonts zijn de volgende token-categorieën vastgelegd:

Categorie	Tokens
Type scale	--text-label (10px) tot --text-document (14px)
Font weights	--weight-regular/medium/semibold (400/500/600)
Line heights	--leading-tight/normal/relaxed (1.25/1.5/1.8)
Spacing	--space-1 (4px) tot --space-6 (24px)
Border radius	--radius-sm (4px) tot --radius-full (9999px)
Shadows	--shadow-card, --shadow-elevated, --shadow-accent
Transitions	--transition-fast/normal/slow (100ms/200ms/300ms)

Statuskleuren in componenten

StatusPill-patroon (correct):

const color =
  status === 'success' ? 'bg-success/15 text-success border-success/30' :
  status === 'failed'  ? 'bg-error/15 text-error border-error/30' :
  status === 'running' ? 'bg-accent/15 text-accent border-accent/30' :
  'bg-bg-surface text-text-muted border-border';

Distributie

De DS is gedistribueerd als Atelier Design System.zip met:

• colors_and_type.css — normatieve bron
• preview/ — 12 HTML-componentkaarten
• ui_kits/vault-app/ — referentie-prototypes (Sidebar.jsx, ContentArea.jsx, Inspector.jsx, shared.jsx)

De referentie-JSX gebruikt inline stijlen en window-exports. Niet direct copy-pasten; vertalen naar Tailwind-classes met DS-tokens.

Verbanden

• Zie ook: wiki-atelier-architectuur

• Zie ook: wiki-jimvandenbreemen-design-systeem (ander systeem, andere doelgroep)

• Gerelateerd project: ~/Claude/projects/Atelier/vault-app/

• Zie ook: wiki-designmd-ai-design-systems — references

Bronnen

Geen externe bronnen.

Sessie-herkomst

• raw-sessie-2026-04-22-atelier-ds-en-plan-d-merge