Superhuman

version: alpha name: 受 Superhumon 启发的设计分析 description: 对 Superhumon 设计语言的启发式解读——一个快邮件生产力品牌，分裂于编辑风格的暗色首屏（深靛蓝海军蓝配紫罗兰色天空大气背景和肖像主体）和安静的白色内容主体（带暖灰色墨色）之间。系统使用单一专有变量展示无衬线，字重 460–540 配合紧致字距，以及打破靛蓝 / 白色节奏的深青色收尾 CTA 带，带有暖色暗间奏。按钮是紧致圆角矩形，价格低调且密集，品牌读起来更像高端简讯而非 SaaS 应用。

colors: primary: "#1b1938" primary-deep: "#0e0c1f" on-primary: "#ffffff" ink: "#292827" ink-mute: "#73706d" ink-faint: "#9a9794" canvas: "#ffffff" canvas-soft: "#fafaf8" surface-violet-soft: "#c9b4fa" surface-teal-deep: "#0e3030" surface-teal-mid: "#155555" hairline: "#e8e4dd" hairline-dark: "#3f3a52" on-dark-mute: "#bcbac9" on-dark-faint: "#5a5772"

typography: display-xxl: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 540 lineHeight: 0.96 letterSpacing: 0 display-xl: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 48px fontWeight: 460 lineHeight: 0.96 letterSpacing: -1.32px display-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 28px fontWeight: 540 lineHeight: 1.14 letterSpacing: -0.63px display-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 22px fontWeight: 460 lineHeight: 1.1 letterSpacing: -0.315px heading-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 20px fontWeight: 460 lineHeight: 1.2 letterSpacing: -0.4px body-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 18px fontWeight: 540 lineHeight: 1.5 letterSpacing: -0.135px body-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 460 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 18.72px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 button-cap: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 460 lineHeight: 1.4 letterSpacing: 0 micro: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 12px fontWeight: 540 lineHeight: 1.4 letterSpacing: 0

rounded: 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 huge: 64px

components: button-primary-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-primary-dark-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-on-dark-pill: backgroundColor: "{colors.surface-violet-soft}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 20px button-secondary-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-on-teal: backgroundColor: "{colors.canvas}" textColor: "{colors.surface-teal-deep}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-teal-band: backgroundColor: "{colors.surface-teal-deep}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 64px card-feature-row: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px pill-tab-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-cap}" rounded: "{rounded.full}" padding: 8px 16px nav-bar-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px nav-bar-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

概述

Superhumon 的营销页面以编辑风格的暗色调开场：深靛蓝海军蓝 {colors.primary}（#1b1938）画布，叠加柔和的紫罗兰与天空色大气背景，以及半身入框的肖像主体（通常是黄昏时望向画面外的人）。标题以 {typography.display-xxl}（Super Sans VF 64px / 字重 540）配合负字距渲染，以白色设置在靛蓝之上。一个圆角矩形 CTA 按钮锚定每个色带——从不是两个，从不是三个。

每个页面的正文翻转到白色。{colors.canvas}（#ffffff）在首屏下方接管，正文类型以 {colors.ink}（#292827——略暖的深灰色，从不是纯黑）渲染，功能行在白色和 {colors.canvas-soft}（几乎不着色的暖调白）之间交替。价格层坐在这个白色表面上；推荐层反转为靛蓝海军蓝，完成了品牌的二元极性。

每个页面以 深青色 CTA 带（{colors.surface-teal-deep} — #0e3030）收尾。青色是单一的色彩间奏：浓郁、近黑的绿蓝色，打破了原本只有靛蓝 / 白色的页面。青色带始终包含以 {typography.display-lg} 的收尾 CTA 配单个白色胶囊按钮。

字体排版使用 Super Sans VF——一种专有的变量展示无衬线——配合异常的中等字重（460、540、600）。变量轴允许品牌选择精确的亚默认字重，读起来比典型的 400 / 500 / 700 SaaS 尺度更暖更人文。展示尺寸使用负字距从 -1.32px 到 -0.315px 不等；行高异常紧致（48px 展示处 0.96）。

