Resend

version: alpha name: Resend-design-analysis description: | Resend's marketing surfaces sit on a near-pure black canvas with off-white text and a single signature color — the deep editorial-serif Domaine Display headline mark — that gives an otherwise utilitarian developer-tool brand its print-magazine confidence. The system pairs Domaine Display (oversized 76px–96px serif, ss01/ss04/ss11 features on) with ABC Favorit for body and Inter for UI. Surfaces rely on subtle 6–9% opacity gradient glows, hairline 1px borders made from translucent white, and a strict rounded-12px container vocabulary. There is no decorative chrome — just type, code, and atmospheric depth.

colors: primary: "#fcfdff" primary-on: "#000000" ink: "#fcfdff" body: "rgba(252,253,255,0.86)" charcoal: "rgba(252,253,255,0.7)" mute: "#a1a4a5" ash: "#888e90" stone: "#464a4d" on-light: "#000000" on-light-mute: "rgba(0,0,51,0.7)" canvas: "#000000" surface-card: "#0a0a0c" surface-elevated: "#101012" surface-deep: "#06060a" hairline: "rgba(255,255,255,0.06)" hairline-strong: "rgba(255,255,255,0.14)" divider-soft: "rgba(255,255,255,0.04)" accent-orange: "#ff801f" accent-orange-glow: "rgba(255,89,0,0.22)" accent-yellow: "#ffc53d" accent-blue: "#3b9eff" accent-blue-glow: "rgba(0,117,255,0.34)" accent-green: "#11ff99" accent-green-glow: "rgba(34,255,153,0.18)" accent-red: "#ff2047" accent-red-glow: "rgba(255,32,71,0.34)" link: "#3b9eff" surface-light: "#f1f7fe"

typography: display-xxl: fontFamily: Domaine Display fontSize: 96px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.96px fontFeature: "ss01, ss04, ss11" display-xl: fontFamily: Domaine Display fontSize: 76.8px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.768px fontFeature: "ss01, ss04, ss11" display-lg: fontFamily: ABC Favorit fontSize: 56px fontWeight: 400 lineHeight: 1.2 letterSpacing: -2.8px fontFeature: "ss01, ss04, ss11" heading-md: fontFamily: Inter fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: -0.4px heading-sm: fontFamily: Inter fontSize: 20px fontWeight: 500 lineHeight: 1.3 letterSpacing: -0.3px subtitle: fontFamily: ABC Favorit fontSize: 20px fontWeight: 400 lineHeight: 1.3 fontFeature: "ss01, ss04, ss11" body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.5 body-md: fontFamily: ABC Favorit fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: -0.8px fontFeature: "ss01, ss04, ss11" body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.43 button-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.43 button-sm: fontFamily: ABC Favorit fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0.35px fontFeature: "ss01, ss03, ss04" caption: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.5 caption-emph: fontFamily: Helvetica fontSize: 14px fontWeight: 600 lineHeight: 1.0 code-md: fontFamily: Geist Mono fontSize: 13px fontWeight: 400 lineHeight: 1.6

rounded: none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px xxxl: 48px section: 96px band: 128px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-on}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-primary-pressed: backgroundColor: "{colors.surface-light}" textColor: "{colors.primary-on}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-ghost: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 36px button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 7px 15px height: 36px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 10px 14px height: 40px hero-stripe: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xxl}" rounded: "{rounded.none}" padding: 96px 32px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px feature-card-bordered: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-window: backgroundColor: "{colors.surface-deep}" textColor: "{colors.body}" typography: "{typography.code-md}" rounded: "{rounded.lg}" padding: 24px code-tab: backgroundColor: "{colors.surface-card}" textColor: "{colors.charcoal}" typography: "{typography.code-md}" rounded: "{rounded.sm}" padding: 6px 12px email-mockup: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 0 badge-pill: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.body}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 10px status-dot: backgroundColor: "{colors.accent-green}" rounded: "{rounded.full}" size: 8px nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.button-sm}" rounded: "{rounded.none}" height: 64px sub-nav-pill: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.body}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 14px contributor-avatar: backgroundColor: "{colors.surface-card}" rounded: "{rounded.full}" size: 32px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.charcoal}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 32px

