Figma

version: alpha name: Figma-design-analysis description: "A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each story section drops the page into a saturated lime, lavender, cream, mint, or pink panel that reads like a sticky note placed on a clean desk. The result is a design system that feels both technical and joyful — a tool for serious work, made by people who like color."

colors: primary: "#000000" on-primary: "#ffffff" ink: "#000000" canvas: "#ffffff" inverse-canvas: "#000000" inverse-ink: "#ffffff" on-inverse-soft: "#ffffff" hairline: "#e6e6e6" hairline-soft: "#f1f1f1" surface-soft: "#f7f7f5" block-lime: "#dceeb1" block-lilac: "#c5b0f4" block-cream: "#f4ecd6" block-pink: "#efd4d4" block-mint: "#c8e6cd" block-coral: "#f3c9b6" block-navy: "#1f1d3d" accent-magenta: "#ff3d8b" semantic-success: "#1ea64a" overlay-scrim: "#000000"

typography: display-xl: fontFamily: figmaSans fontSize: 86px fontWeight: 340 lineHeight: 1.00 letterSpacing: -1.72px fontFeature: kern display-lg: fontFamily: figmaSans fontSize: 64px fontWeight: 340 lineHeight: 1.10 letterSpacing: -0.96px fontFeature: kern headline: fontFamily: figmaSans fontSize: 26px fontWeight: 540 lineHeight: 1.35 letterSpacing: -0.26px fontFeature: kern subhead: fontFamily: figmaSans fontSize: 26px fontWeight: 340 lineHeight: 1.35 letterSpacing: -0.26px fontFeature: kern card-title: fontFamily: figmaSans fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0 fontFeature: kern body-lg: fontFamily: figmaSans fontSize: 20px fontWeight: 330 lineHeight: 1.40 letterSpacing: -0.14px fontFeature: kern body: fontFamily: figmaSans fontSize: 18px fontWeight: 320 lineHeight: 1.45 letterSpacing: -0.26px fontFeature: kern body-sm: fontFamily: figmaSans fontSize: 16px fontWeight: 330 lineHeight: 1.45 letterSpacing: -0.14px fontFeature: kern link: fontFamily: figmaSans fontSize: 20px fontWeight: 480 lineHeight: 1.40 letterSpacing: -0.10px fontFeature: kern button: fontFamily: figmaSans fontSize: 20px fontWeight: 480 lineHeight: 1.40 letterSpacing: -0.10px fontFeature: kern eyebrow: fontFamily: figmaMono fontSize: 18px fontWeight: 400 lineHeight: 1.30 letterSpacing: 0.54px fontFeature: kern caption: fontFamily: figmaMono fontSize: 12px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0.60px fontFeature: kern

rounded: xs: 2px sm: 6px md: 8px lg: 24px xl: 32px pill: 50px full: 9999px

spacing: hair: 1px xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 20px button-primary-pressed: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px 10px button-tertiary-text: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.link}" rounded: "{rounded.full}" padding: 8px 12px button-icon-circular: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px button-icon-circular-inverse: backgroundColor: "{colors.on-inverse-soft}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px button-magenta-promo: backgroundColor: "{colors.accent-magenta}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 18px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px pricing-tab-selected: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 14px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 14px pricing-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card-feature-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" color-block-section: backgroundColor: "{colors.block-lime}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px color-block-section-lilac: backgroundColor: "{colors.block-lilac}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px color-block-section-navy: backgroundColor: "{colors.block-navy}" textColor: "{colors.inverse-ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px promo-banner-lilac: backgroundColor: "{colors.block-lilac}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 16px 24px template-card: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 16px feature-illustration-tile: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.md}" padding: 24px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px marquee-strip: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 36px comparison-checkmark: backgroundColor: "{colors.canvas}" textColor: "{colors.semantic-success}" typography: "{typography.body-sm}" rounded: "{rounded.full}" size: 16px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

Overview

