version: alpha name: Vodafone-Inspired-design-analysis description: An inspired interpretation of Vodafone's design language — a telecom super-brand whose web surface alternates between editorial photography hero bands with massive uppercase display headlines and clean white content bands, anchored by the company's signature scarlet red CTA and the proprietary Vodafone display sans set at impossibly heavy 800 weight.

colors: primary: "#e60000" on-primary: "#ffffff" ink: "#25282b" body: "#7e7e7e" mute: "#bebebe" canvas: "#ffffff" canvas-soft: "#f2f2f2" on-dark: "#ffffff"

typography: display-hero: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 144px fontWeight: 800 lineHeight: 114px letterSpacing: -1px display-xxl: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 126px fontWeight: 800 lineHeight: 113px letterSpacing: -1px display-xl: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 90px fontWeight: 800 lineHeight: 84px display-lg: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 48px fontWeight: 300 lineHeight: 52px display-md: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 40px fontWeight: 300 lineHeight: 44px display-sm: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 32px fontWeight: 700 lineHeight: 40px display-xs: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 24px fontWeight: 700 lineHeight: 24px eyebrow-uppercase: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 800 lineHeight: 24px body-lg: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 22px fontWeight: 400 lineHeight: 24px body-md: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px body-md-strong: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 600 lineHeight: 28px body-sm: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 700 lineHeight: 22px caption: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 16px caption-strong: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 700 lineHeight: 21px caption-uppercase: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: 0.5691px button-md: fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px

rounded: none: 0px xs: 1px sm: 6px card: 6px pill-md: 32px pill-lg: 60px full: 9999px

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

components: nav-bar: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" padding: "{spacing.lg} {spacing.3xl}" nav-link: textColor: "{colors.on-dark}" typography: "{typography.body-sm}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill-lg}" padding: "{spacing.md} {spacing.2xl}" button-outline-red: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" borderColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill-lg}" padding: "{spacing.md} {spacing.2xl}" button-outline-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill-lg}" padding: "{spacing.md} {spacing.2xl}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.canvas}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" badge-chip: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.caption-strong}" rounded: "{rounded.pill-md}" padding: "{spacing.xs} {spacing.md}" card-content: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.card}" padding: "{spacing.lg}" card-hero: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.card}" padding: "{spacing.lg}" hero-band-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.display-hero}" padding: "{spacing.3xl} {spacing.3xl}" hero-band-red: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-xl}" padding: "{spacing.3xl} {spacing.3xl}" content-band-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "{spacing.3xl} {spacing.3xl}" speechmark-logo-orb: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" divider-on-dark: borderColor: "{colors.on-dark}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.3xl}"

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default tier card. Mirrors card-content chrome with canvas-soft surface and a hairline border." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.mute}" rounded: "{rounded.card}" padding: "{spacing.lg}" ex-pricing-tier-featured: description: "Featured tier — polarity-flipped to ink with white text and white pill CTA inside." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.card}" padding: "{spacing.lg}" ex-product-selector: description: "Tariff-tier picker — repurposed as the brand's plan selector with badge-chip chips inside the frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.card}" padding: "{spacing.lg}" ex-cart-drawer: description: "Subscription summary — line items per tariff add-on, light hairline dividers." backgroundColor: "{colors.canvas}" rounded: "{rounded.card}" padding: "{spacing.lg}" item-divider: "{colors.mute}" ex-app-shell-row: description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table cell chrome. Header uses caption-uppercase mono-style eyebrow; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption-uppercase}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.mute}" ex-auth-form-card: description: "Sign-in / sign-up card. Mirrors card-content chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.card}" padding: "{spacing.lg}" ex-modal-card: description: "Modal dialog surface — same chrome as card-content; brand uses scrim, not card shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.card}" padding: "{spacing.lg}" ex-empty-state-card: description: "Empty-state illustration frame on canvas-soft with generous interior padding." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.card}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — card-content shape with caption-strong body." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}"

概览

Vodafone 是一个全球电信超级品牌，其网页表面恰好传达了这种姿态:英勇的编辑风格摄影，有时将肖像裁剪得很紧，只留下眼神线和握手机的手，顶部漂浮着品牌专有的超粗体全大写巨型标题。整个页面读起来更像一张广告海报而非公司网站，然后转入更平静的浅色画布故事卡片节奏，以单一红色标记(标志性的引号 logo)将视线吸引到品牌的重心。没有任何第二点缀色参与竞争——整个装饰调色板就是 {colors.primary} Vodafone 红、近黑 {colors.ink}，以及周围的白色和灰度中性色。

