01 / 03

Wired

适合深度专题、研究报告和观点索引页，黑白编辑网格、serif 大标题和零圆角结构带来纸媒般的锋利感。

商业品牌极简主义

设计语言预览

Brand & Accent

Ink Black

#000000

用于 wordmark、标题、CTA 和 footer 填充。

On Primary

#ffffff

用于黑色 CTA 或 footer 上的文字与图标。

Link Blue

#057dbc

只用于长文章正文里的 inline link。

Surface

Canvas

#ffffff

默认页面背景。

Canvas Soft

#f5f5f5

少量用于评论区、hover 行等轻背景。

Hairline

#e0e0e0

用于 story row 之间的 1px 分隔线。

Text

Ink

#000000

用于所有标题与正文主文本。

Ink Soft

#1a1a1a

用于 caption 强调或 footer 链接。

Body

#757575

用于 byline、时间戳和次级 metadata。

字体层级

display-hero

Playfair Display · 64 / 59.5 / -0.5

封面故事标题。

display-lg

Playfair Display · 48 / 50.4 / -0.4

重点栏目标题。

display-md

Playfair Display · 32 / 35.2 / -0.3

大型故事卡片标题。

display-sm

Playfair Display · 26 / 28 / 0

正文中的次级标题。

display-xs

Inter · 20 / 24 / -0.28

分类与重点提示。

body-serif-lg

Lora · 19 / 27.93 / 0.108

导语保持杂志阅读密度，不变成营销口吻。

body-serif-md

Lora · 16 / 24 / 0.09

正文使用克制的 serif 节奏。

body-md-strong

Inter · 17 / 22 / -0.144

故事列表标题

byline

Lora · 12.73 / 28 / 0.108

作者信息 · 阅读时长 · 发布时间

caption

Inter · 12 / 16 / 0

细则说明与图片注释。

间距、层级与形状

xxs 2px

xs 4px

sm 8px

md 12px

lg 16px

xl 20px

2xl 24px

3xl 32px

4xl 48px

形状

full

按钮、输入框和卡片保持 0px 圆角；full radius 只用于图标容器。

层级

Level 0 · 平面，无边框Level 1 · 1px hairline 边框Level 2 · 2px 黑色重边框

组件样张

button-primary

黑色填充、白色文字、0px 圆角，是默认 CTA 样式。

button-secondary

白色底、1px 黑色边框、方形转角。

button-icon

唯一允许使用圆形的交互形态，主要用于分享图标。

text-input 搜索内容

content-row

一行核心内容保持清晰标题。

元信息 · 状态 · 更新时间

布局与响应式

三个断点，一套节奏。

杂志网格在不同屏幕下清晰折叠：hero 保持通栏，secondary card 在移动端变为单列，story row 始终保持单列。

断点	宽度	关键变化
移动端	< 768 px	Cover hero 从 64px 降到 40px，所有网格变为单列，导航切为 hamburger。
平板	768 - 1023 px	Secondary story 使用双列网格，section padding 收缩。
桌面端	>= 1024 px	展示完整杂志网格，hero、secondary 与 story row 保持统一节奏。

使用边界

应该

把黑色保留给 wordmark、CTA、标题和 footer。
封面故事和栏目标题使用 serif display 字体。
按钮、输入框和卡片保持 0px 圆角。
用 hairline divider 承担主要层级关系。

不要

不要在 inline link blue 之外引入新的彩色品牌强调色。
不要柔化按钮圆角。
不要给 story card 增加柔和投影。
不要用普通 sans 字体替代 display serif。

---
version: alpha
name: "Wired"
description: "Wired 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览

Wired 是 Condé Nast 旗下的旗舰科技杂志品牌，它的网页界面拒绝把自己包装成 SaaS 营销站。页面明确是一个编辑型产品：白色画布、品牌专有 `WiredDisplay` 字体中的严格黑色字标（一种高、窄、高对比度的 serif，在 64px 尺寸下使用），以及层叠的故事卡片，整体读起来像被移植到屏幕上的印刷杂志网格。没有氛围渐变，没有装饰性界面镀层，也没有彩色强调；除了黑白二重奏之外，品牌唯一的颜色是小面积的 `{colors.link}` (`#057dbc`)，只用于长文章正文中的内联链接。

字体承载了整个身份识别。系统由三套字体建立层级：`WiredDisplay`（专有高对比 serif）用于 hero / section 标题；`BreveText`（人文 serif）用于长文正文和作者信息；`Apercu`（人文 sans）用于元信息、图注、eyebrow 标签和按钮。这套搭配具有编辑级质感：serif 用于叙事，sans 用于导航和结构标签。