Figma's marketing canvas is, at the system level, an editor-clean black-and-white frame. The chrome — top nav, body type, footer, primary CTA — is monochrome. Headlines are oversized {typography.display-xl} set in figmaSans with aggressive negative tracking, body copy hovers around weight 320–340 of the same variable family, and small mono {typography.eyebrow} and {typography.caption} labels (figmaMono, all-caps, positive tracking) act as section markers. Every CTA is a pill — {rounded.pill} — and the primary action across the entire site is the same black {components.button-primary} paired with the same white {components.button-secondary}.

What makes the design unique is what happens between those monochrome bookends: the page repeatedly drops into oversized pastel color-block sections — lime, lavender, cream, mint, pink, coral, and a deep navy — that span the full content width with {rounded.lg} corners and {spacing.xxl} interior padding. These blocks are where the storytelling lives. They aren't accents tucked into a card; they take over a whole viewport's worth of vertical space, like a designer arranging giant sticky notes on a clean wall. FigJam is the most pastel-saturated, the home page rotates through the full set, and the pricing page ends with a lime FAQ panel — same vocabulary, different rhythm per route.

This is a system built on contrast: the monochrome chrome makes the color blocks feel intentional rather than decorative, and the color blocks make the monochrome chrome feel like editorial paper rather than enterprise SaaS. Density is generous, line-heights are tight on display sizes, and the interface never reaches for shadows or gradients to do the work that color blocks and confident typography already do. 关键特征：

• 单色系统核心：{colors.primary}（黑）和 {colors.canvas}（白）承担每个 CTA、每行正文、每个页脚链接。
• 超大的粉彩色块章节（{colors.block-lime}、{colors.block-lilac}、{colors.block-cream}、{colors.block-mint}、{colors.block-pink}、{colors.block-coral}、{colors.block-navy}）定义每篇长文的叙事节奏。
• 胶囊是唯一的按钮形状 —— 文字 CTA 用 {rounded.pill}，图标按钮用 {rounded.full}。无方形按钮。
• figmaSans 可变字体以异常细微的字重增量使用（320、330、340、450、480、540）—— 字体系统读作一个调节而非分级字重家族的声音。
• 展示尺寸的紧致负字距（86px 时 -1.72px，64px 时 -0.96px）创造自信的编辑式节奏。
• figmaMono 留给分类标签、眉板和说明 —— 始终大写、正字距 —— 用于标记分类而不与展示字竞争。
• 色块页面节奏（首页）：白色 hero → 走马灯条 → 白色功能 → 绿色系统块 → 藏青 ship-products 块 → 珊瑚开发者块 → 白色模板栅格 → 白色页脚。

配色

来源页面：figma.com（首页）、/design/、/figjam/brainstorming-tool/、/pricing/、/contact/。

品牌与点缀

• 黑（{colors.primary}）：系统主色。每个主 CTA、每个标题、每行正文、走马灯条、深色章节的反向画布。
• 白（{colors.on-primary}）：黑底上的反向文字；也作为次要胶囊按钮（{components.button-secondary}）前景使用的画布色。
• 品红促销（{colors.accent-magenta}）：唯一饱和的 CTA 粉，仅用于促销行内按钮 —— 例如在淡紫 "Save your spot" Release Notes 横幅上出现。克制使用；它不是章节色。

表面

