WIRED Design System
Editorial · Generated 18/04/2026 · 18 colors · 48 type tokens · 16 spacing steps · 18 breakpoints · 13 motion tokens
v1.0.0
Color Palette
Background Colors
Black (×3386)
#000000
Dark Gray
#1A1A1A
Dark Gray 3
#2B2E35
White (×344)
#FFFFFF
White 3
#F7FAFC
White 2
#F3F3F3
Light Gray
#E5E5E5
Light Gray 2
#E1E7EE
Light Gray 3
#E2E8F0
Text Colors
Dark Blue (×187)
#4A5568
Mid Gray (×165)
#757575
Dark Gray 2 (×39)
#333333
Mid Gray 2 (×55)
#999999
Dark Blue 2
#2D3748
Mid Gray 3
#808080
Blue (link)
#057DBC
Blue 2 (fill)
#0066FF
Typography
Display / Headline · WiredDisplay / BreveText
WiredDisplay
The Future of AI Is Already Here — And It's Weirder Than You Think
Regular · 400 Bold · 700 Italic
Body / UI · Apercu / ProximaNova · WiredMono
Apercu
WIRED Mono · Technology · Science · Culture · Business
Regular · 400 Semibold · 600 Bold · 700 WiredMono
WIRED
Display 64px · Bold · WiredDisplay · line-height: 59.52px · letter-spacing: −0.5px
The AI Issue
Headline 45px · Bold · WiredDisplay · line-height: 42.28px · letter-spacing: −0.5px
Inside the Machine Mind
Article Head · 38px · Bold · WiredDisplay · line-height: 42px · letter-spacing: −0.5px
How GPT-5 Changed Everything
Section Head · 26px · Bold · BreveText · line-height: 28px · letter-spacing: −0.28px
The world's most powerful AI systems are now being deployed in hospitals, courts, and classrooms — with or without our consent.
Article Body · 16px · Regular · Apercu · line-height: 24px · letter-spacing: −0.144px
By Arielle Pardes · April 18, 2026 · 8 min read
Byline · 14px · Regular · Apercu · line-height: 19.6px
TECHNOLOGY · SCIENCE · CULTURE · BUSINESS
Section Label · 11px · Semibold · caps · letter-spacing: 1.2px
WIRED MONO · SPONSORED CONTENT · LEGAL
Micro · 8px · Semibold · WiredMono · letter-spacing: 0.9px
8 Font Families: sans-serif (base) · BreveText (editorial serif) · Inter (UI) · WiredMono / WIRED Mono (terminal/code) · Apercu (body) · WiredDisplay (headlines) · ProximaNova (nav/labels)
Line Heights
Tight
12px
Snug
14px
Normal
15.96px
Relaxed
18px
Loose
19.6px
LH-6
21.66px
LH-7
24px
LH-8
28px
LH-9
42.28px
LH-10
59.52px
Letter Spacing
WIRED
Tight · −0.5px
--letter-spacing-tight · display headlines 38px+
Technology
Wide · −0.144px
--letter-spacing-wide · body text 16px
SCIENCE
LS-9 · +0.9px
--letter-spacing-ls-9 · nav section labels
SPONSORED
LS-12 · +1.2px
--letter-spacing-ls-12 · micro caps labels
Spacing
Spacing Scale
16 tokens — 2px → 418.703px · Dense small values with large structural spacers
2
4
8
10
12
14.1
16
20
24
32
40
48
64
120
418.7
418.7
The two trailing values (--space-48: 418.695px and --space-64: 418.703px) are rendered column widths — likely captured at a specific viewport size. These are structural layout spacers, not UI padding tokens.
Borders
Border Radii
SM (bottom)
0 0 4px 4px
MD
4px
LG
6px
XL
8px
2XL
12px
Circle
50%
R7 (mega pill)
1133px
The --radius-sm: 0px 0px 4px 4px asymmetric token (bottom-rounded only) is shared with Bloomberg and Vercel — used for bottom-flushed category labels. The 1133px pill is even larger than Warp's 50px — used for WIRED's navigation tag pills to guarantee full roundness regardless of element width.
Border Widths
--border-width-hairline
1px · dividers, card borders, table rows
--border-width-thin
2px · section underlines, active states, top-border card accents
WIRED uses a 2px thick black line above article cards — a strong editorial convention inherited from print design. The hairline is used for dividers and supporting lines throughout the article grid.
Shadow / Elevation
Shadow Tokens
1 token — minimal editorial elevation
--shadow-sm
Dropdowns, tooltips, card hovers
rgba(0,0,0,0.1) −2px 2px 5px — a leftward shadow, consistent with WIRED's left-edge anchored navigation. The negative X offset creates shadow on the left side rather than bottom-right.
No elevation
Article cards, nav items
WIRED primarily uses 1px / 2px borders for surface definition. The minimal shadow palette reflects the magazine's flat, text-forward aesthetic — content, not chrome.
Black surface
Overlays, consent modal
The Fides privacy consent system uses the dark background stack (#2B2E35) for its overlay — documented in the CSS Custom Properties section.
Z-Index
LayerValueUsage
--z-1-1Behind content — decorative backgrounds, image underlays
--z-2 → --z-61 – 5Fine-grained content stacking — inline card badges, hover layers, overlapping article teasers
--z-750Sticky navigation bar and section headers
--z-880Top navigation, site header
--z-9300Dropdown menus, section navigation, search panel
--z-10400Overlay panels, full-page article view transitions
--z-11 / --z-12450 / 451Paired layers — base + lid of a single overlay component (e.g. modal backdrop + modal)
--z-13530Paywall overlay — above all content
--z-14600Sticky ads, interstitial banners
--z-151000Fides privacy consent modal — must be topmost
15 z-index layers (−1 to 1000) is the most granular stacking system in this series. The paired 450/451 values are the clearest example of the "backdrop + content" pattern — a single modal needs two adjacent values that can never clash with each other. The Fides consent overlay at z=1000 must win over the paywall at z=530.
Breakpoints
📱
--breakpoint-xs / sm
319 / 320px
Smallest phone (paired)
📱
--breakpoint-md / lg
375 / 425px
Standard phone sizes
📱
--breakpoint-xl
480px
Large phone
📱
--breakpoint-2xl / 3xl
569 / 570px
Phablet (paired)
💻
--breakpoint-bp-8
599px
Pre-tablet max
💻
--breakpoint-bp-9/10/11
667/767/768px
Tablet range
💻
--breakpoint-bp-12/13/14
1023/1024/1025px
Desktop (triple)
🖥️
--breakpoint-bp-15/16
1279 / 1280px
Wide desktop (paired)
🖥️
--breakpoint-bp-17 / bp-18
1599 / 1600px
XL widescreen (paired)
18 breakpoints (319px → 1600px). Notably starts at 319px — targeting the narrowest phone screens — and includes a 1024/1025px triplet cluster for fine control of the editorial tablet layout. The 1133px mega-pill radius was calibrated for this viewport range.
Opacity
Opacity Tokens
1 token — the most minimalist opacity palette in this series
--opacity-20
20% · overlay scrim
WIRED defines only one opacity token — the most minimalist in this series (shared only with Bloomberg's 5 tokens at the low end). WIRED's editorial design relies on solid colors rather than transparency effects. The 20% opacity is used for the Fides privacy overlay's skeleton loading gradient (rgba(0,0,0,.06) to rgba(0,0,0,.15)) and select modal backdrop elements.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-white17.4:1AAA
--color-dark-gray--color-light-gray13.82:1AAA
--color-dark-gray--color-white-215.68:1AAA
--color-dark-gray-2--color-white12.63:1AAA
--color-dark-gray-2--color-light-gray10.03:1AAA
--color-dark-blue--color-white7.53:1AAA
--color-dark-blue--color-light-gray5.97:1AA
--color-dark-blue--color-white-26.78:1AA
--color-mid-gray--color-black4.56:1AA
--color-mid-gray--color-white4.61:1AA
--color-mid-gray--color-light-gray3.66:1AA Large
--color-mid-gray-2--color-black7.37:1AAA
--color-mid-gray-2--color-dark-gray-34.77:1AA
--color-dark-blue--color-black2.79:1Fail
--color-mid-gray--color-dark-gray-32.95:1Fail
--color-mid-gray-2--color-white2.85:1Fail
--color-dark-gray--color-black1.21:1Fail
--color-dark-gray-2--color-black1.66:1Fail
CSS Variables Reference
Colors18 tokens
Black (×3386)--color-black#000000
Dark Gray--color-dark-gray#1A1A1A
Dark Gray 3--color-dark-gray-3#2B2E35
Dark Gray 2--color-dark-gray-2#333333
Dark Blue (×187)--color-dark-blue#4A5568
Dark Blue 2--color-dark-blue-2#2D3748
Mid Gray (×165)--color-mid-gray#757575
Mid Gray 3--color-mid-gray-3#808080
Mid Gray 2--color-mid-gray-2#999999
Mid Gray 4 (80%)--color-mid-gray-4rgba(153,153,153,0.8)
Light Gray--color-light-gray#E5E5E5
Light Gray 2--color-light-gray-2#E1E7EE
Light Gray 3--color-light-gray-3#E2E8F0
White 2--color-white-2#F3F3F3
White 3--color-white-3#F7FAFC
White--color-white#FFFFFF
Blue (link)--color-blue#057DBC
Blue 2 (fill)--color-blue-2#0066FF
Typography48 tokens
Base--font-family-basesans-serif
BreveText (editorial serif)--font-family-2BreveText
Inter (UI)--font-family-3Inter
WiredMono--font-family-4WiredMono
WIRED Mono--font-family-5WIRED Mono
Apercu (body)--font-family-6Apercu
WiredDisplay (headlines)--font-family-7WiredDisplay
ProximaNova--font-family-8ProximaNova
2XS (micro)--font-size-2xs8px
XS--font-size-xs11px
SM (caption)--font-size-sm12px
Base (12.73px fluid)--font-size-base12.73px
LG--font-size-lg13px
XL (body)--font-size-xl14px
2XL (nav)--font-size-2xl16px
3XL (17px)--font-size-3xl17px
5XL--font-size-5xl19px
Deck (26px)--font-size-26px26px
Article head (38px)--font-size-38px38px
Cover (45.465px fluid)--font-size-45px45.465px
Display (64px)--font-size-64px64px
Tight (display)--letter-spacing-tight−0.5px
Normal (heading)--letter-spacing-normal−0.28px
LS-9 (nav caps)--letter-spacing-ls-9+0.9px
LS-12 (micro caps)--letter-spacing-ls-12+1.2px
Spacing & Motionselected tokens
Space 1--space-12px
Space 2--space-24px
Space 3 (base)--space-38px
Space 5--space-512px
Space 6 (14.11px)--space-614.11px
Space 8--space-816px
Space 12--space-1224px
Space 16--space-1632px
Space 24--space-2448px
Space 32--space-3264px
Space 40--space-40120px
Space 48/64 (col width)--space-48 / 64418.7px
Instant--duration-instant100ms
Normal (×504)--duration-normal200ms
Long (×55)--duration-duration-101s
Ease In-Out (×453)--easing-ease-in-outease-in-out
Ease In--easing-ease-inease-in
Linear--easing-linearlinear
Borders, Z-Index & Opacityselected tokens
Hairline--border-width-hairline1px
Thin (accent)--border-width-thin2px
SM (bottom rounded)--radius-sm0 0 4px 4px
MD--radius-md4px
2XL--radius-2xl12px
Circle--radius-full50%
Mega pill--radius-r71133px
Scrim (only opacity token)--opacity-2020%
Behind BG--z-1-1
Content 1–5--z-2 → --z-61–5
Sticky Nav--z-750
Site Header--z-880
Dropdowns--z-9300
Paywall--z-13530
Sticky Ads--z-14600
Consent Modal--z-151000
Design System Preview · WIRED (Light Editorial) · Generated 18/04/2026 · 18 color tokens · 15 font-size · 8 font-family · 3 font-weight · 10 line-height · 12 letter-spacing · 16 spacing · 7 radius · 2 border-width · 1 shadow · 10 duration · 3 easing · 15 z-index · 18 breakpoints · 1 opacity