@dante · Media & Consumer
Editorial technology-magazine system: stark black-on-white duet, tall high-contrast WiredDisplay serif headlines, humanist BreveText body, and square 0px hairline-bordered geometry.
Wired is a flagship technology magazine ported to the web that refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a pure white canvas (#ffffff), a stark black WIRED wordmark, and stacked story cards that read as a printed magazine grid on a screen. There is no atmospheric gradient, no decorative chrome, and no chromatic accent — the only color beyond the black-and-white duet is the inline link blue #057dbc used inside long-form article body copy. The signature move is the tall, narrow, high-contrast WiredDisplay serif set at 64px, which gives every cover story the gravitas of a printed headline.
The system is a strict black-and-white duet. Ink Black (#000000) is the brand's only 'accent' — used for the wordmark, every CTA, and the footer fill. Canvas White (#ffffff) is the default page; Canvas Soft (#f5f5f5) is a rare tint for comment backgrounds and hover rows. Text runs on an ink-to-grey ladder: Ink (#000000), Ink Soft (#1a1a1a), and Body Grey (#757575) for secondary metadata. Hairline (#e0e0e0) 1px dividers are the only 'line' in the layout. Link Blue (#057dbc) is the single chromatic exception and appears only inside article body copy — never on UI buttons or navigation.
Type carries the entire identity across three families. WiredDisplay — the tall-narrow high-contrast serif — is used exclusively for display headlines (64px hero down to 26px sub-display) at weight 400; its elegance is in the typeface design, never in bold weight. BreveText, a humanist serif, carries long-form body (16–19px, line-height ~1.45–1.50) and bylines (weight 700, relaxed line-height 2.2). Apercu, a humanist sans, handles nav, button labels, category eyebrows, metadata, and captions at weights 400/700. Serifs for narrative, sans for structure — the two never cross roles.
A 4px base spacing scale (2/4/8/12/16/20/24/32/48px) with 48px section padding drives an editorial rhythm inside a wide ~1400px container. The cover grid is one large hero, a 2-up secondary row, then a vertical stack of bylined story rows separated by 1px #e0e0e0 hairlines. Geometry is square: radius.none 0px on every button, input, and card is the brand's signature — the only circular shapes are the social-share icon button and small author avatars. Depth is flat: no drop shadows exist. Elevation is carried by surface contrast, 1px hairline borders, and, on campaign moments, a 2px solid ink border.
Buttons are square black rectangles (primary) or 1px ink-outlined white rectangles (outline), labelled in Apercu 16/700. Inputs are square with a 1px ink border and no shadow. Story cards live directly on the canvas with the photo doing the work — no frames. Category eyebrows are uppercase Apercu text rather than pills; topic tags are square hairline chips. The masthead band centres the wordmark; the black footer band inverts the page with white columns. Pull-quotes and stats lean on WiredDisplay serif figures with hairline top borders.
Derived view rendered server-side from package tokens and components — no authored copy.
#000000#ffffff#000000#1a1a1a#757575#5a5a5a#9a9a9a#e0e0e0#cccccc#ffffff#f5f5f5#fafafa#057dbc#046a9fWiredDisplay, 'Playfair Display', 'Times New Roman', Georgia, serifWiredDisplay, 'Playfair Display', 'Times New Roman', Georgia, serifBreveText, Lora, Georgia, 'Times New Roman', serifApercu, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serifApercu, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serifui-monospace, Menlo, 'JetBrains Mono', monospace{
"hero": "64px/0.93",
"displayLg": "48px/1.05",
"displayMd": "32px/1.10",
"displaySm": "26px/1.08",
"displayXs": "20px/1.20",
"bodySerifLg": "19px/1.47",
"bodySerifMd": "16px/1.50",
"body": "17px/1.18",
"bodySmall": "14px/1.29",
"byline": "12.73px/2.20",
"caption": "12px/1.33",
"button": "16px/1.25"
}Square 0px black CTA in Apercu 16/700. Primary is a solid black rectangle; outline is a white fill with a 1px ink border — corners are never softened.
Square text field with a 1px solid ink border, white fill, and Apercu body type. No radius, no shadow — a printed-form rectangle.
Cover-story card living directly on the white canvas — photo on top, WiredDisplay serif headline below, no border, no shadow. The photo does the elevation work.
Uppercase category eyebrow set in Apercu 14/700 — a text label, not a pill. Ink black on canvas, occasionally inverted to white on a black chip.
Tall high-contrast WiredDisplay serif at weight 400 — 64px hero down to 26px sub-display, negative tracking, near-1.0 leading. The typeface itself carries the elegance, never bold weight.
Inline body links in the reserved #057dbc blue — the only chromatic note in the system, used exclusively inside long-form BreveText article copy, never on nav or buttons.
White hero band hosting the cover story — 64px WiredDisplay headline, uppercase Apercu eyebrow, BreveText dek, and a single square black Subscribe CTA. No gradient, no chrome.
Top nav on white — hamburger left, wordmark centre, Subscribe right. Links in Apercu 14/700 ink black. Structural, quiet, printed-masthead cadence.
Solid black footer band with white text columns and the repeating WIRED wordmark — no graphics, just structural Apercu link lists.
Large WiredDisplay serif figure with an uppercase Apercu label, separated by a 1px hairline top border — a magazine pull-figure.
Pull-quote in large WiredDisplay serif at weight 400 with a byline in BreveText 700 — the editorial signature, drawn from long-form articles.
Square hairline-bordered topic tag in Apercu 14/700 — a structural filter chip, sharp-cornered like everything else in the system.
Small circular author crop — the only circular geometry besides social-share icons — sitting inline next to a BreveText byline.
Section-nav tabs as an underlined Apercu row — the active tab carries a 2px ink underline, no pills, no rounding.
Wired is a flagship technology magazine ported to the web that refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a pure white canvas (#ffffff), a stark black WIRED wordmark, and stacked story cards that read as a printed magazine grid on a screen. There is no atmospheric gradient, no decorative chrome, and no chromatic accent — the only color beyond the black-and-white duet is the inline link blue #057dbc used inside long-form article body copy. The signature move is the tall, narrow, high-contrast WiredDisplay serif set at 64px, which gives every cover story the gravitas of a printed headline.
The system is a strict black-and-white duet. Ink Black (#000000) is the brand's only 'accent' — used for the wordmark, every CTA, and the footer fill. Canvas White (#ffffff) is the default page; Canvas Soft (#f5f5f5) is a rare tint for comment backgrounds and hover rows. Text runs on an ink-to-grey ladder: Ink (#000000), Ink Soft (#1a1a1a), and Body Grey (#757575) for secondary metadata. Hairline (#e0e0e0) 1px dividers are the only 'line' in the layout. Link Blue (#057dbc) is the single chromatic exception and appears only inside article body copy — never on UI buttons or navigation.
Type carries the entire identity across three families. WiredDisplay — the tall-narrow high-contrast serif — is used exclusively for display headlines (64px hero down to 26px sub-display) at weight 400; its elegance is in the typeface design, never in bold weight. BreveText, a humanist serif, carries long-form body (16–19px, line-height ~1.45–1.50) and bylines (weight 700, relaxed line-height 2.2). Apercu, a humanist sans, handles nav, button labels, category eyebrows, metadata, and captions at weights 400/700. Serifs for narrative, sans for structure — the two never cross roles.
A 4px base spacing scale (2/4/8/12/16/20/24/32/48px) with 48px section padding drives an editorial rhythm inside a wide ~1400px container. The cover grid is one large hero, a 2-up secondary row, then a vertical stack of bylined story rows separated by 1px #e0e0e0 hairlines. Geometry is square: radius.none 0px on every button, input, and card is the brand's signature — the only circular shapes are the social-share icon button and small author avatars. Depth is flat: no drop shadows exist. Elevation is carried by surface contrast, 1px hairline borders, and, on campaign moments, a 2px solid ink border.
Buttons are square black rectangles (primary) or 1px ink-outlined white rectangles (outline), labelled in Apercu 16/700. Inputs are square with a 1px ink border and no shadow. Story cards live directly on the canvas with the photo doing the work — no frames. Category eyebrows are uppercase Apercu text rather than pills; topic tags are square hairline chips. The masthead band centres the wordmark; the black footer band inverts the page with white columns. Pull-quotes and stats lean on WiredDisplay serif figures with hairline top borders.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css