version: alpha name: Replicate-design-analysis description: | Replicate's marketing surfaces pair the warm-cream developer-tools aesthetic of an indie ML playground with a confident hot-orange brand accent and a signature display typeface (rb-freigeist-neue) sized aggressively large at 72px+. The system reads as "AI lab notebook crossed with print magazine": cream and bone surfaces, dark ink type, monospace code wells, irregular hand-drawn-feeling diagrams, and a rich orange used scarcely on the most consequential CTA. Photography of contributors and example outputs is square-ish with mid-radius corners; everything else is borderless or hairline.
colors: primary: "#ea2804" primary-deep: "#c01f00" on-primary: "#ffffff" ink: "#202020" body: "#3a3a3a" charcoal: "#575757" mute: "#646464" ash: "#8d8d8d" stone: "#bbbbbb" on-dark: "#fcfcfc" on-dark-mute: "rgba(252,252,252,0.72)" canvas: "#f9f7f3" surface-bone: "#f3f0e8" surface-card: "#ffffff" surface-dark: "#202020" surface-deep: "#000000" hairline: "rgba(32,32,32,0.12)" hairline-strong: "#202020" divider-dark: "rgba(255,255,255,0.2)" hero-warm: "#ea2804" hero-glow: "#ff6a3d" hero-pink: "#f4a8a0" badge-success: "#2b9a66" link: "#ea2804" ring-focus: "rgba(59,130,246,0.5)" github-dark: "#24292e"
typography: display-xxl: fontFamily: rb-freigeist-neue fontSize: 128px fontWeight: 700 lineHeight: 1.0 letterSpacing: -3px display-xl: fontFamily: rb-freigeist-neue fontSize: 72px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.8px display-lg: fontFamily: rb-freigeist-neue fontSize: 48px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1px display-md: fontFamily: rb-freigeist-neue fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.5px heading-lg: fontFamily: basier-square fontSize: 38.4px fontWeight: 600 lineHeight: 0.83 letterSpacing: -0.5px heading-md: fontFamily: basier-square fontSize: 24px fontWeight: 600 lineHeight: 1.33 letterSpacing: -0.35px heading-sm: fontFamily: basier-square fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: -0.3px subtitle: fontFamily: rb-freigeist-neue fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: 0 body-lg: fontFamily: basier-square fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: basier-square fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: basier-square fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 button-md: fontFamily: basier-square fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 button-sm: fontFamily: basier-square fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: basier-square fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 caption-tight: fontFamily: basier-square fontSize: 14px fontWeight: 600 lineHeight: 1.43 letterSpacing: -0.35px code-md: fontFamily: jetbrains-mono fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 code-sm: fontFamily: jetbrains-mono fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0
rounded: none: 0px xs: 4px sm: 6px md: 10px lg: 16px full: 9999px
spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px xxxl: 48px section: 96px band: 160px
components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px button-primary-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" button-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px button-outline: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 11px 23px height: 44px button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 16px height: 36px button-icon: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 12px 20px height: 44px hero-band: backgroundColor: "{colors.hero-warm}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 96px 32px model-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px collection-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: 24px pricing-tier: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code-md}" rounded: "{rounded.md}" padding: 24px code-tab: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-dark-mute}" typography: "{typography.code-sm}" rounded: "{rounded.xs}" padding: 6px 12px badge-status: backgroundColor: "{colors.badge-success}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 10px badge-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 10px nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.none}" height: 60px sub-nav-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 14px contributor-avatar: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px footer: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 32px
概述
Replicate 是一个具有艺术杂志灵魂的开发者工具平台。公共营销表面坐落在温暖的米色画布（{colors.canvas} — #f9f7f3）上，而非典型 AI 基础设施站点的白色或近黑色背景，这一个决定就影响了其他所有元素：摄影读起来像是编辑作品，代码井读起来像是印刷的引语，品牌橙（{colors.primary} — #ea2804）感觉像是印章而非通知。
字体是承载性的装饰。rb-freigeist-neue——一款偏重、略压缩的 grotesque——在首屏带中出现最大 128px 的尺寸，紧凑的 lineHeight: 1.0 和负字距让多行标题能打包成几何块。配套家族 basier-square 在 14–18px 范围内处理正文、按钮标签和元数据。JetBrains Mono 承载每个代码井、命令和示例。三个家族，三种工作，无重叠。
页面节奏在默认米色画布、大胆的全幅橙色首屏带和承载代码故事的 {colors.surface-dark}（#202020）section 之间循环——"how it works" 的演示。曲线是有意且柔和的：每个交互表面（按钮、输入、标签、头像）使用 {rounded.full}，而内容卡片和代码井升级到 {rounded.md} 或 {rounded.lg}。Replicate 没有锐角；系统读起来像友好的精确。
关键特征：
- 温暖的米色画布（
{colors.canvas}—#f9f7f3）取代典型的白色背景，配{colors.surface-bone}用于内嵌卡片。 - 热烈的橙色（
{colors.primary}—#ea2804）保留给主 CTA、首屏带和行内链接颜色。从不装饰。 - 展示标题尺寸巨大——首屏带中
{typography.display-xxl}128px，section 开场{typography.display-xl}72px，紧凑的lineHeight: 1.0和负字距。 - 三家族字体栈：
rb-freigeist-neue用于展示，basier-square用于 UI/正文，jetbrains-mono用于代码。 - 每个交互元素全圆角（
{rounded.full}9999px）——按钮、输入、徽标、头像——而内容卡片升级到{rounded.md}10px。 - 深色代码井（
{colors.surface-dark}背景）位于米色画布内作为全幅阅读表面，模仿印刷引语。 - Section 节奏：米色 → 橙色首屏 → 米色 → 深色代码故事带 → 米色 → 黑色页脚。
配色
品牌与点缀
- Replicate Orange（
{colors.primary}—#ea2804）：品牌点缀。保留给主 CTA、首屏带背景和行内链接颜色。像印章一样对待——每视口最多一个橙色元素。 - Orange Pressed（
{colors.primary-deep}—#c01f00）：{colors.primary}的激活/按下状态——用于{component.button-primary-pressed}。 - Hero Glow（
{colors.hero-glow}—#ff6a3d）：在首屏文案后面的氛围径向网格中出现的较浅橙色。 - Hero Pink（
{colors.hero-pink}—#f4a8a0）：暖粉色渲染，软化首屏带的下边缘，过渡到米色。 - On-Primary（
{colors.on-primary}—#ffffff）：{colors.primary}表面上的标签颜色。
表面
- Canvas（
{colors.canvas}—#f9f7f3）：默认页面背景。暖米色，从不是纯白色。 - Surface Bone（
{colors.surface-bone}—#f3f0e8）：内嵌卡片组和特性带使用的半步深米色。 - Surface Card（
{colors.surface-card}—#ffffff）：用于单个模型卡片、搜索输入和定价等级的纯白色——白色出现的唯一地方。 - Surface Dark（
{colors.surface-dark}—#202020）：代码井、特性定价等级和 "how it works" 演示带。 - Surface Deep（
{colors.surface-deep}—#000000）：页脚画布和{component.code-block}内的内嵌代码 tab 条。 - Hairline（
{colors.hairline}—rgba(32,32,32,0.12)）：米色表面上的低对比 1px 分隔线。 - Hairline Strong（
{colors.hairline-strong}—#202020）：按钮描边、聚焦输入和结构分隔线。
文字
- Ink（
{colors.ink}—#202020）：主文字颜色。值得注意的是比#000000更暖，与米色画布匹配。 - Body（
{colors.body}—#3a3a3a）：在 18px+ 行长下 ink 显得过重时的长篇正文。 - Charcoal（
{colors.charcoal}—#575757）：说明、元数据、次级导航。 - Mute（
{colors.mute}—#646464）：辅助文字和非激活标签。 - Ash（
{colors.ash}—#8d8d8d）：三级文字、占位符文案。 - Stone（
{colors.stone}—#bbbbbb）：禁用前景、中性图标描边。 - On-Dark（
{colors.on-dark}—#fcfcfc）：{colors.surface-dark}和{colors.surface-deep}上的主文字。 - On-Dark Mute（
{colors.on-dark-mute}—rgba(252,252,252,0.72)：深色区域内的次级文字；在没有纯白跳出的情况下保留偏白的感觉。
语义
- Success（
{colors.badge-success}—#2b9a66）：行内成功徽标和模型卡片上的 "running" 状态胶囊。 - Link（
{colors.link}—#ea2804）：行内链接颜色——与主橙相同，故意将链接拉入品牌点缀。 - Focus Ring（
{colors.ring-focus}—rgba(59,130,246,0.5)：交互元素上的默认聚焦环。 - GitHub Dark（
{colors.github-dark}—#24292e）：GitHub 品牌的按钮表面（故意保持非品牌以匹配 GitHub 自己的 token）。
字体排版
字体族
Replicate 提供一个明确的三个家族栈：
- rb-freigeist-neue——专有的偏重 grotesque，用于所有展示尺寸（30px+）。通过紧凑的
lineHeight: 1.0和负字距承载编辑杂志的性格。 - basier-square——专有的人文无衬线，用于正文、按钮标签、说明和元数据。
- jetbrains-mono——开源 monospace，用于每个代码井和行内命令。
当专有家族无法授权时，Bricolage Grotesque 或 Migra 是 rb-freigeist-neue 的可信替代，Geist 或 Inter 可以替代 basier-square。JetBrains Mono 是开源的，应当始终直接使用。
层级
| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
{typography.display-xxl} | 128px | 700 | 1.0 | -3px | 单一首屏 "Run AI" / "Imagine what you can build" 标题。每页一个。 |
{typography.display-xl} | 72px | 700 | 1.0 | -1.8px | section 开场（"How it works"、"Scale on Replicate"）。 |
{typography.display-lg} | 48px | 700 | 1.0 | -1px | 子 section 标题、定价等级名称。 |
{typography.display-md} | 30px | 600 | 1.2 | -0.5px | 特性卡片标题。 |
{typography.heading-lg} | 38.4px | 600 | 0.83 | -0.5px | 紧凑堆叠的 basier-square 标题，用于定价和企业首屏。 |
{typography.heading-md} | 24px | 600 | 1.33 | -0.35px | 卡片标题、模型详情标题。 |
{typography.heading-sm} | 20px | 600 | 1.4 | -0.3px | 列表 section 标题。 |
{typography.subtitle} | 18px | 600 | 1.56 | 0 | 展示 section 中的引导段落。 |
{typography.body-lg} | 18px | 400 | 1.56 | 0 | 营销散文。 |
{typography.body-md} | 16px | 400 | 1.5 | 0 | 默认正文。 |
{typography.body-sm} | 14px | 400 | 1.43 | 0 | 说明、元数据。 |
{typography.button-md} | 16px | 600 | 1.0 | 0 | 默认按钮标签。 |
{typography.button-sm} | 14px | 600 | 1.0 | 0 | 紧凑按钮标签、子导航胶囊。 |
{typography.caption} | 12px | 400 | 1.33 | 0 | 页脚披露、版权。 |
{typography.caption-tight} | 14px | 600 | 1.43 | -0.35px | 定价等级行中使用的强调型小说明。 |
{typography.code-md} | 14px | 400 | 1.43 | 0 | 代码块和行内代码。 |
{typography.code-sm} | 11px | 400 | 1.5 | 0 | 代码 tab 标签和小型行内 token。 |
原则
- 展示尺寸保持
lineHeight: 1.0（或{typography.heading-lg}上为 0.83），以便多行堆叠读作单一字体块。 - 负字距随尺寸缩放——更大的字体收紧更多（128px 时 -3px，20px 时降到 -0.3px）。正文字体保持在 0。
- 正文字重在
{typography.body-lg}和{typography.body-md}上保持 400——从不升至 500 以示强调。强调来自家族变化（basier-square → rb-freigeist-neue）而非字重。 - 代码从不设置为 basier-square，即便在小尺寸下——JetBrains Mono 承载每个字面命令、每个模型 slug、每个 API 调用。
关于字体替代
当专有家族不可用时，将展示 lineHeight 显式限制为 1.0 并在 display-xxl / display-xl 上应用 -3% 字距以匹配原始的紧凑度。替代品通常默认渲染时字距更宽。
布局
间距系统
- 基础单位：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}160px。 - Section padding：全宽带之间纵向
{spacing.section}（96px）；当带需要额外编辑性呼吸空间（首屏、收尾的 "Imagine what you can build" 条带）时为{spacing.band}（160px）。 - 卡片内 padding：
{component.model-card}上为{spacing.lg}（16px），{component.pricing-tier}上为{spacing.xxl}（32px）。
网格与容器
- 最大内容宽度 ≈ 正文 section 上 1280px，全幅运行的首屏带为 1440px。
- 模型网格 在集合上：桌面 4 列，tablet large 3 列，tablet 2 列，移动端 1 列。
- 定价：桌面 3 列居中网格，1024px 以下垂直堆叠；中心等级翻转为
{component.pricing-tier-featured}（深色反相）作为推荐选项。 - 代码故事 section：2 列分割——左侧叙述文案，右侧代码井——1024px 以下折叠为堆叠。
留白哲学
- 米色上的留白充裕且编辑性——section 在 96px 呼吸，关键带在 160px 开启，以便字体可以放大而不感拥挤。
- 卡片内，系统收紧到 16–32px，使模型缩略图、状态和元数据坐在紧凑的卡片列表节奏中。
- 发丝
{colors.hairline}分隔线在米色表面上取代阴影；在深色表面上，{colors.divider-dark}承担相同角色。
层次与深度
| 级别 | 处理 | 用途 |
|---|---|---|
| 0 — 平面 | 无阴影，无边框 | 默认米色画布、全幅带。 |
| 1 — 描边 | 1px 实线 {colors.hairline} 或 {colors.hairline-strong} | 模型卡片、定价等级、集合瓦片。 |
| 2 — bone 内嵌 | {colors.canvas} 带内向 {colors.surface-bone} 的表面色偏移 | 特性组容器、"How it works" 演示。 |
| 3 — 深色反相 | 卡片在米色背景上切换到 {colors.surface-dark} | 代码井、特性定价等级、"Scale on Replicate" 首屏卡片。 |
| 4 — 柔和投影 | 0 8px 24px rgba(32,32,32,0.08) | 悬停锚定的模型缩略图（仅视觉——未记录交互状态）。 |
投影存在于提取的 token 中但受到限制——谨慎地用于将摄影缩略图从米色画布上抬高一档。主导的层级语言是色块。
装饰性深度
- 首屏氛围网格——首页首屏后面的橙到粉渐变背景是一个分层径向网格：
{colors.primary}核心 →{colors.hero-glow}中间停 →{colors.hero-pink}外层渲染。仅保留给首页首屏带。 - 代码故事深色带——"How it works" section 使用全幅
{colors.surface-dark}，配单一发丝{colors.divider-dark}分隔叙述文案和代码井。 - 贡献者马赛克——首页有一个水平滚动的圆形头像（
{component.contributor-avatar}）带，置于有纹理的米色画布之上；这是头像在品牌级别出现的唯一位置。
形状
圆角刻度
| Token | 值 | 用途 |
|---|---|---|
{rounded.none} | 0px | 首屏带、全幅 section、页脚。 |
{rounded.xs} | 4px | 代码 tab、代码井内的行内标签。 |
{rounded.sm} | 6px | 中半径标注、小型内嵌芯片。 |
{rounded.md} | 10px | 模型卡片、集合瓦片、代码井。 |
{rounded.lg} | 16px | 定价等级、较大的特性卡片。 |
{rounded.full} | 9999px | 按钮、输入、徽标、头像、胶囊。 |
摄影几何
- 模型缩略图：方形（1:1），圆角
{rounded.md}，全幅图像到卡片边缘。 - 首屏示例输出：4:3 或 16:9，圆角
{rounded.md}。 - 贡献者头像：圆形（
{rounded.full}），首页上 40px，卡片元数据中 32px。 - 首屏带使用风格化的黑色墨水插画（"workbench 上的 tinkerer"）作为其摄影替代——保持在橙色带内而非覆盖在米色上。
组件
按钮
button-primary——橙色 CTA
- 背景
{colors.primary}，标签{colors.on-primary}，字号{typography.button-md}，padding12px 24px，rounded: {rounded.full}，高 44px。 - 页面上单个最重要的动作（例如 "Sign in with GitHub"、"Try a model"）。
- 按下状态位于
button-primary-pressed（背景{colors.primary-deep}）。
button-dark——深色 CTA
- 背景
{colors.surface-dark}，标签{colors.on-dark}，字号{typography.button-md}，rounded: {rounded.full}。 - 与
{component.button-primary}配对的等重次级动作，或在米色上橙色过于响亮时的主动作。
button-outline——描边 CTA
- 背景
{colors.surface-card}，标签{colors.ink}，1px 实线{colors.hairline-strong}，字号{typography.button-md}，rounded: {rounded.full}。 - 三级动作；与主/深色动作并排出现，用于 "View docs"、"Read more"。
button-ghost——行内按钮
- 背景
{colors.canvas}，标签{colors.ink}，无边框，字号{typography.button-md}，rounded: {rounded.full}，padding8px 16px。 - 卡片内和正文文案行内的子动作。
button-icon——图标按钮
- 背景
{colors.surface-card}，标签{colors.ink}，1px 实线{colors.hairline}，rounded: {rounded.full}，36×36px 圆形。 - 轮播箭头、复制到剪贴板、GitHub 链接图标。
卡片与容器
model-card——模型列表卡片
- 背景
{colors.surface-card}，文字{colors.ink}，字号{typography.body-md}，rounded: {rounded.md}，padding{spacing.lg}（16px）。 - 顶部方形缩略图，下方模型所有者 + 名称在
{typography.body-sm}中，单行描述在{colors.charcoal}中，状态胶囊{component.badge-status}在左下角。
collection-tile——模型集合瓦片
- 背景
{colors.canvas}，文字{colors.ink}，字号{typography.heading-md}，rounded: {rounded.md}，padding{spacing.xl}（24px）。 {colors.surface-bone}带内的米色上米色瓦片，用于浏览模型类别。
pricing-tier——定价等级卡片
- 背景
{colors.surface-card}，文字{colors.ink}，字号{typography.body-md}，rounded: {rounded.lg}，padding{spacing.xxl}（32px）。 - 3 列网格；等级名称在
{typography.display-lg}（"Free"、"Pro"、"Enterprise"），价格在{typography.display-md}。
pricing-tier-featured——特性定价等级
- 背景
{colors.surface-dark}，文字{colors.on-dark}，字号{typography.body-md}，rounded: {rounded.lg}，padding{spacing.xxl}。 - 中心等级翻转为深色反相以标记 "recommended"。
code-block——代码井
- 背景
{colors.surface-dark}，文字{colors.on-dark}，字号{typography.code-md}，rounded: {rounded.md}，padding{spacing.xl}（24px）。 - 顶部 tab 条使用
{component.code-tab}在语言之间切换（Python、Node.js、cURL、HTTP）。
code-tab——代码 tab 芯片
- 背景
{colors.surface-deep}，文字{colors.on-dark-mute}，字号{typography.code-sm}，rounded: {rounded.xs}，padding6px 12px。 - 激活 tab 将文字颜色切换为
{colors.on-dark}并在{colors.primary}中添加 2px 底部下划线。
hero-band——全幅首屏
- 背景
{colors.hero-warm}配以 Elevation 中详述的氛围网格，文字{colors.on-dark}，字号{typography.display-xxl}用于标题。 - 仅在首页使用；二级页面以米色 +
{typography.display-xl}开启。
输入与表单
text-input——默认输入
- 背景
{colors.surface-card}，文字{colors.ink}，字号{typography.body-md}，1px 实线{colors.hairline}，rounded: {rounded.full}，padding12px 20px，高 44px。 - 胶囊形搜索和电子邮件字段。聚焦状态添加
{colors.ring-focus}3px 环。
导航
nav-bar——顶部导航（桌面）
- 背景
{colors.canvas}，字号{typography.button-sm}，高 60px，单一底部发丝{colors.hairline}边框。 - 左：字标 logo。居中：顶层导航（"Explore"、"Pricing"、"Docs"、"Blog"）。右：GitHub 图标 + "Sign in" 链接 +
{component.button-primary}。
nav-bar（移动端）
- 相同高度 60px，居中导航折叠为汉堡图标。标志留在左侧，登录 CTA 留在右侧。
sub-nav-pill——子导航芯片
- 胶囊芯片设置在内容上方的水平行中（如 "All"、"Featured"、"Image generation"、"Audio"），配
{component.sub-nav-pill}样式。
标志性组件
badge-status——模型状态徽标
- 背景
{colors.badge-success}，标签{colors.on-dark}，字号{typography.caption}，rounded: {rounded.full}，padding4px 10px。 - 锚定在模型卡片的左下角以指示 "running" 或 "deployed"。
badge-tag——中性标签
- 背景
{colors.canvas}，标签{colors.ink}，1px 实线{colors.hairline}，字号{typography.caption}，rounded: {rounded.full}，padding4px 10px。 - 模型卡片上的能力标签（"text-to-image"、"video"、"audio"）。
contributor-avatar——社区贡献者
- 背景
{colors.surface-card}占位符于 1:1 摄影之后，rounded: {rounded.full}，40×40px（元数据上下文中 32px）。 - 用于首页贡献者马赛克。
footer——全局页脚
- 背景
{colors.surface-deep}，文字{colors.on-dark}，字号{typography.body-sm}，rounded: {rounded.none}，padding64px 32px。 - 多列快捷链接网格位于由
{colors.divider-dark}分隔的版权行之上。
推荐与避免
推荐
- 使用
{colors.canvas}（米色）作为默认页面背景。白色（{colors.surface-card}）仅出现在单个卡片、输入和首屏插画背景上。 - 将
{colors.primary}保留给主 CTA、首页首屏带和行内链接——三种角色，别无其他。 - 将每个交互元素设置为
{rounded.full}——按钮、输入、徽标、头像、胶囊。 - 将内容卡片升级到
{rounded.md}（10px）或{rounded.lg}（16px）——永远不要用锐角。 - 使用
{typography.display-xxl}（128px）和{typography.display-xl}（72px）以lineHeight: 1.0和负字距开启首屏带。 - 将
rb-freigeist-neue用于所有展示，basier-square用于 UI/正文，jetbrains-mono用于代码。保持车道严格。 - 在
{component.code-block}中以{colors.surface-dark}背景渲染代码——代码是印刷品，不是行内灰色框。 - 配
{rounded.md}角和卡片内全幅裁剪的摄影。
避免
- 不要在页面级别用纯白替换米色。品牌温度来自
{colors.canvas}。 - 不要引入次级品牌颜色。橙色是唯一的点缀；语义绿色和聚焦蓝是功能性的，不是装饰性的。
- 不要将展示
lineHeight放松到超过 1.0。紧凑堆叠是结构性的。 - 不要将正文字重升至 500 以示强调——改为变化家族（basier-square → rb-freigeist-neue）。
- 不要将
{rounded.full}应用于内容卡片。胶囊形卡片打破节奏。 - 不要将代码放在浅灰色框中。代码井始终是
{colors.surface-dark}或{colors.surface-deep}。 - 不要在正文文字或大表面上使用橙色——它立即失去印章质感。
- 不要在米色表面上添加投影。层级是色块；阴影保留给浮动缩略图。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Desktop XL | ≥ 1440px | 完整最大宽度 1280 正文，首屏带全幅运行，4 列模型网格。 |
| Desktop | 1280–1439px | 容器收缩；侧边 padding {spacing.xl}（24px）。 |
| Tablet Large | 1024–1279px | 模型网格 3 列，代码故事分割保持 2 列。 |
| Tablet | 768–1023px | 模型网格 2 列，代码故事堆叠（叙述在上，代码在下），定价垂直堆叠。 |
| Mobile Large | 426–767px | 模型网格 480px+ 1 列，导航折叠为汉堡，首屏 {typography.display-xxl} 限制为 64px。 |
| Mobile | ≤ 425px | 所有网格 1 列，首屏限制为 48px，section padding {spacing.section} 折叠为 64px。 |
触控目标
- 所有按钮在移动端至少 44px 高；默认
{component.button-primary}高 44px——舒适地通过 WCAG AAA。 {component.button-icon}（36px）在移动端通过增加 padding 提升至 44px。{component.sub-nav-pill}在桌面上保持 36px，在移动端通过垂直 padding 调整增长到 40px。
折叠策略
- 顶层导航在 < 1024px 时折叠为汉堡；字标和
{component.button-primary}保持锚定。 - 首屏
{typography.display-xxl}限制：128px → 96px → 64px → 48px 跨断点阶梯。 - 定价 3 列网格在 < 1024px 时垂直堆叠，特性等级保持居中堆叠。
- 代码故事分割在 < 1024px 时从并排切换到堆叠，代码井始终在第二位。
- 子导航胶囊在 < 768px 时从换行行转换为水平滚动条。
图像行为
- 模型缩略图以 1.5× 和 2× DPR 提供；768px 以下系统切换为 600×600 输出而非 1200×1200。
- 首屏氛围网格作为 CSS 渐变渲染——无资源成本，无断点变化。
- 代码块内容在 < 1024px 时柔和换行（无水平滚动）；长行使用延续标记换行。
迭代指南
- 一次专注于一个组件。大多数交互元素共享
{rounded.full}和{colors.canvas}/{colors.surface-card}对——只有角色专属 token（{colors.primary}、{component.code-block}）在变体之间变化。 - 直接引用组件名和 token（
{colors.primary}、{component.button-primary-pressed}、{rounded.lg}）——不要转述。 - 编辑后运行
npx @google/design.md lint DESIGN.md；orphaned-tokens 警告将捕获未使用的条目。 - 添加新变体作为单独的条目（
-pressed、-disabled、-featured）——不要将它们埋在正文中。 - 默认正文为
{typography.body-md}；仅在首屏副标题上使用{typography.subtitle}。 - 保持
{colors.primary}稀缺——如果每个视口出现一个以上橙色元素，问问其中一个是否应该改为{colors.surface-dark}。
已知缺口
- 激活/按下的视觉状态仅为
button-primary-pressed记录；其他组件依赖聚焦环（{colors.ring-focus}）进行交互反馈，该环未提取为按组件变体。 - 模型 playground / try-this-model 交互表面（已登录功能）超出范围；仅记录公共营销画布。
- 仪表板 / 计费 / API 密钥管理表面未提取——它们位于身份验证之后。
- 首页首屏插画（"workbench 上的 tinkerer"）被视为装饰艺术，而非系统组件；复制它需要定制插画而非 token。