按钮是方形的。品牌在整个 UI 中都使用 `{rounded.none}` 0px 圆角；newsletter 注册、登录表单、"Read more" CTA 都渲染为锐利矩形。唯一的圆形形态是用于社交分享 affordance 的 `button-icon-circular`。没有柔和投影；需要表达 elevation 时，品牌使用 hairline 边框。

**关键特征：**
- 严格的黑白二重奏，除了内联链接蓝 `{colors.link}` 之外没有彩色强调。品牌读起来像一本印刷杂志。
- 三字体排版系统：`WiredDisplay` serif 用于 display，`BreveText` serif 用于 body，`Apercu` sans 用于 metadata 和 button。
- 方形按钮（`{rounded.none}`）；品牌从不柔化交互元素的圆角。
- 杂志式故事网格：顶部是 large feature card，随后是 two-up secondary，再往下是 bylined story row 的纵向堆叠，并由 `{colors.hairline}` 1px divider 分隔。
- 品牌唯一标志性的装饰动作是 **masthead band**：一条细黑条，wordmark 居中，没有其它装饰。
- Near-black `{colors.ink}` (`#000000`) footer band；没有图形，只有文本列和重复 wordmark。

## Colors

### Brand & Accent
- **Ink Black** (`{colors.primary}` — `#000000`): 品牌唯一的 "accent"。用于 wordmark、headline、CTA、footer fill。Pure black，从不软化。

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): 默认 page background。
- **Canvas Soft** (`{colors.canvas-soft}` — `#f5f5f5`): 少见 tint，用于 comment-section background 和 search-result row hover state（不属于主页面节奏）。
- **Hairline** (`{colors.hairline}` — `#e0e0e0`): Story row 之间的 1px divider。品牌唯一的 "line"。

### Text
- **Ink** (`{colors.ink}` — `#000000`): 所有 headline，以及 BreveText 中的所有 body paragraph。
- **Ink Soft** (`{colors.ink-soft}` — `#1a1a1a`): Near-black variant，用于 caption-strong / footer link emphasis。
- **Body** (`{colors.body}` — `#757575`): Secondary metadata：byline、timestamp、supporting body line。

### Semantic
品牌在 marketing surface 中只有一种 inline link color，没有独立 error / success / warning palette。Form page 上的 validation cue 使用 ink black + body grey hierarchy。

- **Link** (`{colors.link}` — `#057dbc`): Inline body-link blue。只用于 long-form article body copy 内部，从不用于 UI button 或 navigation。

## Typography

### Font Family
系统由三套字体建立层级：
1. **WiredDisplay** — 专有 tall-narrow high-contrast serif，只用于 display headline（64px hero，并逐级缩到 26px sub-display）。这是品牌最可识别的 typographic signature。
2. **BreveText** — 专有 humanist serif，用于 long-form body、byline 和 editorial caption。用于 16–19px，line-height 1.45–1.50，以获得舒适阅读密度。
3. **Apercu** — humanist sans，用于 nav、button label、category eyebrow、metadata 和 caption。字重为 400 / 700。

Inter 作为第四 fallback face 加载，用于 embedded utility surface（comment section、account page），但不会出现在主 marketing / article surface 上。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 64px | 400 | 59.5px | -0.5px | Cover-story headline。 |
| `{typography.display-lg}` | 48px | 400 | 50.4px | -0.4px | Major section / feature headline。 |
| `{typography.display-md}` | 32px | 400 | 35.2px | -0.3px | Story-card large variant。 |
| `{typography.display-sm}` | 26px | 400 | 28px | 0 | Long-form article 内部 sub-display heading。 |
| `{typography.display-xs}` | 20px | 700 | 24px | -0.28px | Category callout 使用的 sans（Apercu）display micro-heading。 |
| `{typography.body-serif-lg}` | 19px | 400 | 27.93px | 0.108px | Article lead paragraph（BreveText）。 |
| `{typography.body-serif-md}` | 16px | 400 | 24px | 0.09px | Default article body（BreveText）。 |
| `{typography.body-md}` | 17px | 400 | 20px | 0 | Nav / metadata 使用的 sans body（Apercu）。 |
| `{typography.body-md-strong}` | 17px | 700 | 22px | -0.144px | Bold sans body。 |
| `{typography.body-sm}` | 14px | 400 | 18px | 0.4px | Secondary sans body。 |
| `{typography.body-sm-strong}` | 14px | 700 | 18px | 0.4px | Bold caption / nav-link。 |
| `{typography.byline}` | 12.73px | 700 | 28px | 0.108px | Article byline（BreveText）。 |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Fine print、image caption。 |
| `{typography.button-md}` | 16px | 700 | 20px | 0.3px | Button label。 |