概述

Resend 看起来像一个排版像编辑作品的开发者工具。每个页面在 {colors.canvas}（#000000）上开启，画布上最响亮的元素不是按钮或品牌印章——而是 96px 的 Domaine Display 衬线标题（"Email for developers"、"Email reimagined"），启用了 ss01 / ss04 / ss11 风格替代。这个单一的字体决定设定了品牌基调：自信、深思熟虑、略带文学气息，并以质量而非新奇定价。

配角阵容是技术性的。正文文案切换到 ABC Favorit 用于营销散文，Inter 用于 UI 标签，而代码块在 Geist Mono 中渲染，位于 {component.code-window} 壳内，配发丝红黄绿圆点。表面深度几乎完全由半透明白色构建——6% 边框、14% 强边框、4% 分隔线——覆盖在仅略低于画布黑色的深层 {colors.surface-deep} 之上。没有跨整带绘制的渐变，只有锚定在某些 section 顶部的柔和氛围光晕（橙、蓝、绿、红、黄），全部为低不透明度。

页面节奏在单一深色寄存器中循环：首屏条 → 氛围 section → 代码窗口 section → 电子邮件 mockup section → 定价或特性网格 → 黑色页脚。品牌从不暖化为浅色表面；即便是次级电子邮件 mockup 也呈现为深色画布内的紧凑白色卡片，像印刷插页一样在黑色边框的杂志页中框定。

关键特征：

• 每个公共页面的纯黑画布（{colors.canvas} — #000000）；偏白文字（{colors.ink} — #fcfdff）承载整个阅读。
• 衬线主导的字体系统：Domaine Display 在 76–96px 用于首屏标题，ABC Favorit 用于营销正文，Inter 用于 UI，Geist Mono 用于代码。
• 六个点缀光晕颜色仅用作低不透明度氛围渲染（{colors.accent-orange}、{colors.accent-blue}、{colors.accent-green}、{colors.accent-red}、{colors.accent-yellow}）——从不作为按钮或实心表面。
• 严格的容器词表：{rounded.lg}（12px）用于特性卡片、代码井和电子邮件 mockup；{rounded.md}（8px）用于按钮；{rounded.full} 用于胶囊和头像。
• 半透明白色边框（{colors.hairline} 6% / {colors.hairline-strong} 14%）完全取代阴影——系统没有传统的投影层级语言。
• {component.button-primary} 是一个小白矩形配黑文字——反直觉的对比，成为页面最亮的像素，作为单一视觉锚点。

配色

品牌与点缀

• Primary White（{colors.primary} — #fcfdff）：品牌事实上的点缀。保留给 {component.button-primary}（黑画布上的白色胶囊）、Domaine 展示标题和激活文字颜色。白色是此画布上可能的最响亮颜色——这就是标志。
• Primary On（{colors.primary-on} — #000000）：{colors.primary} 表面上的标签颜色。白色胶囊上的黑文字是品牌的 CTA 模式。
• Surface Light（{colors.surface-light} — #f1f7fe）：用作 {component.button-primary} 激活/按下状态的微妙蓝调偏白。

表面

• Canvas（{colors.canvas} — #000000）：默认页面背景。真正的黑色，从不是近黑色。
• Surface Card（{colors.surface-card} — #0a0a0c）：标准内嵌卡片表面，仅比画布亮一点以记录层级提升。
• Surface Elevated（{colors.surface-elevated} — #101012）：用于特性定价等级和幽灵按钮表面的第二个层级步骤。
• Surface Deep（{colors.surface-deep} — #06060a）：代码窗口背景——比画布本身略冷且略深，通过温度暗示深度。
• Hairline（{colors.hairline} — rgba(255,255,255,0.06)）：行之间和特性卡片周围的柔和 1px 半透明白色分隔线。
• Hairline Strong（{colors.hairline-strong} — rgba(255,255,255,0.14)）：卡片、代码井和表单输入上的结构 1px 边框。
• Divider Soft（{colors.divider-soft} — rgba(255,255,255,0.04)）：页脚列之间的低对比分隔线。

文字

