Revolut

version: alpha name: Revolut-design-analysis description: | Revolut's marketing surfaces pair a stark black canvas with the brand's cobalt-violet (#494fdf) and a wide accent palette of deep, fully-saturated product colours — teal, light-blue, deep pink, light-green, warning orange. The system reads as fintech-meets-product-brochure: oversized 80px–136px Aeonik Pro display headlines, generous whitespace, photography-led hero bands, and full-width product mockups (cards, phones, terminals) shown as hero objects inside near-black sections. Most surfaces are either black or off-white; pill-shaped buttons and rounded-12/20px content cards carry the consumer-financial-app feel without crossing into playful territory.

colors: primary: "#494fdf" primary-bright: "#4f55f1" primary-deep: "#3a40c4" on-primary: "#ffffff" ink: "#191c1f" body: "#1f2226" charcoal: "#3a3d40" mute: "#505a63" ash: "#5c5e60" stone: "#8d969e" faint: "#c9c9cd" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.72)" canvas-light: "#ffffff" canvas-dark: "#000000" surface-soft: "#f4f4f4" surface-card: "#ffffff" surface-deep: "#0a0a0a" surface-elevated: "#16181a" hairline-light: "#e2e2e7" hairline-dark: "rgba(255,255,255,0.12)" hairline-strong: "#191c1f" divider-soft: "rgba(255,255,255,0.06)" accent-teal: "#00a87e" accent-blue-link: "#376cd5" accent-light-blue: "#007bc2" accent-light-green: "#428619" accent-green-text: "#006400" accent-yellow: "#b09000" accent-warning: "#ec7e00" accent-pink: "#e61e49" accent-danger: "#e23b4a" accent-deep-red: "#8b0000" accent-brown: "#936d62" link: "#376cd5"

typography: display-xxl: fontFamily: Aeonik Pro fontSize: 136px fontWeight: 500 lineHeight: 1.0 letterSpacing: -2.72px display-xl: fontFamily: Aeonik Pro fontSize: 80px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.8px display-lg: fontFamily: Aeonik Pro fontSize: 48px fontWeight: 500 lineHeight: 1.21 letterSpacing: -0.48px display-md: fontFamily: Aeonik Pro fontSize: 40px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.4px heading-lg: fontFamily: Aeonik Pro fontSize: 32px fontWeight: 500 lineHeight: 1.19 letterSpacing: -0.32px heading-md: fontFamily: Aeonik Pro fontSize: 24px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0 heading-sm: fontFamily: Aeonik Pro fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: -0.09px body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.24px body-md-bold: fontFamily: Inter fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.16px body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.43 button-lg: fontFamily: Aeonik Pro fontSize: 20px fontWeight: 500 lineHeight: 1.4 button-md: fontFamily: Inter fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.24px button-sm: fontFamily: Inter fontSize: 14px fontWeight: 600 lineHeight: 1.43 caption: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.4 link-emph: fontFamily: Inter fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.24px

rounded: none: 0px sm: 8px md: 12px lg: 20px xl: 28px full: 9999px

spacing: xxs: 4px xs: 6px sm: 8px md: 14px lg: 16px xl: 24px xxl: 32px xxxl: 48px block: 80px section: 88px band: 120px

