wired
An inspired interpretation of Wired's design language — a flagship technology-magazine brand whose surface is a strict editorial duet of stark black wordmark on white canvas, anchored by a tall narrow custom display serif for hero headlines, a humanist serif body face for long-fo
colors
#000000 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Wired-Inspired-design-analysis
description: An inspired interpretation of Wired's design language — a flagship technology-magazine brand whose surface is a strict editorial duet of stark black wordmark on white canvas, anchored by a tall narrow custom display serif for hero headlines, a humanist serif body face for long-form reading, and a clean sans face for metadata; layout reads like a printed magazine ported to the web with very little marketing chrome.
colors:
primary: "#000000"
on-primary: "#ffffff"
ink: "#000000"
ink-soft: "#1a1a1a"
body: "#757575"
hairline: "#e0e0e0"
canvas: "#ffffff"
canvas-soft: "#f5f5f5"
link: "#057dbc"
typography:
display-hero:
fontFamily: WiredDisplay, "Times New Roman", Georgia, serif
fontSize: 64px
fontWeight: 400
lineHeight: 59.52px
letterSpacing: -0.5px
display-lg:
fontFamily: WiredDisplay, "Times New Roman", Georgia, serif
fontSize: 48px
fontWeight: 400
lineHeight: 50.4px
letterSpacing: -0.4px
display-md:
fontFamily: WiredDisplay, "Times New Roman", Georgia, serif
fontSize: 32px
fontWeight: 400
lineHeight: 35.2px
letterSpacing: -0.3px
display-sm:
fontFamily: WiredDisplay, "Times New Roman", Georgia, serif
fontSize: 26px
fontWeight: 400
lineHeight: 28.08px
display-xs:
fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif
fontSize: 20px
fontWeight: 700
lineHeight: 24px
letterSpacing: -0.28px
body-serif-lg:
fontFamily: BreveText, Georgia, "Times New Roman", serif
fontSize: 19px
fontWeight: 400
lineHeight: 27.93px
letterSpacing: 0.108px
body-serif-md:
fontFamily: BreveText, Georgia, "Times New Roman", serif
fontSize: 16px
fontWeight: 400
lineHeight: 24px
letterSpacing: 0.09px
body-md:
fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif
fontSize: 17px
fontWeight: 400
lineHeight: 20px
body-md-strong:
fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif
fontSize: 17px
fontWeight: 700
lineHeight: 22px
letterSpacing: -0.144px
body-sm:
fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif
fontSize: 14px
fontWeight: 400
lineHeight: 18px
letterSpacing: 0.4px
body-sm-strong:
fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif
fontSize: 14px
fontWeight: 700
lineHeight: 18px
… components
display headline
body copy from wired tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#000000",
font: ""Apercu", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on wired's visual identity.