WIRED

Difficulty:
Industry
WIRED Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryPrompt

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryPrompt

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Circular

  • Ag

    Body 16px · regular

    Circular

  • Ag

    Labels 13px · medium

    Circular

WIRED brings you the future as it happens — science, technology, and the big stories in business and culture. Its interface reads like a dense newsstand broadsheet: rules and whitespace instead of cards and shadows, custom serif display with technical mono kickers for a Condé-Nast-meets-engineering-lab voice, square corners on every image and container (only icon buttons are circular), and 2px hard black borders on buttons and links — printerly, not webby.

ConsumerEditorial

Prompt Template

Base Template
Design a WIRED-inspired interface. - Newsstand-density editorial grid: rules and whitespace, never cards or shadows; - Custom serif display + technical mono kickers — the Condé-Nast-meets-engineering-lab voice; - Strictly square corners on every image, container, and ribbon (only icon buttons are circular); - 2px hard black borders on buttons and links — printerly, not webby; - Mono ALL-CAPS eyebrows on every story with wide tracking (0.9–1.2px). Colors: #000000, #1a1a1a, #ffffff, #057dbc with #057dbc accent. Typography: - Background:.

Variant Prompts

📱 Mobile
Design a mobile app with WIRED aesthetics. Use WIRED color identity with #057dbc accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with WIRED style. Use WIRED color identity with #057dbc accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with WIRED design language. Use WIRED color identity with #057dbc accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with WIRED visual identity. Use WIRED color identity with #057dbc accents. Compelling, conversion-focused.

Usage Examples

WIRED App

Web
Build a web app with WIRED design language and #057dbc color system.

WIRED Dashboard

Dashboard
Create a dashboard using WIRED style with data visualization and - Background: typography.

✅ Best For

  • Consumer
  • Tech magazine websites
  • High-density editorial layouts

❌ Avoid For

  • Lightweight consumer apps
  • Soft lifestyle brands

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download