# WIRED — Design System
> The definitive source of news and ideas that make sense of a world in constant transformation.
- **Canonical:** https://uiuxskills.com/library/wired
- **Source:** https://www.wired.com/
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:02.282Z

---

---
version: alpha
name: WIRED
description: A leading publication covering the intersection of technology, science, business, and culture.
tone: Authoritative, analytical, forward-thinking, and intellectually rigorous.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  info: "#1976D2"
  focus-ring: "#005A9C"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
  input-field:
    padding: "{spacing.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

WIRED maintains a high-contrast, editorial-heavy visual identity that prioritizes readability and information density. The aesthetic is distinctly journalistic, utilizing a bold, authoritative typographic system and a clean, grid-based layout to organize complex, multi-topic content.

## Colors

The color strategy is monochromatic and functional, designed to keep the focus on editorial content while using semantic colors only when necessary for clarity.

*   Primary (#000000): Core brand color for text and primary structural elements.
*   Surface (#FFFFFF): Primary background color for content areas.
*   Surface-container (inferred) (#F4F4F4): Subtle background for section containers.
*   On-surface (#000000): Primary text color on light surfaces.
*   On-primary (inferred) (#FFFFFF): Text color for high-contrast dark elements.
*   Outline (inferred) (#E0E0E0): Border color for dividers and card edges.
*   Error (inferred) (#D32F2F): Semantic color for alerts or critical status.
*   Success (inferred) (#388E3C): Semantic color for positive status.
*   Info (inferred) (#1976D2): Semantic color for informational links.
*   Focus-ring (inferred) (#005A9C): Focus state indicator for accessibility.

## Typography

The typographic system relies on a clean, sans-serif family to maintain an authoritative and intellectually rigorous tone across all screen sizes.

*   Display-lg (inferred): Used for major editorial headlines.
*   Headline-lg (inferred): Used for primary article titles.
*   Headline-sm (inferred): Used for card titles and secondary headers.
*   Body-md (inferred): Standard body text for long-form articles.
*   Body-sm (inferred): Used for metadata, author bylines, and timestamps.
*   Label-md (inferred): Used for category labels and navigation.

## Layout

The layout follows a strict editorial grid system, utilizing full-bleed containers for hero imagery and a multi-column layout for article feeds. The system adheres to an 8px base unit, ensuring consistent vertical rhythm and spacing (e.g., {spacing.md} between article cards). The page pattern follows a logical flow: nav, hero, trending-stories, reviews, ai-panic, category-feeds, and footer. The design is fully responsive, collapsing from multi-column desktop grids into a single-column feed on mobile devices.

## Elevation & Depth

Elevation is used sparingly, primarily to distinguish interactive cards or modal overlays from the flat editorial background. Values are inferred based on the minimal, clean aesthetic.

*   elevation.sm — card lift and subtle separation.
*   elevation.md — dropdowns, popovers, and interactive elements.
*   elevation.lg — modal/drawer overlays and high-priority UI components.

## Shapes

The design language is sharp and professional, favoring square corners to reflect a serious, journalistic tone. The {rounded.sm} token is the standard for cards and image containers, providing a subtle, modern finish without softening the editorial edge.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses {colors.primary} with {typography.label-md} for a bold, actionable appearance. Secondary buttons are transparent with a {colors.primary} border, maintaining the minimal aesthetic.

### Card
Cards utilize {colors.surface} with a {rounded.sm} corner and {colors.outline} borders. Use {elevation.sm} for standard cards to provide just enough lift from the background.

### Badge
Badges use {colors.surface-container} for a neutral look, or {colors.error} and {colors.success} for semantic status updates. Always pair with {typography.label-sm} for optimal readability.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary headlines. | Use low-contrast text on {colors.surface-container}. |
| Apply {typography.headline-lg} for main titles. | Use rounded corners larger than {rounded.lg}. |
| Use {colors.outline} for content separators. | Mix {typography.display-lg} with body text in one line. |
| Maintain {spacing.md} between article cards. | Use {colors.error} for non-critical UI elements. |
| Use {typography.body-sm} for author bylines. | Use decorative fonts outside the sans-serif system. |
| Apply {rounded.sm} to all image containers. | Use excessive shadows beyond {elevation.sm}. |
| Use {colors.info} for functional text links. | Use {colors.primary} for secondary status indicators. |
| Use {typography.label-md} for category tags. | Use {typography.display-md} for standard body copy. |

## Content Style

CTA labels should use direct, action-oriented verbs such as "Read," "Subscribe," or "Watch." Keep labels concise to maintain the high-density layout.

Headlines should be journalistic, punchy, and informative. They must clearly communicate the article's value proposition while maintaining an authoritative tone.

Copy density is high, designed for scannability. Use frequent sub-headers, short paragraphs, and bulleted lists to break up long-form content and improve reader engagement.

## Imagery & Icons

The imagery style is mixed, featuring high-quality editorial photography that anchors the page. Images should maintain consistent aspect ratios (3:2, 16:9, 1:1) and are often paired directly with bold, sans-serif headlines. Icons should be minimal and sharp, adhering to the same professional, journalistic visual language as the typography.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for WIRED, a minimal, enterprise-grade editorial publication. Match its authoritative, intellectually rigorous tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, font sizes, or pixel values.
2. Use only component variants defined under `components:`. Do not invent new button styles, card variants, or badge types the spec does not list.
3. For layout decisions, follow the editorial grid narrative: full-bleed hero, multi-column article feeds, `{spacing.md}` between cards, single-column on mobile. One breakpoint at 768px when the spec is silent.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., rounded corners larger than `{rounded.lg}`, `{colors.error}` on non-critical elements), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If the product ships authoritative tokens (theme file, Storybook, Figma tokens), those take precedence over inferred values.

## Output contract

**Must:**
- Use token names for all colors, type styles, spacing, radii, and elevation.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.sm}` to cards and image containers; never exceed `{rounded.lg}`.
- Use `{typography.label-md}` for CTA labels; keep labels direct and action-oriented per Content Style.
- Apply `{elevation.sm}` to standard cards; reserve `{elevation.md}` and `{elevation.lg}` for dropdowns and modals respectively.

**Must NOT:**
- Invent colors, radii, or font families outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative fonts, or marketing filler copy.
- Reference any specific framework or utility library.
- Rewrite, replace, or invent page copy, headlines, navigation items, or content hierarchy.

## When in doubt
- If a value isn't in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- Default ambiguous backgrounds to `{colors.surface-container}`; ambiguous text to `{colors.on-surface}`; primary actions to `{colors.primary}`.
- For unspecified responsive behavior, use mobile-first with one breakpoint at 768px.