• 画布（{colors.canvas}）：默认页面背景和每个白卡的卡身。
• 反向画布（{colors.inverse-canvas}）：页脚、走马灯条、以及部分 "ship products" 风格故事章节。
• 表面柔（{colors.surface-soft}）：用于白画布上图标按钮、模板卡和功能插图瓦的近白瓦底。
• 细线（{colors.hairline}）：表单输入、价格卡和表格分隔线上的 1px 边框。
• 细线柔（{colors.hairline-soft}）：更细的分隔线 —— 对比表行分隔和页脚列分隔。
• 色块绿（{colors.block-lime}）：标志性的系统 / FAQ / 联系表单色块。在首页、价格、联系页重复出现。
• 色块淡紫（{colors.block-lilac}）：/design/ 上的 hero 块；也是行内 Release Notes 促销横幅。
• 色块奶（{colors.block-cream}）：柔暖背景 —— FigJam hero 条、模板栅格章节。
• 色块薄荷（{colors.block-mint}）：FigJam 粉彩章节。
• 色块粉（{colors.block-pink}）：FigJam 粉彩章节。
• 色块珊瑚（{colors.block-coral}）：首页 "Ship products" 珊瑚故事块。
• 色块藏青（{colors.block-navy}）：深靛蓝故事块 —— 页脚之上唯一出现深色的地方。

文字

• 主墨（{colors.ink}）：浅色表面上所有标题、正文和说明文字。营销页上没有更柔的中间灰文字角色 —— 正文始终是 320–340 字重的黑，字重（而非不透明度）承载层级。
• 反向墨（{colors.inverse-ink}）：反向画布表面（页脚、走马灯条、藏青色块）上的字体。
• 在反色上柔（{colors.on-inverse-soft}）：用于深色章节上圆形图标按钮表面的 ~16% 不透明度白（token 捕获基色；半透明度在渲染时应用）。

语义

• 成功绿（{colors.semantic-success}）：价格对比表上的勾。作为图标记填充使用，不作为表面。
• 遮罩（{colors.overlay-scrim}）：用于模态 / 视频遮罩表面后的 ~60% 不透明度黑（token 捕获基色；不透明度在渲染时应用）。

字体

字体族

• figmaSans —— Figma 的专有可变字体；降级栈 figmaSans Fallback, SF Pro Display, system-ui, helvetica。可变字重轴以异常细微的增量使用（320、330、340、450、480、540、700）—— 设计系统读作一个调节而非分级字重家族的声音。
• figmaMono —— 专有等宽字体；降级 figmaMono Fallback, SF Mono, menlo。仅用于眉板标签和说明，始终大写配正字距。

OpenType kern 在所有角色上启用。

层级

原则

• 字重，而非字号，承担正文层级。 20px 字重 330 的段落与 20px 字重 480 的链接并排 —— 眼睛在无字号变化的情况下读出强调。
• 负字距随字号缩放。 display-xl 拉 -1.72px；subhead 仅拉 -0.26px。正文保持接近 0。结果是编辑感展示字而不牺牲正文字号的可读性。
• 等宽是分类标签，而非正文。 figmaMono 仅用于眉板和说明 —— 绝不用于排段。
• 展示紧行高，正文松行高。 展示尺寸 1.00–1.10；正文 1.40–1.45。对比强化"标题是图形、正文用于阅读"。

字体替代说明

如果在没有 figmaSans / figmaMono 的情况下实现，合适的开源替代是无衬线用 Inter（或 Geist），等宽用 JetBrains Mono（或 Geist Mono）。Inter 的可变字重与 figmaSans 使用的细粒度字重轴紧密匹配；预计手动调低行高约 0.02 以补偿 Inter 略大的 x 高度。

布局

间距系统

