Ollama

version: alpha name: Ollama-design-analysis description: | An almost defiantly minimal documentation-first system that treats the home page like a Markdown README — paper-white canvas, 36px center-aligned heading, a single black pill CTA, an inline terminal install snippet, and a hand-drawn llama mascot as the only ornamental element. No gradient, no hero photography, no marketing pyrotechnics. The chrome is a tiny utility palette of pure black, pure white, and three neutral grays; every interactive element is fully rounded into a pill ({rounded.full}); typography is SF Pro Rounded for headings paired with system sans for body and ui-monospace for code. Pricing tiers, FAQs, and "your data stays yours" guarantees all sit on the same flat canvas inside thin-border cards — the system is the documentation, and the documentation is the system.

colors: primary: "#000000" on-primary: "#ffffff" ink: "#000000" ink-deep: "#090909" charcoal: "#525252" body: "#737373" mute: "#a3a3a3" canvas: "#ffffff" surface-soft: "#fafafa" surface-card: "#ffffff" hairline: "#e5e5e5" hairline-strong: "#d4d4d4" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" surface-dark: "#171717" focus-ring: "rgba(59,130,246,0.5)" link: "#000000" link-mute: "#737373" terminal-red: "#ff5f56" terminal-yellow: "#ffbd2e" terminal-green: "#27c93f"

typography: display-xl: fontFamily: SF Pro Rounded fontSize: 36px fontWeight: 500 lineHeight: 1.11 letterSpacing: 0 display-lg: fontFamily: SF Pro Rounded fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-lg: fontFamily: SF Pro Rounded fontSize: 24px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0 heading-md: fontFamily: ui-sans-serif fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 heading-sm: fontFamily: ui-sans-serif fontSize: 18px fontWeight: 500 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: ui-sans-serif fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: ui-sans-serif fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: ui-sans-serif fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 body-sm-strong: fontFamily: ui-sans-serif fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 caption-sm: fontFamily: ui-sans-serif fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 code-md: fontFamily: ui-monospace fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 code-sm: fontFamily: ui-monospace fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 button-md: fontFamily: ui-sans-serif fontSize: 14px fontWeight: 500 lineHeight: 1 letterSpacing: 0

rounded: none: 0px sm: 6px md: 8px lg: 12px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 88px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 20px height: 36px button-primary-active: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 20px height: 36px button-pill-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 20px button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.mute}" rounded: "{rounded.full}" search-pill: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.full}" padding: 8px 16px height: 36px search-pill-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 8px 16px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" install-snippet: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.code-md}" rounded: "{rounded.full}" padding: 12px 20px height: 48px command-tag: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.code-sm}" rounded: "{rounded.full}" padding: 6px 12px terminal-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.code-sm}" rounded: "{rounded.lg}" padding: 16px terminal-traffic-lights: rounded: "{rounded.full}" size: 12px pricing-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px feature-bullet: textColor: "{colors.charcoal}" typography: "{typography.body-sm}" faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 16px 0px link-inline: textColor: "{colors.ink}" typography: "{typography.body-md}" link-mute: textColor: "{colors.body}" typography: "{typography.body-sm}" primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.caption-sm}" rounded: "{rounded.none}" padding: 32px 24px cta-strip-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-lg}" rounded: "{rounded.lg}" padding: 24px 32px

概述

Ollama 的网站是 AI 工具领域中最为激进的“低设计感”营销界面，而这正是其核心理念。首页读起来像一份经过精心渲染的 Markdown README：一个 36px 居中标题位于柔和灰色胶囊内的行内 curl 安装代码片段上方，配有唯一的黑色“Download”CTA，以及作为唯一装饰的手绘羊驼吉祥物。其他一切——工作自动化区块、“Start local. Scale cloud.”定价组合、“Your data stays yours”保障条、/pricing 上的 FAQ 墙——都位于同一张纸白色画布（{colors.canvas}）上，以低调的 {colors.body} 中性色承载正文。系统即文档，文档即系统。

设计理念以几何为核心：每个交互元素都归一为 {rounded.full}（9999px）——按钮、搜索胶囊、安装代码片段胶囊、文本输入框和终端交通灯圆点。没有装饰性投影、渐变，也没有除羊驼外的首屏插图。卡片（仅少量出现在 /pricing）使用柔和的 {rounded.lg}（12px）和 1px 细线。整套系统中唯一的反转时刻是深色“Max”定价层级——{colors.surface-dark} 搭配白色文字——它是刻意保持扁平的布局中唯一吸引注意力的表面。