• Ink（{colors.ink} — #fcfdff）：深色画布上的主文字颜色。略偏蓝冷以感觉像印刷纸而非纯白跳出。
• Body（{colors.body} — rgba(252,253,255,0.86)）：在纯 ink 显得过锐时的长篇正文文字。
• Charcoal（{colors.charcoal} — rgba(252,253,255,0.7)）：说明、次级导航标签。
• Mute（{colors.mute} — #a1a4a5）：辅助文字和非激活标签。
• Ash（{colors.ash} — #888e90）：三级文字、页脚文案。
• Stone（{colors.stone} — #464a4d）：禁用前景。
• On-Light（{colors.on-light} — #000000）：罕见的电子邮件 mockup 白色卡片内的标签颜色。
• On-Light Mute（{colors.on-light-mute} — rgba(0,0,51,0.7)）：电子邮件 mockup 内的次级文字。

语义

• Accent Orange（{colors.accent-orange} — #ff801f）+ 光晕（{colors.accent-orange-glow} — rgba(255,89,0,0.22)）：锚定到 "Email reimagined" / 客户故事 section 的氛围暖色渲染。实心橙色从不出现在按钮或表面上——只有光晕。
• Accent Yellow（{colors.accent-yellow} — #ffc53d）：用于行内高亮笔触和 "first-class developer experience" 关键标注。
• Accent Blue（{colors.accent-blue} — #3b9eff）+ 光晕（{colors.accent-blue-glow} — rgba(0,117,255,0.34)）：行内链接颜色和 "Integrate this weekend" section 上的冷氛围渲染。
• Accent Green（{colors.accent-green} — #11ff99）+ 光晕（{colors.accent-green-glow} — rgba(34,255,153,0.18)）：成功状态点和 "delivery confirmed" 特性光晕。
• Accent Red（{colors.accent-red} — #ff2047）+ 光晕（{colors.accent-red-glow} — rgba(255,32,71,0.34)）：行内错误红色和 "reach humans, not spam folders" 注意渲染。
• Link（{colors.link} — #3b9eff）：行内链接颜色——与 accent blue 相同。

字体排版

字体族

Resend 提供一个四家族栈：

• Domaine Display——专有的编辑衬线字体，仅用于 76px+ 的首屏标题，启用了 ss01 / ss04 / ss11 风格集，以获得略紧凑、更印刷杂志的外观。
• ABC Favorit——专有的人文无衬线字体，用于营销正文文案、首屏副标题和胶囊标签。承载 ss01 / ss03 / ss04 特性以获得表格数字和替代字形。
• Inter——开源无衬线字体，用于 UI：按钮标签、说明、卡片正文文字、导航链接。
• Geist Mono——开源 monospace，用于代码井。

当专有家族无法授权时，Söhne 或 Tiempos Headline 可以替代 Domaine Display，Geist 或 Inter Tight 可以替代 ABC Favorit。Inter 和 Geist Mono 是开源的，应当直接使用。

层级

原则

• 展示尺寸始终以 lineHeight: 1.0 运行并使用负字距——Domaine Display 标题打包成实心字体块而非开放散文行。
• 正文字重在 {typography.body-lg} 和 {typography.body-md} 上保持 400。衬线/无衬线家族变化承载层级，而非字重跃升。
• ABC Favorit 始终以 ss01 / ss04 / ss11 运行；Inter 从不承载 OpenType 特性。Geist Mono 中的代码从不承载连字。
• 行内链接使用 {typography.button-sm} 配正字距（0.35px）和 ABC Favorit——微小的间距调整赋予交互散文其精确度。

关于字体替代

当 Domaine Display 不可用时，将 lineHeight 显式限制为 1.0 并在替代衬线上应用 font-feature-settings: "ss01", "liga" 以模拟替代字形。Söhne 或 Tiempos Headline 读起来最接近。ABC Favorit 替代品（Geist、Inter Tight）通常默认字距更宽——在正文尺寸上应用 -0.5% 字距以补偿。

布局

间距系统