components: button-primary: backgroundColor: "{colors.canvas-light}" textColor: "{colors.canvas-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 14px 28px height: 48px button-primary-pressed: backgroundColor: "{colors.faint}" textColor: "{colors.canvas-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" button-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 14px 28px height: 48px button-soft: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 14px 28px height: 48px button-outline-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 13px 27px height: 48px button-outline-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 13px 27px height: 48px button-pill-sm: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 8px 16px height: 36px text-input: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 14px 16px height: 56px hero-band-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xxl}" rounded: "{rounded.none}" padding: 88px 24px hero-band-photo: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 0 feature-card-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px feature-card-dark: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px plan-card: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px plan-card-featured: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px product-mockup: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" padding: 48px download-tile: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 12px 20px height: 56px badge-tag: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 12px badge-feature: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 12px nav-bar: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.none}" height: 64px sub-nav-pill: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 8px 16px footer: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark-mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 80px 24px

概述

Revolut 的营销画布以高对比的双模式系统运作：近黑色叙事画布（{colors.canvas-dark} — #000000）承载首屏带、产品 mockup 和计划 section，与白色目录带（{colors.canvas-light} — #ffffff）交替，后者承载对比表、FAQ 行和下载 tile。两种模式在全幅带之间切换而非柔和过渡；section 互相撞击以创造品牌标志的杂志展开节奏。

展示字体是 Aeonik Pro weight 500，用于 20px 到 136px 的尺寸。旗舰首屏（"Banking & Beyond"、"Join the 70+ million using Revolut"）位于 80–136px，配 lineHeight: 1.0 和紧凑的负字距。正文是 Inter weight 400——开源、不花哨，配正字距（0.24px）用于 UI 标签，略多一些机械精确感。

品牌点缀是 {colors.primary}（#494fdf）——一种饱和的钴紫——但在营销表面上罕见出现。首屏上真正的主动作是黑底白胶囊（"Choose your subscription"），钴紫保留给特性计划卡、白色 section 中的次级 CTA，以及品牌字标本身。一个广泛的次级调色板——深青、浅蓝、深粉、浅绿、警告橙、黄——出现在产品 mockup 和特性插图内——从不作为按钮表面。

关键特征：

• 双模式画布系统——{colors.canvas-dark}（真正的黑色）用于叙事，{colors.canvas-light}（白色）用于浏览——以全幅带切换。
• 展示字体是 Aeonik Pro 500 在 20–136px 尺寸，配紧凑的 lineHeight: 1.0 和大负字距于展示尺寸。
• 真正的主动作是 {component.button-primary}——白胶囊配黑文字，位于深色画布上作为最亮的像素。钴紫 {colors.primary} 保留给特性计划卡和次级 CTA。
• 八种饱和点缀颜色存在于产品 mockup 和插图内，从不作为按钮表面——青、浅蓝、深粉、浅绿、警告橙、黄、棕、危险红。
• 所有按钮为胶囊形（{rounded.full}）；内容卡片使用 {rounded.lg}（20px）；输入和小型芯片使用 {rounded.md}（12px）。
• 摄影是产品主导的——手机 mockup、卡片 mockup、终端 mockup——全幅显示在深色 section 内，无说明文字覆盖。

配色

品牌与点缀

• Cobalt Violet（{colors.primary} — #494fdf）：品牌点缀。保留给特性计划卡（{component.plan-card-featured}）、品牌字标图标和白色画布区域中的次级 CTA。
• Cobalt Bright（{colors.primary-bright} — #4f55f1）：用于行内链接颜色和点缀照片标题的一步亮变体。
• Cobalt Deep（{colors.primary-deep} — #3a40c4）：钴元素的激活/按下状态。
• On-Primary（{colors.on-primary} — #ffffff）：{colors.primary} 表面上的标签颜色。

表面

• Canvas Light（{colors.canvas-light} — #ffffff）：用于 FAQ、下载 tile、对比表的白色目录模式。
• Canvas Dark（{colors.canvas-dark} — #000000）：叙事画布——真正的黑色，从不是近黑色。
• Surface Soft（{colors.surface-soft} — #f4f4f4）：用于下载 tile、柔和按钮和白色带内内嵌卡片组的微妙偏白。
• Surface Card（{colors.surface-card} — #ffffff）：纯白色卡片表面，用于白色画布区域中的特性卡片。
• Surface Deep（{colors.surface-deep} — #0a0a0a）：黑色画布区域内内嵌卡片的一步亮表面。
• Surface Elevated（{colors.surface-elevated} — #16181a）：计划 section 卡片背景——略发光，将计划卡从黑色画布上抬起。
• Hairline Light（{colors.hairline-light} — #e2e2e7）：白色带内的 1px 分隔线。
• Hairline Dark（{colors.hairline-dark} — rgba(255,255,255,0.12)）：深色区域内对应的低对比分隔线。
• Hairline Strong（{colors.hairline-strong} — #191c1f）：结构全强度分隔线和浅色卡片描边。

文字

• Ink（{colors.ink} — #191c1f）：主文字颜色。值得注意的是比纯黑更暖，与白色画布配对实现正文可读性。
• Body（{colors.body} — #1f2226）：在 {colors.ink} 显得略过锐时的长篇正文。
• Charcoal（{colors.charcoal} — #3a3d40）：说明、次级导航。
• Mute（{colors.mute} — #505a63）：辅助文字。
• Ash（{colors.ash} — #5c5e60）：三级文字、页脚文案。
• Stone（{colors.stone} — #8d969e）：元数据、微妙说明。
• Faint（{colors.faint} — #c9c9cd）：禁用前景、发丝替代品。
• On-Dark（{colors.on-dark} — #ffffff）：{colors.canvas-dark} 上的主文字。
• On-Dark Mute（{colors.on-dark-mute} — rgba(255,255,255,0.72)）：深色区域内的次级文字。

语义

• Accent Teal（{colors.accent-teal} — #00a87e）：用于产品 mockup 插图。
• Accent Light Blue（{colors.accent-light-blue} — #007bc2）：深色照片标题中的行内链接颜色。
• Accent Blue Link（{colors.accent-blue-link} — #376cd5）：白色表面上的默认行内链接颜色。
• Accent Light Green（{colors.accent-light-green} — #428619）：成功 / 正面产品标注。
• Accent Green Text（{colors.accent-green-text} — #006400）：行内成功文字。
• Accent Yellow（{colors.accent-yellow} — #b09000）：产品 mockup 中的注意 / 待定状态。
• Accent Warning（{colors.accent-warning} — #ec7e00）：用于警告插图的全饱和橙色。
• Accent Pink（{colors.accent-pink} — #e61e49）：深粉——用于产品摄影和类别图标。
• Accent Danger（{colors.accent-danger} — #e23b4a）：破坏性 / 错误状态。
• Accent Deep Red（{colors.accent-deep-red} — #8b0000）：行内错误文字。
• Accent Brown（{colors.accent-brown} — #936d62）：在金属层卡片 chrome 中使用的单一暖中性。
• Link（{colors.link} — #376cd5）：默认行内链接颜色。与 {colors.accent-blue-link} 相同。

字体排版

字体族

Revolut 提供一个两家族栈：

• Aeonik Pro——专有的人文无衬线字体，用于所有展示尺寸（20px+）的 weight 500。承载品牌的编辑信心；在大尺寸下显著收紧以使用负字距。
• Inter——开源的主力，用于正文、按钮标签、说明和元数据。始终以 weight 400 或 600，在 UI 标签上配正字距（0.16–0.24px）。

当 Aeonik Pro 无法授权时，Inter Display、General Sans 或 Söhne 是可信的替代——都共享温暖的字符。应用 -1% 字距于展示尺寸以匹配原始的紧凑度。

层级

原则

• 展示尺寸始终以 weight 500 运行，lineHeight: 1.0（或 48px 以下时 1.19–1.21）。负字距随尺寸缩放——更大的字体收紧更多。
• 正文 Inter 位于 weight 400 配正字距（0.24px）——微小的间距调整使 UI 标签略感机械，符合金融科技的精确性。
• 首屏 CTA 使用 Aeonik Pro {typography.button-lg} 变体；首屏以下的一切使用 Inter {typography.button-md}。
• 深色照片区域内的行内链接提升到 weight 700（{typography.link-emph}）以便它们在没有钴点缀的情况下对画布保持对比。

关于字体替代

当 Aeonik Pro 不可用时，将展示 lineHeight 显式限制为 1.0 并在展示尺寸上应用 -1% 字距。Inter Display、General Sans 或 Söhne 读起来最接近原始。Inter 是开源的，应当直接使用。

布局

间距系统

• 基础单位：4px，工作刻度在 4 / 8 / 16 的倍数上。
• Token：{spacing.xxs} 4px · {spacing.xs} 6px · {spacing.sm} 8px · {spacing.md} 14px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 48px · {spacing.block} 80px · {spacing.section} 88px · {spacing.band} 120px。
• Section padding：带之间纵向 {spacing.section}（88px）；首屏带和收尾计划 section 为 {spacing.band}（120px）。
• 卡片内 padding：{component.feature-card-light}、{component.plan-card}、{component.feature-card-dark} 上为 {spacing.xxl}（32px）。

网格与容器

• 最大内容宽度 ≈ 正文 section 上 1200px；首屏带全幅运行。
• 计划网格：首页 4 列计划卡，平板堆叠为 2 列，小型移动端堆叠为 1 列。
• 特性网格：桌面 3 列，平板 2 列，移动端 1 列。
• 产品 mockup 带：单张全宽首屏照片的手机或卡片 mockup，无周围 chrome——资产本身就是 section。

留白哲学

• 留白充裕且编辑性——section 在 88–120px 呼吸，使展示标题在 80–136px 有空间呈现而不感拥挤。
• 卡片内，padding 保持在 32px，使特性文案和计划等级保持一致的节奏。
• 发丝 {colors.hairline-light} 分隔线在白色表面上取代阴影；{colors.hairline-dark} 在深色区域内承担相应角色。

层次与深度

系统没有传统的投影语言。表面通过色块（浅 → 深带切换）和表面亮度偏移（{colors.canvas-dark} → {colors.surface-elevated}）来记录深度。摄影 mockup 从资产本身承载自身的深度。

装饰性深度

• 产品 mockup 首屏带——首页以手机 mockup 全幅配 {colors.canvas-dark} 展示，设备自身的辉光提供唯一的氛围深度。无额外渐变，无阴影。
• 特性计划卡——钴紫 {component.plan-card-featured} 位于原本深色的计划网格中作为单一饱和色块，在视觉上标记推荐等级。
• 卡片金属层——品牌使用 {colors.accent-brown} 和金属卡 mockup 上的深渐变来暗示高级感，而非诉诸黑色上的金色金属效果。

形状

圆角刻度

摄影几何

• 手机 mockup：9:19.5（纵向）配 {rounded.xl} 角于设备 chrome。
• 卡片 mockup：1.586:1（信用卡比例）配 {rounded.lg} 角。
• 终端 / POS mockup：4:3 配 {rounded.xl} 角和围绕设备的充裕 padding。
• 生活方式摄影（罕见）：16:9 配 {rounded.lg} 角。

组件

按钮

button-primary——深色上的白色 CTA

• 背景 {colors.canvas-light}，标签 {colors.canvas-dark}，字号 {typography.button-md}，padding 14px 28px，rounded: {rounded.full}，高 48px。
• 品牌的主 CTA，用于每个深色首屏带（"Choose your subscription"、"Get started"）。
• 按下状态位于 button-primary-pressed（背景 {colors.faint}）。

button-dark——浅色上的深色 CTA

• 背景 {colors.canvas-dark}，标签 {colors.on-dark}，字号 {typography.button-md}，rounded: {rounded.full}。
• {component.button-primary} 的反向画布等价物——用于白色目录带内。

button-soft——柔和表面 CTA

• 背景 {colors.surface-soft}，标签 {colors.ink}，字号 {typography.button-md}，rounded: {rounded.full}。
• 白色画布区域中的三级动作（"Learn more"、"View FAQs"）。

button-outline-light——浅色上的描边 CTA

• 背景 {colors.canvas-light}，标签 {colors.ink}，1px 实线 {colors.hairline-strong}，字号 {typography.button-md}，rounded: {rounded.full}。
• 与 {component.button-dark} 配对时的次级动作。

button-outline-dark——深色上的描边 CTA

• 背景 {colors.canvas-dark}，标签 {colors.on-dark}，1px 实线 {colors.on-dark}，字号 {typography.button-md}，rounded: {rounded.full}，padding 13px 27px，高 48px。
• {component.button-outline-light} 的深色画布对应物；用于深色首屏带内与 {component.button-primary} 配对时的三级动作。

button-pill-sm——小胶囊芯片

• 背景 {colors.surface-soft}，标签 {colors.ink}，字号 {typography.button-sm}，rounded: {rounded.full}，padding 8px 16px，高 36px。
• 子导航芯片、筛选胶囊。

卡片与容器

hero-band-dark——全幅深色首屏

• 背景 {colors.canvas-dark}，文字 {colors.on-dark}，字号 {typography.display-xxl} 用于标题，padding {spacing.section}（88px）纵向，rounded: {rounded.none}。
• 仅在首页首屏带使用。

hero-band-photo——照片主导首屏

• 背景 {colors.canvas-dark} 配全幅产品摄影，文字 {colors.on-dark}，字号 {typography.display-xl}，rounded: {rounded.none}。
• 用于产品页——手机或卡片 mockup 作为全幅画布。

feature-card-light——白色上的特性卡

• 背景 {colors.surface-card}，文字 {colors.ink}，1px 实线 {colors.hairline-light}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}（32px）。
• 用于白色目录带内的特性对比。