字体排版将 SF Pro Rounded（展示标题，字重 500–600）与操作系统默认无衬线字体（ui-sans-serif，用于正文）及 ui-monospace（用于代码）搭配。标题字体的圆润感是界面唯一的“个性”——它温和呼应 {rounded.full} 按钮几何，却不显装饰化。

关键特征：

• 从头到尾使用纸白色 {colors.canvas}，不交替表面——整页是一张连续纸面
• 首屏居中对齐，使用 {typography.display-xl} SF Pro Rounded 标题；没有眉题，除羊驼下方一行小型“Power OpenClaw with Ollama”外没有副标题
• 胶囊几何无处不在：所有按钮和胶囊输入框均为 {rounded.full}；卡片使用 {rounded.lg}；除区块分隔线外，没有直角元素
• 单色 CTA 系统：纯黑 {colors.primary} 胶囊承载所有操作；定价卡片内的“Get Pro”/“Get Max”是唯一变体
• 以 {typography.code-md} 渲染的行内 curl 安装代码片段胶囊——最具标志性的元素，直接位于首屏标题下方
• 带 macOS 交通灯圆点和行内 ollama launch openclaw 示例的终端模拟卡片——首页唯一的“产品预览”
• 最高层级“Max”方案使用反转深色 {component.pricing-card-dark}，每页仅一次打破纯白扁平节奏

配色

来源页面： /（首页）和 /pricing。两者界面配色完全相同，仅内容不同。

品牌与点缀色

• 纯黑色（{colors.primary} — #000000）：品牌色。用于所有主 CTA、所有黑色胶囊、导航中的所有链接及所有实心图标。没有其他“品牌色”。
• 深墨色（{colors.ink-deep} — #090909）：主胶囊的按下状态黑色——仅比纯黑低一级。

表面

• 画布（{colors.canvas} — #ffffff）：页面本身。系统中几乎所有表面。
• 柔和表面（{colors.surface-soft} — #fafafa）：安装代码片段胶囊背景、搜索胶囊、次要标签背景，以及需要时的交替行填充。
• 深色表面（{colors.surface-dark} — #171717）：深色“Max”定价卡片和深色 CTA 条。系统中唯一的反转表面。
• 细线（{colors.hairline} — #e5e5e5）：1px 卡片边框、页脚上方分隔线、FAQ 行之间的分隔线。
• 强细线（{colors.hairline-strong} — #d4d4d4）：少量使用的略强分隔线，用于需要额外区分的位置（例如不相关的 FAQ 分组之间）。

文本

• 墨色（{colors.ink} — #000000）：所有标题、主导航链接、浅色表面上的按钮文字、定价卡片价格。
• 炭色（{colors.charcoal} — #525252）：列表项文字和禁用状态的次要文案。
• 正文色（{colors.body} — #737373）：段落文案、FAQ 答案、页脚链接文字的默认颜色——纯黑之后使用最多的文字颜色。
• 弱化色（{colors.mute} — #a3a3a3）：说明文字、终端模拟内命令行“注释”灰色、最低强调级别的工具文字。
• 深色表面文字（{colors.on-dark} — #ffffff）：{colors.surface-dark} 上的主要文字。
• 深色表面弱化文字（{colors.on-dark-mute} — rgba(255,255,255,0.7)）：深色“Max”定价卡片内的次要文案。

语义色

系统在公开营销表面中实际上没有错误/成功/警告配色——没有验证状态、破坏性流程或横幅。唯一的“语义”颜色是终端模拟内的 macOS 交通灯：

• 终端红色（{colors.terminal-red} — #ff5f56）：关闭窗口圆点。
• 终端黄色（{colors.terminal-yellow} — #ffbd2e）：最小化圆点。
• 终端绿色（{colors.terminal-green} — #27c93f）：缩放圆点。

这些颜色仅出现在 {component.terminal-card} 内，不作其他用途。

聚焦

• 聚焦环（{colors.focus-ring} — rgba(59,130,246,0.5)）：交互元素周围半透明蓝色浏览器默认聚焦环。系统中唯一的蓝色。

