Vodafone

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

## 概览
Vodafone 是 global telecom super-brand，它的 web surface 也准确传达了这种姿态：heroic editorial photography，有时 portrait 裁切得非常紧，只剩 eye line 和握手机的手可见，上方浮着一个使用品牌专有 heavy display weight 的 colossal uppercase headline。页面读起来更像 campaign poster，而不是 corporate site；随后进入更平静的 content rhythm：light-canvas story card，以及一个 red marker（标志性的 speechmark logo）把视线拉向品牌重心。没有第二个 accent colour 竞争；整个 decorative palette 由 `{colors.primary}` Vodafone red、near-black `{colors.ink}` 和周围的 white / grayscale neutral 构成。

Type 是第二个决定性声音。Vodafone 的 custom display sans（提取为 `Vodafone`）在 hero scale 上以极重的 weight 800 和 upper case 承载每个 headline（`{typography.display-hero}` 144 px、`{typography.display-xxl}` 126 px），随后 sub-display 使用更轻的 weight 300。Body text 保持同一 family，weight 400，tracking 中性。Display weight 800 与 display weight 300 的对比就是品牌 typographic story：先是一声呐喊，然后是一句平静陈述。

每个 interactive CTA 都渲染为 generous rounded pill（`{rounded.pill-lg}` 60 px）。Vodafone 多年来在 marketing surface 上从不使用 square button；品牌的 pill scale ladder 从 32 px（badge pill）到 60 px（CTA pill），再到 9999 px（icon circular container）。Card 则更温和，使用 `{rounded.card}` 6 px。

**Key Characteristics:**
- 单一 primary CTA color `{colors.primary}` (`#e60000`)：Vodafone Red。Primary 使用 filled pill，secondary 使用 outline pill。没有第三种 button variant。
- Massive uppercase display weight 800（`{typography.display-hero}` 及其 sibling）是品牌 signature。300-weight headline sibling（`{typography.display-lg}` / `{typography.display-md}`）处理更平静的 secondary moment。
- `speechmark-logo-orb` 是一个承载 Vodafone quotation-mark icon 的 red square，是唯一不是 CTA 的 decorative chrome。它锚定每个页面的品牌重心。
- 每个 interactive shape 都使用 pill geometry：button 使用 `{rounded.pill-lg}` 60 px，inline badge 使用 `{rounded.pill-md}` 32 px。Card chrome 保持 `{rounded.card}` 6 px。
- Two-band page rhythm：`{colors.ink}` dark hero / `{colors.canvas}` light content。没有 mid-band grey；品牌使用 surface contrast，而不是 soft neutral，来表达 elevation。
- Editorial photography（真实 portrait、真实 city、真实 cabling）是唯一稳定 decorative system；没有 illustration，没有 atmospheric gradient。

## Colors

### Brand & Accent
- **Vodafone Red** (`{colors.primary}` — `#e60000`): 唯一 brand accent。用于每个 primary CTA pill、每个 speechmark logo、每个 conversion target。这是 telecom 中最具标志性的 red；绝不 desaturated，也不大面积用于 body fill，只保留给 high-attention surface。

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): 默认 light content background。
- **Canvas Soft** (`{colors.canvas-soft}` — `#f2f2f2`): Near-white tint，用作 badge-chip background。
- **Ink** (`{colors.ink}` — `#25282b`): 品牌 near-black surface，用作 dark hero band、nav background 和 footer fill。在 light surface 上也兼作 primary text color。

### Text
- **Ink** (`{colors.ink}` — `#25282b`): Light surface 上的每个 heading 和 body paragraph。
- **Body** (`{colors.body}` — `#7e7e7e`): Light surface 上的 secondary body text，用于 caption、metadata、supporting copy。
- **Mute** (`{colors.mute}` — `#bebebe`): 最低优先级 text color，用于 placeholder text、low-key footer link。
- **On Dark** (`{colors.on-dark}` — `#ffffff`): `{colors.ink}` surface（hero、footer、nav）上的所有 text。

### Semantic Colors
品牌不维护单独的 semantic palette。Primary red 在需要时兼作 validation / destructive signal；success / warning 用法保留给 in-product context，不属于这里记录的 marketing system。

## Typography

### Font Family
一套 custom face 承载整个系统：**Vodafone**，品牌 proprietary display sans。该字体覆盖 300（light）、400（regular）、600、700 和 800；系统中的每个 role 都来自这一 family。没有 mono companion；technical label（marketing surface 上很少见）也借用同一字体的小尺寸。