字体是第二个决定性的声音。Vodafone 的定制展示无衬线字体(提取为 Vodafone)以不可思议的 800 字重承担所有标题，首屏尺度上使用全大写({typography.display-hero} 144 px、{typography.display-xxl} 126 px)，并以更轻的 300 字重承担随后的副展示。正文保持在同一字体家族中，以 400 字重和字距中性。展示字 800 字重和展示字 300 字重之间的对比就是品牌的字体故事:一声呼喊，然后一句平静的话语。

每个交互式 CTA 都渲染为宽松圆角的胶囊({rounded.pill-lg} 60 px)——Vodafone 多年来从未在其营销表面上使用过方形按钮，品牌的胶囊刻度阶梯从 32 px(徽标胶囊)经过 60 px(CTA 胶囊)上升到 9999 px(图标圆形容器)。卡片保持更温和的 {rounded.card} 6 px。

关键特征:

• 单一主 CTA 颜色 {colors.primary}(#e60000)——Vodafone Red。胶囊填充用于主按钮，胶囊轮廓用于次按钮。没有第三个按钮变体。
• 巨大的全大写展示 800 字重({typography.display-hero} 及同类)是品牌的标志。300 字重的展示字兄弟元素({typography.display-lg} / {typography.display-md})处理更平静的次要瞬间。
• speechmark-logo-orb——承载 Vodafone 引号图标的红色方形——是唯一不属于 CTA 的装饰外壳。它锚定每页的品牌中心。
• 每个交互形状上的胶囊几何——按钮使用 {rounded.pill-lg} 60 px，内联徽标使用 {rounded.pill-md} 32 px。卡片外壳保持在 {rounded.card} 6 px。
• 双色带页面节奏——{colors.ink} 深色首屏 / {colors.canvas} 浅色内容。没有中段灰色;品牌使用表面对比而非柔和的中性色来营造抬升。
• 编辑风格摄影(真实人物肖像、真实城市、真实线缆)是唯一一致的装饰系统——没有插图，没有氛围渐变。

配色

品牌与点缀

• Vodafone Red({colors.primary} — #e60000):单一品牌点缀色。每个主 CTA 胶囊，每个引号 logo，每个转化目标。电信业最具标志性的红色——从不降低饱和度，从不大量用于正文填充(保留给高注意力表面)。

表面

• 画布({colors.canvas} — #ffffff):默认浅色内容背景。
• 柔和画布({colors.canvas-soft} — #f2f2f2):用作徽标胶囊背景的近白色调。
• 墨色({colors.ink} — #25282b):品牌的近黑色表面——用作深色首屏色带、导航背景和页脚填充。在浅色表面上兼任主文字色。

文字

• 墨色({colors.ink} — #25282b):浅色表面上的每个标题和正文段落。
• 正文({colors.body} — #7e7e7e):浅色表面上的次要正文文字——说明文字、元数据、辅助文案。
• 静音({colors.mute} — #bebebe):最低优先级的文字色——占位文字、低调页脚链接。
• 深底之上({colors.on-dark} — #ffffff):{colors.ink} 表面上的所有文字(首屏、页脚、导航)。

语义

品牌不维护单独的语义调色板。主红色在需要时兼任验证 / 破坏信号;成功 / 警告用法保留给产品内上下文，不属于已记录的营销系统。

字体排版

字体族

一款定制字体承载整个系统:Vodafone,品牌的专有展示无衬线字体。字体涵盖 300(细)、400(常规)、600、700 和 800 字重——系统中的每个角色都从这一个字体家族中提取。没有 mono 伴侣;技术标签(营销表面上罕见)以较小字号借用同一字体。

icomoon 图标字体被加载用于专有字形，但不作为字体角色渲染。

层级

原则

• 800 字重 + 全大写 = 首屏声音。 这就是品牌读起来像广告牌而非技术网站的全部原因。
• 300 字重 = 更平静的次要声音。 在 40 – 48 px 下用于副展示;从不低于 24 px 以保持可读性。
• 整个系统单一字体家族。 品牌从不将衬线或等宽字体混入字体系统。一致性就是平静。
• 展示尺度下字距保持紧凑。 -1px 在 144 px 是品牌的校准;恢复到中性字距会软化模具观感。

字体替代品说明

Vodafone 展示无衬线字体是专有的。开源替代品:

• 展示无衬线——首屏尺度上启用 letter-spacing: -1px 的 Inter 800 字重是最接近的免费匹配。Geist 700–800 字重是次优选择。
• 较细展示字重(300)——Inter 300 字重在 48 px 展示字号下保持良好的行高。

布局

间距系统

• 基础单位:4 px(主要是 4 的倍数;在图标内边距补偿中出现少量 5/7 px)。
• Token:{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.3xl} 32 px 内边距;首屏内部的垂直间距是流动的(填满色带)。
• 卡片内部内边距:故事卡片在图像 + 标题周围使用 {spacing.lg} 16 px。
• 内联间距:按钮行和标签行在兄弟元素之间使用 {spacing.md} 12 px。

网格与容器

• 营销内容使用宽容器(实际上边缘对齐，桌面端带 {spacing.3xl} 内边距，移动端缩小)。
• 故事卡片网格:桌面端 2 栏，移动端 1 栏。
• 首屏摄影填满视口;标题叠加在左上角。

留白理念

首屏的巨型展示标题占据页面整个顶部;下方留白宽裕，让第二个色带得以呼吸。内容卡片内部，标题和副本紧贴({spacing.sm} 8 px 间隙)，然后在下一张卡片之前留出更宽的间距({spacing.3xl})。页脚色带是深色且密集的。

响应式策略

断点

触控目标

button-primary 胶囊渲染约 52 px 高(12 px 垂直内边距 + 28 px 行高)。所有按钮在每个断点都舒适满足 WCAG AAA。

折叠策略

• 导航:桌面端为完整链接行。移动端折叠为汉堡菜单;菜单作为深色覆盖打开，相同的链接列表堆叠。
• 首屏:巨型展示标题流畅缩放。移动端时，摄影裁剪收紧到仅人物面部。
• 故事卡片网格:在上述断点处 2 → 1。
• 引号 logo 圆球:相对于周围内容保持一致尺寸;从不缩小到低于约 48 px。

图像行为

• 首屏摄影:桌面端为全屏出血 16:9 或 4:3 肖像;移动端裁剪更紧。
• 故事卡片缩略图:16:9 横向嵌入 {rounded.card} 6 px 外壳内。
• 引号圆球:始终渲染为红色 SVG 引号图标，从不替换。
• Logo 条(如果存在于合作伙伴页面上):统一高度的单色 SVG。

层次与深度

品牌不使用柔和投影;深度来自 {colors.ink} 和 {colors.canvas} 色带之间的极性翻转。

装饰性深度

• 编辑风格摄影:首屏照片(真实人物肖像或环境照片)是品牌唯一的真正氛围效果。
• 引号 logo 圆球作为视觉锚点:承载引号图标的红色圆球在原本扁平的内容节奏中充当单一焦点深度点。

形状

圆角刻度

摄影几何

• 首屏肖像:边缘对齐 16:9 或 4:3，无内部框。
• 故事卡片缩略图:16:9 横向嵌入 {rounded.card} 外壳内。
• 引号 logo 圆球:带 {rounded.sm} 圆角的方形(视觉上是倾斜方形标记;SVG 标记本身填满圆球)。

组件

按钮

button-primary——红色胶囊 CTA，品牌的主要转化目标。

• 背景 {colors.primary},文字 {colors.on-primary},1 px 实心 {colors.primary} 边框,标签使用 {typography.button-md},内边距 {spacing.md} {spacing.2xl},形状 {rounded.pill-lg} 60 px。

button-outline-red——次级胶囊，白底红字加红边框。

• 背景 {colors.canvas},文字 {colors.primary},1 px 实心 {colors.primary} 边框,与 button-primary 相同的标签 / 内边距 / 形状。

button-outline-dark——三级胶囊，白底墨字加墨边框。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.ink} 边框,与 button-primary 相同的标签 / 内边距 / 形状。

button-icon-circular——圆形白色图标按钮(视频播放 / 暂停 / 雪佛龙)。

• 背景 {colors.canvas},墨色图标,1 px 实心 {colors.canvas} 轮廓(实际上无边框),形状 {rounded.full}。

卡片与容器

card-content——默认故事卡片外壳。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.lg},形状 {rounded.card} 6 px。承载顶部的 16:9 缩略图 + 标题 + 说明。

card-hero——用作头条故事的略大卡片变体。

• 与 card-content 相同的外壳,但标题缩放为 {typography.display-sm}。

输入与表单

text-input——标准文本输入。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.ink} 边框,正文使用 {typography.body-sm},内边距 {spacing.md} {spacing.lg},形状 {rounded.sm} 6 px。

导航

nav-bar——深色顶部导航，固定在页面顶部。

• 背景 {colors.ink},文字 {colors.on-dark},内边距 {spacing.lg} {spacing.3xl}。布局:logo 在左,链接行在右带登录 / 搜索功能。

nav-link——nav-bar 内的链接项。

• 文字 {colors.on-dark},使用 {typography.body-sm}。

footer——深色页脚色带。

• 背景 {colors.ink},文字 {colors.on-dark},内边距 {spacing.3xl} {spacing.3xl}。正文使用 {typography.body-sm};列标题使用 {typography.caption-uppercase}。

标志性组件

hero-band-dark——承载巨型展示标题的深色海军蓝 / 墨色首屏色带。

• 背景 {colors.ink} 叠加降低不透明度的全屏出血编辑风格摄影;文字 {colors.on-dark};内边距 {spacing.3xl} {spacing.3xl}。标题使用 {typography.display-hero}(全大写,800 字重)。

hero-band-red——罕见的全屏出血红色首屏，用于标志性活动。

• 背景 {colors.primary},文字 {colors.on-primary},内边距 {spacing.3xl} {spacing.3xl}。标题使用 {typography.display-xl}。

content-band-light——每个首屏后跟随的白色内容色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.3xl} {spacing.3xl}。分区标题使用 {typography.display-md} 或 {typography.display-lg}(300 字重)。

speechmark-logo-orb——承载 Vodafone 引号图标的红色方形。品牌的视觉锚点。

• 背景 {colors.primary},白色图标字形,形状 {rounded.sm}。充当内容色带之间的焦点元素，通常位于长页面的中心附近。

badge-chip——故事卡片内用于类别标签的内联元数据胶囊。

• 背景 {colors.canvas-soft},文字 {colors.ink},标签使用 {typography.caption-strong},内边距 {spacing.xs} {spacing.md},形状 {rounded.pill-md} 32 px。

divider-on-dark——在深色表面上用于分区 / 列之间的 1 px 细线。

• 1 px 实心 {colors.on-dark}(通常在组件级别以 25 % 不透明度使用)。

示例(说明性)

自动派生的工具镜像演示表面(scripts/derive-examples-block.mjs)。每个 ex-* 条目引用品牌原生基元,因此下游消费者(/preview-design、/generate-kit)以一致的方式重新设置相同的 10 个表面。TO_FILL 标记表示缺失的基元——在 LLM 判断步骤中解决。

ex-pricing-tier——默认价格层卡片。重用功能卡片外壳,使用品牌 canvas-soft 表面。

• 属性:backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured——特色 / 高亮价格层——极性翻转表面(亮模式下深色填充 + 浅色文字,暗模式下浅色填充 + 深色文字)。

• 属性:backgroundColor、textColor、rounded、padding

ex-product-selector——What's Included 摘要卡片——为 SaaS / B2B 垂直领域重新利用(不是字面意义上的产品画廊)。

• 属性:backgroundColor、rounded、padding

ex-cart-drawer——订阅摘要——为 SaaS / B2B 重新利用(按附加项的逐项条目,不是字面意义上的购物车)。

• 属性:backgroundColor、rounded、padding、item-divider

ex-app-shell-row——App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示器。

• 属性:backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell——默认数据表 th + td 外壳。表头使用 mono-caps 标题字体;正文使用 body-sm。

• 属性:headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card——登录 / 注册卡片。重用功能卡片外壳,内含 text-input 基元。

• 属性:backgroundColor、rounded、padding

ex-modal-card——模态对话框表面——与功能卡片外壳相同,带抬升阴影。

• 属性:backgroundColor、rounded、padding

ex-empty-state-card——空状态插图框。

• 属性:backgroundColor、rounded、padding、captionTypography

ex-toast——Toast 通知表面——功能卡片形状 + 中等阴影。

• 属性:backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 为每个主 CTA 和 speechmark-logo-orb 保留 {colors.primary} Vodafone Red。每个转化目标使用红色胶囊。
• 首屏标题使用 {typography.display-hero} 800 字重 全大写,紧凑的 -1px 字距。模具观感就是品牌声音。
• 每个交互式胶囊使用 {rounded.pill-lg} 60 px。品牌从不在 CTA 上使用方形圆角。
• 在 {colors.ink} 深色首屏 → {colors.canvas} 浅色内容 → {colors.ink} 页脚之间循环页面表面。表面对比就是深度提示。
• 将编辑风格肖像摄影与巨型展示标题叠加搭配——这种组合就是品牌的标志。
• 以相对于周围内容的一致尺寸渲染引号 logo 圆球——它是品牌在每页的重心。

避免

• 不要引入第二个点缀色。品牌仅以红色 + 墨色 + 灰度运行。
• 不要在首屏尺度上以句首大写渲染标题。首屏展示就是全大写 800 字重。
• 不要将主 CTA 渲染为方形矩形。60 px 胶囊是不可协商的。
• 不要在卡片上投下柔和投影。品牌依赖表面颜色对比，而非阴影。
• 不要用文字标记或不同形状替换引号 logo 圆球。圆球是标志性的标记。
• 不要在 144 px 下将 800 字重展示字体与字距 0 配对——-1px 字距是品牌校准的一部分。