The Editorial Card — a blog-article card that earns the second glance

Summary

A warm editorial blog-article card composition ('FieldNotes — The Editorial Card') built around a single, deliberate article card on a printed-paper page. A sticky translucent cream nav sits above a centered full-bleed hero band (a tracked uppercase eyebrow, a serif headline with an italic accent, and a subhead), then the stage: a centered article card (a burgundy duotone cover with a feather motif, an oversized issue numeral, and a read-time pill; a category + date meta row; a serif headline with a grow-on-hover underline; an excerpt; a 'Read the essay' link; a hairline; and an author row with a monogram avatar + bookmark/share actions) sitting beside a deliberately-filled editorial rail (issue eyebrow, a serif pull-quote, a hairline, and an 'Also in this issue' numbered list), closed by a full-bleed ink footer. Cream + ink + a single burgundy accent, set in Fraunces serif + Inter sans on a grain-washed paper canvas.

Style

Warm editorial / print-journal aesthetic: a paper canvas (body #efe7da, cream surfaces #faf6ef, secondary cream #f4ece0) with a faint dotted 'grain' wash, near-black ink (#1c1815) headings and a softer ink (#4b4039) for body, and burgundy (#7b2d3b, deep #5e1f2b) as the single brand accent. Hairlines are warm line #e6ddd0. The article card is a cream rounded-2xl surface with a 1px line ring and a custom layered card shadow; its cover is a burgundy->ink duotone made of a diagonal gradient over a radial peach->burgundy->deep-burgundy fill. Two typefaces by role: Fraunces (serif, opsz 9..144, weights 400-900, with a real italic for accents) for headlines, eyebrows, the issue numeral, the monogram and the pull-quote; Inter (sans, 400-700) for nav, body, meta and UI. Accent micro-labels are uppercase with mega letter-spacing (0.34em). Links use a grow-from-left underline that animates to full width on hover.

Layout & Structure

A full-width page in vertical bands, each band centered in a max-w-6xl (nav/hero/footer) or max-w-5xl (card stage) container with 1.5rem/2rem horizontal padding. Vertical order: sticky glass nav -> centered full-bleed hero band -> the card stage (a 2-column grid at lg: a ~440px article card column + a fluid editorial rail) -> full-bleed ink footer. Responsive: the hero is always centered; the stage is a single centered column on mobile/tablet (card capped at max-w-[440px], with a small italic caption beneath) and becomes lg:grid-cols-[minmax(0,440px)_1fr] with the editorial rail appearing only at lg (hidden below); the nav center links hide below md.

Sticky glass nav

Full-bleed hero band

The article card (signature component)

Editorial rail (fills the wide frame)

Full-bleed ink footer

Special Notes

Single-accent discipline: burgundy (#7b2d3b primary, #5e1f2b deep) is the only brand color on a warm paper canvas (body #efe7da, cream surfaces #faf6ef, secondary cream #f4ece0) with near-black ink (#1c1815) headings and soft ink (#4b4039) body, and warm line hairlines (#e6ddd0). Two typefaces by role: Fraunces serif (opsz 9..144, weights 400-900 + a real italic, via Google Fonts) carries all the editorial voice, headlines, eyebrows, the issue numeral, the monogram and the pull-quote, while Inter sans (400-700) handles nav, body, meta and UI. The whole thing is framed to feel 'printed, not posted': a grain dot wash, a duotone cover instead of a stock photo, an oversized issue numeral, and a deliberately-filled editorial rail so the wide frame never reads as empty around the single card. Icons are Lucide (lucide:*) via Iconify. Copy is human with zero em-dashes ('Stories that earn the second glance.', 'A good card doesn't shout. It leans in and lets the words do the rest.'). The article/author/issue content is sample copy so the prompt ships with no bundled assets; the reusable value is the editorial article-card composition (duotone cover + serif headline + monogram author row) and the cream/ink/burgundy print system, not the words.