Icomoon icon-font 用于 proprietary glyph，但不作为 typographic role 渲染。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 144px | 800 | 114px | -1px | Hero stencil（`"STAY CONNECTED"`），uppercase、ultra-tight tracking，品牌 signature size。 |
| `{typography.display-xxl}` | 126px | 800 | 113px | -1px | 略小的 hero variant。 |
| `{typography.display-xl}` | 90px | 800 | 84px | 0 | Mid-hero scale。 |
| `{typography.display-lg}` | 48px | 300 | 52px | 0 | 更轻 weight 的 section-headline sub-display。 |
| `{typography.display-md}` | 40px | 300 | 44px | 0 | Sub-section display。 |
| `{typography.display-sm}` | 32px | 700 | 40px | 0 | Card heading、story-card title。 |
| `{typography.display-xs}` | 24px | 700 | 24px | 0 | Inline display micro-heading。 |
| `{typography.eyebrow-uppercase}` | 16px | 800 | 24px | 0 | Section headline 上方的 uppercase eyebrow tag。 |
| `{typography.body-lg}` | 22px | 400 | 24px | 0 | Lead body paragraph。 |
| `{typography.body-md}` | 18px | 400 | 28px | 0 | Default paragraph body。 |
| `{typography.body-md-strong}` | 18px | 600 | 28px | 0 | Bolded inline body。 |
| `{typography.body-sm}` | 16px | 400 | 20px | 0 | Secondary body。 |
| `{typography.body-sm-strong}` | 16px | 700 | 22px | 0 | Bolded short body。 |
| `{typography.caption}` | 14px | 400 | 16px | 0 | Caption、fine print。 |
| `{typography.caption-strong}` | 14px | 700 | 21px | 0 | Bold caption、badge label。 |
| `{typography.caption-uppercase}` | 12px | 600 | 16px | 0.57px | Uppercase metadata、footer eyebrow。 |
| `{typography.button-md}` | 18px | 400 | 28px | 0 | Default button label。 |

### Principles
- **Weight 800 + uppercase = hero voice。** 这正是品牌读起来像 billboard 而不是 tech site 的原因。
- **Weight 300 = 更平静的 secondary voice。** 用于 40–48 px 的 sub-display；为保持可读性，绝不低于 24 px。
- **始终使用 single family。** 品牌从不把 serif 或 mono 混入 typographic system。一致性就是 calm。
- **Display size 上 tracking 保持紧。** 144 px 时的 `-1px` 是品牌 calibration；回到 neutral tracking 会削弱 stencil look。

### Font Substitutes
Vodafone display sans 是 proprietary。Open-source substitute：
- **Display sans**：hero scale 上的 *Inter* weight 800 加 `letter-spacing: -1px` 是最接近的免费替代。*Geist* weight 700–800 是第二选择。
- **Lighter display weight (300)**：*Inter* weight 300 在 48 px display size 上能很好保持 line-height。

## Layout

### Spacing System
- **Base unit**: 4 px（主要是 4 的倍数；少数 5/7 px 出现在 icon-padding compensation 内）。
- **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.
- **Section padding**: Hero band 和 content band 使用 `{spacing.3xl}` 32 px gutter；hero 内部 vertical spacing 是 fluid（fill-the-band）。
- **Card interior padding**: Story card 在 image + headline 周围使用 `{spacing.lg}` 16 px。
- **Inline gap**: Button row 和 chip row 的 sibling 间距使用 `{spacing.md}` 12 px。

### Grid & Container
- Marketing content 使用宽 container：desktop 上接近 edge-to-edge，只保留 `{spacing.3xl}` gutter；mobile 上随屏幕收窄。
- Story-card grid：desktop 为 2-up，mobile 为 1-up。
- Hero photography 填满 viewport；headline 叠放在左上角。

### Whitespace Philosophy
Hero 中巨大的 display headline 占据页面顶部；下方 whitespace 要足够慷慨，让第二个 band 有呼吸感。Content card 内部，headline 与 copy 靠得很近（`{spacing.sm}` 8 px gap），到下一张 card 之前再拉出更大的间距（`{spacing.3xl}`）。Footer band 是 dark 且 dense 的。

### Responsive Strategy

#### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 600px | Hero display 缩小到约 64 px；story-card grid 降为 1-up；nav 折叠为 hamburger。 |
| Tablet | 600–1023px | Story-card grid 为 2-up；display headline 降到 90–110 px。 |
| Desktop | 1024–1399px | 使用完整 126–144 px display headline；story grid 为 2-up。 |
| Ultra-wide | ≥ 1400px | Container 上限约 1400 px；band 的 colour 仍保持 edge-to-edge。 |

#### Touch Targets
`button-primary` pill 渲染高度约 52 px（12 px vertical padding + 28 px line-height）。所有 button 在每个 breakpoint 都能轻松满足 WCAG AAA touch target。

