Long-form blog reading experience

Build an article template for a long-form technical publication.

Measure and rhythm: body text at 19px with a 1.72 line height, max-width 68 characters. Paragraph spacing 1.5em with no first-line indent. Headings use a modular scale: h2 at 1.75rem with 3em of space above and 0.75em below, h3 at 1.25rem. Never allow a heading to sit closer to the paragraph above it than the one below.

Elements to design properly: block quotes with a hanging quotation mark in the left margin, not a coloured background box; code blocks with a filename header, monospace at 14px, horizontal scroll inside their own container so the page never scrolls sideways, and a copy button; inline code with a subtle fill and 0.9em size; figures with captions in 14px muted italic; footnotes as superscript links that jump to a list at the end with return links; and a table that scrolls inside its own overflow container.

Page furniture: article title at clamp(2.25rem, 5vw, 3.5rem); a byline row with author, date in monospace and reading time; a table of contents that is sticky on desktop and a collapsible summary on mobile, highlighting the current section; and a 2px reading-progress bar at the very top.

Design tokens: background #FFFDF9 / #0F1014 in dark, text #17171B / #E9E9ED, muted #6D6D76 / #8E8E99, hairline #E9E6DE / #22232B, accent #1E38D6 / #7B92FF. Serif for body, sans for UI, monospace for code and dates.

Constraints: no newsletter popup, no floating social share bar, no related-posts grid above the article end, no auto-playing embeds.