• 基础单位：8px。
• Token（前置数据）：{spacing.hair} 1px · {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• 章节内部内边距：色块章节上 {spacing.xxl}（48px）。
• 卡片内部内边距：价格卡和模板瓦上 {spacing.lg}（24px）。
• 表单输入内边距：12px 垂直 · 14px 水平。
• 按钮内边距：胶囊按钮 {spacing.xs} 8px 垂直 · {spacing.lg} 24px 水平（button-secondary 上提取的非对称 8px 18px 10px 在胶囊内光学居中文字）。
• 通用节奏常量：{spacing.section}（96px）—— 主要内容章节之间的垂直间距在首页、价格和 FigJam 页之间保持。

网格与容器

• 最大内容宽约 1280px（明确的断点之一），侧沟槽从桌面的 {spacing.xxl} 缩到手机的 {spacing.lg}。
• 桌面价格对比和 FigJam 模板画廊上三栏和四栏栅格。
• 色块章节打破列栅格 —— 它们在圆角 {rounded.lg} 内跨内容宽满版，然后在内部放置单列编辑式标题 + 正文。

留白哲学

留白用于让色块感觉有意为之。在每个染色面板和下一个之间，页面返回白画布配 {spacing.section} 呼吸空间。在色块内部，字体本身获得慷慨的侧边距（通常超过块宽的 1/4 在每侧），使面板读作海报，而非文字墙。

层次与深度

Figma 的营销系统刻意投影少 —— 色块代替传统的层次。在大多数 SaaS 站点使用带阴影的白卡引起注意的地方，Figma 使用饱和背景面板。这让罕见的实际阴影（例如悬浮在奶色章节上的模板卡）感觉是值得注意的例外。

装饰性深度

• 色块章节是主要的深度设备。从白画布到绿/淡紫/奶的变化即是章节分隔。
• 便利贴风格组件缩略图 在 FigJam 中 —— 略带偏轴的粉彩矩形像板上的便利贴一样排列 —— 读作拼贴，而非卡片堆叠。
• 嵌入的产品 UI mock（Figma Design 面板、FigJam 画布片段）以平整构图出现在色块上；其内部阴影是克制的，停留在 mock 内。

形状

圆角等级

摄影与插画几何

• 图像框使用 {rounded.md}（8px） —— 足够友好、足够保守以读作编辑式。
• 首页栅格上的模板缩略图放在 {rounded.md} 瓦中，嵌入预览周围有 {spacing.md} 内边距。
• FigJam 粉彩便利贴组件缩略图保留小 {rounded.sm} 角，模拟真实便利纸。
• 营销表面上无头像圆 —— Figma 营销避免拟人化。

组件

按钮

button-primary —— 黑色 "Get started for free" 胶囊，出现在顶栏、每个 hero 和每个收尾 CTA。

• 底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}，内边距 10px 20px，圆角 {rounded.pill}。
• 按下态在 button-primary-pressed 中（同一表面；线上站点依赖微缩放而非深色填充）。

button-secondary —— 黑字白胶囊。用于次要导航动作（"Contact sales"），并作为主胶囊的视觉对应。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.button}，内边距 8px 18px 10px（垂直非对称以光学居中字体），圆角 {rounded.pill}。无边框。

button-tertiary-text —— 顶栏和页脚内样式化为按钮命中目标的纯文字链接。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.link}，圆角 {rounded.full}（仅命中目标），内边距 {spacing.xs} {spacing.sm}。

button-icon-circular —— 40px 圆形图标按钮，用于轮播控件、社交链接和浅色表面上的行内操作。

• 底色 {colors.surface-soft}，文字 {colors.ink}，圆角 {rounded.full}，尺寸 40px。

button-icon-circular-inverse —— 同一形状，用于反向画布 / 深色块。

• 底色 {colors.on-inverse-soft}（半透明白），文字 {colors.inverse-ink}，圆角 {rounded.full}，尺寸 40px。

button-magenta-promo —— 饱和粉胶囊，仅用于促销表面，如淡紫 "Save your spot" Release Notes 横幅。留给 Figma 产品团队希望 CTA 在已染色面板上突出的瞬间。

• 底色 {colors.accent-magenta}，文字 {colors.on-primary}，字体 {typography.button}，圆角 {rounded.pill}，内边距 10px 18px。

价格 tab

pricing-tab-default + pricing-tab-selected —— 在 /pricing/ 上切换 Starter / Professional / Organization / Enterprise 的胶囊切换。

• 默认：{colors.canvas} 底色，{colors.ink} 文字，圆角 {rounded.pill}。
• 选中：{colors.primary} 底色，{colors.on-primary} 文字 —— 与 button-primary 完全相同的表面，这让选中 tab 读作"激活的 CTA"而非被动状态。

输入与表单

