Watch the latest
We Them Media We Them Media Discord Back the work →
Reference — v1 — Internal

The System. Documented.

Tokens, components, and usage rules for the We Them Media visual system. If you’re contributing copy, design, or code, read this first.

§ Colors
Tokens · CSS custom properties

The palette. Disciplined.

Three accent colors, three jobs. Coral is the door (CTAs). Ink is the brush (climax words). Gold is the halo (ambient glow). Don’t cross the streams.

--coral
#E47452
Primary CTA accent only. Used on .btn-primary, hover/focus accents, mono eyebrows on cards. Do not use for body text.
--coral-deep
#C45438
Hover / pressed state of coral. Used for active button states and link underlines. Don’t use as a primary accent.
--ink
#C4543A
Brushwork & climax-word accent only. The sumi-e stroke under .climax-ink. Never use for buttons or body text.
--gold
#E8B958
Ambient halo & finale glow only. .halo-bleed pseudo-elements, page-header glow, gold tape variant. Never use as text or solid fill.
--teal
#2BA89F
Legacy logo-native, used sparingly. Section-numbers, focus rings. Avoid in display copy.
--teal-deep
#1A6962
Depth/leaves variant of teal. Used for shadow color on .btn-primary hover. Never as primary accent.
--text
#F4EDE0
Body text (cream). Default text color. Pulled from the logo background. Also the polaroid-chamfer paper.
--text-muted
#A89E8B
Secondary body text & deck. .deck, .page-deck, captions. Passes AA on dark surfaces.
--text-dim
#807968
Tertiary text (small mono labels). Stat labels, footer fine print. AA on small mono.
--text-low
#3A352B
Decorative low-contrast. Disabled states only. Never readable text.
--bg
#0E0D0B
Page background (warm dark). Like ink on a printer’s plate. The default surface.
--bg-elev
#16140F
Elevated surface. Cards, the masthead, the stats strip. One step up from --bg.
--bg-surface
#1F1B14
Higher-elevation surface. Inset blocks, video tile gradients.
--bg-hover
#2A241B
Hover surface. Subtle warm-up on row/card hovers. Reserve for hover states.
--border
#2C2820
Default 1px border. Card borders, section dividers. Hairline weight.
--border-strong
#3D362A
Stronger border. Featured cards, ghost button outline. One step heavier than --border.
§ Typography
Display · Body · Mono

Three families, one voice.

Fraunces for display (variable axes: opsz, WONK, SOFT). Newsreader for body. JetBrains Mono for labels, eyebrows, and Dymo tape.

Fraunces Display · 700 · opsz 144 · WONK 1
A global journalism network.
Fraunces Italic · 500 · opsz 144 · SOFT 100
Built in public.
Newsreader Body · 400 · opsz auto
One camera, one city, one hundred-plus conversations. The pilot that proved the model at zero budget — and the network that scales it.
Newsreader Italic · 400
Funded by partners. Created together.
JetBrains Mono · 700 · letter-spaced
NEWSLETTER 001 — APRIL 2026 — PHILADELPHIA

Type scale (clamp values)

.page-title
The Work.
.section-head h2
One camera.
.page-deck
A reference for contributors.
.section-card .title
The proof.
.btn (mono)
BACK THE WORK
.mono-eyebrow / labels
SECTION LABEL
§ Components
Live examples · with markup

The kit, in the open.

.btn — All variants

Mono caps · letter-spaced · 44px min-height · primary/secondary/ghost
Back the work → Read the plan Join the Discord 
<a href="#" class="btn btn-primary">Back the work →</a>
<a href="#" class="btn btn-secondary">Read the plan</a>
<a href="#" class="btn btn-ghost">Join the Discord</a>

.tape — Dymo label (default / coral / gold)

Mono · clip-path arrow · uppercase · status-pill role
NEWSLETTER 001 LIVE 06.01.26 FUNDED 
<span class="tape">NEWSLETTER 001</span>
<span class="tape coral">LIVE 06.01.26</span>
<span class="tape gold">FUNDED</span>

.section-card — Page-link card (secondary)

Used on home grid · hover lifts -3px with ink shadow + coral underline
02 — About
The why and how.
Why local journalism matters now. How the network funds, ships, and stays free to access.
Read the manifesto →
 
