version: alpha name: Framer-design-analysis description: "A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster."
colors: primary: "#ffffff" on-primary: "#000000" accent-blue: "#0099ff" ink: "#ffffff" ink-muted: "#999999" canvas: "#090909" surface-1: "#141414" surface-2: "#1c1c1c" hairline: "#262626" hairline-soft: "#1a1a1a" inverse-canvas: "#ffffff" inverse-ink: "#000000" gradient-magenta: "#d44df0" gradient-violet: "#6a4cf5" gradient-orange: "#ff7a3d" gradient-coral: "#ff5577" semantic-success: "#22c55e"
typography: display-xxl: fontFamily: GT Walsheim Framer Medium fontSize: 110px fontWeight: 500 lineHeight: 0.85 letterSpacing: -5.5px display-xl: fontFamily: GT Walsheim Medium fontSize: 85px fontWeight: 500 lineHeight: 0.95 letterSpacing: -4.25px fontFeature: ss02 display-lg: fontFamily: GT Walsheim Medium fontSize: 62px fontWeight: 500 lineHeight: 1.00 letterSpacing: -3.1px fontFeature: ss02 display-md: fontFamily: GT Walsheim Medium fontSize: 32px fontWeight: 500 lineHeight: 1.13 letterSpacing: -1.0px headline: fontFamily: Inter fontSize: 22px fontWeight: 700 lineHeight: 1.20 letterSpacing: -0.8px fontFeature: cv05 subhead: fontFamily: Inter Variable fontSize: 24px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.01px fontFeature: cv11 body-lg: fontFamily: Inter Variable fontSize: 18px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.18px fontFeature: cv11 body: fontFamily: Inter Variable fontSize: 15px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.15px fontFeature: cv11 body-sm: fontFamily: Inter Variable fontSize: 14px fontWeight: 500 lineHeight: 1.40 letterSpacing: -0.14px fontFeature: cv11 caption: fontFamily: Inter Variable fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: -0.13px fontFeature: cv11 micro: fontFamily: Inter Variable fontSize: 12px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.12px fontFeature: cv11 button: fontFamily: Inter Variable fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.14px fontFeature: cv11
rounded: xs: 4px sm: 6px md: 10px lg: 15px xl: 20px xxl: 30px pill: 100px full: 9999px
spacing: hair: 1px xxs: 4px xs: 8px sm: 12px md: 15px lg: 20px xl: 30px xxl: 40px section: 96px
components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 15px button-primary-pressed: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 15px button-translucent: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.xxl}" padding: 8px 14px button-icon-circular: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 14px pricing-tab-selected: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 14px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px pricing-card-featured: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px template-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 12px gradient-spotlight-card: backgroundColor: "{colors.gradient-violet}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px gradient-spotlight-card-magenta: backgroundColor: "{colors.gradient-magenta}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px gradient-spotlight-card-orange: backgroundColor: "{colors.gradient-orange}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px product-mockup-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xl}" padding: 16px feature-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 24px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px
Overview
Framer's marketing canvas is a near-pure black artboard. The dominant surface is {colors.canvas} — almost pure black with a faint warmth — and on top of it sits oversized white display type set in GT Walsheim Medium with letter-spacing pulled to extreme negative values (-5.5px on the 110px display, -4.25px on the 85px hero). The page reads like a poster: one assertive statement per band, generous breathing room above and below.
The single accent is {colors.accent-blue} — used scarcely, mostly for hyperlinks, selection halos, and a subtle blue-tinted shadow ring on focused inputs. The brand chrome itself is monochrome: white pill buttons, charcoal cards, gray secondary text. What makes Framer distinctive is the rhythm break — every few sections the page drops in a vibrant gradient atmosphere card: a magenta-violet spotlight, a sunset-orange wash, a coral-pink panel. These aren't section backgrounds; they're individual cards arranged in a card grid, each one a small living poster that shows what Framer can produce.
Body type is Inter Variable, with Framer leaning hard into Inter's character variants (cv01, cv05, cv09, cv11, ss03, ss07, dlig) — the result is a body voice that feels custom-tuned, with single-storey "a", straight-leg "l", and tabular figures. There's no light mode on the marketing site; the brand IS dark.
Key Characteristics:
- Black-canvas marketing system:
{colors.canvas}is the surface for hero, body, pricing, FAQ, and footer alike — no light interludes. - Massive negative letter-spacing on display sizes (-5.5px / -4.25px / -3.1px) creates a poster-grade headline cadence.
- White pill (
{components.button-primary}) is the only primary CTA shape across the site; secondary actions live as charcoal pills ({components.button-secondary}) or text links. - Oversized gradient spotlight cards (violet, magenta, orange, coral) act as showcase tiles inside the dark grid; they are individual cards, not section backgrounds.
- Inter Variable with bespoke OpenType character variants (
cv01/05/09/11,ss03/ss07,dlig) used everywhere body type appears — the typographic voice is unmistakable. - Border radius scale runs from 4px utility chips up to 100px pills and full circles, with 15–20px the default for cards and 30px for atmospheric gradient cards.
- A single chromatic accent
{colors.accent-blue}reserved for hyperlinks, focus, and selection — never decorative.
Colors
Source pages: framer.com (home), /ai/, /startups/, /marketplace/templates/nudge/, /gallery/a16z-speedrun-×-tonik, /pricing.
Brand & Accent
- Pure White ({colors.primary}): The brand primary surface. Every primary CTA pill, every display headline, every body line on canvas.
- Sky Blue ({colors.accent-blue}): The single chromatic accent. Hyperlinks, focused-input rings, and a few selection states. Never used for backgrounds or as a brand fill.
表面
- 画布（
{colors.canvas}）：默认页面背景 —— 近黑带轻微暖度。页脚、价格、hero 和 FAQ 都坐落其上。 - 表面 1（
{colors.surface-1}）：画布之上一步 —— 价格卡、次要按钮、mockup 瓦。 - 表面 2（
{colors.surface-2}）：两步之上 —— 主推价格卡、hero 胶囊背景、选中价格 tab。 - 细线（
{colors.hairline}）：输入组、对比表分隔线上的 1px 边框。 - 细线柔（
{colors.hairline-soft}）：更细的分隔线 —— FAQ 行间和页脚列分隔。 - 反向画布（
{colors.inverse-canvas}）：纯白 —— 用作深色上浅胶囊 CTA 的表面，以及展示栅格中嵌入的一小部分浅色模式模板缩略图。
文字
- 主墨（
{colors.ink}）：所有标题和强调正文 —— 纯白。 - 主墨弱（
{colors.ink-muted}）：次要文字 —— 灰（#999999），用于元信息、页脚列、对比行标签、未选中的价格 tab。深色画布上的层级由 ink → ink-muted 对比承载，不通过字重变化。
语义
- 成功绿（
{colors.semantic-success}）：价格对比表勾。图填充，不作表面。
品牌渐变（标志性）
- 渐变品红（
{colors.gradient-magenta}）：聚光卡变体。 - 渐变紫（
{colors.gradient-violet}）：聚光卡变体 —— 最常用。 - 渐变橙（
{colors.gradient-orange}）：聚光卡变体 —— 日落晕。 - 渐变珊瑚（
{colors.gradient-coral}）：聚光卡变体 —— 珊瑚/粉。
这四个作为超大氛围瓦出现在单色卡片栅格中 —— 深色画布配一两个发光聚光卡是重复出现的页面签名。
字体
字体族
- GT Walsheim Framer Medium / GT Walsheim Medium —— Framer 的展示字体。几何化、略人文、大字号下极度自信配极致负字距。降级：
GT Walsheim Medium Placeholder系统字体。 - Inter Variable —— 系统正文字体。使用大量 OpenType 字符变体：
cv01（替代 "1"）、cv05（替代 "g"）、cv09（替代 "i" / "l"）、cv11（替代 "0"）、ss03/ss07风格集、dlig可选连字、以及tnum用于表格上下文的数字。结果是正文声音感觉定制而无需委托定制字体。 - Inter —— 选择性用于
{typography.headline}（22px / 20px 档）。非可变切分捕获可变文件四舍五入的小字距目标。
层级
| Token | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xxl} | 110px | 500 | 0.85 | -5.5px | 最大的 hero 标题（首页、AI 页） |
{typography.display-xl} | 85px | 500 | 0.95 | -4.25px | 章节开篇标题 |
{typography.display-lg} | 62px | 500 | 1.00 | -3.1px | 子章节开篇 |
{typography.display-md} | 32px | 500 | 1.13 | -1.0px | 卡片标题、较小展示 |
{typography.headline} | 22px | 700 | 1.20 | -0.8px | 价格档标题、FAQ 分类标题 |
{typography.subhead} | 24px | 400 | 1.30 | -0.01px | 展示标题旁的引文 |
{typography.body-lg} | 18px | 400 | 1.30 | -0.18px | Hero 副标题、引言段 |
{typography.body} | 15px | 400 | 1.30 | -0.15px | 默认正文、卡片描述 |
{typography.body-sm} | 14px | 500 | 1.40 | -0.14px | 价格对比行、密集数据 |
{typography.caption} | 13px | 500 | 1.20 | -0.13px | 眉板、页脚列、元 |
{typography.micro} | 12px | 400 | 1.20 | -0.12px | 免责声明、脚注 |
{typography.button} | 14px | 500 | 1.0 | -0.14px | 胶囊按钮 |
原则
- 字距随字号硬性缩放。 display-xxl 拉 -5.5px（尺寸的 5%）；正文固定约 -1%（15px 时 -0.15px）。结果：顶部是海报，正文舒适阅读。
- OpenType 字符变体是品牌声音。 关掉
cv11、ss03等会明显改变正文声音 —— 品牌依赖于它们。 - 字重保持窄带。 展示字 500，正文 400，body-sm/caption 500。层级由尺寸 + 字距承载，不通过 700/900 阶梯。
- 全场景紧行高。 即使正文也是 1.30 —— Framer 的编辑式声调比典型 SaaS 营销更紧。
字体替代说明
如果没有 GT Walsheim Medium，合适的开源替代包括 Mona Sans、Geist、或字重 600–700 的 Inter 配手动收紧字距。Mona Sans 100–300 的极细字重特别接近 Framer 较干净的章节开篇。Inter Variable 是开源的 —— 保持原样并保留文档化的 OpenType 变体。
布局
间距系统
- 基础单位：5px（Framer 使用非标准的 5/10/15/20/30 增量，而非更常见的 4/8/16/24）。
- Token（前置数据）：
{spacing.hair}1px ·{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}15px ·{spacing.lg}20px ·{spacing.xl}30px ·{spacing.xxl}40px ·{spacing.section}96px。 - 卡片内部内边距：价格卡
{spacing.lg}20px；渐变聚光卡{spacing.xl}30px。 - 胶囊按钮内边距：10px 垂直 · 15px 水平 ——
{components.button-primary}。 - 章节内边距（垂直）：首页约
{spacing.section}96px；价格对比更紧（约 64px）。
网格与容器
- 最大内容宽约 1199px 断点，桌面侧沟槽缩向
{spacing.xl}。 - 首页画廊上的卡片栅格桌面 2 栏，810px 以下折为 1 栏。
- 价格档栅格在所有文档化断点上 4 栏；其下方的对比表使用固定宽左列 + 窄宽度下水平滚动的档位列。
留白哲学
深色画布即是留白。在更浅品牌倚赖白色气口分隔章节的地方，Framer 倚赖长段黑色配中间漂浮的单个超大声明。章节通过模式变化分隔：一段炭灰卡片，然后一段黑色配渐变聚光，然后回到炭灰 —— 像暗黑电影中的切换。
层次与深度
| 层级 | 处理 | 用途 |
|---|---|---|
| 0（平） | 无阴影、无边框 | 画布上展示字、FAQ 行、页脚的默认 |
| 1（炭灰） | 画布上的 {colors.surface-1} 浮起 | 价格卡、mockup 瓦、次要按钮 |
| 2（浅边） | rgba(255,255,255,0.10) 0.5px 顶边 + rgba(0,0,0,0.25) 0px 10px 30px 投影 | 悬浮产品卡、模态卡 |
| 3（选中） | rgba(0,153,255,0.15) 0px 0px 0px 1px 环 | 聚焦输入、选中选项 |
四个阴影签名在首页重复出现：1px 微妙投影、半透明蓝环、粗近黑 2px 描边（用作子导航上的激活元素标记）、以及悬浮卡上使用的分层浅边 + 投影。
装饰性深度
- 渐变聚光卡是主导的深度设备 —— 黑色画布上的色彩饱和度代替投影驱动的层次。
- 分层的产品 mockup（内含 Framer 构建站点的浏览器框架）放在
{colors.surface-1}卡内配 level-2 浅边处理。 - 微妙蓝环（焦点 / 选中）是唯一的色彩深度信号 —— 用于标记输入组和价格档切换的激活态，不改变底层表面。
形状
圆角等级
Framer 提取的圆角集异常细致（1px、4px、5px、6px、8px、10px、12px、15px、20px、30px、40px、100px）。下面的命名等级选出营销表面实际使用的级别。
| Token | 值 | 用途 |
|---|---|---|
{rounded.xs} | 4px | 小 chip / 工具圆角 |
{rounded.sm} | 6px | 行内标签、徽标 |
{rounded.md} | 10px | 表单输入、列表项 |
{rounded.lg} | 15px | 模板卡缩略图 |
{rounded.xl} | 20px | 价格卡、mockup 瓦 |
{rounded.xxl} | 30px | 渐变聚光卡、超大面板 |
{rounded.pill} | 100px | 所有主文字 CTA |
{rounded.full} | 9999px | 圆形图标按钮、头像圆 |
摄影与插画几何
- 嵌入的站点 mockup（Framer 构建站点的浏览器框架预览）放在
{rounded.xl}20px 瓦中配{spacing.md}15px 内部内边距。 - 渐变聚光卡使用
{rounded.xxl}30px 角 —— 刻意比 20px 内容卡更柔，让它们感觉像氛围面板而非更紧的 UI。 - 图标图和子导航图以 32–40px 尺寸渲染为
{rounded.full}圆。
组件
按钮
button-primary —— 深色画布上的白胶囊。首页、价格、AI、画廊页的主 CTA。
- 底色
{colors.primary}，文字{colors.on-primary}，字体{typography.button}，内边距 10px 15px，圆角{rounded.pill}。 - 按下态在
button-primary-pressed中（线上站点使用 transform-scale 缩小而非深色填充）。
button-secondary —— 炭灰胶囊。用于次要导航动作（"Sign in"、"Talk to sales"）并作为主胶囊的视觉对应。
- 底色
{colors.surface-1}，文字{colors.ink}，字体{typography.button}，内边距 10px 15px，圆角{rounded.pill}。
button-translucent —— 用于繁忙背景（画廊 hero、渐变卡）之上的半透明 / 浮起次按钮。
- 底色
{colors.surface-2}，文字{colors.ink}，字体{typography.button}，圆角{rounded.xxl}，内边距 8px 14px。
button-icon-circular —— 40px 圆，用于行内图标动作（轮播箭头、社交链接）。
- 底色
{colors.surface-1}，文字{colors.ink}，圆角{rounded.full}，尺寸 40px。
价格 tab
pricing-tab-default + pricing-tab-selected —— 在 /pricing 上切换 Basic / Pro / Business / Enterprise 的胶囊切换。
- 默认：
{colors.canvas}底色，{colors.ink-muted}文字，圆角{rounded.pill}。 - 选中：
{colors.surface-2}底色，{colors.ink}文字 —— 选中 = 浮起，非色彩。表面深度传达"激活"无需染色填充。
输入与表单
text-input + text-input-focused —— /pricing（席位数、货币切换器）和产品内预览表面上的表单字段。
- 底色
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.md}，内边距 10px 14px。 - 聚焦态保留同一表面；焦点环是 level-3 蓝调阴影
rgba(0,153,255,0.15)0 0 0 1px。
卡片与容器
pricing-card —— /pricing 上的每档。
- 底色
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.xl}，内边距 24px。
pricing-card-featured —— Pro 档（视觉强调）。
- 底色
{colors.surface-2}，其他结构相同。浮起一步 —— 无染色描边。
template-card —— 首页 "Built with Framer" 画廊和 /marketplace 中的缩略图瓦。
- 底色
{colors.surface-1}，文字{colors.ink}，字体{typography.body-sm}，圆角{rounded.lg}，内边距 12px。
product-mockup-tile —— 框架住活动产品 UI mock 的较大瓦（Framer 画布、Workshop 视频、AI 翻译面板）。
- 底色
{colors.surface-1}，文字{colors.ink}，字体{typography.body-sm}，圆角{rounded.xl}，内边距 16px。
渐变聚光卡（标志性）
Framer 营销的定义装饰表面 —— 放入单色卡片栅格中的超大氛围瓦。变体：
gradient-spotlight-card —— 紫色地面（最常用）。
- 底色
{colors.gradient-violet}，文字{colors.ink}，字体{typography.subhead}，圆角{rounded.xl}，内边距 32px。（线上站点上的卡经常在跨更宽瓦时推到{rounded.xxl}30px。）
gradient-spotlight-card-magenta —— 品红-粉地面。
- 底色
{colors.gradient-magenta}，其他相同。
gradient-spotlight-card-orange —— 日落橙晕。
- 底色
{colors.gradient-orange}，其他相同。
（珊瑚粉遵循相同形状使用 {colors.gradient-coral}。）
对比与 FAQ
feature-row + comparison-row —— 价格对比表中的单行。
feature-row：{colors.canvas}底色，{colors.ink}文字。表头行。comparison-row：{colors.canvas}底色，{colors.ink-muted}文字。数据行用{typography.body-sm}和 1px{colors.hairline-soft}下划线。
faq-row —— 价格页 FAQ 中的每个手风琴行。
- 底色
{colors.canvas}，文字{colors.ink}，字体{typography.body}，圆角{rounded.md}，内边距 24px。
导航
top-nav —— {colors.canvas} 上的粘性条带，左侧 Framer 字标，中部主导航链接，右侧 button-secondary（"Sign in"）+ button-primary（"Get started for free"）对。
- 底色
{colors.canvas}，文字{colors.ink}，字体{typography.body-sm}，高 56px。 - 手机：主链接折为汉堡；两个胶囊 CTA 折为条带上的单一主胶囊。
页脚
footer —— {colors.canvas} 上的密集链接栅格，左侧 Framer 字标，5–6 列说明大小的链接。
- 底色
{colors.canvas}，文字{colors.ink-muted}，字体{typography.caption}，内边距 64px 32px。
推荐与避免
推荐
- 把
{colors.primary}（白）和{colors.canvas}（近黑）作为系统的两个锚表面。页面的每个带选择其中一个。 - 把展示字号字距激进推负 ——
{typography.display-xxl}在 -5.5px 是品牌签名，而非风格意外。 {colors.accent-blue}仅用于超链接、焦点环和选中指示器。从不作为背景或按钮填充。- 在卡片栅格中放入一两个
gradient-spotlight-card变体；它们是品牌的氛围设备。不要过度 —— 同一视口三个或以上读作情绪板而非系统。 - 把每个 CTA 组成胶囊（
{rounded.pill}）；次要动作作为炭灰胶囊存在，绝不作带描边的 ghost 按钮。 - 保持正文字体为带全部文档化字符变体（
cv01、cv05、cv09、cv11、ss03、ss07）的 Inter Variable —— 品牌声音依赖于它们。 - 使用表面浮起（canvas → surface-1 → surface-2）标记深色上的层级，非白字上的不透明度变化。
避免
- 不要出货浅色模式营销页。Framer 的身份是深色。
- 不要在
{colors.ink-muted}之外引入中间灰文字。层级是二元的：ink或ink-muted。 - 不要用
{colors.accent-blue}作品牌填充（例如蓝 CTA 胶囊）。蓝是信号色，非表面。 - 不要让 CTA 方角化。胶囊（
{rounded.pill}）或完整圆是品牌词汇。 - 不要"为可访问性"减少展示字号的负字距。压缩是品牌声音的内在部分；如需减少尺寸而非百分比。
- 不要把渐变背景应用于整个章节。渐变是卡，非章节地面。
- 不要组合多个色彩点缀。调色板是单色加一个蓝加渐变家族 —— 不是"蓝、绿、红"。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Desktop | 1199px | 默认桌面布局 |
| Tablet | 810px | 卡片栅格 4 栏 → 2 栏；导航变汉堡 |
| Mobile-Lg | 809px | 价格对比表变为按档手风琴 |
| Mobile-XS | 98px | 最小文档化断点 —— 一切单列 |
触控目标
- 胶囊按钮（
button-primary、button-secondary）在所有视口保持最小 44px 触摸高度 —— 组合{typography.button}14px 行高和文档化的 10px 垂直内边距。 - 圆形图标按钮（
button-icon-circular）桌面 40px，触屏视口扩到 44px。 - 价格 tab 胶囊保持 ≥40px 触摸高度；810px 以下它们可折为水平滚动行而非堆叠。
折叠策略
- 导航：水平导航配居中链接组 + 右锚定胶囊对在 810px 以下折为汉堡遮罩。
button-primary在条带上保持可见。 - 卡片栅格：画廊和模板卡栅格桌面 2 栏 → 手机 1 栏。渐变聚光卡在所有视口保留
{rounded.xxl}角 —— 它们不出血。 - 价格对比表：810px 以下折为按档手风琴以避免水平滚动。
- 展示字：
{typography.display-xxl}110px 在平板上缩向{typography.display-lg}62px，手机上缩为{typography.display-md}32px，保留百分比负字距。
图片行为
- 嵌入的产品 mockup（内含 Framer 构建站点的浏览器框架）保持其宽高比，从不裁剪。
- 渐变聚光卡在各断点保留渐变方向 —— 渐变方向是品牌规范的一部分。
迭代指南
- 一次专注一个组件并通过其
components:token 名引用（如{components.button-primary}、{components.gradient-spotlight-card}）。 - 在深色画布上引入新章节时，先决定它住在哪个表面浮起 —— hero/FAQ 用
{colors.canvas}，卡片用{colors.surface-1}，主推卡用{colors.surface-2}。深度选择是最有决定性的决策。 - 默认正文为带全部文档化 OpenType 变体的
{typography.body}；仅在聚光卡内使用{typography.subhead}。 - 编辑后运行
npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio和orphaned-tokens警告自动标记问题。 - 添加新变体作为独立组件条目（
-pressed、-featured、-selected）—— 不要埋在散文中。 - 把
{colors.accent-blue}视为一次性信号色：超链接、焦点和选中 —— 仅此而已。如果你伸手要第二个蓝，品牌就在漂移。 - 渐变聚光卡因设计而稀缺。每长页一两个是规范；三个是情绪板。
已知缺口
- 聚光卡的精确渐变停止点来自截图像素而非 CSS 变量 —— 生产渐变可能定义为单个元素上的
linear-gradient字符串而非设计 token。文档化的{colors.gradient-*}hex 值视为基锚，非精确渐变规范。 - 表单字段验证 / 错误样式在检查的页面上不可见，因为静态截图中无错误状态渲染。
- 深色模式是唯一模式 —— 未文档化浅色模式适配，因为营销站不出货浅色。
- 市场的模板详情页返回的 CSS 变量数据比其他页更稀疏；该页的表面 token 由匹配的首页 / 画廊处理推断而非直接提取。