• 基础单位：4px，工作刻度在 4 / 8 / 16 的倍数上。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 48px · {spacing.section} 96px · {spacing.band} 128px。
• Section padding：带之间纵向 {spacing.section}（96px）；首屏条和收尾页脚过渡为 {spacing.band}（128px）。
• 卡片内 padding：{component.feature-card}、{component.pricing-tier} 和 {component.code-window} 上为 {spacing.xxl}（32px）。

网格与容器

• 最大内容宽度 ≈ 正文 section 上 1200px。
• 特性网格：桌面 3 列，tablet 2 列，移动端 1 列。
• 定价：桌面 3 列居中网格；中心等级提升到 {component.pricing-tier-featured}（一步抬升表面）。
• 代码故事分割：2 列分割——左侧叙述文案，右侧 {component.code-window}——1024px 以下折叠为堆叠。
• 电子邮件 mockup 带：深色画布内居中的单张白色卡片（640px 最大宽度），垂直 padding 充裕，读起来像印刷杂志插页。

留白哲学

• 留白是编辑性且充裕的——全幅 section 在 96–128px 呼吸，让 Domaine Display 标题有空间以大尺寸呈现。
• 卡片内，padding 保持在 32px，使特性文案和代码井与外网格保持一致的节奏。
• 发丝 {colors.hairline} 和 {colors.hairline-strong} 承担更亮系统中阴影的角色；深色画布自然抑制传统的阴影深度。

层次与深度

系统没有传统的投影语言。每个表面要么获得半透明白色发丝边框，要么位于氛围光晕内。深色画布自然吸收阴影；表面通过温度和亮度偏移而非模糊来记录深度。

装饰性深度

• 氛围 section 光晕——六个点缀颜色各配有配对的光晕 token（橙、黄、蓝、绿、红，加上 "everything in your context" 的深板岩）。每个 section 以单一的径向渲染锚定在 section 顶部边缘开启，在约 600px 纵向距离内淡出到画布黑色。从不在同一 section 中出现两个光晕。
• 电子邮件卡片插页——"Beyond experience" mockup 带将单张白色电子邮件卡片从黑色画布上抬起，赋予系统中唯一的真浅底深底对比。卡片不使用阴影；对比本身就是层级。
• 代码窗口红黄绿圆点——{component.code-window} 壳在顶部包含三个着色圆点（红 {colors.accent-red}、黄 {colors.accent-yellow}、绿 {colors.accent-green}）——三种语义颜色作为实心表面出现的唯一地方。

形状

圆角刻度

摄影几何

• 系统几乎不使用摄影。视觉兴趣来自字体 + 氛围光晕 + 代码井 + 白色电子邮件卡片插页。
• 当肖像出现（推荐头像）时，它们是圆形（{rounded.full}）32px，与正文文案行内对齐。
• 电子邮件 mockup 卡片以 4:5 纵向比例运行配 {rounded.lg} 角。

组件

按钮

button-primary——白色 CTA

• 背景 {colors.primary}，标签 {colors.primary-on}，字号 {typography.button-md}，padding 8px 16px，rounded: {rounded.md}，高 36px。
• 画布上最亮的像素。用于 "Get started"、"Sign up"、"Try Resend"。
• 按下状态位于 button-primary-pressed（背景 {colors.surface-light}）。

button-ghost——半透明 CTA

• 背景 {colors.surface-elevated}，标签 {colors.ink}，1px {colors.hairline-strong}，字号 {typography.button-md}，rounded: {rounded.md}，高 36px。
• 与 {component.button-primary} 配对的等重次级动作。

button-outline——描边 CTA

• 背景 {colors.canvas}，标签 {colors.ink}，1px {colors.hairline-strong}，字号 {typography.button-md}，rounded: {rounded.md}，高 36px。
• 三级动作；独自出现在行内链接旁边。

卡片与容器

hero-stripe——全幅首屏

• 背景 {colors.canvas}，文字 {colors.ink}，字号 {typography.display-xxl} 用于标题，padding 96px 32px，rounded: {rounded.none}。
• 仅在首页首屏带使用；承载 96px Domaine Display 标题和单个 {component.button-primary} CTA。首屏内无摄影，无氛围光晕——光晕出现在后续 section。

feature-card——特性高亮卡片