feature-card-dark——深色上的特性卡

• 背景 {colors.surface-elevated}，文字 {colors.on-dark}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}。
• 用于深色叙事 section 内。

plan-card——订阅计划卡

• 背景 {colors.surface-elevated}，文字 {colors.on-dark}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}（32px）。
• 计划名 {typography.heading-lg}（"Standard"、"Plus"、"Premium"、"Metal"、"Ultra"）。

plan-card-featured——特性计划卡

• 背景 {colors.primary}，文字 {colors.on-primary}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}。
• {component.plan-card} 的钴紫反相——用于推荐等级。

product-mockup——全幅产品资产

• 背景 {colors.canvas-dark}，资产本身填满带，rounded: {rounded.xl} 于设备 chrome。
• 手机、卡片和终端 mockup——无说明文字覆盖，无周围 chrome。

download-tile——应用商店下载 tile

• 背景 {colors.surface-soft}，文字 {colors.ink}，字号 {typography.body-sm}，rounded: {rounded.md}，padding 12px 20px，高 56px。
• App Store + Google Play 下载按钮，并排。

输入与表单

text-input——默认输入

• 背景 {colors.canvas-light}，文字 {colors.ink}，字号 {typography.body-md}，1px 实线 {colors.hairline-light}，rounded: {rounded.md}，padding 14px 16px，高 56px。
• 充裕的高度用于金融科技可访问性——舒适地超过 WCAG AAA 触控目标。

