Atelier — The Brief Designs Itself (editorial serif / burgundy)
Editorial magazine-style hero for an AI design agent: warm paper-cream canvas, Fraunces serif display headline with one italic burgundy accent word, minimal underlined text CTA, asymmetric 7/5 grid with a tinted framed photo, gold hairline rule, and a sticky translucent nav.
Summary
An editorial, magazine-style hero section for an AI product design agent. Warm paper-cream canvas, a Fraunces serif display headline broken across two lines with one italic burgundy accent word, a short standfirst paragraph, a minimal underlined text-link CTA (no button), and an asymmetric 7/5 grid pairing the type with a tinted, framed photographic plate. A thin gold rule separates the hero from an editorial metadata strip (pull-quote + two stat columns). Sticky translucent cream nav with backdrop blur, uppercase wide-tracked links, and an outlined pill 'Start free' CTA.
Style
Print-editorial / fashion-journal aesthetic translated to web: warm off-white paper, deep near-black ink, a single muted burgundy accent and a soft gold rule. Type does the heavy lifting via Fraunces serif with tight negative tracking and an italic accent word; everything else is restrained, lots of air, hairline borders, and one tinted hero photo as the only color block.
Layout & Structure
Full-width sticky header over a centered max-w-[1240px] hero column. The hero is a one-row asymmetric 12-col grid: left 7 columns hold kicker + headline + standfirst + text CTA, right 5 columns hold the framed image with an absolute caption. The grid items align to the bottom (items-end). Below the grid: a thin full-width gold rule, then a metadata strip that splits into a left italic pull-quote and a right cluster of two stat columns. On mobile it collapses to a single column and stacks.
Sticky nav
Kicker
Headline + standfirst + CTA (left, 7 cols)
Framed image (right, 5 cols)
Gold rule + metadata strip
Special Notes
The look depends on restraint: keep the palette to exactly cream/ink/burgundy/gold, use burgundy only as a single accent (italic word, kicker, labels, hovers), and let Fraunces carry the personality with tight tracking and a near-1.0 line-height. No drop-shadows or fills anywhere except the one hero photo and the inverting nav pill. Use the icon set (Iconify material-symbols) for the arrow. The grid is intentionally asymmetric (7/5) and bottom-aligned; collapse to a single stacked column under lg.