Wired Brand Design System Deep-Dive

1. Brand Overview

Wired’s visual language is unapologetically tech-forward, deliberately sharp, and almost editorial in its confidence. The brand lives where journalism meets futurism, and the design system reflects that — it’s restrained, typographically assertive, and monochrome-heavy with very selective use of color.

The vibe: black and white dominance, punctuated by functional accent colors (blues for links, greens/reds for status). This isn’t about warmth or friendliness; it’s about clarity, authority, and a subtle sense of engineered precision. The typography mix — custom WiredDisplay, Apercu, BreveText, ProximaNova, Inter, and WiredMono — immediately signals an editorial backbone. No one font family carries the whole system; instead, each is deployed for different tonal effects: the display face for headlines, humanist sans for body, monospaced for metadata.

The color palette is stark. Primary is pure black (#000000) — used for text, borders, and brand anchors. White (#ffffff) forms the canvas. Various grays fill in the hierarchy: #1a1a1a for body text, #757575 for secondary text, #999999 and #333333 for subdued elements, #4a5568 for UI chrome, #e5e5e5 for light dividers.

Link blue (rgb(5, 125, 188) — not declared as a palette color but shows up in link states) is the lone chromatic accent in daily use, except for functional states: error red (#e53e3e), success green (#38a169), and a badge slate (#718096).

Spacing is strict — multiples of 8px dominate, with occasional 4px increments for small adjustments. Border radius is minimal, usually 4px or 8px, occasionally 50% for circular buttons. Shadows are rare — only one low-opacity drop shadow appears, confirming a mostly flat aesthetic.

Audience-wise, Wired’s system is for readers who want a no-nonsense, editorial-first experience with subtle interactive cues. Developers will find it easy to implement because of the rigid grid and minimal color variety. Designers will appreciate the typographic richness — it’s not just a utilitarian system; it’s a statement about authority and taste.

2. Color System

2.1 Primary Colors

Primary: Black (#000000) — used for text, borders, and primary brand elements. Black in this context isn’t about darkness; it’s about contrast and authority. Wired avoids “soft” blacks; this is pure RGB black.

Secondary (semantic): Transparent (rgba(0, 0, 0, 0)) — used as a placeholder semantic slot, essentially meaning “no fill.”

Black as primary works differently than a blue or red primary would — it trades emotional tone for functional clarity. Compared to competitors in tech journalism (e.g., The Verge’s neon accents, TechCrunch’s green), Wired’s black-first approach feels more print-derived, more serious.

2.2 Complete Palette

2.3 Color Relationships

Black on white is the dominant pairing — high WCAG contrast (21:1). Secondary text grays (#757575, #999999, #333333) maintain readability on white backgrounds but drop contrast on dark backgrounds (something to watch for in dark modes).

Link blue #057dbc is used sparingly, but when it appears, it pops hard against the monochrome palette. Error red and success green have enough saturation to be noticeable but not garish.

Dark mode isn’t explicitly in the extracted data — transparency and overlay grays hint at potential overlays rather than full dark mode.

2.4 Usage Guide

• Works well: Black text on white, link blue for interactive states, slate gray (#4a5568) for UI controls.
• Avoid: Using mid-gray text (#757575) on dark backgrounds — contrast drops below accessibility thresholds.
• Combos to use: Error red with white text for alerts, success green with white text for confirmations.
• Combos to avoid: Slate gray (#4a5568) on charcoal (#333333) — muddy and low contrast.

3. Typography

3.1 Font Families

• WiredDisplay — custom serif/sans hybrid (display face), fallback helvetica. Used for H1, links in large sizes.
• Apercu — humanist sans, fallback helvetica. Used for headings, buttons, captions.
• BreveText — serif, fallback helvetica. Used for body text, headings, buttons.
• ProximaNova — geometric sans, fallback helvetica. Used for headings, links, captions.
• Inter — modern UI sans. Used for captions, buttons, labels.
• WiredMono — monospaced, fallback helvetica. Used for metadata, captions, small labels.

No Google or Adobe font imports — custom and locally hosted.

3.2 Type Scale

3.3 Hierarchy

Big jumps — 64px display for hero headlines, immediately stepping down to 26px for subheads. Body sizes cluster around 16–19px, maintaining readability. Smaller labels drop to 12–13px, and metadata goes all the way to 8px — intentionally small, likely for timestamp-like elements.

Multiple fonts mean hierarchy isn’t just size; it’s also voice. WiredMono screams “metadata.” BreveText is for reading. WiredDisplay is for impact.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common increments:

4.2 Layout

Breakpoints span from 0px to 1600px, with many midpoints: 320, 375, 425, 480, 569, 570, 599, 667, 767, 768, 1023, 1024, 1025, 1279, 1280, 1600. This suggests deliberate tuning for specific device widths rather than a simple mobile/tablet/desktop triad.

5. Visual Elements

• Border Radius: Mostly small — 4px common (menus, divs), 8px for some divs, occasional 12px for documents, 50% for circular buttons, and odd large values like 1920px for spans (pill shapes).
• Shadow: Only one — rgba(0, 0, 0, 0.1) -2px 2px 5px 0px. Low opacity, subtle.
• Borders: Black borders dominate. 1px solid medium gray (#757575) for buttons. Bottom borders for navs (1px solid black). Inset styles for some elements.

6. Components

6.1 Buttons

One documented variant:

Default:

• Background: rgba(0, 0, 0, 0.8)
• Color: #ffffff
• Padding: 0px
• Border radius: 50%
• Border: 1px solid #757575
• Font weight: 700
• Font size: 12px

Hover:

• Background: rgba(117, 117, 117, 0.8)
• Color: #ffffff
• Border: none

Active:

• Same as hover.

Focus:

• Outline: 3px solid rgb(0, 102, 204)
• Background: rgba(117, 117, 117, 0.8)
• Color: #ffffff
• Border: none

6.2 Links

6 patterns, all with hover color #057dbc and underline behavior changes. Example:

• Black (#000000) default, no underline; hover: underline + blue.
• Dark gray (#1a1a1a) default underline; hover: blue underline.

6.3 Forms

No extracted input styles — likely system defaults overridden per context.

6.4 Cards

No explicit card component — probably built from divs with 4px or 8px radius and light gray backgrounds.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: rgba(0,0,0,0);
  --color-white: #ffffff;
  --color-slate-gray: #4a5568;
  --color-dark-gray: #1a1a1a;
  --color-medium-gray: #757575;
  --color-light-gray: #e5e5e5;
  --color-warm-gray: #999999;
  --color-charcoal: #333333;
  --color-badge-slate: #718096;
  --color-error-red: #e53e3e;
  --color-success-green: #38a169;
  --color-link-blue: #057dbc;
  --color-overlay-neutral: #edf2f7;
  --color-overlay-error-bg: #f7c2c2;
  --color-overlay-link-gray: #2d3748;
  --color-disabled-border-gray: #a0aec0;

  /* Typography */
  --font-wired-display: "WiredDisplay", helvetica;
  --font-apercu: "Apercu", helvetica;
  --font-breve-text: "BreveText", helvetica;
  --font-proxima-nova: "ProximaNova", helvetica;
  --font-inter: "Inter";
  --font-wired-mono: "WiredMono", helvetica;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14.11px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 1920px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) -2px 2px 5px 0px;
}

8. AI Coding Assistant Prompt

# Wired Design System Specification

You are a Wired design expert. Build UIs matching their visual language exactly.

## Brand Context
Wired's design is editorial-first, monochrome-heavy, and typographically rich. Black and white dominate, with restrained use of accent colors for links and status states. The aesthetic is sharp, flat, and authoritative.

## Color Palette
- Primary Black: #000000 — Headlines, text, borders
- Canvas White: #ffffff — Page background
- Slate Gray: #4a5568 — Modal header, chrome
- Dark Gray: #1a1a1a — Body text
- Medium Gray: #757575 — Secondary text
- Light Gray: #e5e5e5 — Dividers
- Warm Gray: #999999 — Nav links
- Charcoal: #333333 — Footer text
- Badge Slate: #718096 — Badge backgrounds
- Error Red: #e53e3e — Error states
- Success Green: #38a169 — Success states
- Link Blue: #057dbc — Link hover/active
- Overlay Neutral: #edf2f7 — Overlay backgrounds
- Overlay Error BG: #f7c2c2 — Error overlays
- Overlay Link Gray: #2d3748 — Links in overlays
- Disabled Border Gray: #a0aec0 — Disabled borders

## Typography
Fonts:
- WiredDisplay, helvetica — Headlines, large links
- Apercu, helvetica — Headings, buttons
- BreveText, helvetica — Body text
- ProximaNova, helvetica — UI text
- Inter — Captions, labels
- WiredMono, helvetica — Metadata

Sizes:
| Level | Font | Size | Weight | Line Height |
|-------|------|------|--------|-------------|
| H1 | WiredDisplay | 64px | 400 | 0.93 |
| Subhead | WiredDisplay | 26px | 400 | 1.08 |
| Heading | Apercu | 20px | 700 | 1.20 |
| Body | BreveText | 19px | 400 | 1.47 |
| Body Small | Apercu | 17px | 400 | 1.18 |
| Label | Inter | 16px | 600 | 1.23 |
| Caption | Inter | 14px | 400 | 1.40 |
| Metadata | WiredMono | 13px | 400 | 1.23 |
| Metadata Small | WiredMono | 12px | 400 | 1.33 |
| Tiny Label | WiredMono | 11px | 400 | 1.45 |
| Micro | Inter | 8px | 400 | 2.45 |

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 12px, 14.11px, 16px, 24px, 32px, 40px, 48px, 56px, 64px.

Map:
- Button padding: multiples of 8px
- Card padding: 16–32px
- Section gaps: 40–64px

## Border Radius
- none: 0px — sharp edges
- sm: 4px — menus, small divs
- md: 6px — buttons
- lg: 8px — cards
- xl: 12px — modals, documents
- pill: 1920px — extra long rounded shapes
- full: 50% — circular buttons

## Shadows & Depth
Flat design — only one subtle shadow: rgba(0,0,0,0.1) -2px 2px 5px 0px.

## Component Specifications

### Primary Button
Default:
```css
background: rgba(0,0,0,0.8);
color: #ffffff;
padding: 0px;
border-radius: 50%;
border: 1px solid #757575;
font-weight: 700;
font-size: 12px;
```
Hover/Active:
```css
background: rgba(117,117,117,0.8);
color: #ffffff;
border: none;
```
Focus:
```css
outline: 3px solid rgb(0,102,204);
background: rgba(117,117,117,0.8);
color: #ffffff;
border: none;
```

### Navigation Links
- Black text, no underline; hover: underline + blue.
- Dark gray text, underline; hover: blue underline.

### Input Fields
No extracted styles — use border: 1px solid #757575, radius: 4px, padding: 8px, font: BreveText 16px.

## Layout & Responsive Rules
Breakpoints: 0, 320, 375, 425, 480, 569, 570, 599, 667, 767, 768, 1023, 1024, 1025, 1279, 1280, 1600.

## Interaction Rules
- State changes: 150ms ease
- Focus outlines: 3px solid #0066cc
- Hover underline for links

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid
- Use WiredDisplay for headlines
- Keep buttons circular when specified
- Use link blue only for interactive states
- Apply subtle shadow only where extracted

## DON'T List
- Add extra shadows
- Mix rounded and sharp corners inconsistently
- Use colors outside palette
- Increase font sizes beyond extracted scale
- Remove underline from hover states on links

## Code Examples

Primary Button:
```css
.btn-primary {
  background: rgba(0,0,0,0.8);
  color: #fff;
  border: 1px solid #757575;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  transition: background 150ms ease;
}
.btn-primary:hover,
.btn-primary:active {
  background: rgba(117,117,117,0.8);
  border: none;
}
.btn-primary:focus {
  outline: 3px solid #0066cc;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e5e5;
}
```

Form Input:
```css
.input {
  border: 1px solid #757575;
  border-radius: 4px;
  padding: 8px;
  font-family: "BreveText", helvetica;
  font-size: 16px;
}
.input:focus {
  outline: 3px solid #0066cc;
}
```

9. Summary

TL;DR — Wired’s design system is crisp, monochrome, and typographically layered. It’s built on an 8px grid, uses black as primary, and deploys color only for function. Fonts are varied but purposeful, with clear hierarchy.

Brand Keywords:

• editorial-authoritative
• monochrome-disciplined
• typographic-rich
• tech-serious
• flat-precise