wired.com
设计示例预览
←
返回全部设计模板
Wired
适合深度专题、研究报告和观点索引页，黑白编辑网格、serif 大标题和零圆角结构带来纸媒般的锋利感。
编辑杂志 高对比冲击
配色方案
4 colors #000000
#ffffff
#f5f5f5
#1a1a1a
字体排版
Aa
WiredDisplay
字重 400 · 字距 -0.008em
形状与组件
按钮
圆角 0px · 按钮 0px
相关模板
查看更多 →
查看提示词
---
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 旗下的旗舰 technology-magazine 品牌；它的 Web surface 拒绝把自己打扮成 SaaS marketing site。页面明显是 editorial product：white canvas、品牌专有 `WiredDisplay` 中的严格 black wordmark（一种高、窄、高对比 serif，使用到 64 px），以及堆叠的 story card，读起来像被移植到屏幕上的印刷杂志网格。没有 atmospheric gradient，没有 decorative chrome，也没有 chromatic accent；除了黑白二重奏之外，品牌唯一的颜色是用于 long-form article 正文 inline link 的小型 `{colors.link}` (`#057dbc`)。
Type 承载完整 identity。系统由三套字体建立层级：`WiredDisplay`（专有 high-contrast serif）用于 hero / section headline；`BreveText`（humanist serif）用于 long-form body 和 byline；`Apercu`（humanist sans）用于 metadata、caption、eyebrow tag 和 button。这套配对是 editorial-grade：serif 承担叙事，sans 承担导航和结构标签。
Button 是 square。品牌在整个 UI 中使用 `{rounded.none}` 0 px corner；newsletter sign-up、login form、"Read more" CTA 都渲染为锐利矩形。唯一 circular shape 是用于 social-share affordance 的 `button-icon-circular`。没有 soft drop-shadow；需要 elevation 时，品牌使用 hairline border。
**Key Characteristics:**
- 严格 black-and-white duet，除了 inline link blue `{colors.link}` 之外没有 chromatic accent。品牌读起来像印刷杂志。
- 三字体 typographic system：`WiredDisplay` serif 用于 display，`BreveText` serif 用于 body，`Apercu` sans 用于 metadata 和 button。
- Square button（`{rounded.none}`）；品牌从不柔化 interactive element 的 corner。
- Magazine-style story grid：顶部 large feature card，随后 two-up secondary，再往下是 bylined story row 的 vertical stack，并由 `{colors.hairline}` 1 px divider 分隔。
- 品牌唯一 signature decorative move 是 **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 之间的 1 px 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 Colors
品牌在 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（64 px hero，并逐级缩到 26 px sub-display）。这是品牌最可识别的 typographic signature。
2. **BreveText** — 专有 humanist serif，用于 long-form body、byline 和 editorial caption。用于 16 – 19 px，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 的一部分。
### Font Substitutes
三套专有字体没有精确替代。最佳开源近似：
- **WiredDisplay** — 大 display size 下的 *Playfair Display* weight 400 能捕捉 high-contrast didone feel，虽然比品牌的 tall-narrow 比例更宽。
- **BreveText** — 16 – 19 px 下使用 *Lora* 或 *Source Serif Pro*。
- **Apercu** — 使用 *Inter* 或 *Manrope* weights 400 / 700。
## Layout
### Spacing System
- **Base unit**: 4 px。
- **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 20 px · `{spacing.2xl}` 24 px · `{spacing.3xl}` 32 px · `{spacing.4xl}` 48 px。
- **Section padding**: Desktop 上 hero / story grid 使用 `{spacing.4xl}` 48 px top/bottom。
- **Story row padding**: Bylined story row 之间使用 `{spacing.lg}` 16 px vertical。
### Grid & Container
- Marketing content 使用宽 container（最大约 1400 px）。
- 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 从 64 降到 40 px；所有 grid 1-up；hamburger nav。 |
| Tablet | 768–1023px | 2-up secondary story grid。 |
| Desktop | ≥ 1024px | 完整 magazine grid。 |
#### Touch Targets
Button-primary 渲染高度约 44 px（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 row：所有 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 | 1 px solid `{colors.hairline}` border。 | Story-row divider、input border。 |
| Level 2 — Heavy Black Border | 2 px 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}` 28 px crop。
## Components
### Buttons
**`button-primary`** — square black CTA。
- Background `{colors.primary}`、text `{colors.on-primary}`、label `{typography.button-md}`（Apercu 16 px / 700 / 0.3 px tracking）、padding `{spacing.md} {spacing.xl}`、shape `{rounded.none}` 0 px。
**`button-outline`** — white outline CTA。
- Background `{colors.canvas}`、text `{colors.ink}`、1 px 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}`、1 px 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}`、1 px 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 64 px）。
**`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 之间的 1 px line。
- 1 px 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 64 px weight 400）。专有 serif 就是品牌 typographic signature。
- 每个 button 和 form input 都使用 `{rounded.none}` 0 px。品牌读起来像印刷杂志；square corner 不可妥协。
- 将 WiredDisplay（serif display）、BreveText（serif body）和 Apercu（sans label）配对。三套字体，三个角色。
- Story row 使用 `{colors.hairline}` 1 px 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。