text-input + text-input-focused —— /contact/ 和价格席位数调节器上的表单字段。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.md}，内边距 12px 14px。
• 聚焦态保留同一表面 —— 焦点通过 ring 传达，而非填充变化。

卡片与容器

pricing-card —— /pricing/ 上的每档。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 {spacing.lg}。用 {colors.hairline} 描边而非投影。

pricing-card-feature-row —— 对比表中的单行。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}。行分隔是 {colors.hairline-soft}。

template-card —— 首页 "Explore what people are making" 栅格和 FigJam 模板画廊中的缩略图瓦。

• 底色 {colors.surface-soft}，文字 {colors.ink}，字体 {typography.body-sm}，圆角 {rounded.md}，内边距 {spacing.md}。

feature-illustration-tile —— 承载产品 UI mock 或粉彩插画的较大构图瓦。

• 底色 {colors.surface-soft}，文字 {colors.ink}，字体 {typography.eyebrow}，圆角 {rounded.md}，内边距 {spacing.lg}。

色块章节（标志性）

Figma 营销的定义表面。每个是带 {rounded.lg} 角和 {spacing.xxl} 内部内边距的满内容宽面板。变体：

color-block-section —— 用于（首页）"systems" 故事、价格 FAQ 和联系表单的绿色地面。

• 底色 {colors.block-lime}，文字 {colors.ink}，字体 {typography.subhead}，圆角 {rounded.lg}，内边距 {spacing.xxl}。

color-block-section-lilac —— /design/ hero 和 FigJam 突出章节的淡紫地面。

• 底色 {colors.block-lilac}，其他结构相同。

color-block-section-navy —— 首页 "Ship products" 故事块的深靛蓝地面。页脚之上唯一的反向色块表面。

• 底色 {colors.block-navy}，文字 {colors.inverse-ink}，其他结构相同。

（奶、薄荷、粉、珊瑚块变体遵循相同形状使用各自的 {colors.block-*} 表面。）

促销横幅

promo-banner-lilac —— Release Notes / "Save your spot" 行内横幅，悬浮在联系表单之上。

• 底色 {colors.block-lilac}，文字 {colors.ink}，字体 {typography.body-sm}，圆角 {rounded.md}，内边距 {spacing.md} {spacing.lg}。右缘带 button-magenta-promo。

导航

top-nav —— 粘性白条带，带 logo、主导航链接、登录链接，以及右锚定的 button-secondary（"Contact sales"）+ button-primary（"Get started for free"）对。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，高 56px。
• 手机：主链接折为汉堡打开满画布遮罩；两个胶囊 CTA 在条带上保持可见。

marquee-strip —— 顶栏下方的细黑带，滚动展示白色客户 logo。

• 底色 {colors.inverse-canvas}，文字 {colors.inverse-ink}，字体 {typography.body-sm}，高 36px。

对比图

comparison-checkmark —— 价格对比矩阵中使用的绿色勾。

• 底色 {colors.canvas}，图色 {colors.semantic-success}，圆角 {rounded.full}，尺寸 16px。

页脚

footer —— 白画布上的密集链接栅格，wordmark "Figma" 以展示字重设置在左上。

• 底色 {colors.canvas}，文字 {colors.ink}，列标题和小链接用 {typography.caption}，内边距 {spacing.section} 上下 · {spacing.xl} 两侧。

推荐与避免

推荐

• 把 {colors.primary} 留给真正的主 CTA 和选中状态（如 pricing-tab-selected）。不要用作装饰点缀。
• 引入故事章节时，从 {colors.block-*} 家族中选一个色块，让它跨满内容宽配 {rounded.lg} 角和 {spacing.xxl} 内部内边距。
• 用 figmaSans 可变字重 —— 从 320、330、340、480、540、700 中选以表达层级。避免此集合外的中间字重。
• figmaMono 仅用于眉板和说明，始终大写，用文档化的正字距。
• 把每个 CTA 组成胶囊（{rounded.pill}），每个图标按钮组成圆（{rounded.full}）。
• 允许页面在每两个色块之间返回白画布，让每个块读作有意为之。
• 当章节需要主操作和销售/次要操作时配对 button-primary 和 button-secondary —— 黑白对是品牌签名。