<a href="about.html" class="section-card">
  <div class="num">02 — About</div>
  <div class="title">The why <em>and how.</em></div>
  <div class="deck">Why local journalism matters now…</div>
  <div class="more">Read the manifesto →</div>
</a>

.polaroid-chamfer — Hero photo treatment

Cream paper · 1.5° rotation · chamfered corners (Gurren-mecha edge) · italic caption
FIG. 01
— Makurdi, Benue State. March 2025.
<div class="polaroid-chamfer">
  <span class="badge">FIG. 01</span>
  <div class="img" style="background-image: url(maceo-original.jpg);"
       role="img" aria-label="..."></div>
  <div class="cap">— Makurdi, Benue State. March 2025.</div>
</div>

.brush-line — Sumi-e divider SVG

Paints itself on scroll into view (1.2s ease) · ink color · max-width 320px
<svg class="brush-line" viewBox="0 0 320 16" preserveAspectRatio="none" aria-hidden="true">
  <use href="#brush"/>
</svg>

.spiral — Gurren colophon SVG

14×14px · coral · ambient 18s rotation · sits beside the brand mark
<svg class="spiral" aria-hidden="true"><use href="#spiral"/></svg>

.live-dot — Pulsing live indicator

7×7px · coral · 2s pulse · used in masthead CTA, ticker, mobile sticky CTA
Live now 
<span class="live-dot" aria-hidden="true"></span> LIVE NOW

.climax-ink — The climax-word treatment

Sumi-e brushstroke painted under one word per heading · ink color · max ONE per heading
Built in public. 
<h2>A global journalism network. <em><span class="climax-ink">Built in public.</span></em></h2>
§ Usage rules
Do this. Not that.

Discipline keeps it soulful.

The system reads as bold-yet-subtle because each accent color has exactly one job. Cross the streams and it reads as decoration. Hold the line and it reads as voice.

Coral — primary CTA only

  • Use on .btn-primary — the one click you want them to make.
  • Use on the .num eyebrow on cards (it links the card to the path).
  • Use on .live-dot and active-state link underlines.
  • Don’t use coral for body text or paragraph copy.
  • Don’t use coral on more than one CTA per viewport.
  • Don’t use coral as a decorative accent — it loses authority.

Ink — brushwork only

  • Use as the .climax-ink color and the sumi-e brushstroke beneath it.
  • Use as the offset-shadow color on hover-lifted cards.
  • Use on .brush-line dividers between major sections.
  • Don’t use ink for buttons. That’s coral’s job.
  • Don’t use ink for body text — it’s a brushwork color, not a reading color.

Gold — halo only

  • Use on .halo-bleed pseudo-elements behind hero photos and page headers.
  • Use on the .tape.gold variant for finale/funded states only.
  • Don’t use gold as text color. The cream contrast fails AA on gold.
  • Don’t use gold as a solid fill for buttons or cards.
  • Don’t use gold without the blur+opacity treatment — it should feel ambient.

Brushstroke (.climax-ink)

  • Apply to the single most important word/phrase in a heading.
  • Use on a serif italic span (Fraunces opsz 144, SOFT 100) for the proper soulful weight.
  • Maximum ONE per heading. Maximum 2–3 per page.
  • Don’t apply decoratively or to verbs without weight.
  • Don’t use on body text, captions, or button labels.
  • Don’t stack brushstrokes near each other — the ink loses meaning.

Type pairing

  • Pair Fraunces display + Newsreader body in display:body ratio of ~3:1.
  • Use Newsreader italic for emphasis inside body copy — never bold.
  • Use JetBrains Mono only for labels, eyebrows, tape, and tabular data.
  • Don’t set body copy in Fraunces — it’s a display face.
  • Don’t mix more than one italic + one display family per page.

Tape, polaroid, spiral

  • Use .tape for status (LIVE, NEWSLETTER 001, FUNDED) — not navigation.
  • Use .polaroid-chamfer once per major section, max. It’s a feature treatment.
  • Keep the .spiral colophon at one location: beside the brand mark.
  • Don’t use .tape for category labels or filters — it implies status.
  • Don’t scatter polaroids across a page — they lose preciousness.