关键特征：

• 三画布系统：靛蓝海军蓝（{colors.primary}）用于首屏，白色（{colors.canvas}）用于正文，深青色（{colors.surface-teal-deep}）用于收尾 CTA。
• 首屏中的半身入框肖像主体配紫罗兰天空大气背景——品牌使用望向画面外的人物作为反复出现的视觉。
• 每个色带单个 CTA；营销页面从不拥挤动作。
• Super Sans VF 使用亚默认字重（460、540、600）——品牌的字体暖度签名。
• 展示尺寸的紧致行高（0.96）——垂直压缩作为编辑密度。
• 暖灰色正文墨色（#292827）——从不是纯黑；品牌的安静暖度。
• 首屏 CTA 为浅紫罗兰（{colors.surface-violet-soft}）胶囊形状；其他地方的 CTA 是圆角矩形。

配色

来源页面： 首页（/）、/products/go-ai-assistant、/contact-sales、/plans。

品牌与点缀

• 主色靛蓝海军蓝（{colors.primary} — #1b1938）：品牌的主要表面和 CTA 色。首屏画布、填充圆角矩形按钮、推荐价格层。
• 深靛蓝（{colors.primary-deep} — #0e0c1f）：按下态提升 / 首屏渐变停点中使用的更深海军蓝。
• 柔紫罗兰表面（{colors.surface-violet-soft} — #c9b4fa）：首屏胶囊按钮填充——靛蓝画布上的淡紫罗兰。也出现在大气背景中。
• 深青色表面（{colors.surface-teal-deep} — #0e3030）：标志性的收尾 CTA 带色。浓郁绿蓝色，近黑。
• 中青色表面（{colors.surface-teal-mid} — #155555）：带内嵌套外框的略亮青色。

表面

• 画布（{colors.canvas} — #ffffff）：默认正文背景。
• 柔画布（{colors.canvas-soft} — #fafaf8）：交替功能行带使用的几乎暖调的白。
• 细线（{colors.hairline} — #e8e4dd）：1px 边框，略暖灰色。
• 暗细线（{colors.hairline-dark} — #3f3a52）：暗色表面上的 1px 边框。

文字

• 墨色（{colors.ink} — #292827）：默认正文。暖深灰色，从不是纯黑。
• 柔墨色（{colors.ink-mute} — #73706d）：次要文字、说明。
• 淡墨色（{colors.ink-faint} — #9a9794）：第三级 / 禁用文字。
• 主色之上（{colors.on-primary} — #ffffff）：暗海军蓝 / 青色表面上的文字。
• 暗色柔色之上（{colors.on-dark-mute} — 半透明白色）：暗色上的次要文字。
• 暗色淡色之上（{colors.on-dark-faint} — 半透明白色）：暗色上的第三级文字。

字体排版

字体族

展示和 UI 层使用 Super Sans VF——一种专有变量无衬线（字重变量轴，品牌使用亚默认 460 / 540 / 600 字重）。回退链是系统字体栈。

用于替代时使用 Inter Variable（开源）字重 460 / 540 / 600——Inter 的变量轴与 Super Sans VF 的行为密切匹配。避免固定字重 Inter 的 400 / 500 / 600——品牌专门挑选中间字重。

层级

原则

• 亚默认字重。 品牌选择 460 / 540 / 600 而非 400 / 500 / 700——字体中的安静暖度将它与默认 SaaS 系统区分开。
• 紧致的展示行高。 48–64px 展示处 0.96——文字异常紧凑地堆叠。
• 展示尺寸上的负字距。 48px 处 -1.32px 按比例递减——将变量字形收紧到编辑密度。

字体替代说明