避免

• 不要引入中间灰文字。正文层级来自 figmaSans 字重，而非不透明度。
• 不要给色块章节加投影 —— 颜色就是深度设备。
• 不要在文档化的 {colors.block-*} 调色板和 {colors.accent-magenta} 之外引入新点缀色。添加例如饱和品牌橙会破坏系统。
• 不要在单个视口内组合多个色块可见 —— Figma 的节奏总是让白画布分隔它们。
• 不要让 CTA 方角化。方形按钮读作另一个品牌。
• 不要把 figmaMono 放进正文 —— 它是分类工具，不是阅读字体。
• 不要用染色 tab 替换 pricing-tab-selected 黑底色；品牌模式是"选中 = 主表面"。

响应式行为

断点

触控目标

• 胶囊按钮（button-primary、button-secondary）在所有视口保持最小 44px 触摸高度 —— 通过组合 {typography.button} 20px 行高和文档化的垂直内边距实现。
• 圆形图标按钮（button-icon-circular）桌面 40px，触屏视口扩到 44px。
• /contact/ 上的表单输入最小触摸目标 48px 高。

折叠策略

• 导航：桌面水平导航配两个右锚定胶囊在 960px 以下折为汉堡遮罩。两个胶囊（Contact sales、Get started for free）在 560px 以上保持在条带可见，并在遮罩内堆叠。
• 价格档栅格：4 栏 → 960px 时 2 栏 → 768px 以下 1 栏。胶囊切换保持水平，560px 以下需要时水平滚动。
• 色块章节：768px 以上章节保留周围 {spacing.xxl} 画布以读出圆角；768px 以下移除角，块出血到视口边缘以获海报效果。
• 对比表：960px 以下矩阵折为按档手风琴以避免水平滚动。

图片行为

• 色块内的产品 UI mock 按比例缩放，从不裁剪。768px 以下它们缩小而非重排。
• 首页栅格中的模板缩略图使用懒加载并在滚动时动画进入。
• 便利贴风格 FigJam 缩略图在各断点保留其轻微偏轴旋转 —— 旋转是品牌信号，不是桌面端专属的装饰。

迭代指南

1. 一次专注一个组件并通过其 components: token 名引用（如 {components.button-primary}、{components.color-block-section}）。
2. 引入新章节时，先决定它坐在哪个 {colors.block-*} token 上；表面选择是最有决定性的决策。
3. 默认正文字体为 {typography.body}；仅在色块内使用 {typography.subhead} 或 {typography.headline}。
4. 编辑后运行 npx @google/design.md lint DESIGN.md —— broken-ref、contrast-ratio 和 orphaned-tokens 警告自动标记问题。
5. 添加新变体作为独立组件条目（-pressed、-selected）—— 不要埋在散文中。
6. 让 {colors.primary} 保持稀缺。如果两个 button-primary 实例出现在同一视口，章节做得太多 —— 把一个中和为 button-secondary。
7. 把 {colors.accent-magenta} 视为一次性颜色：每页一个促销 CTA，从不两个。

已知缺口

• {colors.block-*} 的精确粉彩 hex 值来自截图像素；生产源码可能使用未通过 CSS 变量暴露的命名 token。文档化的 hex 值视为忠实的近似而非精确品牌规范。
• 未文档化暗色模式，因为营销站不出货暗色主题 —— 最接近的类比是藏青色块（color-block-section-navy）和反向画布页脚。
• /contact/ 上不可见表单字段错误和校验样式，因为静态截图中无错误状态渲染。输入有细线边框和圆角 {rounded.md}；错误处理未文档化。
• 动画走马灯条和色块揭示动画未文档化（根据无交互政策）。