Colophon

How The Markup was built.

Brief

An editorial quarterly layout for JD Workshop variation 08. Cover story, feature spreads, short reads, long-form case studies, pull quotes, named sources, and a signed colophon. The site reads like reporting, not a brochure.

Visual system

Warm paper background (#f6f2ea), dark ink (#14120e) with soft contrast for body copy. Terra-cotta accent (#b84a32) for links and section topicality. Two serifs: Playfair Display for headline authority; Source Serif 4 for readable body set at 18px / 1.7. Sans fallback: Inter for labels, metadata, and small caps.

Type hierarchy

• Cover story: display headline, deck, byline, rubric.
• Features: alternating 2-column spreads with image bleed.
• Field Notes: 3-column short-read grid.
• Case Study: long-form grid with media and body copy.
• Pull quote: serif italic, bordered, 36ch maximum measure.

Proof labels

Every claim surface uses consistent badges. Context and intent are documented by word and mark. Translation to guide route is one-to-one.

• Real Verified output from reviewed production.
• Built demo Working prototype or calibration artifact.
• Concept Speculative material, clearly labeled.

Implemented choices

• Editorial typography with Playfair Display headlines and Source Serif 4 body.
• Cover story section with rubric, deck, byline, and named sources.
• Alternating feature spreads with editorial image and caption.
• Three-column short-read grid for Field Notes.
• Long-form case study with pull quote and source notes.
• Context panel on text selection for inline proof explanation.
• Reduced motion honored from OS preference.
• Responsive from 900px tablet breakpoint to mobile single column.
• Print-ready typography with measure, leading, and widow control.

Source disclosure

Named claims are drawn from independent verification against the production site and release signals. Concept descriptions are forward-looking trajectories. Built-demo claims describe calibration artifacts from the isolation run. All claims are stated, not assumed.

"Evidence is what remains when brochure language is removed." — Editorial standard introduced August 2025, verified by independent reviewer.

Sources and citations

• Production proof: production site architecture, release signal, and maintainers as of pilot.
• Independent reviewer: external calibration against static check, guide route, console surface.
• Standards: webspeak accessibility, CSS type scale, reduced motion media query.