Design System
Ein 34-Slides-Brand-Book, das zugleich Source of Truth für Typografie, Farbe, Layout und Anwendungsmuster der Website ist.
Lokalisierte Projektversion mit bewahrtem Stack, Links, Code und zentralen technischen Details.
Every interface decision on this site — font pairing, spacing rhythm, nav anatomy, the red shimmer above translated posts — lives in a single in-app deck. Writing the system as a presentation forced every choice to earn its slide.
What's in the deck
- Logo — the portrait mark (black, #030303) and its favicon variant (blue, #2563eb)
- Color — primary palette plus the three shimmer accents (red, purple, green live-dot)
- Typography — DM Serif Display for headlines, Lora for long form, Geist for chrome, Cormorant for rare editorial moments, Geist Mono for captions
- Layout — the 896px editorial column, an 8-point spacing scale, a 12/8/4-column responsive grid
- Iconography — Radix UI Icons, 15×15 uniform geometry, no emoji-as-icon
- Application — real uses of the system in place: the 3-zone nav with mobile collapse, the editorial ledger, the translation disclaimer, the favicon size ladder
Why a deck and not a doc
A design doc rots in a drawer. A deck lives in the product — one keystroke away at /_dev/design-system?mode=presentation, screenshottable at 16:9, rendered in both light and dark themes. Every slide is built from three primitives (SlideFrame, SlideGrid, SlideHeadline), so adding a new rule means adding a slide, not a paragraph.
Stack
Next.js 16 · React 19 · Tailwind CSS 4 · container queries · @radix-ui/react-icons · Lora / DM Serif Display / Cormorant / Geist via next/font/google