style guide — because you asked
so you liked the design of wonk.blog and you want to know how it was made.
flattering. genuinely. here you go.
every color, every font, every decision is documented below with a completely
real but also kind of unhinged backstory. because good design
has a reason, even when the reason is "it just felt right and
i needed to justify it after the fact."
note: no a.i. was consulted on the aesthetic opinions expressed herein.
any resemblance to actual graphic design school curriculum is coincidental.
please don't start a substack about this.
background
--color-bg / canvas
not #000000. not even #080808 anymore. this is the warmest near-black you can get away with — the color of a cinema at 2 a.m. with the house lights barely on. screens are cold. this one isn't. it is doing a lot of work quietly.
text
--color-text / primary foreground
old vellum. the color of the page in a 16th-century venetian printing house. people spreading ideas that got them in trouble. we are continuing that tradition. white text on dark backgrounds gives people headaches. this doesn't.
accent
--color-accent / emphasis / "look here"
amber. old gold. the color of lamplight on a manuscript page. it says "here is the important thing" without shouting it. it is the color of the argument that has been tested and survived. not flashy. patient.
emphasis
--color-emphasis / secondary / cool contrast
cyan-blue slate. the color of the sky over the north sea at noon, or ink on old blueprint paper. where amber is warm and patient, this is cool and precise — the color of the argument that has been checked against the data. keeps the palette honest.
border
--color-border / structure
a good suit has contrast stitching you only notice on close inspection. that's this. it divides space and suggests hierarchy without demanding attention. the unsung hero of the whole palette.
most political disagreement is a category error — conflating empirical questions about mechanism efficiency with normative questions about redistribution. separate those two things and most of the fighting disappears.
"voter satisfaction efficiency doesn't care about your feelings about i.r.v. it's a number."
section label treatment
— featured argument
stat label treatment
64% · fargo, n.d. — approval voting (c.e.s.)
nav link treatment
topics · about · electionbyjury.org
--color-accent: #c49a3c;
--font-display: 'Cormorant Garamond';
voter satisfaction efficiency · n = 10,000 simulations
01
capitalization is a power move. it implies some words matter more based on position rather than content. we disagree with this ontologically. initialisms get periods because i.r.v. looks more human than IRV and we are, allegedly, humans.
02
the hard-edged grid isn't just aesthetic — it's the visual equivalent of logical structure. borders don't blur. columns don't drift. everything is where it says it is. this is what policy arguments should look like too, but that's a longer essay.
03
the warm near-black, the amber accent, the vellum text — these prevent the page from feeling like a u.i. kit. screens are cold. ideas are warm. the design's job is not to get in the way of the argument, and cold high-contrast aesthetics absolutely do.
— used on essay / article pages
wrap content in .container for max-width centred layout. the four box types handle different rhetorical weights.
.box
generic inset panel. for f.a.q. answers, supplementary content, anything that needs to breathe separately from the main prose without screaming at you..box-highlight
the important thing you'd bold in a textbook. accent-coloured left border, faint accent-wash background. use for conclusions, key assertions, the thing the reader should remember if they skim..box-accent — for a cluster of related points. the ▪ marker is a css pseudo-element. pairs well with an h4 inside.
.box-labeled
floating label rendered from thedata-label attribute via css content: attr(data-label). no extra markup needed.
.steps + .step. the → is a pure css pseudo-element. use for sequential processes where order matters.
nest a ul inside for sub-items.
| component | class | rhetorical weight |
|---|---|---|
| generic panel | .box | low — supplementary |
| callout | .box-highlight | high — conclusion / key claim |
| feature entry | .box-accent | medium — one point in a set |
| worked example | .box-labeled | medium — named instance |
| process | .steps / .step | sequential — ordered argument |
u-mono — jetbrains mono at 0.85em
u-accent — accent color text
u-emphasis — emphasis color, italic
u-muted — 60% opacity
u-small — 0.85em
u-large — 1.35em
u-italic — italic
use .text-accent and .text-emphasis for colored words in display headings.
these are purpose-named — if the brand palette changes, only the css :root values change.
no html edits needed.