字体排版

字体族

• SF Pro Rounded（展示标题）——Apple 的圆润几何无衬线字体，以 500 和 600 字重用于从 {typography.display-xl}（36px）到 {typography.heading-lg}（24px）的标题。回退至 system-ui → -apple-system。
• ui-sans-serif（正文、链接、按钮、说明文字）——操作系统默认无衬线字体。承担 12–20px 的所有非展示文本角色。通过 system-ui 和平台 emoji 字体族回退。
• ui-monospace（代码、安装代码片段、命令标签）——操作系统默认等宽字体。用于终端模拟、行内 curl 安装胶囊以及所有行内 <code> 格式。回退至 SFMono-Regular → Menlo → Monaco → Consolas。

SF Pro Rounded 展示字体 + 系统无衬线正文 + 系统等宽代码的组合刻意呈现“原生 Apple”感——其设计决策就是不作字体设计决策。品牌化展示字体会与系统的文档感竞争。

层级

原则

字体排版旨在确保小字号文字在纯白画布上的易读性。SF Pro Rounded 标题字体柔和的末端几乎承担全部品牌表达；20px 以下的内容都归于操作系统默认无衬线字体，其渲染效果与 docs.ollama.com 以及 Ollama CLI 自身帮助文字在终端中的呈现一致。几乎没有字间距变化，没有仅供展示的字重，没有斜体，标题与正文的比例紧密压缩（36 → 30 → 24 → 20 → 16），因此页面读起来是一列连贯可读的内容，而非营销式金字塔。

字体替代说明

SF Pro Rounded 采用 Apple 授权，仅随 macOS/iOS 提供。在其他系统上会回退至 system-ui（依据平台为 Segoe UI / Roboto / DejaVu Sans）——Ollama 明确接受标题字体在 Windows/Linux 上略有差异。最接近的开源替代是 Nunito（圆润几何无衬线字体，字重 500/600）。正文方面，Inter 与 system-ui 的渲染度量几乎完美匹配。代码方面，JetBrains Mono 或 Fira Code 是 ui-monospace 的典型开源替代。

布局

间距系统