• 背景 {colors.surface-card}，文字 {colors.ink}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}（32px）。
• 用于首页网格："Despite emails using React"、"So beyond editing" 等。默认无描边——依靠画布黑色对比。

feature-card-bordered——描边特性卡片

• 背景 {colors.surface-card}，文字 {colors.ink}，1px {colors.hairline-strong}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}。
• 用于特性卡片靠近并排且需要明确分隔时。

pricing-tier——定价等级卡片

• 背景 {colors.surface-card}，文字 {colors.ink}，1px {colors.hairline-strong}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}（32px）。
• 等级名 {typography.heading-md} + 价格 {typography.display-lg}（ABC Favorit，56px）。

pricing-tier-featured——推荐等级

• 背景 {colors.surface-elevated}，文字 {colors.ink}，1px {colors.hairline-strong}，字号 {typography.body-md}，rounded: {rounded.lg}，padding {spacing.xxl}。
• 中心等级通过表面亮度抬升，而非颜色。

code-window——代码井

• 背景 {colors.surface-deep}，文字 {colors.body}，字号 {typography.code-md}，1px {colors.hairline-strong}，rounded: {rounded.lg}，padding {spacing.xl}（24px）。
• 顶部包含 3 点红黄绿圆点行使用 {colors.accent-red} / {colors.accent-yellow} / {colors.accent-green} 作为 chrome，加上其下的 tab 条。

code-tab——代码语言 tab

• 背景 {colors.surface-card}，文字 {colors.charcoal}，字号 {typography.code-md}，rounded: {rounded.sm}，padding 6px 12px。
• 激活 tab 将文字提升为 {colors.ink} 并添加微妙的 {colors.hairline-strong} 下划线。

email-mockup——电子邮件卡片插页

• 背景 {colors.surface-card}（或呈现为浅色孤岛插页时的罕见 #ffffff），文字 {colors.ink}（白色插页时为 {colors.on-light}），字号 {typography.body-md}，rounded: {rounded.lg}，padding 0。
• 用于 "Beyond experience" 带中演示渲染的电子邮件输出。

输入与表单

text-input——默认输入

• 背景 {colors.surface-card}，文字 {colors.ink}，字号 {typography.body-sm}，1px {colors.hairline-strong}，rounded: {rounded.md}，padding 10px 14px，高 40px。
• 注册和等待列表电子邮件字段。聚焦状态将边框加粗为 {colors.ink}（无单独环颜色）。

导航

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

• 背景 {colors.canvas}，文字 {colors.body}，字号 {typography.button-sm}，高 64px，单一底部发丝 {colors.hairline} 边框。
• 左：字标 logo。居中：顶层导航（"Features"、"Pricing"、"Docs"、"Customers"）。右："Sign in" 链接 + {component.button-primary}。

nav-bar（移动端）

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

sub-nav-pill——胶囊式子导航

• 胶囊芯片设置在内容上方的水平行中（如客户索引上），配 {component.sub-nav-pill} 样式。

标志性组件

badge-pill——中性胶囊

• 背景 {colors.surface-elevated}，文字 {colors.body}，字号 {typography.caption}，rounded: {rounded.full}，padding 4px 10px。
• 首屏文案和客户故事标题内的行内标签（"New"、"Beta"、"v3.0"）。

status-dot——状态指示器

• 背景 {colors.accent-green}，rounded: {rounded.full}，8px 方形。
• 页脚或系统状态引用中 "Status: Operational" 旁边的行内指示器。

contributor-avatar——推荐头像

• 背景 {colors.surface-card} 占位符，rounded: {rounded.full}，32×32px。
• 与客户推荐行内使用。

footer——全局页脚

• 背景 {colors.canvas}，文字 {colors.charcoal}，字号 {typography.body-sm}，rounded: {rounded.none}，padding 64px 32px。
• 多列快捷链接网格位于由 {colors.divider-soft} 分隔的单行版权之上。

推荐与避免

推荐

