Styleguide, We Them Media

§ 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="mission.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.

The System. Documented.