导航

nav-bar——顶部导航（桌面）

• 背景 {colors.canvas-dark}，文字 {colors.on-dark}，字号 {typography.button-md}，高 64px。
• 左：字标 logo。居中：顶层导航（"Personal"、"Business"、"Company"）。右：语言切换 + "Log in" + {component.button-primary}。

nav-bar（移动端）

• 相同高度 64px，居中导航折叠为汉堡图标。标志留在左侧，登录 CTA 留在右侧。

sub-nav-pill——子导航芯片

• 胶囊芯片设置在深色 section 内的水平行中（如 "Personal"、"Business"、"Premium"），配 {component.sub-nav-pill} 样式。

标志性组件

badge-tag——中性标签

• 背景 {colors.surface-soft}，文字 {colors.ink}，字号 {typography.caption}，rounded: {rounded.full}，padding 4px 12px。
• 特性卡内的行内标签。

badge-feature——特性高亮徽标

• 背景 {colors.primary}，文字 {colors.on-primary}，字号 {typography.caption}，rounded: {rounded.full}，padding 4px 12px。
• 计划卡上锚定的 "New"、"Most popular" 徽标。

footer——全局页脚

• 背景 {colors.canvas-dark}，文字 {colors.on-dark-mute}，字号 {typography.body-sm}，rounded: {rounded.none}，padding 80px 24px。
• 多列快捷链接网格位于由 {colors.divider-soft} 分隔的版权 + 监管披露块之上。