• 使用 {colors.canvas}（真正的黑色）作为默认页面背景。每个公共页面都坐落于此。
• 将 {component.button-primary}（白色胶囊）保留为唯一的实心亮色表面。每视口最多一个。
• 在 Domaine Display 中以 76–96px 设置首屏标题，使用 lineHeight: 1.0 并启用 ss01 / ss04 / ss11 特性。
• 将 ABC Favorit 用于营销正文，Inter 用于 UI 标签，Geist Mono 用于代码。保持车道严格。
• 从半透明白色发丝构建层级，而非投影。
• 将 {colors.accent-*-glow} token 用作低不透明度径向氛围渲染——从不作为实心表面。
• 将按钮和输入设置为 {rounded.md}（8px）；卡片和代码井设置为 {rounded.lg}（12px）；胶囊和头像设置为 {rounded.full}。
• 谨慎使用白色电子邮件 mockup 插页——它是唯一刻意为之的浅色表面，应当感觉像印刷引语。

避免

• 不要使用近黑色画布。品牌坐落在 #000000 上，而非 #0a0a0a。
• 不要将纯色应用于氛围点缀 token。{colors.accent-orange} 仅用于行内高亮——其光晕形式用于背景。
• 不要在特性卡片或代码井上添加投影。半透明白色边框在此画布上承载深度。
• 不要将正文字重升至 600 以示强调。改为变化家族（Inter → ABC Favorit → Domaine Display）。
• 不要在 {component.code-window} 之外渲染代码——即便小行内代码也使用 Geist Mono 和 {colors.surface-card} 背景。
• 不要将 Domaine Display lineHeight 放松到超过 1.0。紧凑堆叠是品牌的结构性特征。
• 不要引入次级品牌点缀。白色在黑色上就是品牌——点缀仅是氛围性的。
• 不要将摄影放在前中位置。品牌读起来是字体和代码，而非摄影主导。

响应式行为

断点

触控目标

• 所有按钮在桌面上至少 36px 高，通过 padding 调整在移动端缩放为 44px。移动端满足 WCAG AAA。
• {component.text-input} 高 40px——舒适但不大。移动端通过 padding 缩放为 48px。
• {component.sub-nav-pill} 在桌面上保持 36px，在移动端为 40px。

折叠策略

• 顶层导航在 < 1024px 时折叠为汉堡；字标和 {component.button-primary} 保持锚定。
• 首屏 {typography.display-xxl} 限制：96px → 76px → 56px → 44px 跨断点阶梯。
• 定价 3 列在 < 1024px 时垂直堆叠，特性等级保持居中堆叠。
• 代码故事分割在 < 1024px 时从并排切换到堆叠，代码井始终在第二位。
• 氛围光晕随 section 宽度缩放但保持相同的不透明度——它们在小视口上自然淡化。

图像行为

• 电子邮件 mockup 卡片在移动端以 1:1 比例回流以保持可读性。
• 氛围光晕是 CSS 渐变——无资源成本，无断点变化。
• 客户推荐头像无论断点都保持 32px 圆形。

迭代指南

1. 一次专注于一个组件。大多数表面共享 {colors.surface-card} 或 {colors.surface-elevated} 配 {rounded.lg}——只有角色专属 token（{colors.primary}、{component.code-window}）在变体之间变化。
2. 直接引用组件名和 token（{colors.primary}、{component.button-primary-pressed}、{rounded.lg}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md；orphaned-tokens 警告将捕获未使用的条目。
4. 添加新变体作为单独的条目（-pressed、-featured、-disabled）——不要将它们埋在正文中。
5. 默认正文为 {typography.body-md}；仅在首屏副标题上使用 {typography.subtitle}。
6. 保持 {colors.primary}（白色）稀缺——如果每个视口出现一个以上实心白色表面，问问其中一个是否应该改为 {component.button-ghost}。

已知缺口

• 按下/激活的视觉状态仅为 button-primary-pressed 记录；其他组件依赖默认聚焦环（浏览器默认）进行交互反馈。
• 已登录仪表板表面（API 密钥、发送日志、受众管理）超出范围；仅记录公共营销画布。
• 电子邮件模板编辑器表面（关键产品功能）未提取——它们位于身份验证之后。
• 氛围光晕渲染使用 CSS 径向渐变；精确的停点位置和角度因 section 而异，未标准化为 token——根据具体 section 的设计判断进行渲染。