Release notes design
A repeatable layout for shipping changelogs that users actually read.
Structure
Every release note follows a three-part skeleton: a version header with date and codename, a highlight summary for skimmers, and a categorized detail list for power users. Keep the header scannable — most readers decide whether to stay in under two seconds.
Visual rhythm
Alternate between a dark card for the version header and a slightly elevated panel for the body. Use the violet-to-pink gradient sparingly — only on the latest release badge and on category icons. Everything else stays monochrome so the brand accents pop.
Category tags
Group changes under four fixed tags: Added, Fixed, Changed, and Removed. Each tag gets a small colored dot and a monospace label. No invented categories — consistency across releases builds trust.
Typography
Version numbers use tabular-nums tracking-tight at 2xl weight semibold. Body copy is zinc-300 on the dark base, 16px with 1.75 leading. Inline code references sit in a subtle zinc-800 background with pink text — no full code blocks inside release notes.
Mobile
Single-column with reduced horizontal padding. Version header stacks vertically: codename wraps below the number. Category lists lose their two-column grid and flow as a single stack. Touch targets stay at least 44px.