Editorial · Magazine
A magazine feature in warm serif: masthead, drop cap, red pull quote, hatched figure, and a two-column measure that begs to be read.
| Color | Hex | Use |
|---|---|---|
| paper | #fbf9f4 | page background |
| ink | #1a1712 | headlines · rules |
| ink-2 | #3a352c | body text |
| muted | #4a4436 | byline · captions |
| accent | #b3261e | drop cap · pull rule |
| hair | #ddd6c6 | hairlines · figure border |
| Type | Face | Spec |
| display | serif | h1 56 / 700 · −0.025em |
| body | serif 17 | 1.65 · justify · hyphens |
| drop cap | serif 64 | red · float left |
| labels | mono 10–12 | uppercase · +0.1em |
| Shape | Value | Use |
| measure | 980px · gutter 32 | masthead + article |
| columns | 2 · gap 46px | body text |
| pull quote | 3px red border | column-span all |
| figure | 300px · hatch | 45° repeating gradient |
MISSION Magazine feature that makes reading an event. Warm paper,
confident serif, one red stamp of restraint.
TYPE Serif for all reading + display. Body 17/1.65 justified,
hyphens auto. h1 56/700 −0.025em. Labels mono uppercase.
COLOR paper #fbf9f4 · ink #1a1712 · ink-2 #3a352c
accent #b3261e (only drop cap, pull rule, kicker, tabs)
SHAPE masthead 3px/1px ink rules · 2-col measure 46px gap ·
red pull quote column-span all · hatched 300px figure
COPY "A slow map of the city's loudest corner" · pull quote:
"The block is never quiet. It merely changes its tune…"
FULL tokens, type scale, do/don'ts & checklist →
ai-guide.md (copy button fetches the whole file)
<!-- excerpt — full file: reference.html (self-contained) -->
<article>
<p class="kicker">Cities / Infrastructure</p>
<h1>A slow map of the city's loudest corner</h1>
<p class="standfirst">…</p>
<div class="body-cols">
<p class="first">The first thing you notice…</p>
<div class="pull">
“The block is never quiet. It merely changes
its tune — and the city forgot how to listen.”
<cite>— Rosa Delgado, ward 4 planner</cite>
</div>
<figure>
<div class="fig">Fig. 01 — Harbor & Main</div>
<figcaption><b>Fig. 1</b> The intersection at dawn…</figcaption>
</figure>
</div>
</article>