Design System / 03
Layout is a newspaper, not a dashboard: tight gutters, hairline rules, edge-to-edge photography, and a fixed masthead.
Page gutter
10px mobile · 20px desktop nav · 30px content
Header height
40px mobile · 50px desktop (body padding-top matches)
Article header split
0.9fr / 1.1fr two-column grid above md
Full-bleed media
calc(100vw - 20px) mobile · calc(100vw - 30px) desktop, centered
Info bar
19px tall, three-column truncating grid, hairline underneath
Radius
0 for brand surfaces — corners are square; shadcn controls keep --radius 0.5rem
Hairlines
--hairline 1px · --hairline-fine 0.5px · 10-20% ink
Editorial grids
--grid-editorial-a 1fr 1.5fr .5fr · -b .75fr 1.5fr .75fr · --grid-index 1fr 5.75fr
Flush gutter
--gap-flush 3px for image mosaics
Vertical rhythm
--rhythm-sm 7.5vh · -md 10vh · -lg 15vh for hero/section spacing
Fixed masthead
The nav is fixed and opaque; the document offsets itself with body padding rather than spacers. An announcement banner can sit above it.
Almost full bleed
Hero media runs to within 10–15px of the viewport edge — wide enough to feel immersive, with just enough paper showing to frame it.
Hidden scrollbars, smooth scroll
Scrollbars are hidden and Lenis eases wheel scrolling (lerp 0.14). Both back off automatically for touch devices and reduced motion.
Photography treatment
Editorial imagery may run grayscale (.photo-bw) so the monochrome interface and the photography never compete.