Inter Variable（Google Fonts 上的开源）是推荐的替代。设置 font-variation-settings: "wght" 540 用于展示，正文用 460——Inter 的变量轴匹配。避免固定字重 Inter；中间字重是品牌的签名。

布局

间距系统

• 基础单位：8px（搭配 2 / 4 / 12 子 token 用于精细工作）。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px。
• 区段内边距：大多数区段 64–96px；收尾青色带使用 96–128px 以呈现编辑重量。
• 卡片内边距：价格卡片 32px；交替功能行 24px。

网格与容器

• 首屏跨越整个视口宽度，紫罗兰天空背景延伸到边缘；内容在约 960px 列中居中。
• 正文内容在约 960–1100px 居中。
• 价格表在 1024 / 768 断点处从 3 列 → 2 列 → 1 列折叠。

留白哲学

品牌在两种极性上都使用慷慨的编辑留白——暗色首屏和白色正文。区段间距倾向 96px；青色收尾带获得多达 128px 的垂直空气。留白本身就是品牌"深思熟虑、慢节奏"感觉的一部分。

层次与深度

装饰性深度

首屏的深度是紫罗兰天空大气背景——柔和的靛蓝到紫罗兰到天蓝色径向晕染，位于肖像主体之后。作为 CSS 径向渐变或大型背景图实现。首屏下方，深度很小——白色画布是扁平的。

形状

圆角尺度

图像几何

首屏使用半身入框肖像主体——一个在黄昏时拍摄的人物，望向画面外，占据首屏右半部分。肖像垂直延伸到边缘，水平方向停在画布中点；文字坐在左侧。其他摄影罕见；产品 UI 模型处理大多数其他插画需求。

组件

按钮

button-primary-dark —— 白色表面上的主导圆角矩形 CTA。

• 背景 {colors.primary}，文字 {colors.on-primary}，类型 {typography.button-md}，内边距 {spacing.md} {spacing.xl}（12px 20px），圆角 {rounded.md} 8px。
• 按下态 button-primary-dark-pressed 切换到 {colors.primary-deep}。

button-on-dark-pill —— 浅紫罗兰胶囊形状的首屏 CTA。

• 背景 {colors.surface-violet-soft}，文字 {colors.primary}，相同的字体，内边距 12px 20px，圆角 {rounded.full}。胶囊形状仅出现在首屏——正文 CTA 使用圆角矩形。

button-secondary-outline —— 白色上的描边替代。

• 背景 {colors.canvas}，文字 {colors.ink}，1px solid {colors.hairline-dark} 边框，与 button-primary-dark 相同的形状。

button-on-teal —— 收尾青色带内的 CTA。

• 背景 {colors.canvas}，文字 {colors.surface-teal-deep}，圆角矩形，相同的字体。

卡片与容器

card-feature-light —— 白色上的功能卡片。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg}，1px {colors.hairline} 边框。

card-pricing —— 标准价格层卡片。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg}，1px {colors.hairline} 边框。

card-pricing-featured —— 反色靛蓝的推荐层。

• 背景 {colors.primary}，文字 {colors.on-primary}，其他与 card-pricing 相同。

card-teal-band —— 每个页面的收尾 CTA 带。

• 背景 {colors.surface-teal-deep}，文字 {colors.on-primary}，内边距 {spacing.huge} 64px，圆角 {rounded.lg} 12px（实际满幅时通常无圆角）。包含 {typography.display-lg} 的单个收尾标题和 button-on-teal。

card-feature-row —— 正文上交替的功能行卡片。

• 背景 {colors.canvas-soft}，文字 {colors.ink}，内边距 {spacing.xl} 24px，圆角 {rounded.md} 8px。成对或成三使用，在首屏下方解释功能。

输入与表单

text-input —— 标准表单输入。

• 背景 {colors.canvas}，文字 {colors.ink}，类型 {typography.body-md}，内边距 {spacing.sm}+ {spacing.md}（10px 12px），圆角 {rounded.sm} 6px，1px {colors.hairline} 边框。