#### Collapsing Strategy
- **Nav**: desktop 使用完整 link row。Mobile 折叠为 hamburger menu；menu 打开为 dark overlay，并堆叠同一组 link。
- **Hero**: 巨大的 display headline fluid 缩放。Mobile 上 photography crop 收紧，只保留人物面部。
- **Story-card grid**: 在上述 breakpoint 从 2-up → 1-up。
- **Speechmark logo orb**: 相对周围内容保持一致尺寸；绝不缩小到约 48 px 以下。

#### Image Behavior
- **Hero photography**: desktop 为 full-bleed 16:9 或 4:3 portrait；mobile 使用更紧的 crop。
- **Story-card thumbnails**: `{rounded.card}` 6 px chrome 内的 16:9 landscape。
- **Speechmark orb**: 始终渲染为 red SVG quote-mark icon，绝不替换。
- **Logo bar（若 partner page 中出现）**: 使用高度一致的 monochrome SVG。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Level 0 — Flat | 无 shadow，无 border。 | 大多数 card 和 panel 的默认层级：由 surface contrast 承担 elevation。 |
| Level 1 — Hairline | 1 px solid `{colors.ink}` border。 | Form input、footer column 之间的 `divider-on-dark`。 |
| Level 2 — Border on Dark | `{colors.ink}` surface 上使用 1 px solid `{colors.on-dark}` border。 | 位于 dark hero band 上的 outline button。 |

品牌不使用 soft drop shadow；depth 来自 `{colors.ink}` 与 `{colors.canvas}` band 之间的 polarity-flip。

### Decorative Depth
- **Editorial photography**: hero photo（真人 portrait 或 environment shot）是品牌唯一真正的 atmospheric effect。
- **Speechmark logo orb as visual anchor**: 承载 quote-mark icon 的 red orb，是 otherwise-flat content rhythm 中唯一的 focal-depth 点。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed hero band、footer、banner strip。 |
| `{rounded.xs}` | 1px | 最紧的 inline indicator（很少使用）。 |
| `{rounded.sm}` | 6px | 品牌 canonical content radius，应用于 image 和 input。 |
| `{rounded.card}` | 6px | Card chrome 与 image frame（`sm` 的 alias）。 |
| `{rounded.pill-md}` | 32px | Badge / chip pill。 |
| `{rounded.pill-lg}` | 60px | 品牌 signature CTA pill，用于每个 primary 与 secondary button。 |
| `{rounded.full}` | 9999px | Circular icon container（如 video play/pause）。 |

### Photography Geometry
- Hero portrait：edge-to-edge 16:9 或 4:3，不加 internal frame。
- Story-card thumbnail：`{rounded.card}` chrome 内的 16:9 landscape。
- Speechmark logo orb：带 `{rounded.sm}` corner 的 square（视觉上像倾斜方形 mark；SVG mark 自身填满 orb）。

## Components

### Buttons

**`button-primary`** — red pill CTA，品牌 primary conversion target。
- Background `{colors.primary}`、text `{colors.on-primary}`、1 px solid `{colors.primary}` border、label 使用 `{typography.button-md}`、padding `{spacing.md} {spacing.2xl}`、shape `{rounded.pill-lg}` 60 px。

**`button-outline-red`** — secondary pill，white surface 上的 red text 与 red border。
- Background `{colors.canvas}`、text `{colors.primary}`、1 px solid `{colors.primary}` border；label / padding / shape 与 `button-primary` 相同。

**`button-outline-dark`** — tertiary pill，white surface 上的 ink text 与 ink border。
- Background `{colors.canvas}`、text `{colors.ink}`、1 px solid `{colors.ink}` border；label / padding / shape 相同。

**`button-icon-circular`** — round white icon button（video play / pause / chevron）。
- Background `{colors.canvas}`、ink icon、1 px solid `{colors.canvas}` outline（视觉上接近 borderless）、shape `{rounded.full}`。

### Cards & Containers

