---
name: Wired
description: "A classic example of high-end editorial design that uses typography as the primary design element, perfect for establishing brand authority."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#333333"
  neutral: "#757575"
  bg-soft: "#F3F3F3"
  bg-quiet: "#E5E5E5"
  muted-soft: "#999999"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 26px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 19px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.1px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "1.1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A prestigious editorial platform combining bold typography with clean, grid-based layouts to present technology and culture.

*A premium technology and culture magazine with a bold, authoritative voice.*

## Colors

High-contrast monochromatic palette with strict black and white dominance, using grey tones for hierarchy.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#757575`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospace

- Display type uses tight line-height for impact
- All-caps applied to metadata and labels
- Bylines use wider letter-spacing

## Layout

Asymmetric multi-column grid with strict vertical alignment and heavy use of white space

*Rhythm:* 8px base grid with generous whitespace for readability

## Elevation & Depth

- Borders: Strict 1px or 2px solid black borders used for section dividers and category tags

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal, often text-only or simple outlined with black text on white background
- **card:** Clean text blocks with bold serif headlines and sans-serif metadata, separated by thin horizontal lines
- **chip:** Uppercase monospace tags in black rectangles with white text
- **input:** Minimalist with thin bottom borders
- **hero:** Large-scale typography-focused layout with generous whitespace

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — screenshot shows sharp, zero-radius edges on all elements
- Don't use multiple accent colors — screenshot shows strictly monochromatic black, white, and grey palette
- Don't use decorative scripts or cursive fonts — screenshot shows strictly structured serif and sans-serif typography
- Don't use drop shadows on elements — screenshot shows flat, clean design with minimal depth
- Don't use center-aligned body text — screenshot shows left-aligned or justified body copy for readability
- Don't use colorful buttons — screenshot shows simple text links and minimal UI elements

---

## System Prompt (paste into AI agent)

```
A premium technology and culture editorial platform featuring bold, high-contrast typography and clean grid-based layouts. Key colors are pure black (#000000), white (#FFFFFF), and various grays (#757575, #999999) for hierarchy. Typography combines didone-serif for headlines and humanist-sans for body text. Critical donts: don't use rounded corners or shadows, don't introduce colorful accents, and don't use casual or decorative fonts. The design prioritizes content clarity and authoritative presentation through strict visual hierarchy and generous whitespace.
```