WIRED Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

9tokens

19type steps

1radius steps

2pxspacing base

WIRED, in one page

Wired is the flagship technology-magazine brand under Condé Nast — and the web surface refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a white canvas, a strict black wordmark in the brand's proprietary WiredDisplay (a tall, narrow, high-contrast serif used at 64 px), and stacked story cards that read as a printed magazine grid ported to the screen. There is no atmospheric gradient, no decorative chrome, no chromatic accent — the brand's only colour beyond the black-and-white duet is the small {colors.link} (#057dbc) used for inline body links inside long-form articles.

Type carries the entire identity. Three families ladder the system: WiredDisplay (the proprietary high-contrast serif) for hero / section headlines; BreveText (a humanist serif) for long-form body and bylines; and Apercu (a humanist sans) for metadata, captions, eyebrow tags, and buttons. The pairing is editorial-grade: serifs for narrative, sans for navigation and structural labels.

Buttons are square. The brand uses {rounded.none} 0 px corners across the entire UI — newsletter sign-ups, login forms, "Read more" CTAs all render as sharp rectangles. The only circular shape is the button-icon-circular used for social-share affordances. There are no soft drop-shadows; the brand uses hairline borders for elevation when needed.

Key Characteristics:

A strict black-and-white duet with no chromatic accent except the inline link blue {colors.link}. The brand reads as a printed magazine.
Three-face typographic system — WiredDisplay serif for display, BreveText serif for body, Apercu sans for metadata and buttons.
Square buttons ({rounded.none}) — the brand never softens corners on interactive elements.
A magazine-style story grid: large feature card at top, two-up secondary, then a vertical stack of bylined story rows separated by {colors.hairline} 1 px dividers.
The brand's only signature decorative move is the masthead band — a thin black strip with the wordmark centred, no other decoration.
A near-black {colors.ink} (#000000) footer band, no graphics, just text columns and the wordmark repeating.

Do's and don'ts

Do

Reserve {colors.primary} black for the wordmark, every CTA, and the footer fill. The brand IS the strict black-on-white duet.
Set hero headlines in {typography.display-hero} (WiredDisplay 64 px weight 400). The proprietary serif IS the brand's typographic signature.
Use {rounded.none} 0 px on every button and form input. The brand reads as a printed magazine — square corners are non-negotiable.
Pair WiredDisplay (serif display) with BreveText (serif body) and Apercu (sans labels). Three faces, three roles.
Render story rows with {colors.hairline} 1 px dividers — the brand's only elevation cue.

Don't

Don't introduce a chromatic brand accent. The link blue is reserved for inline body links inside articles only.
Don't round button corners. The brand never softens its rectangular geometry.
Don't drop a soft drop-shadow on cards. Surface contrast and hairlines carry elevation.
Don't substitute the proprietary serif faces with a generic sans for display. The serif voice is the brand.
Don't promote display weight beyond 400. The brand's elegance is in the typeface design, not bold weight.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the WIRED design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #000000
- on-primary: #ffffff
- ink: #000000
- ink-soft: #1a1a1a
- body: #757575
- hairline: #e0e0e0
- canvas: #ffffff
- canvas-soft: #f5f5f5
- link: #057dbc

Type:
- families: WiredDisplay, Times New Roman, Georgia, Apercu
- scale: 12, 12.73, 14, 16, 17, 18, 19, 20, 22
- weights: 400, 700

Shape:
- radius: 0
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 48

Rules:
- Reserve `{colors.primary}` black for the wordmark, every CTA, and the footer fill. The brand IS the strict black-on-white duet.
- Set hero headlines in `{typography.display-hero}` (WiredDisplay 64 px weight 400). The proprietary serif IS the brand's typographic signature.
- Use `{rounded.none}` 0 px on every button and form input. The brand reads as a printed magazine — square corners are non-negotiable.
- Pair WiredDisplay (serif display) with BreveText (serif body) and Apercu (sans labels). Three faces, three roles.
- Render story rows with `{colors.hairline}` 1 px dividers — the brand's only elevation cue.

Avoid:
- Don't introduce a chromatic brand accent. The link blue is reserved for inline body links inside articles only.
- Don't round button corners. The brand never softens its rectangular geometry.
- Don't drop a soft drop-shadow on cards. Surface contrast and hairlines carry elevation.
- Don't substitute the proprietary serif faces with a generic sans for display. The serif voice is the brand.
- Don't promote display weight beyond 400. The brand's elegance is in the typeface design, not bold weight.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Ink Black ({colors.primary} — #000000): The brand's only "accent." Used for wordmark, headlines, CTAs, footer fill. Pure black, never softened.

Surface

Canvas ({colors.canvas} — #ffffff): The default page background.
Canvas Soft ({colors.canvas-soft} — #f5f5f5): Rare tint used for the comment-section background and search-result row hover states (not in the main page rhythm).
Hairline ({colors.hairline} — #e0e0e0): 1 px dividers between story rows. The brand's only "line."

Text

Ink ({colors.ink} — #000000): Every headline, every body paragraph in BreveText.
Ink Soft ({colors.ink-soft} — #1a1a1a): A near-black variant used for caption-strong / footer link emphasis.
Body ({colors.body} — #757575): Secondary metadata — bylines, timestamps, supporting body lines.

Semantic

The brand operates with one inline link colour and no separate error / success / warning palette in its marketing surface. Validation cues on form pages use the ink black + body grey hierarchy.

Link ({colors.link} — #057dbc): The inline body-link blue. Used only inside long-form article body copy, never on UI buttons or navigation.

Type scaleRead the full spec

Font Family

Three families ladder the system:

WiredDisplay — the proprietary tall-narrow high-contrast serif used exclusively for display headlines (64 px hero, scaling down to 26 px sub-display). The brand's most-recognisable typographic signature.
BreveText — the proprietary humanist serif used for long-form body, bylines, and editorial captions. Used at 16 – 19 px line-height 1.45 – 1.50 for comfortable reading density.
Apercu — a humanist sans used for nav, button labels, category eyebrows, metadata, and captions. Weights 400 / 700.

Inter is loaded as a fourth fallback face for embedded utility surfaces (the comment section, account pages) but does not appear on the main marketing / article surface.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-hero}`	64px	400	59.5px	-0.5px	Cover-story headline.
`{typography.display-lg}`	48px	400	50.4px	-0.4px	Major section / feature headlines.
`{typography.display-md}`	32px	400	35.2px	-0.3px	Story-card large variant.
`{typography.display-sm}`	26px	400	28px	0	Sub-display headings inside long-form articles.
`{typography.display-xs}`	20px	700	24px	-0.28px	Sans (Apercu) display micro-headings for category callouts.
`{typography.body-serif-lg}`	19px	400	27.93px	0.108px	Lead paragraph of an article (BreveText).
`{typography.body-serif-md}`	16px	400	24px	0.09px	Default article body (BreveText).
`{typography.body-md}`	17px	400	20px	0	Sans body (Apercu) for nav / metadata.
`{typography.body-md-strong}`	17px	700	22px	-0.144px	Bold sans body.
`{typography.body-sm}`	14px	400	18px	0.4px	Secondary sans body.
`{typography.body-sm-strong}`	14px	700	18px	0.4px	Bold caption / nav-link.
`{typography.byline}`	12.73px	700	28px	0.108px	Article byline (BreveText).
`{typography.caption}`	12px	400	16px	0	Fine print, image captions.
`{typography.button-md}`	16px	700	20px	0.3px	Button label.

Principles

Serif for narrative, sans for structure. The serif faces never carry button labels or nav text; the sans face never carries article body.
Display weight 400 — the proprietary WiredDisplay reads as elegant by virtue of its thin-tall-narrow design at default weight, not via weight 700+.
Bylines use BreveText weight 700 with relaxed line-height 2.2. The vertical breathing is part of the editorial signature.

Note on Font Substitutes

The three proprietary faces have no exact substitutes. Best open-source approximations:

WiredDisplay — *Playfair Display* weight 400 at large display sizes captures the high-contrast didone feel, though wider than the brand's tall-narrow proportions.
BreveText — *Lora* or *Source Serif Pro* at 16 – 19 px.
Apercu — *Inter* or *Manrope* weights 400 / 700.

Components and layoutRead the full spec

Buttons

button-primary — the square black CTA.

Background {colors.primary}, text {colors.on-primary}, label {typography.button-md} (Apercu 16 px / 700 / 0.3 px tracking), padding {spacing.md} {spacing.xl}, shape {rounded.none} 0 px.

button-outline — the white outline CTA.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, same typography / padding / shape.

button-icon-circular — the circular share-icon button.

Background {colors.canvas}, ink icon, shape {rounded.full}.

Cards & Containers

story-card-large — the cover-story card with {typography.display-md} headline.

Background {colors.canvas}, text {colors.ink}, padding {spacing.lg}. No border — the card lives on the canvas with the photo doing the work.

story-card — the secondary story card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md}. Photo at top, sans display heading + body lead below.

story-row — the bylined story list row.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline} bottom border, body in {typography.body-md-strong}, padding {spacing.lg} 0.

Inputs & Forms

text-input — the standard text input.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.ink} border, body in {typography.body-md}, padding {spacing.md} {spacing.lg}, shape {rounded.none}.

Navigation

nav-bar — the top nav, light by default.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.xl}. Layout: hamburger left, masthead centre, Subscribe right.

nav-link — link items inside nav.

Text {colors.ink}, set in {typography.body-sm-strong} (Apercu 14 / 700).

footer — the black footer band.

Background {colors.primary}, text {colors.on-primary}, padding {spacing.4xl} {spacing.xl}. Body in {typography.body-sm} (Apercu 14 / 400). Footer column eyebrows in {typography.body-sm-strong}.

Signature Components

hero-band — the white hero band hosting the cover-story.

Background {colors.canvas}, text {colors.ink}, padding {spacing.4xl} {spacing.xl}. Cover headline in {typography.display-hero} (WiredDisplay 64 px).

masthead-band — the thin top band with the wordmark.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.xl}. The wordmark sits centred; flanked by section nav.

category-eyebrow — the small uppercase category label above story headlines.

Text {colors.ink}, set in {typography.body-sm-strong} (Apercu 14 / 700 — though some campaigns use ALL CAPS via CSS).

byline-row — the article byline strip.

Background {colors.canvas}, text {colors.body}, body in {typography.byline} (BreveText 12.73 / 700 / line-height 2.2). Includes an author avatar + name + date.

hairline-divider — the 1 px line between story rows.

1 px solid {colors.hairline}.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-wired {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #057dbc;
  --link-hover-color: #045c8a;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 0px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-serif);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 0px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

yokohama art 85.5%
concent 82.8%
shimano 82.4%
baycrew 80.9%
higashiya 78.2%

Where this came from

Source document: volt/design-md/wired/DESIGN.md · 22.9 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.