**`card-content`** — 默认 story-card chrome。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.lg}`、shape `{rounded.card}` 6 px。顶部承载 16:9 thumbnail，下面是 headline 与 caption。

**`card-hero`** — 用作 lead story 的略大 card variant。
- Chrome 与 `card-content` 相同，但 headline 放大到 `{typography.display-sm}`。

### Inputs & Forms

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

### Navigation

**`nav-bar`** — fixed 在页面顶部的 dark top nav。
- Background `{colors.ink}`、text `{colors.on-dark}`、padding `{spacing.lg} {spacing.3xl}`。Layout：logo 在左，link row 在右，并带 login / search affordance。

**`nav-link`** — `nav-bar` 内的 link item。
- Text `{colors.on-dark}`，使用 `{typography.body-sm}`。

**`footer`** — dark footer band。
- Background `{colors.ink}`、text `{colors.on-dark}`、padding `{spacing.3xl} {spacing.3xl}`。Body 使用 `{typography.body-sm}`；column eyebrow 使用 `{typography.caption-uppercase}`。

### Signature Components

**`hero-band-dark`** — 承载 massive display headline 的 dark navy/ink hero band。
- Background `{colors.ink}`，叠加 reduced opacity 的 full-bleed editorial photography overlay；text `{colors.on-dark}`；padding `{spacing.3xl} {spacing.3xl}`。Headline 使用 `{typography.display-hero}`（uppercase、weight 800）。

**`hero-band-red`** — signature campaign 中少见的 full-bleed red hero。
- Background `{colors.primary}`、text `{colors.on-primary}`、padding `{spacing.3xl} {spacing.3xl}`。Headline 使用 `{typography.display-xl}`。

**`content-band-light`** — 每个 hero 后面的 white content band。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.3xl} {spacing.3xl}`。Section headline 使用 `{typography.display-md}` 或 `{typography.display-lg}`（weight 300）。

**`speechmark-logo-orb`** — 承载 Vodafone quotation-mark icon 的 red square。品牌 visual anchor。
- Background `{colors.primary}`、white icon glyph、shape `{rounded.sm}`。作为 content band 之间的 focal element，常出现在长页面中央附近。

**`badge-chip`** — story card 内用于 category tag 的 inline metadata pill。
- Background `{colors.canvas-soft}`、text `{colors.ink}`、label 使用 `{typography.caption-strong}`、padding `{spacing.xs} {spacing.md}`、shape `{rounded.pill-md}` 32 px。

**`divider-on-dark`** — dark surface 上用于 section / column 之间的 1 px hairline。
- 1 px solid `{colors.on-dark}`（component level 通常设为 25% opacity）。

### Examples (illustrative)

> Auto-derived kit-mirror demonstration surface（`scripts/derive-examples-block.mjs`）。每个 `ex-*` entry 都引用 brand-native primitive，让 downstream consumer（`/preview-design`、`/generate-kit`）能一致地 re-skin 同一组 10 个 surface。`TO_FILL` marker 表示 primitive 缺失，需要在 LLM judgment pass 中解决。

**`ex-pricing-tier`** — 默认 Pricing tier card。复用 feature-card chrome，并使用 brand canvas-soft surface。
- 属性：`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）。
- 属性：`backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card，改用于 SaaS / B2B vertical（不是 literal product gallery）。
- 属性：`backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary，改用于 SaaS / B2B（每个 add-on 一行 line item，不是 literal cart）。
- 属性：`backgroundColor`, `rounded`, `padding`, `item-divider`

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

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

**`ex-auth-form-card`** — Sign-in / sign-up card。复用 feature-card chrome，内部放置 text-input primitive。
- 属性：`backgroundColor`, `rounded`, `padding`

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

**`ex-empty-state-card`** — Empty-state illustration frame。
- 属性：`backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface，使用 feature-card shape + medium shadow。
- 属性：`backgroundColor`, `rounded`, `padding`, `typography`

## Do's and Don'ts

### Do
- 将 `{colors.primary}` Vodafone Red 保留给 primary CTA 和 `speechmark-logo-orb`。每个 conversion target 都使用 red pill。
- Hero headline 使用 `{typography.display-hero}`、weight 800、UPPERCASE，并带紧凑的 `-1px` tracking。这个 stencil look 就是品牌声音。
- 每个 interactive pill 都使用 `{rounded.pill-lg}` 60 px。品牌的 CTA 从不使用 square corner。
- Page surface 按 `{colors.ink}` dark hero → `{colors.canvas}` light content → `{colors.ink}` footer 循环。Surface contrast 就是 depth cue。
- 将 editorial portrait photography 与 massive display headline overlay 配对，这个组合就是品牌 signature。
- Speechmark logo orb 应相对周围内容保持一致尺寸，它是每个页面的品牌重心。

### Don't
- 不要引入第二个 accent colour。品牌只使用 red + ink + grayscale。
- 不要在 hero scale 上把 headline 渲染成 sentence case。Hero display 必须是 uppercase weight 800。
- 不要把 primary CTA 渲染成 square rectangle。60 px pill 是不可协商的。
- 不要给 card 添加 soft drop-shadow。品牌依赖 surface-colour contrast，而不是 shadow。
- 不要用 wordmark 或其他 shape 替代 speechmark logo orb。这个 orb 是 iconic mark。
- 不要在 144 px 上把 weight 800 display face 配成 letter-spacing 0；`-1px` tracking 是品牌 calibration 的一部分。