深入解析 Vodafone DESIGN.md：猩红单色 CTA、800 字重大写显示体与双带式页面节奏的电信品牌设计系统

文档【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址https://gitcode.com/GitHub_Trending/aw/awesome-design-md点击查看免费下载导读本文基于 awesome-design-md 仓库中收录的 design-md/vodafone/DESIGN.md 展开深度解析。该文档将沃达丰Vodafone官网的设计语言提炼为一份可直接交给 AI 编码代理读取的纯文本设计系统以猩红#e60000单色 CTA、专有 Vodafone 显示字体 800 字重超大号大写标题、以及“深色英雄带 → 白色内容带 → 深色页脚”的双带式页面节奏为核心骨架。读完本文你将掌握该设计系统的全部设计令牌色彩、字体、圆角、间距、组件、层级表、响应式断点策略与守则Dos and Donts并能在自己的项目中复制这份 DESIGN.md 让 AI 代理生成风格一致的 UI。一、文档定位一份写给 AI 代理的品牌设计系统在 awesome-design-md 仓库中每个品牌目录都包含一个DESIGN.md其概念源于 Google StitchDESIGN.md 是一份纯文本设计系统文档AI 编码代理读取它即可生成视觉一致的 UI。它只是 Markdown 文件无需 Figma 导出、无需 JSON Schema、无需特殊工具链直接放入项目根目录即可被 AI 代理理解。Vodafone 目录下还附带一份 design-md/vodafone/README.md说明该设计系统的详情、预览与下载已迁移至在线托管页仓库内的 design-md/vodafone/DESIGN.md 本身则以「YAML 前导令牌块 Markdown 规范章节」两段式组织YAML 前导块以colors、typography、rounded、spacing、components五个命名空间声明全部设计令牌组件令牌通过{colors.primary}、{typography.button-md}这种花括号引用语法引用基础令牌形成可编程的令牌网络规范章节用 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Dos and Donts 等章节把令牌的使用规则讲清楚——令牌回答“是什么”章节回答“怎么用”。下文将逐层展开这套系统。二、设计语言总览广告海报而非企业官网文档的 Overview 给出了整套系统的气质判断沃达丰的网页读起来更像一张 campaign 海报而不是企业官网。其核心特征可归纳为五条原文 Key Characteristics单一主 CTA 色{colors.primary}#e60000Vodafone Red主按钮用红色实心胶囊次按钮用红色描边胶囊没有第三种按钮变体超大号大写 800 字重显示体{typography.display-hero}144px及其同族字级是品牌签名300 字重的{typography.display-lg}/{typography.display-md}负责更平静的次级标题时刻speechmark-logo-orb 视觉锚点承载引号图标quotation-mark icon的红色方块是页面上唯一非 CTA 的装饰性元素锚定每一页的视觉重心胶囊几何贯穿所有交互形状按钮用{rounded.pill-lg}60px行内徽章用{rounded.pill-md}32px卡片保持{rounded.card}6px两带式页面节奏{colors.ink}深色英雄带 /{colors.canvas}浅色内容带没有中间灰带——品牌用表面反差而非柔和中性色来表现层级编辑式摄影是唯一一致的装饰系统真实人像、真实城市、真实布线没有插画、没有氛围渐变。文档特别强调两个“决定性声音”色彩声音整个装饰色板只有 Vodafone Red、近黑{colors.ink}以及白色/灰阶中性色没有第二个强调色来竞争注意力字体声音专有显示无衬线体提取为Vodafone以 800 字重大写承载英雄级标题144px / 126px以 300 字重承载后续次级显示体正文保持 400 字重中性字距。“先是一声呐喊800 字重再是一句平静的话300 字重”就是品牌的字体叙事。三、色彩系统红、墨、灰的三色律3.1 品牌与强调色令牌色值角色{colors.primary}#e60000Vodafone Red全系统唯一品牌强调色。每个主 CTA 胶囊、每个 speechmark 标志、每个转化目标都用它。电信行业最具标志性的红——从不降饱和也从不用作正文大面积填充只留给高注意力表面{colors.on-primary}#ffffff红色表面上的文字色3.2 表面色令牌色值角色{colors.canvas}#ffffff默认浅色内容背景{colors.canvas-soft}#f2f2f2近白浅灰用作 badge-chip 徽章背景等次级表面{colors.ink}#25282b品牌近黑色。用作深色英雄带、导航背景、页脚填充同时充当浅色表面上的主文字色3.3 文字色令牌色值角色{colors.ink}#25282b浅色表面上所有标题与正文段落{colors.body}#7e7e7e浅色表面上的次级正文说明文字、元数据、辅助文案{colors.mute}#bebebe最低优先级文字占位符文本、低调的页脚链接{colors.on-dark}#ffffff所有{colors.ink}表面英雄带、页脚、导航上的文字3.4 语义色说明文档明确指出品牌不维护独立语义色板。主红色在需要时同时承担校验/破坏性信号成功/警告用途仅保留在产品内场景in-product contexts不属于文档化的营销系统范围。在落地时这意味着你不要为表单校验自行引入绿色/琥珀色体系而是复用主红。四、字体系统一个家族讲完整个品牌的两种声音4.1 字体族整个系统由单一自定义字体承载Vodafone专有显示无衬线体。它覆盖 300Light、400Regular、600、700、800 五个字重系统中的每个角色都从这个家族取字。没有等宽字体的“伴生角色”——技术性标签营销表面罕见也只是同族更小字号借用。文档还提到 icomoon 图标字体用于专有字形但不作为排版角色渲染。4.2 完整层级表继承原文档全部 16 个令牌令牌字号字重行高字距用途{typography.display-hero}144px800114px-1px英雄级模板文案如 “STAY CONNECTED”——大写、极紧字距、品牌签名级字号{typography.display-xxl}126px800113px-1px略小的英雄级变体{typography.display-xl}90px80084px0中级英雄字号{typography.display-lg}48px30052px0章节标题级子显示体较轻字重{typography.display-md}40px30044px0子章节显示体{typography.display-sm}32px70040px0卡片标题、故事卡标题{typography.display-xs}24px70024px0行内显示微标题{typography.eyebrow-uppercase}16px80024px0章节标题上方的英文大写眉题标签{typography.body-lg}22px40024px0导语正文段{typography.body-md}18px40028px0默认段落正文{typography.body-md-strong}18px60028px0加粗行内正文{typography.body-sm}16px40020px0次级正文{typography.body-sm-strong}16px70022px0加粗短正文{typography.caption}14px40016px0说明文字、小字{typography.caption-strong}14px70021px0加粗说明文字、徽章标签{typography.caption-uppercase}12px60016px0.57px大写元数据、页脚眉题{typography.button-md}18px40028px0默认按钮标签4.3 排版原则800 字重 大写 英雄声音这是品牌读起来像广告牌而非技术站点的全部原因300 字重 更平静的次级声音用于 40–48px 的子显示体从不低于 24px以保证可读性全系统单一字体族从不混入衬线体或等宽体一致性本身就是“平静”显示级字号保持紧凑字距144px 下的-1px是品牌校准值回到中性字距会削弱模板化的“stencil”观感。4.4 开源替代字体font substitutesVodafone 显示体是专有的文档给出开源替代方案显示级800 字重Inter800 字重 letter-spacing: -1px是最接近的免费方案Geist700–800 字重次之300 字重显示体Inter300 在 48px 显示字号下能很好地保持行高。五、布局系统4px 基线的栅格与留白哲学5.1 间距系统基准单位4px基本都是 4 的倍数少量 5/7px 出现在图标内边距补偿中完整令牌阶梯{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.3xl}32px留白英雄带内部垂直间距是流式的fill-the-band卡片内边距故事卡在“图片 标题”四周使用{spacing.lg}16px行内间隙按钮行与徽章行兄弟元素之间使用{spacing.md}12px。5.2 栅格与容器营销内容使用宽容器桌面端实际为带{spacing.3xl}边距的通栏移动端收缩故事卡栅格桌面 2 列移动 1 列英雄摄影铺满视口超大标题覆盖在左上角。5.3 留白哲学英雄级超大标题占据整个页面上部下方留白充裕让第二个带“呼吸”内容卡内标题与文案紧贴{spacing.sm}8px 间隙卡片之间用更宽的{spacing.3xl}分隔页脚带深色且内容密集。5.4 响应式策略断点表名称宽度关键变化Mobile 600px英雄显示体缩至约 64px故事卡栅格降为 1 列导航折叠为汉堡菜单Tablet600–1023px故事卡栅格 2 列显示标题降至 90–110pxDesktop1024–1399px完整显示标题 126–144px故事栅格 2 列Ultra-wide≥ 1400px容器封顶约 1400px色带仍保持通栏色块触摸目标button-primary胶囊高度约 52px12px 垂直内边距 28px 行高文档声明所有按钮在任意断点均满足 WCAG AAA 舒适度。折叠策略导航桌面为完整链接行移动折叠为汉堡菜单菜单以深色遮罩层打开同一组链接纵向堆叠英雄区超大标题流式缩放移动端摄影裁切收紧到只保留人物面部故事卡栅格2 列 → 1 列在上述断点发生speechmark 徽标球相对周围内容保持稳定尺寸永不缩至约 48px 以下。图片行为英雄摄影桌面为通栏 16:9 或 4:3 人像移动端收紧裁切故事卡缩略图16:9 横向置于{rounded.card}6px圆角框架内speechmark 球始终渲染为红色 SVG 引号图标绝不用其他图形替换合作方页面上的 logo 条如有统一高度的单色 SVG。六、层级与深度用表面反差而非投影品牌不使用柔和投影深度来自{colors.ink}与{colors.canvas}带之间的极性翻转polarity-flip。层级处理方式用途Level 0 — Flat无阴影、无边框大多数卡片与面板的默认态——表面反差本身就完成了层级表达Level 1 — Hairline1px 实线{colors.ink}边框表单输入框、页脚列之间的divider-on-darkLevel 2 — Border on Dark{colors.ink}表面上 1px 实线{colors.on-dark}边框落在深色英雄带上的描边按钮装饰性深度编辑式摄影英雄照片真实人像或环境镜头是品牌唯一真正的氛围化效果speechmark 球作为视觉锚点承载引号图标的红色球在平铺的内容节奏中央构成唯一的焦点深度点。七、形状系统胶囊是交互的语言6px 是内容的语言7.1 圆角刻度表令牌值用途{rounded.none}0px通栏英雄带、页脚、横幅条{rounded.xs}1px最紧的行内指示器很少用{rounded.sm}6px品牌规范内容圆角——应用于图片与输入框{rounded.card}6px卡片框架与图片框sm的别名{rounded.pill-md}32px徽章 / 芯片胶囊{rounded.pill-lg}60px品牌签名 CTA 胶囊——每个主/次按钮{rounded.full}9999px圆形图标容器如视频播放/暂停7.2 摄影几何英雄人像无边线框的通栏 16:9 或 4:3故事卡缩略图{rounded.card}框架内的 16:9 横向图speechmark 标志球方形 {rounded.sm}圆角视觉上是倾斜方形标记SVG 标记本身填满球体。八、组件体系从令牌到可落地的 UI 部件组件层把基础令牌组合成可直接生成 UI 的部件规格。以下按原文档顺序完整继承8.1 按钮四种变体组件规格button-primary背景{colors.primary}、文字{colors.on-primary}、1px 实线{colors.primary}边框、标签{typography.button-md}、内边距{spacing.md} {spacing.2xl}、形状{rounded.pill-lg}60px。品牌主转化目标button-outline-red背景{colors.canvas}、文字{colors.primary}、1px 实线{colors.primary}边框标签/内边距/形状与button-primary相同。次级胶囊button-outline-dark背景{colors.canvas}、文字{colors.ink}、1px 实线{colors.ink}边框标签/内边距/形状同上。第三级胶囊button-icon-circular背景{colors.canvas}、墨色图标、1px 实线{colors.canvas}描边实际近于无边框、形状{rounded.full}。视频播放/暂停、箭头等圆形白色图标按钮8.2 卡片与容器card-content默认故事卡框架。背景{colors.canvas}、文字{colors.ink}、内边距{spacing.lg}、形状{rounded.card}6px。顶部 16:9 缩略图 标题 说明文字card-hero用作头条故事的大型卡片变体。框架同card-content但标题字号升至{typography.display-sm}。8.3 输入框与表单text-input规范文本输入框。背景{colors.canvas}、文字{colors.ink}、1px 实线{colors.ink}边框、正文{typography.body-sm}、内边距{spacing.md} {spacing.lg}、形状{rounded.sm}6px。8.4 导航与页脚nav-bar固定在页面顶部的深色导航。背景{colors.ink}、文字{colors.on-dark}、内边距{spacing.lg} {spacing.3xl}布局为 logo 居左、链接行居右含登录/搜索入口nav-linknav-bar内的链接项文字{colors.on-dark}{typography.body-sm}footer深色页脚带。背景{colors.ink}、文字{colors.on-dark}、内边距{spacing.3xl} {spacing.3xl}正文{typography.body-sm}列眉题{typography.caption-uppercase}。8.5 签名组件hero-band-dark承载超大显示标题的深色英雄带。背景{colors.ink}叠加降透明度的通栏编辑式摄影文字{colors.on-dark}内边距{spacing.3xl} {spacing.3xl}标题{typography.display-hero}大写、800 字重hero-band-red签名 campaign 才用的罕见通栏红色英雄带。背景{colors.primary}、文字{colors.on-primary}、内边距同上标题{typography.display-xl}content-band-light跟随每个英雄带的白色内容带。背景{colors.canvas}、文字{colors.ink}、内边距{spacing.3xl} {spacing.3xl}章节标题{typography.display-md}或{typography.display-lg}300 字重speechmark-logo-orb承载沃达丰引号图标的红色方块品牌视觉锚点。背景{colors.primary}、白色图标字形、形状{rounded.sm}常位于长页中部、内容带之间作焦点元素badge-chip故事卡内分类标签的行内元数据胶囊。背景{colors.canvas-soft}、文字{colors.ink}、标签{typography.caption-strong}、内边距{spacing.xs} {spacing.md}、形状{rounded.pill-md}32pxdivider-on-dark深色表面上区块/列之间的 1px 细线1px 实线{colors.on-dark}组件层面常以 25% 不透明度呈现。8.6 自动推导的示例表面ex-* 系列原文档在 YAML 尾部声明了 10 个ex-*示例表面说明其由自动推导流程生成供/preview-design、/generate-kit等下游消费方一致地“换肤”同一批表面TO_FILL标记表示缺失的原语由 LLM 判断阶段解析。这些示例全部复用品牌原生原语示例令牌用途与关键属性ex-pricing-tier默认定价档卡片复用内容卡框架canvas-soft 表面 细边框backgroundColor、textColor、borderColor、rounded、paddingex-pricing-tier-featured高亮档位极性翻转表面——亮色模式下深色填充 浅色文字深色模式下反之backgroundColor、textColor、rounded、paddingex-product-selector“包含什么”汇总卡复用为 SaaS/B2B 的套餐选择器非字面产品画廊框内嵌 badge-chipbackgroundColor、rounded、paddingex-cart-drawer订阅汇总抽屉按套餐附加项列出条目浅色细线分隔backgroundColor、rounded、padding、item-dividerex-app-shell-row侧边导航行激活态以品牌主色作为左侧指示条backgroundColor、activeIndicator、rounded、paddingex-data-table-cell数据表 th/td 框架表头用大写眉题风格排版正文用 body-smheaderBackground、headerTypography、bodyTypography、cellPadding、rowBorderex-auth-form-card登录/注册卡片复用内容卡框架内部嵌 text-input 原语backgroundColor、rounded、paddingex-modal-card模态对话框表面与内容卡同框架backgroundColor、rounded、paddingex-empty-state-card空状态插画框canvas-soft 表面 充裕内边距backgroundColor、rounded、padding、captionTypographyex-toastToast 通知表面内容卡形状backgroundColor、rounded、padding、typography注意ex-pricing-tier-featured的极性翻转、ex-modal-card的阴影等说明示例层允许在品牌原语上叠加通用 UI 语义但色彩/圆角/间距仍严格引用品牌令牌。九、设计守则Dos and Donts这份守则对 AI 代理生成 UI 时的约束力最强直接决定了输出是否“像沃达丰”。Do应当将{colors.primary}Vodafone Red 只保留给主 CTA 与speechmark-logo-orb每个转化目标都用红色胶囊英雄标题用{typography.display-hero}800 字重大写 紧-1px字距——那个模板stencil观感就是品牌声音每个交互胶囊都用{rounded.pill-lg}60px——品牌从不在 CTA 上用直角页面表面按{colors.ink}深色英雄带 →{colors.canvas}浅色内容带 →{colors.ink}页脚循环——表面反差就是深度线索将编辑式人像摄影与超大显示标题叠加配对——这个组合就是品牌签名speechmark 标志球相对周围内容保持稳定尺寸——它是每页的视觉重心。Dont禁止不要引入第二个强调色——品牌只用红 墨 灰阶不要在英雄级渲染句首大写sentence case标题——英雄显示体就是大写 800 字重不要把主 CTA 画成方矩形——60px 胶囊不可妥协不要在卡片上投柔和投影——品牌靠表面色彩反差不靠阴影不要用文字标或异形图形替代 speechmark 球——这个球就是标志性标记不要在 144px 的 800 字重显示体上使用 0 字距——-1px字距是品牌校准的一部分。十、实战把这份 DESIGN.md 用进自己的项目按仓库 README.md 给出的标准用法接入流程只有两步复制文件把 design-md/vodafone/DESIGN.md 复制到你的项目根目录让 AI 代理使用它对你的编码代理说“build me a page that looks like this”参照这份 DESIGN.md 建一个页面代理即可依据其中的令牌与守则生成视觉一致的 UI。由于它是纯文本 Markdown任何支持 Markdown 的编码代理或 Google Stitch都能直接读取无需解析或配置。生成时建议把上文第 4.4 节的开源字体替换方案一并告诉代理如用 Inter 800 替代专有 Vodafone 字体避免专有字体不可用导致视觉偏移。仓库 CONTRIBUTING.md 还说明如果你发现某份 DESIGN.md 的色值或令牌有误可以通过 issue 反馈改进仓库采用 MIT 许可所有设计令牌均来自公开可见的 CSS 值。结语Vodafone DESIGN.md 是“少即是多”的品牌设计样本一套色彩红 墨 灰、一个字体家族Vodafone 专用无衬线体、两种字体声音800 字重呐喊 / 300 字重低语、一套胶囊几何32/60/9999px、两条页面带深色英雄带 / 浅色内容带。它的工程价值在于——所有决策都被提炼成了可引用的令牌和可执行的守则AI 代理只需读取这份文件就能复现“广告海报式”的电信品牌观感而不是停留在“红色加黑色”的粗浅描述上。对想学习品牌级设计系统提炼方法的读者这份文档本身就是一个极佳的拆解范本。赞分享文档【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址https://gitcode.com/GitHub_Trending/aw/awesome-design-md点击查看免费下载相关推荐PlayStation 品牌营销设计系统 DESIGN.md 深度解析三画布章节式体系的令牌化重建PlayStation 品牌营销设计系统 DESIGN.md 深度解析三画布章节式体系的令牌化重建 导读 本文以开源仓库 awesome design md文档MongoDB 设计系统 DESIGN.md 全解析深青绿 Hero 带与亮绿色胶囊 CTA 的双模式视觉规范MongoDB 设计系统 DESIGN.md 全解析深青绿 Hero 带与亮绿色胶囊 CTA 的双模式视觉规范 本指南以仓库 design md/mongod文档Revolut 设计系统 DESIGN.md 深度解析双画布营销体系与 Cobalt Violet 品牌印记Revolut 设计系统 DESIGN.md 深度解析双画布营销体系与 Cobalt Violet 品牌印记 Revolut 的数字银行官网将「纯黑叙事画布」文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考