推荐与避免

推荐

• 在 {colors.canvas-dark}（叙事）和 {colors.canvas-light}（目录）之间切换全幅带。双模式节奏是核心。
• 在每个深色首屏带上使用 {component.button-primary}（深色上的白胶囊）作为主 CTA。它是品牌最响亮的动作。
• 将 {colors.primary} 保留给特性计划卡和品牌字标——钴应感觉像一个刻意印章，而非颜色主题。
• 在 Aeonik Pro 500 中以 80–136px 设置首屏标题，使用 lineHeight: 1.0 和大负字距。
• 将 Inter 用于正文、按钮标签、说明——永远不要将 Aeonik Pro 用于正文字体。
• 将 {rounded.full} 应用于每个按钮和胶囊；{rounded.lg}（20px）应用于特性和计划卡；{rounded.md}（12px）应用于输入。
• 在深色 section 内全幅展示产品 mockup——资产本身就是 section。
• 仅在产品插图和图标内使用广泛的点缀调色板（{colors.accent-teal}、{colors.accent-pink}、{colors.accent-light-green} 等）。

避免

• 不要将点缀颜色（{colors.accent-teal}、{colors.accent-pink} 等）用作按钮表面。它们仅存在于插图内。
• 不要使用近黑色画布。品牌是 #000000，而非 #0a0a0a。
• 不要在正文内容中将白色文字与钴紫配对——{colors.primary} 用于特性计划卡表面，而非大段散文。
• 不要在卡片上添加投影。层级是画布 + 表面亮度偏移。
• 不要引入次级品牌颜色。钴紫是唯一的品牌印章。
• 不要将 Aeonik Pro lineHeight 放松到展示尺寸超过 1.0。紧凑堆叠是结构性的。
• 不要将正文 Inter 提升到 weight 500。使用 400（默认）或 600（强调型）——不要中间。
• 不要将 {colors.canvas-dark} 与 {colors.surface-elevated} 之外的另一个深色表面配对。表面阶梯只有两个深色台阶。