### Principles
- **Serif 用于叙事，sans 用于结构。** Serif face 从不承载 button label 或 nav text；sans face 从不承载 article body。
- **Display weight 400**；专有 WiredDisplay 的优雅来自默认字重下的 thin-tall-narrow 设计，而不是 700+ weight。
- **Byline 使用 BreveText weight 700 和宽松 line-height 2.2。** 垂直呼吸感是 editorial signature 的一部分。

### Note on Font Substitutes
三套专有字体没有精确替代。最佳开源近似：
- **WiredDisplay** — 大 display size 下的 *Playfair Display* weight 400 能捕捉 high-contrast didone feel，虽然比品牌的 tall-narrow 比例更宽。
- **BreveText** — 16–19px 下使用 *Lora* 或 *Source Serif Pro*。
- **Apercu** — 使用 *Inter* 或 *Manrope* weights 400 / 700。

## Layout

### Spacing System
- **Base unit**: 4px。
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.2xl}` 24px · `{spacing.3xl}` 32px · `{spacing.4xl}` 48px。
- **Section padding**: Desktop 上 hero / story grid 使用 `{spacing.4xl}` 48px top/bottom。
- **Story row padding**: Bylined story row 之间使用 `{spacing.lg}` 16px vertical。

### Grid & Container
- Marketing content 使用宽 container（最大约 1400px）。
- Cover-story grid：1 个 large hero + 2-up secondary story + vertical stack。
- Story-row stack：带 hairline divider 的 full-width single column。

### Responsive Strategy

#### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Cover hero 从 64px 降到 40px；所有 grid 1-up；hamburger nav。 |
| Tablet | 768–1023px | 2-up secondary story grid。 |
| Desktop | ≥ 1024px | 完整 magazine grid。 |

#### Touch Targets
Button-primary 渲染高度约 44px（12 vertical padding + 20 line）。所有宽度下符合 WCAG AAA。

#### Collapsing Strategy
- Nav：desktop 上是 full link row + Subscribe CTA；mobile 上为 hamburger。
- Magazine grid：hero 保持 full-width；2-up secondary 在 mobile 降为 1-up。
- Story rows：所有 viewport 都保持 single-column。

#### Image Behavior
- Cover image：full-bleed 16:9 hero / 4:3 secondary。
- Article body image：article column 内 full-width。
- Author avatar：byline 旁的小型 inline circular crop。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Level 0 — Flat | 无 shadow、无 border。 | 默认；几乎所有 surface 都在这一层。 |
| Level 1 — Hairline | 1px solid `{colors.hairline}` border。 | Story-row divider、input border。 |
| Level 2 — Heavy Black Border | 2px solid `{colors.ink}` border。 | 某些 campaign moment 中的 Subscribe CTA。 |

品牌不使用 drop-shadow。Surface contrast 和 hairline border 承担所有视觉层级。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | 所有 interactive shape：button、input、card。品牌 signature square geometry。 |
| `{rounded.full}` | 9999px | 只用于 circular icon container（social-share、account avatar）。 |

### Photography Geometry
- Cover story：16:9 hero，edge-to-edge。
- Secondary story card：4:3 thumbnail。
- Article body image：native aspect，full column width。
- Byline / avatar：circular `{rounded.full}` 28px crop。

## Components

### Buttons

**`button-primary`** — square black CTA。
- Background `{colors.primary}`、text `{colors.on-primary}`、label `{typography.button-md}`（Apercu 16px / 700 / 0.3px tracking）、padding `{spacing.md} {spacing.xl}`、shape `{rounded.none}` 0px。

**`button-outline`** — white outline CTA。
- Background `{colors.canvas}`、text `{colors.ink}`、1px solid `{colors.ink}` border，同样 typography / padding / shape。

**`button-icon-circular`** — circular share-icon button。
- Background `{colors.canvas}`、ink icon、shape `{rounded.full}`。

### Cards & Containers

**`story-card-large`** — 带 `{typography.display-md}` headline 的 cover-story card。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.lg}`。没有 border；card 位于 canvas 上，由 photo 承担视觉工作。

