W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Wired
Wired is Condé Nast's tech-and-culture magazine — founded 1993, with a brand voice that runs from skeptical-future to zine-irreverent. The visual identity is aggressively typographic and uses high-contrast cream-and-black newsprint as canvas with the signature Wired red (#EB0000) deployed loudly in mastheads, section markers, and section tags. A bright kicker yellow (#FDC11C) marks editorial categories. The proprietary Wired Display, Wired Display Slab, and Wired Mono types carry the magazine voice.
1 palette 4 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/wired/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/wired/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Wired
Wired is Condé Nast's tech-and-culture magazine — founded 1993, with a brand voice that runs from skeptical-future to zine-irreverent. The visual identity is aggressively typographic and uses high-contrast cream-and-black newsprint as canvas with the signature Wired red (#EB0000) deployed loudly in mastheads, section markers, and section tags. A bright kicker yellow (#FDC11C) marks editorial categories. The proprietary Wired Display, Wired Display Slab, and Wired Mono types carry the magazine voice.
Tags: wired, tech, magazine, conde-nast, brand, red, cream, zine
Atoms
Palette
Wired · [email protected] · Proprietary — All Rights Reserved
The Wired palette as deployed on wired.com (Condé Nast). The identity reads as zine-meets-print: absolute black on cream newsprint, a bright signature red (#EB0000) used aggressively in the masthead and section markers, an espresso brown (#2B1000) for warm body emphasis, and a saturated yellow (#FDC11C / #FFC035) for kicker tags. The proprietary Wired Display, Wired Display Slab, and Wired Mono types — paired with Apercu, Proxima Nova, and Lab Grotesque — carry the magazine voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Playfair Display ([email protected]) |
OFL-1.1 | serif |
body |
PT Serif ([email protected]) |
OFL-1.1 | serif |
sans |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
black |
Black | #000000 |
espresso |
Espresso | #2B1000 |
cream |
Cream | #FAF8F1 |
cream-light |
Cream Light | #FEFCF5 |
cream-pale |
Cream Pale | #F9F7EF |
white |
White | #FFFFFF |
gray-divider |
Gray Divider | #E5E5E5 |
signature-red |
Signature Red | #EB0000 |
signature-red-deep |
Signature Red Deep | #D00000 |
signature-red-bright |
Signature Red Bright | #FF3030 |
red-faint |
Red Faint | #FFB0B0 |
kicker-yellow |
Kicker Yellow | #FDC11C |
kicker-yellow-warm |
Kicker Yellow Warm | #FFC035 |
amber |
Amber | #FFA922 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
cream |
#FAF8F1 |
surface |
cream-light |
#FEFCF5 |
surface-elevated |
white |
#FFFFFF |
text-primary |
black |
#000000 |
text-secondary |
espresso |
#2B1000 |
text-tertiary |
gray-divider |
#E5E5E5 |
primary |
signature-red |
#EB0000 |
primary-hover |
signature-red-deep |
#D00000 |
accent |
kicker-yellow |
#FDC11C |
accent-hover |
amber |
#FFA922 |
warning |
amber |
#FFA922 |
error |
signature-red-deep |
#D00000 |
border |
gray-divider |
#E5E5E5 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#000000 |
surface |
espresso |
#2B1000 |
surface-elevated |
espresso |
#2B1000 |
text-primary |
cream |
#FAF8F1 |
text-secondary |
cream-pale |
#F9F7EF |
text-tertiary |
gray-divider |
#E5E5E5 |
primary |
signature-red |
#EB0000 |
primary-hover |
signature-red-bright |
#FF3030 |
accent |
kicker-yellow |
#FDC11C |
accent-hover |
kicker-yellow-warm |
#FFC035 |
warning |
amber |
#FFA922 |
error |
signature-red-bright |
#FF3030 |
border |
espresso |
#2B1000 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
cream |
#FAF8F1 |
on-identity |
black |
#000000 |
primary |
signature-red |
#EB0000 |
primary-hover |
signature-red-deep |
#D00000 |
accent |
kicker-yellow |
#FDC11C |
accent-hover |
amber |
#FFA922 |
mark |
signature-red |
#EB0000 |
warning |
amber |
#FFA922 |
error |
signature-red-deep |
#D00000 |
text-primary-light |
black |
#000000 |
text-primary-dark |
cream |
#FAF8F1 |
background-light |
cream |
#FAF8F1 |
background-dark |
black |
#000000 |
surface-light |
cream-light |
#FEFCF5 |
surface-dark |
espresso |
#2B1000 |
text-secondary-light |
espresso |
#2B1000 |
text-tertiary-light |
gray-divider |
#E5E5E5 |
border-light |
gray-divider |
#E5E5E5 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
ui |
sans |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Black (#000000) on cream (#FAF8F1) gives ~19:1 — past AAA. The Wired magazine voice depends on dense, type-heavy pages; the enhanced contrast target supports the long feature format and the type-led identity system.
colorChoice → roles.colors.mark
- allowed: signature-red, signature-red-deep, black
- forbidden: kicker-yellow, amber, signature-red-bright
The Wired wordmark is rendered in signature red or black. The kicker yellow is reserved for section markers (the brand's signature yellow tags) — substituting it for the mark would conflict with the published masthead identity.
contextRestriction → roles.colors.accent
- forbiddenContexts: default-link, error-state, body-emphasis
- allowedContexts: kicker, section-tag, editorial-category, feature-highlight
The Wired kicker yellow signals editorial categories — it is a tag color, not a link or emphasis color. Using it for body emphasis or default links would dilute the magazine's section-marking grammar.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.75
Wired feature openers pair the Wired Display face with body type at an aggressive size step — display headlines are dramatically larger than body to support the magazine-feature voice. A 1.75× minimum ratio preserves that hierarchy when the Playfair Display substitute stands in.
forbiddenTreatment → logo
- treatments: stretched, rotated, drop-shadow, gradient-fill, on-busy-photo
The Wired wordmark is a heavily standardized identity mark across thirty years of issue covers. Recoloring, stretching, rotating, or applying gradients conflicts with the magazine's identity discipline.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Wired's long-form features and reading-app surfaces benefit from the enhanced contrast target, especially given the warm cream canvas vs. cooler white.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700, 800, 900
Wired Display is published across Regular through Black on the live site. The display weight range is integral to the magazine's typographic voice; weights outside this band should be avoided in the Playfair Display substitute.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: black, cream, cream-light
- doesNotPairWith: signature-red, signature-red-bright
Kicker yellow reads cleanest on black, the cream canvas, or its cream-light variant. Placing it adjacent to the signature red collapses the chromatic hierarchy that separates section-tag (yellow) from identity (red).
Provenance
- Source: https://www.wired.com/
- License:
Proprietary — All Rights Reserved - Attribution: Condé Nast — visual identity captured from the deployed HTML and inline styles at wired.com. WIRED, Condé Nast, the Wired Display / Wired Display Slab / Wired Mono / Apercu / Proxima Nova / Breve Text / Lab Grotesque typefaces are property of Condé Nast.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.wired.com/ on 2026-05-19; no public brand guide located. The proprietary Wired Display, Wired Display Slab, and Wired Mono typefaces are declared on the live site (font-family declarations extracted from the HTML head) but are not publicly distributed. Open-source substitutes — playfair-display@1 for the display serif/slab role, pt-serif@1 for body prose, inter@1 for sans — are referenced from the brand atom.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Wired
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Wired
A clear hierarchy in Wired's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Wired
[email protected]font · heading
Playfair Display
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
PT Serif
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · sans
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ kicker-yellow #FDC11C accent-hover
→ amber #FFA922 background-dark
→ black #000000 background-light
→ cream #FAF8F1 border-light
→ gray-divider #E5E5E5 error
→ signature-red-deep #D00000 identity
→ cream #FAF8F1 mark
→ signature-red #EB0000 on-identity
→ black #000000 primary
→ signature-red #EB0000 primary-hover
→ signature-red-deep #D00000 surface-dark
→ espresso #2B1000 surface-light
→ cream-light #FEFCF5 text-primary-dark
→ cream #FAF8F1 text-primary-light
→ black #000000 text-secondary-light
→ espresso #2B1000 text-tertiary-light
→ gray-divider #E5E5E5 warning
→ amber #FFA922 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Playfair Display prose
→ body PT Serif ui
→ sans Inter Palette mode mappings (from wired)
Light mode (13 roles)
accent
→ kicker-yellow accent-hover
→ amber background
→ cream border
→ gray-divider error
→ signature-red-deep primary
→ signature-red primary-hover
→ signature-red-deep surface
→ cream-light surface-elevated
→ white text-primary
→ black text-secondary
→ espresso text-tertiary
→ gray-divider warning
→ amber Dark mode (13 roles)
accent
→ kicker-yellow accent-hover
→ kicker-yellow-warm background
→ black border
→ espresso error
→ signature-red-bright primary
→ signature-red primary-hover
→ signature-red-bright surface
→ espresso surface-elevated
→ espresso text-primary
→ cream text-secondary
→ cream-pale text-tertiary
→ gray-divider warning
→ amber Rules (8 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Black (#000000) on cream (#FAF8F1) gives ~19:1 — past AAA. The Wired magazine voice depends on dense, type-heavy pages; the enhanced contrast target supports the long feature format and the type-led identity system.
colorChoice roles.colors.mark allowed signature-red, signature-red-deep, black forbidden kicker-yellow, amber, signature-red-bright The Wired wordmark is rendered in signature red or black. The kicker yellow is reserved for section markers (the brand's signature yellow tags) — substituting it for the mark would conflict with the published masthead identity.
contextRestriction roles.colors.accent forbiddenContexts default-link, error-state, body-emphasis allowedContexts kicker, section-tag, editorial-category, feature-highlight The Wired kicker yellow signals editorial categories — it is a tag color, not a link or emphasis color. Using it for body emphasis or default links would dilute the magazine's section-marking grammar.
fontPairing typography.display requires prose minSizeRatio 1.75 Wired feature openers pair the Wired Display face with body type at an aggressive size step — display headlines are dramatically larger than body to support the magazine-feature voice. A 1.75× minimum ratio preserves that hierarchy when the Playfair Display substitute stands in.
forbiddenTreatment logo treatments stretched, rotated, drop-shadow, gradient-fill, on-busy-photo The Wired wordmark is a heavily standardized identity mark across thirty years of issue covers. Recoloring, stretching, rotating, or applying gradients conflicts with the magazine's identity discipline.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Wired's long-form features and reading-app surfaces benefit from the enhanced contrast target, especially given the warm cream canvas vs. cooler white.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700, 800, 900 Wired Display is published across Regular through Black on the live site. The display weight range is integral to the magazine's typographic voice; weights outside this band should be avoided in the Playfair Display substitute.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith black, cream, cream-light doesNotPairWith signature-red, signature-red-bright Kicker yellow reads cleanest on black, the cream canvas, or its cream-light variant. Placing it adjacent to the signature red collapses the chromatic hierarchy that separates section-tag (yellow) from identity (red).
Provenance
- Source
- https://www.wired.com/
- License
Proprietary — All Rights Reserved- Attribution
- Condé Nast — visual identity captured from the deployed HTML and inline styles at wired.com. WIRED, Condé Nast, the Wired Display / Wired Display Slab / Wired Mono / Apercu / Proxima Nova / Breve Text / Lab Grotesque typefaces are property of Condé Nast.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.wired.com/ on 2026-05-19; no public brand guide located. The proprietary Wired Display, Wired Display Slab, and Wired Mono typefaces are declared on the live site (font-family declarations extracted from the HTML head) but are not publicly distributed. Open-source substitutes — playfair-display@1 for the display serif/slab role, pt-serif@1 for body prose, inter@1 for sans — are referenced from the brand atom.