Color, type, icons, and components, read straight from the theme — the reference to hand a new contributor before they open a template file.
Foundations
O
OpenPress
The mark: an accent-filled square with the initial, set in Playfair Display, next to the full wordmark. Give it room — never crowd it against other logos or copy.
A warm-newsprint editorial system: a cream page in daylight, deep canvas after dark, one amber-gold accent doing the work of a masthead flag — signalling "read this" the way a red thread or a wax seal would on a printed page, without shouting.
Live indicator
Breaking
.eyebrow + .live-dot — the pairing used anywhere something is happening now: breaking news, a live blog, this very label.
Color Palette
Every token has a Day value and a Night value — flip the theme toggle in the top bar and the whole site (this page included) repaints from the same eight variables. Click a hex to copy it.
--background
Background
--foreground
Foreground
--card
Card
--secondary
Secondary
--muted
Muted
--muted-foreground
Muted foreground
--accent
Accent / Primary
--border
Border
Typography
Display — Playfair Display
Headlines and section titles only. Weights 700–900, always paired with tight leading.
text-5xl / 48pxDeadline at dawn
text-3xl / 30pxDeadline at dawn
text-2xl / 24pxDeadline at dawn
text-lg / 18pxDeadline at dawn
Body — Inter
Everything a reader actually reads: ledes, body copy, UI labels, captions.
text-lg / 18pxIndependent journalism, published the hour it happens.
text-base / 16pxIndependent journalism, published the hour it happens.
text-sm / 14pxIndependent journalism, published the hour it happens.
text-xs / 12pxIndependent journalism, published the hour it happens.
Utility — JetBrains Mono
Timestamps, data, feed URLs, and the eyebrow label — anywhere the type itself should read as instrumentation, not prose.
Lucide, self-hosted at a pinned version so a CDN outage can never break the icon set. Click one to copy its data-lucide name.
Navigation
Actions
Content
Status & contact
Buttons & Badges
Buttons
Primary
Secondary Text link →
Badge
ArchiveComing soon
Used on nav-card and footer links for anything not live yet — set from OpenPress > Navigation Cards / Footer, no template edits needed.
Category pill
AllBilling
Cards & Components
Standard card
border + rounded-md + bg-card + card-hover. The base container for forms, FAQ items, and feed rows alike.
Quick-fact card
Icon badge + label, from the legal pages' trust-badge row.
Accordion (from the FAQ template)
What powers this accordion?
A native <details>/<summary> element — works with zero JS, keyboard- and screen-reader-friendly by default.
Where is it used?
The FAQ page template — search, category pills, and expand/collapse-all are the only parts that need JS.
Forms
Same border/radius/padding as text input
Focus state: border switches to the accent color (focus:border-accent) — no color-only error/success states elsewhere without an icon or label alongside them.
We're independent, ad-free journalism — no shareholders, no advertisers. We only use a single cookie for basic, anonymous analytics to see how the site's read. Accept to help us out, or decline and nothing about your experience changes.
