Section 01 / Palette

Color Palette

Black, paper white, two grays, and one blue accent. The whole site lives inside this discipline.

Primary — Editorial Ink
WIRED Black
#000000
Pure ink for ribbons, dividers, button borders, headline rules.
Page Ink
#1A1A1A
Near-black for headlines and body type — softened for long reading.
Paper White
#FFFFFF
Default canvas. Treat it like newsprint — uninterrupted, never tinted.
Secondary — Editorial Voice
Link Blue
#057DBC
The single brand accent. Inline link hover only — never a fill.
Neutrals & Text
Caption Gray
#757575
Bylines, timestamps, photo credits, secondary metadata.
Disabled Gray
#999999
Inactive links and low-priority labels.
Hairline Tint
#E2E8F0
Reserved for <hr> — barely visible, like a margin rule.
Hairline Mid
#4A5568
Quiet column dividers within editorial blocks.
Semantic — Used Sparingly
Error Red
#E53E3E
Form-error labels and the rare "BREAKING" pill.
Section 02 / Typography

Typographic Hierarchy

Four faces, four jobs. Display serif shouts, humanist serif reads, geometric sans clicks, mono labels.

Display HeroWiredDisplay · 64px / 0.93 / -0.5px
A Headline Loud Enough For Newsstand
Display MidWiredDisplay · 26px / 1.08
Tighter grid headline for the inner story tiles
Section HeadingApercu · 20px / 700 / 1.20 / -0.28px
Most Popular This Week
SubheadingApercu · 17px / 700 / 1.29 / -0.144px
Story decks within feature blocks
Article DeckBreveText · 19px / 1.47 / 0.108px
A long-form lead paragraph that should feel like reading a printed magazine page — generous leading and a humanist serif designed for sustained attention.
Article BodyBreveText · 16px / 1.50 / 0.09px
Standard paragraph text. The contrast between display tightness (0.93) and body openness (1.50) is the editorial fingerprint of this design system.
UI Heading / ButtonApercu · 16px / 700 / 1.25 / 0.3px
Subscribe Now — Inline UI Label
Inline LinkApercu · 14px / 1.29 / 0.4px
Footer link · Secondary navigation
Eyebrow / KickerWiredMono · 13px / 1.23 / 0.92px / UPPER
Backchannel · The Story Behind The Story
Section RibbonWiredMono · 12px / 700 / 1.00 / 1.2px / UPPER
Most Popular
Photo CaptionBreveText · 12.73px / 700 / 2.20 / 0.108px
Photograph by The Editorial Team / WIRED Archives
TimestampWiredMono · 12px / 1.33 / 1.1px / UPPER
3 hours ago
Footer TertiaryProximaNova · 11px / 1.45
Privacy Policy · Terms of Service · Ad Choices · Press
Section 03 / Buttons

Button Variants

2px hard borders, square corners, instant hover inversion. Pills and circles only for non-rectangular roles.

Primary — Outline
Secondary — Inverted
Ghost — Underlined
Icon — Round 50%
Pill — Inline Tag Breaking
Hover — Inversion (illustrated)
Section 04 / Editorial Tiles

Story Tiles & Containers

There are no cards. There are story tiles separated by hairline rules and whitespace. No shadows, no rounded corners.

Backchannel

The Strange Future Of Editorial Layout In A Generative Era

A long-form deck describing how legacy magazine grids are being remade — and remembered — by a new wave of AI-driven publishing tools.

Gear

A New Mechanical Keyboard That Quiets The Office

Science

Inside The Lab Building A Synthetic Atmosphere

Section 05 / Most Popular

Numbered Editorial List

WiredDisplay numerals at 48px, hairline rules between every item, no other decoration.

Section 06 / Forms

Inputs & Newsletter

2px solid black border, square corners, no glow ring. Caret only on focus — printerly restraint.

Please enter a valid address
Section 07 / Spacing

Spacing Scale (8px System)

From hairlines to full editorial breaks — every gap is a multiple of 8 (with one or two micro-exceptions).

1px · hairline
4px
8px · base
12px
16px
24px
32px
40px
48px
64px
Section 08 / Radius

Border Radius Scale

Three values total. Two of them are reserved for shapes that aren't rectangles.

0 · SquareDefault — every container, image, button
1920px · PillInline text spans only
50% · CircleIcon buttons & avatars
Section 09 / Elevation

Depth & Elevation

Flat by religion. Depth comes from rule weight, not from simulated lighting.

Level 0
No shadow, no border — text on paper
Level 1
1px hairline tint <hr> — quiet divider
Level 2
1px solid black hairline rule — printerly column divider
Level 3
2px Border
2px solid black border — interactive emphasis
Level 4
Black ribbon fill — section labels
Level 5
Inverted #1a1a1a footer block — the only dark zone