**`story-card`** — secondary story card。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.md}`。上方是 photo，下方是 sans display heading + body lead。

**`story-row`** — bylined story list row。
- Background `{colors.canvas}`、text `{colors.ink}`、1px solid `{colors.hairline}` bottom border、body 使用 `{typography.body-md-strong}`、padding `{spacing.lg}` 0。

### Inputs & Forms

**`text-input`** — 标准 text input。
- Background `{colors.canvas}`、text `{colors.ink}`、1px solid `{colors.ink}` border、body 使用 `{typography.body-md}`、padding `{spacing.md} {spacing.lg}`、shape `{rounded.none}`。

### Navigation

**`nav-bar`** — top nav，默认 light。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.md} {spacing.xl}`。Layout：左侧 hamburger，中间 masthead，右侧 Subscribe。

**`nav-link`** — nav 内部的 link item。
- Text `{colors.ink}`，使用 `{typography.body-sm-strong}`（Apercu 14 / 700）。

**`footer`** — black footer band。
- Background `{colors.primary}`、text `{colors.on-primary}`、padding `{spacing.4xl} {spacing.xl}`。Body 使用 `{typography.body-sm}`（Apercu 14 / 400）。Footer column eyebrow 使用 `{typography.body-sm-strong}`。

### Signature Components

**`hero-band`** — 承载 cover-story 的 white hero band。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.4xl} {spacing.xl}`。Cover headline 使用 `{typography.display-hero}`（WiredDisplay 64px）。

**`masthead-band`** — 带 wordmark 的细 top band。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.md} {spacing.xl}`。Wordmark 居中，两侧是 section nav。

**`category-eyebrow`** — story headline 上方的小型 uppercase category label。
- Text `{colors.ink}`，使用 `{typography.body-sm-strong}`（Apercu 14 / 700；部分 campaign 通过 CSS 使用 ALL CAPS）。

**`byline-row`** — article byline strip。
- Background `{colors.canvas}`、text `{colors.body}`、body 使用 `{typography.byline}`（BreveText 12.73 / 700 / line-height 2.2）。包含 author avatar + name + date。

**`hairline-divider`** — story row 之间的 1px line。
- 1px solid `{colors.hairline}`。

### Examples (illustrative)

> 自动派生的 kit-mirror demonstration surfaces（`scripts/derive-examples-block.mjs`）。每个 `ex-*` 条目都引用 brand-native primitive，让下游消费者（`/preview-design`、`/generate-kit`）可以一致地重新换肤同一组 10 个 surface。`TO_FILL` 标记表示缺失 primitive，需要在 LLM judgment pass 中解决。

**`ex-pricing-tier`** — 默认 Pricing tier card。复用 feature-card chrome，并使用品牌 canvas-soft surface。
- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier；polarity-flipped surface（light mode 中 dark fill + light text，dark mode 中 light fill + dark text）。
- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card；为 SaaS / B2B vertical 重新设定用途（不是字面意义上的 product gallery）。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary；为 SaaS / B2B 重新设定用途（每个 add-on 一行，不是字面意义上的 cart）。
- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — App Shell 示例中的 sidebar nav row。Active state 使用 brand primary 作为 indicator。
- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 默认 data-table th + td chrome。Header 使用 mono-caps eyebrow typography；body 使用 body-sm。
- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card。复用 feature-card chrome，内部使用 text-input primitive。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface；与 feature-card 使用相同 chrome，并带 elevated shadow。
- Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame。
- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface；feature-card shape + medium shadow。
- Properties: `backgroundColor`, `rounded`, `padding`, `typography`

## Do's and Don'ts

### Do
- 将 `{colors.primary}` black 保留给 wordmark、每个 CTA 和 footer fill。品牌就是严格 black-on-white duet。
- Hero headline 使用 `{typography.display-hero}`（WiredDisplay 64px weight 400）。专有 serif 就是品牌 typographic signature。
- 每个 button 和 form input 都使用 `{rounded.none}` 0px。品牌读起来像印刷杂志；square corner 不可妥协。
- 将 WiredDisplay（serif display）、BreveText（serif body）和 Apercu（sans label）配对。三套字体，三个角色。
- Story row 使用 `{colors.hairline}` 1px divider 渲染；这是品牌唯一 elevation cue。

### Don't
- 不要引入 chromatic brand accent。Link blue 只保留给 article 内部的 inline body link。
- 不要给 button corner 加圆角。品牌从不柔化矩形几何。
- 不要给 card 添加 soft drop-shadow。Surface contrast 和 hairline 承担 elevation。
- 不要用 generic sans 替代专有 serif face 来做 display。Serif voice 就是品牌。
- 不要把 display weight 提到 400 以上。品牌优雅感来自字体设计，而不是 bold weight。

Wired

相关模板

Figma

Nintendo 2001

Claude

Warp

The Verge

Miro