Design System
Um brand book de 34 slides que também é a fonte da verdade para tipografia, cor, layout e padrões de aplicação do site.
Versão localizada do projeto, preservando stack, links, código e detalhes técnicos principais.
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