导航

nav-bar-dark —— 靛蓝首屏上方的顶部导航。

• 背景 {colors.primary}，文字 {colors.on-primary}，内边距 {spacing.lg} {spacing.xl}。Logo 在左，导航居中，"Get Started" button-on-dark-pill 在右。

nav-bar-light —— 正文 / 价格页上的顶部导航。

• 背景 {colors.canvas}，文字 {colors.ink}，其他结构相同，右侧 button-primary-dark。

胶囊、标签和芯片

pill-tab-light —— 功能行标签选择器。

• 背景 {colors.canvas}，文字 {colors.ink}，类型 {typography.button-cap}，内边距 {spacing.sm} {spacing.lg}，圆角 {rounded.full}。用于首屏下方的功能类别选择器（Mail / Channels / Code / AI / Calendar 等）。

标志性组件

半身入框肖像首屏 —— 黄昏时拍摄的人物，占据靛蓝首屏右半部分，紫罗兰天空大气背景在后方。文字和 CTA 坐在左侧。肖像是品牌反复出现的视觉签名。

收尾青色带 —— 每个页面以 card-teal-band 收尾，包含 {typography.display-lg} 的收尾标题和单个 button-on-teal。青色是页面的解决音。

link-on-light —— 正文上的内联链接。

• 文字 {colors.ink} 以 {typography.body-md} 渲染，带持续的下划线。

footer-light —— 全站页脚。

• 背景 {colors.canvas}，文字 {colors.ink-mute}，类型 {typography.caption}，内边距 {spacing.huge} {spacing.xl}（64px 24px）。包含 4 列链接组、社交图标和小型法律 / 版权行。

推荐与避免

推荐

• 将每个首屏与紫罗兰天空大气背景配对，并在可能时使用半身入框肖像主体。
• 以亚默认字重（460 / 540）渲染展示层——暖度是字体签名。
• 在除首屏之外的所有地方使用 8px 半径的圆角矩形 CTA（首屏使用胶囊形）。
• 每个营销页面以深青色 CTA 带收尾。
• 正文使用暖深灰色 {colors.ink}——从不是纯黑。
• 在展示尺寸上应用紧致的 0.96 行高；编辑压缩是品牌。

避免

• 不要在页面正文中使用胶囊形按钮；胶囊仅限首屏。
• 除非使用 body-strong（700）用于强调内联正文，否则不要将展示字重提高到 540 以上。
• 不要以纯黑渲染正文——暖灰色 #292827 是品牌的一部分。
• 不要省略收尾青色带——每个营销页面都以此收尾。
• 不要在靛蓝、柔紫罗兰、青色和暖灰之外引入额外的点缀色。

响应式行为

断点

触摸目标

• 按钮在移动端通过 12px 垂直内边距 × 16px 行高达到 ≥ 44×44px。WCAG AAA。
• 表单字段保持 44px 最小高度。

折叠策略

• 展示层阶梯式 64 → 48 → 36 → 28 → 22px。
• 半身入框肖像在移动端裁切为头像到肩部；大气背景简化。
• 价格层阶梯式 3 → 2 → 1 列。
• 顶部导航在 768px 以下折叠为汉堡菜单。
• 收尾青色带将垂直内边距从 128 → 64px 减小到移动端。

图像行为

首屏肖像使用 srcset 与桌面 / 移动裁剪——桌面偏向完整半身入框构图；移动裁切到头像到肩部。

迭代指南

1. 一次专注于一个组件。
2. 直接引用组件名称和 token。
3. 编辑后运行 npx @google/design.md lint DESIGN.md。
4. 默认正文使用 {typography.body-md}；营销引导保留 {typography.body-lg}。
5. 保持三画布节奏（靛蓝 / 白 / 青）——添加第四种画布颜色会破坏系统。
6. 收尾青色带不可妥协——每个营销页面都在此处收尾。