响应式行为

断点

触控目标

• 所有按钮至少 48px 高——舒适地超过 WCAG AAA（44px）。默认 {component.button-primary} 为 48px。
• {component.text-input} 高 56px——金融科技级可访问性。
• {component.button-pill-sm}（36px）在移动端通过 padding 调整提升至 44px。

折叠策略

• 顶层导航在 < 1024px 时折叠为汉堡；字标和 {component.button-primary} 保持锚定。
• 首屏 {typography.display-xxl} 限制：136px → 80px → 64px → 48px 跨断点阶梯。
• 计划网格在 < 1024px 时从 4 列变为 2 列，在 < 768px 时变为 1 列。
• 产品 mockup 带在每个断点保持全幅；资产向内裁剪而非加黑边。
• 子导航胶囊在 < 768px 时从换行行转换为水平滚动条。

图像行为

• 手机和卡片 mockup 以 1.5× 和 2× DPR 提供；768px 以下系统切换为较小的首屏裁剪。
• 产品摄影在每个断点保持自身氛围光照——无响应式变体资产。

迭代指南

1. 一次专注于一个组件。大多数表面共享 {colors.canvas-dark} / {colors.canvas-light} 对配 {rounded.full} 用于按钮，{rounded.lg} 用于卡片。
2. 直接引用组件名和 token（{colors.primary}、{component.plan-card-featured}、{rounded.lg}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md；orphaned-tokens 警告将捕获未使用的条目。
4. 添加新变体作为单独的条目（-pressed、-featured、-disabled）——不要将它们埋在正文中。
5. 默认正文为 {typography.body-md}（Inter 400 配正字距）；仅在强调时使用 {typography.body-md-bold}。
6. 保持 {colors.primary} 稀缺——如果每个视口出现一个以上钴紫元素，问问其中一个是否应该改为 {component.plan-card}（{colors.surface-elevated}）。

已知缺口

• 按下/激活的视觉状态仅为 button-primary-pressed 记录；其他组件依赖聚焦环（浏览器默认）进行交互反馈。
• 已登录 app 表面（交易、转账、账户设置）超出范围——仅记录公共营销画布。
• 广泛的点缀调色板（{colors.accent-teal} 至 {colors.accent-brown}）从提取的 token 集中捕获，但在产品插图内的确切用法因市场和产品线而异；按插图而非系统按钮记录。
• 移动 app 截图艺术指导（手机边框、状态栏）属于产品摄影范畴，未标准化为设计 token。