refactor(ui): editorial monochrome design refresh (#473)
* refactor(ui): editorial monochrome design refresh
Design-system layer only, no functional changes. Cascades app-wide
from 8 files in the primitives + tokens layer.
- Swap Fraunces → Hedvig Letters Serif for display typography
(single-weight; drop font-medium from CardTitle and PageHeader)
- Token sweep: pure white background, warm beige secondary
(40 11% 89%), achromatic primary, calibrated 45 5% 85% border,
halved-opacity shadows
- Flatten Card: remove shadow, rounded-xl → rounded-lg, full-opacity
border (was border-border/60)
- Flatten Button: remove shadow-sm, remove active:scale-[0.98],
drop outline border morph, transition-all 300ms → transition-colors
150ms
- Soften Dialog overlay (bg-black/80 → bg-black/40 with dark variant)
and use halved --shadow-md token on DialogContent
- Sidebar: bg-card/90 → bg-background, full-opacity hairline border,
warm-beige active state (bg-secondary), hover bg-secondary/60
- .hover-lift utility: replace translateY + box-shadow with flat
background-color shift
- PageHeader title: text-2xl font-medium → text-3xl md:text-4xl
(no font-medium)
- CLAUDE.md Brand & Aesthetic, Typography, and Forbidden Patterns
sections rewritten to reflect new system
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(ui): address PR review
- Remove dead .hover-lift utility (no callers; CLAUDE.md now bans
hover-lift patterns, so leaving the class would contradict the docs)
- Bump Dialog overlay bg-black/40 → bg-black/50 — gives a more
perceptible separation layer over the new pure-white background
while keeping the lighter editorial feel
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jakob Wennberg
ba45b8f661