• 基础单位： 8px（另提供更细的 2/4/6px 步进，用于紧凑的行内间隙）
• Token（front matter）： {spacing.xxs} (2px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (88px)
• 通用区块节奏： 每个页面都使用 {spacing.section}（88px）作为主要内容块之间的垂直间距（首屏 → 自动化 → 本地起步/云端扩展 → 数据归你所有 → 页脚开始使用号召）。这是系统中最大的单一间距 token，并被广泛使用。
• 卡片内部内边距： 定价卡片四周均使用 {spacing.xxl}（32px）；FAQ 行使用 {spacing.lg}（16px）垂直内边距，不设水平内边距。

网格与容器

• 最大宽度： 首页内容列约 720px（整个页面采用单一窄阅读列布局，仅特定区块内部可作双栏分割）。
• 定价网格： 桌面端 3 列卡片，最大内容宽度约 960px；低于 768px 时折叠为单列。
• 工作自动化分割： 桌面端为左侧文字/右侧终端模拟的 50/50 布局；移动端垂直堆叠，终端置于文字下方。
• FAQ： 单列堆叠行，在 720px 内容列内占满宽度。
• 页脚： 小型 body-sm 链接单行排列，桌面端居中对齐，窄屏下换成两行。

留白理念

留白就是全部布局。区块之间用 88px 的纯白空间分隔，而非装饰性分隔线或色带。区块内部，内容位于紧凑的阅读列中，没有装饰列、横幅框或抬升卡片。网站将页面视作长篇 Markdown 文档，区块间的空白等同于 Markdown 源码中的空行。

层次与深度

系统完全没有投影层次。没有元素抬起、悬浮或分层。除细线边框外，唯一的深度线索是最高层级定价卡片使用的单一深色表面，用于吸引注意力。

装饰性深度

网站实际上没有传统意义上的装饰性深度。“深度”完全来自两个反复出现的元素：

• 手绘羊驼吉祥物——在首屏顶部出现一次、每张定价卡片顶部出现一次，并在“Your data stays yours”区块中的锁图标旁出现一次。它是系统中唯一的插图。
• 单一线绘锁图标——用于数据隐私区块。仅描边、无填充，以 {colors.ink} 绘制。

形状

圆角比例

主导形状词汇只有两个值：所有交互元素使用胶囊（{rounded.full}），系统中少量卡片使用 12px（{rounded.lg}）。没有中等圆角的“柔和卡片”——表面要么是胶囊，要么是具有足够大圆角、明确呈现柔和感的矩形。

摄影几何

没有摄影。仅有的图像类元素包括：

• 羊驼吉祥物——手绘线条插图，首屏上约 80–120px，作为定价卡片眉题图标时约 32–48px。
• 锁图标——隐私区块中的单一描边线条图。
• macOS 交通灯圆点——终端模拟卡片内三个 12px（{rounded.full}）实心圆。

组件

根据系统策略，不记录悬停状态。每项规范仅涵盖默认和激活/按下状态。

按钮

button-primary —— 通用 Ollama CTA

• 背景 {colors.primary}、文字 {colors.on-primary}、字体 {typography.button-md}、内边距 8px 20px、高度 36px、圆角 {rounded.full}。
• 用于“Download”（顶部导航）、“Sign in”（顶部导航，与 Download 配对）、“Create account”、“Get Pro”、“Get Max”——系统中的每个主要操作。
• 按下状态在 button-primary-active 中定义——背景降为 {colors.ink-deep}。

button-secondary —— 浅色画布上的描边替代按钮

• 背景 {colors.canvas}、文字 {colors.ink}、1px solid {colors.hairline-strong}、字体 {typography.button-md}、内边距 8px 20px、高度 36px、圆角 {rounded.full}。
• 用作次要操作提示——例如顶部导航中与黑色“Download”胶囊配对的“Sign in”胶囊，以及紧凑形式的“See more apps →”箭头链接。

button-pill-on-dark —— 深色表面上的白色胶囊

• 背景 {colors.canvas}、文字 {colors.ink}、字体 {typography.button-md}、圆角 {rounded.full}。
• 位于深色“Max”定价卡片内，作为“Get Max”CTA——反转标准主按钮，使深色卡片本身成为视觉锚点，白色胶囊则作为 CTA 清晰可见。

button-disabled

• 背景 {colors.surface-soft}、文字 {colors.mute}、圆角 {rounded.full}——扁平柔和灰色。

输入框与表单

search-pill + search-pill-focused

• 默认：背景 {colors.surface-soft}、文字 {colors.ink}、字体 {typography.body-sm}、内边距 8px 16px、高度 36px、圆角 {rounded.full}。锚定在主导航中央，前缀为小型放大镜图标，占位文字为“Search models”。
• 聚焦：背景切换为 {colors.canvas}，并显示浏览器默认的 {colors.focus-ring} 半透明蓝色环。

text-input + text-input-focused

• 默认：背景 {colors.canvas}、1px solid {colors.hairline}、字体 {typography.body-md}、内边距 8px 16px、高度 40px、圆角 {rounded.full}。
• 聚焦：1px 墨色边框 + 浏览器默认聚焦环。

install-snippet —— 标志性安装胶囊

• 背景 {colors.surface-soft}、文字 {colors.ink}，以 {typography.code-md} 渲染，内边距 12px 20px、高度 48px、圆角 {rounded.full}。
• 包含原始安装命令 curl -fsSL https://ollama.com/install.sh | sh，右边缘有小型复制图标。直接位于首屏标题下方，是页面最突出的“CTA”。

command-tag —— 小型行内命令标签

• 背景 {colors.surface-soft}、文字 {colors.ink}、字体 {typography.code-sm}、内边距 6px 12px、圆角 {rounded.full}。
• 用于“Automate your work”区块中的 ollama launch openclaw 示例标签及类似行内命令演示。

卡片与容器

terminal-card —— 首页唯一的“产品预览”

• 容器：背景 {colors.canvas}、1px solid {colors.hairline}、内边距 {spacing.lg}（16px）、圆角 {rounded.lg}。
• 标题栏：三个 {component.terminal-traffic-lights} 圆点（红/黄/绿，12px），锚定在卡片左上角。
• 正文：终端输出以 {typography.code-sm} 渲染，注释使用 {colors.mute}，活动命令使用 {colors.ink}。

terminal-traffic-lights

• 三个 12px {rounded.full} 实心圆：{colors.terminal-red}、{colors.terminal-yellow}、{colors.terminal-green}。在终端卡片标题栏内横向排列，圆点之间为 {spacing.xs} 间隙。

pricing-card —— Free / Pro 层级

• 容器：背景 {colors.canvas}、1px solid {colors.hairline}、内边距 {spacing.xxl}（32px）、圆角 {rounded.lg}。
• 布局：顶部小型羊驼吉祥物图标（约 32px）、{typography.heading-md} 层级名称、单行层级描述、{typography.display-lg} 大号价格（$0 / $20）、单个 {component.button-primary} CTA、分隔线、{typography.body-sm-strong} “Everything in Free, plus:”标题，以及 {component.feature-bullet} 行列表。

pricing-card-dark —— Max 层级（反转）

• 布局与 pricing-card 相同，但背景使用 {colors.surface-dark}、文字使用 {colors.on-dark}、次要文字使用 {colors.on-dark-mute}，CTA 使用 {component.button-pill-on-dark}。反转是系统唯一的“看这里”提示。

feature-bullet —— 定价卡片列表项

• 行内 ✓ 复选标记使用 {colors.ink}，随后是 {colors.charcoal} 的 {typography.body-sm} 文字。无背景、无边框，只以 {spacing.sm} 间距堆叠各行。

faq-row —— /pricing FAQ 条目

• 容器：背景 {colors.canvas}、内边距 16px 0、底部 1px {colors.hairline} 边框。
• 问题：{typography.heading-sm}（18px / 500），颜色 {colors.ink}。
• 答案：{typography.body-md}（16px / 400），颜色 {colors.body}，以 {spacing.xs} 间隙直接位于问题下方。始终展开——没有手风琴折叠。

cta-strip-dark —— 少量使用的深色 CTA 带

• 背景 {colors.surface-dark}、文字 {colors.on-dark}、字体 {typography.heading-lg}、内边距 24px 32px、圆角 {rounded.lg}。谨慎用于区块之间。

行内元素

link-inline —— 正文锚链接

• {colors.ink} 文字加下划线。默认装饰为 text-decoration: underline。

link-mute —— 长篇正文中的次要锚链接

• {colors.body} 文字，默认带下划线——用于 FAQ 答案（“see hello@ollama.com”）和页脚。

导航

primary-nav

• 背景 {colors.canvas}、文字 {colors.ink}、高度 56px、字体 {typography.body-sm-strong}、圆角 {rounded.none}。
• 布局（桌面端）：左侧羊驼图标，随后是“Models · Docs · Pricing”文本链接；中央为 {component.search-pill}；右侧为“Sign in”与黑色 {component.button-primary} “Download”组合。

顶部导航（移动端）

• 左侧羊驼图标，右侧汉堡菜单抽屉触发器。搜索胶囊触发后扩展为通栏。抽屉将“Models · Docs · Pricing · Sign in · Download”以 {spacing.lg} 行间距垂直排列。

页脚

footer-section

• 背景 {colors.canvas}、顶部 1px {colors.hairline} 边框、内边距 32px 24px、字体 {typography.caption-sm}、颜色 {colors.body}。
• 一行小型链接：“Download · Blog · Docs · GitHub · Discord · X · Contact · Privacy · Terms”，右边缘为“© 2026 Ollama”版权信息。窄屏下换成两行。

推荐与避免

推荐

• 将页面视作 Markdown 文档：单一阅读列，区块之间留足 {spacing.section} 空间，不使用装饰性分隔线。
• 所有主要操作均使用 {component.button-primary}（黑色胶囊）。没有绿色、蓝色或品牌染色 CTA。
• 所有交互元素默认使用 {rounded.full}。卡片使用 {rounded.lg}（12px），这是唯一例外。
• 首屏标题使用 {typography.display-xl} SF Pro Rounded，其他内容使用 {typography.body-md} 系统无衬线字体。避免中间展示字号。
• 每页仅为一个“看这里”时刻保留 {component.pricing-card-dark}（反转深色表面）——绝不使用两次。
• 安装命令和 CLI 示例使用 {typography.code-md} / {typography.code-sm}，置于 {component.install-snippet} 或 {component.terminal-card} 内。代码是一等组件。
• 让羊驼吉祥物成为系统中唯一的插图。它就是品牌。

避免

• 不要引入渐变、投影或氛围背景。画布是纯 {colors.canvas}。
• 不要添加品牌色。系统就是 {colors.primary}（黑色）置于 {colors.canvas}（白色）上，搭配 {colors.body}（灰色）文字，仅此而已。
• 不要削弱胶囊或锐化卡片——胶囊保持 {rounded.full}，卡片保持 {rounded.lg}。不要为按钮引入 {rounded.md}，也不要为卡片使用 {rounded.full}。
• 不要用阴影抬升卡片。使用 1px {colors.hairline} 边框或反转为 {colors.surface-dark}——只有这两种卡片处理。
• 不要用品牌展示正文字体替换 ui-sans-serif。系统依靠 system-ui 渲染来营造原生感。
• 不要用营销界面填满长篇页面。FAQ 答案保持 {colors.body} body-md 正文，不加装饰性容器。

响应式行为

断点

触控目标

所有交互元素在 36–40px 高度范围内满足 WCAG AA。{component.button-primary} 和 {component.button-secondary} 高 36px，水平内边距 20px，形成约 36×80px 的有效点击区域，并通过行内内边距超过 44×44px 的 AAA 阈值。{component.text-input} 高 40px。{component.search-pill} 高 36px，内边距 16px。页脚链接使用 {typography.caption-sm}（12px），但获得约 12px 行高 + 约 8px 垂直内边距，形成约 32–36px 的可点击行。

折叠策略

• 主导航： 桌面端水平排列 → 768px 时变为 tablet-narrow 汉堡菜单抽屉。黑色“Download”CTA 在所有宽度保持可见，绝不折叠进菜单。
• 搜索胶囊： 桌面端固定宽约 360px → 平板端压缩至约 240px → 移动端折叠为仅图标，点击后显示通栏浮层。
• 定价网格： 3 列 → 2+1 → 1 列，分别在 850、768px 及以下切换。深色“Max”卡片在所有断点保持反转处理。
• 工作自动化分割： 桌面端 50/50 → 平板端垂直堆叠，文字位于终端模拟上方。
• 首屏标题： 桌面端 {typography.display-xl}（36px），移动端缩放至约 28px，行高保持约 1.15。
• 区块间距： {spacing.section}（88px）桌面端 → 64px 平板端 → 48px 移动端。
• 安装代码片段胶囊： 在窄屏上让 curl 文字换到第二行，而非截断；复制图标仍锚定在右边缘。

图像行为

唯一的图像资产是羊驼吉祥物（提供多个分辨率的光栅 PNG：16/32/48/64/180/192/512px）。它在首屏和定价卡片上以固定像素尺寸呈现，而非响应式缩放——品牌资产被当作 logo，而非首屏图像。

迭代指南

1. 每次只聚焦一个组件。从 front matter 中取出其 YAML 条目，并验证每个属性均能解析。
2. 直接引用组件名称和 token（{colors.primary}、{component.button-primary-active}、{rounded.full}）——不要改写。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 将新变体添加为独立组件条目（-active、-disabled、-focused）——不要将它们隐藏在正文中。
5. 正文默认使用 {typography.body-md}；页脚/工具文字使用 {typography.body-sm}；{typography.display-xl} 严格保留给页面顶部标题。
6. 每个视口谨慎使用 {colors.primary}——每一屏最多应有一个黑色胶囊（合并计算导航、首屏 CTA 和定价卡片 CTA）。克制就是设计。
7. 引入新组件时，先判断它能否用现有的胶囊 + 扁平卡片 + 终端模拟词汇表达，再添加新 token。系统的优势在于它几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为根据桌面端证据和提取的断点栈，综合推导 Ollama 已知的移动端模式（汉堡菜单抽屉、单列定价堆叠、安装代码片段换行）。
• 根据系统策略，未记录悬停状态。
• 除搜索和安装代码片段外，捕获的表面中没有表单字段样式——首页或定价页面没有可见的长表单。
• 捕获页面中没有已认证界面（账户下拉菜单、账单设置、模型仪表板）。
• 捕获集中不含 Models / Docs 页面——这些表面可能增加侧边栏和本文未描述的文档字体层级。