Design system for a career-navigation platform built for the German market — tokens, primitives, foundations and two clickable UI kits.
Clickable React prototypes composed strictly from the source specification’s own routes, field lists, statuses and German copy.
Startseite, Chancen-Suche, Vertrauen, Registrierung — klickbar, DE/EN.
Candidate app · 1440×900Übersicht, Karriere-Kompass, Chancen, Förder-Navigator, Karriere-Mappe.
Eleven components: seven core primitives carried over from packages/ui, plus four journey patterns.
Button, Badge, Input, Label, Alert, Card, Spinner
Icon, Stepper, Progress, SourceTag
A warm rose / sand / ink direction replacing the discarded navy palette. Every ramp meets WCAG 2.2 AA — German accessibility law (BFSG) has applied since 28 June 2025.
The warm primary. One primary action per screen.
Grounds, borders and sunken surfaces.
Text and inverse surfaces. Never pure black, never blue-grey.
Verified green, official blue, amber caution, clay destructive.
Semantic aliases every component reads instead of a raw hue.
Every opportunity states where it came from — colour is part of the contract.
Mona Sans and JetBrains Mono. Tight heading sizes so German compound nouns fit on one line.
Mona Sans ExtraBold, −3% tracking. Marketing heroes only.
Semibold, −1.5% tracking.
15px product default, 17px marketing, 13px floor.
JetBrains Mono, tabular. Scores, latency, percentages, IDs.
4px base with an 8px usage rule, and 44px minimum control height.
4px base, 8px usage rule: prefer even steps.
Generous and warm: 14px controls, 20px cards, 28px panels.
Card padding 24, block gap 32, field gap 8.
Wordmark, grounds, elevation, motion and interaction states.
No logo file exists in the source repo — the name is set in type.
Low-contrast warm washes only. No blue-purple gradients, ever.
Warm ink-tinted shadows. Hairline → card → lift → overlay.
90–320ms, standard/out easing. No bounce, no spring.
Hover darkens + lifts; press scales 0.985; focus is a 2px rose ring.
Plain CSS custom properties. Import styles.css to get all of them.