OpenCode AI

version: alpha name: OpenCode-design-analysis description: | A terminal-native marketing system rendered entirely in Berkeley Mono — every word on the page, from the hero headline down to the footer fine print, is monospaced. The page itself reads like a manpage or a static-site README: warm cream canvas (#fdfcfc), nearly-black ink (#201d1d), 4px-radius rectangles for the few interactive elements, and bracketed [+]/[-] ASCII markers used as bullets. The brand's only "visual moment" is a single dark hero card that mocks up the OpenCode TUI itself — black background, monospaced terminal output, ASCII pipe characters, and a wordmark rendered as block-pixel ASCII. Every section sits as a hairline-bordered text block on the cream canvas with no shadows, no gradients, no decorative imagery, and no non-monospaced character anywhere in the system.

colors: primary: "#201d1d" on-primary: "#fdfcfc" ink: "#201d1d" ink-deep: "#0f0000" charcoal: "#302c2c" body: "#424245" mute: "#646262" stone: "#6e6e73" ash: "#9a9898" canvas: "#fdfcfc" surface-soft: "#f8f7f7" surface-card: "#f1eeee" surface-dark: "#201d1d" surface-dark-elevated: "#302c2c" hairline: "rgba(15,0,0,0.12)" hairline-strong: "#646262" on-dark: "#fdfcfc" on-dark-mute: "#9a9898" accent: "#007aff" accent-hover: "#0056b3" accent-active: "#004085" warning: "#ff9f0a" warning-hover: "#cc7f08" warning-active: "#995f06" danger: "#ff3b30" danger-hover: "#d70015" danger-active: "#a50011" success: "#30d158"

typography: display-xl: fontFamily: Berkeley Mono fontSize: 38px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 heading-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 body-tight: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 1 letterSpacing: 0 link-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: Berkeley Mono fontSize: 16px fontWeight: 500 lineHeight: 2 letterSpacing: 0 caption-md: fontFamily: Berkeley Mono fontSize: 14px fontWeight: 400 lineHeight: 2 letterSpacing: 0

rounded: none: 0px sm: 4px full: 9999px

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

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 4px 20px height: 36px button-primary-active: backgroundColor: "{colors.ink-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 4px 20px button-tab: backgroundColor: "transparent" textColor: "{colors.mute}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: 8px 16px button-tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" button-disabled: backgroundColor: "{colors.surface-card}" textColor: "{colors.ash}" rounded: "{rounded.sm}" badge-news: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-md}" rounded: "{rounded.sm}" padding: 2px 8px text-input: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" textarea: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px install-snippet: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px hero-tui-mockup: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 64px 32px tui-prompt-row: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px list-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 8px 0px faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 0px testimonial-row: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 16px 20px chart-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" padding: 16px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" padding: 32px 0px link-inline: textColor: "{colors.ink}" typography: "{typography.link-md}" badge-section-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.none}"

概述

OpenCode 的营销网站完全使用 Berkeley Mono 渲染——页面上的每个字，从 38px 的首屏标题到 14px 的页脚细则，都采用同一种等宽字体。视觉识别源自这一项字体决策：页面读起来像 manpage 或静态网站 README，并以带方括号的 [+] / [-] / [x] ASCII 标记代替图标或项目符号，导航顶部的字标则由块状像素 ASCII 艺术构成。这里没有任何无衬线字体、展示字体、斜体或装饰元素——只差一种字体和一种字重，这套系统就像是以现代分辨率渲染的 1990 年代 whatis 页面。

界面极其克制：暖奶油色画布（{colors.canvas} — #fdfcfc，带有淡淡的红调）、近黑墨色（{colors.ink} — #201d1d），以及用于正文、元数据和禁用文本的 4 级中性灰阶。卡片不作为抬升表面存在——各区块只是带细线边框（{colors.hairline} 1px）的文本块，直接置于画布上，区块之间留出 {spacing.section}（96px）空间。整套系统唯一的“视觉”时刻是一张通栏深色首屏卡片（{colors.surface-dark} — 真正的近黑色），用于模拟 OpenCode TUI 本身：终端框架带有 tab / ctrl-p 快捷键提示、一行“Build”命令，以及以像素块 ASCII 标题渲染的 OpenCode 字标。

语义配色对于品牌营销网站而言很少见：它包含完整的 Apple Human Interface Guidelines 点缀色阶——{colors.accent}（Apple Blue #007aff）、{colors.danger}（#ff3b30）、{colors.warning}（#ff9f0a）、{colors.success}（#30d158），以及它们在悬停/激活时加深的变体——尽管在营销表面中，这些颜色只在深色首屏 TUI 模拟中作为语法高亮的替代色使用。更广的配色属于产品内 TUI；营销页面基本保持单色。

关键特征：

• 所有文本角色 100% 使用 Berkeley Mono 字体——界面中没有任何无衬线回退字体
• 暖奶油色 {colors.canvas} (#fdfcfc) 是唯一的正文背景——区块之间不交替表面色
• 单一深色表面（{colors.surface-dark} — #201d1d）仅供首屏 TUI 模拟使用
• 所有交互元素采用 4px 圆角（{rounded.sm}）；区块本身是带 1px 细线边框的直角矩形
• 功能列表和 FAQ 行使用 ASCII 方括号标记（[+]、[-]、[x]）作为项目符号
• 主导航和首屏 TUI 内使用块状像素 ASCII 字标——品牌识别本身就是 ASCII 艺术
• 每个区块之间遵循 96px 的 {spacing.section} 节奏，没有装饰性分隔线；内容块之间仅用 1px {colors.hairline} 细线分隔

配色

来源页面： /（首页）、/zen、/enterprise。三个页面的界面配色完全相同。

品牌与点缀色

• 墨色（{colors.primary} / {colors.ink} — #201d1d）：品牌唯一的“颜色”。用于标题、正文、主 CTA 填充、导航链接和所有实心图标。以近黑色而非纯黑色作为品牌色，使文字在暖奶油色画布上更易阅读。
• 深墨色（{colors.ink-deep} — #0f0000）：主 CTA 的按下状态。带有淡淡的红色底调，与画布的暖色调相呼应。
• 奶油色（{colors.canvas} — #fdfcfc）：品牌标志性的暖白色。用于所有页面正文、所有卡片表面、主色上的文字，以及深色表面上的 ASCII 字标填充。

表面

• 奶油色画布（{colors.canvas} — #fdfcfc）：所有页面正文和所有卡片。
• 柔和表面（{colors.surface-soft} — #f8f7f7）：文本输入框默认背景、用户评价行填充、交替行底色。
• 卡片表面（{colors.surface-card} — #f1eeee）：安装代码片段胶囊、禁用按钮填充、略微抬升的区块行。
• 深色表面（{colors.surface-dark} — #201d1d）：首屏 TUI 模拟背景和首页的深色 CTA 胶囊。与 {colors.ink} 相同——品牌使用同一种近黑色同时承担文字和深色表面。
• 抬升深色表面（{colors.surface-dark-elevated} — #302c2c）：首屏 TUI 模拟内的提示行，比深色表面本身亮一级。
• 细线（{colors.hairline} — rgba(15,0,0,0.12)）：1px 区块分隔线。半透明暖色调与奶油色画布的底调一致。
• 强细线（{colors.hairline-strong} — #646262）：标签栏底部线条和较强的行内分隔线。

文本

• 墨色（{colors.ink} — #201d1d）：标题、正文、主导航链接、浅色表面上的按钮文字。
• 炭色（{colors.charcoal} — #302c2c）：在纯墨色过重时使用的略柔和正文色。
• 正文色（{colors.body} — #424245）：默认段落文字和 FAQ 答案。
• 弱化色（{colors.mute} — #646262）：默认状态标签、元数据、页脚链接文字、列表内次要注释。
• 石色（{colors.stone} — #6e6e73）：最低强调级别的工具文字、面包屑分隔符。
• 灰色（{colors.ash} — #9a9898）：禁用文字、深色 TUI 模拟中的次要注释，也是 TUI 模拟的次要颜色。

语义色

系统包含完整的 Apple Human Interface Guidelines 语义色阶。在营销页面中，这些颜色主要在首屏 TUI 模拟内作为语法高亮替代色；在产品内 TUI 中，它们承载常规语义。

• 点缀色（{colors.accent} — #007aff）：主要信息信号、产品内链接颜色、TUI 命令高亮。
• 点缀色悬停（{colors.accent-hover} — #0056b3）：按下的信息链接。
• 点缀色激活（{colors.accent-active} — #004085）：深度按下的信息状态。
• 危险色（{colors.danger} — #ff3b30）：破坏性确认、错误状态。
• 危险色悬停（{colors.danger-hover} — #d70015）：按下的破坏性状态。
• 危险色激活（{colors.danger-active} — #a50011）：深度按下的破坏性状态。
• 警告色（{colors.warning} — #ff9f0a）：警示横幅。
• 警告色悬停（{colors.warning-hover} — #cc7f08）：按下的警示状态。
• 警告色激活（{colors.warning-active} — #995f06）：深度按下的警示状态。
• 成功色（{colors.success} — #30d158）：正向确认、TUI 内成功指示器。

字体排版

字体族

Berkeley Mono 是系统所有文本角色使用的专有等宽字体。它提供 400（常规）、500（中等）和 700（粗体）字重，并通过一长串等宽字体回退：IBM Plex Mono → ui-monospace → SFMono-Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New。

单字体决策就是品牌本身。没有展示字体、正文无衬线字体、斜体替代样式，也不会在任何地方回退到比例字体——即使法定版权行也使用 14px 的 Berkeley Mono。这是营销工具类别中最极致的字体克制：OpenCode 的身份就是“营销页面即 man page”。

层级

原则

层级几乎完全依靠同一字体上的字号和字重对比建立。展示标题（38px / 700）和 heading-md 标签（16px / 700）字重相同，差异仅在字号。正文与链接的字号、字重和行高相同，只能通过上下文区分。按钮刻意采用较高的行高（2.0），使标签在 4px 圆角矩形内显得从容舒展。

字体替代说明

Berkeley Mono 是付费商业字体。以下开源替代字体在正文字号下可将其度量近似到约 3%：

• JetBrains Mono —— 笔画对比和 x-height 最接近；配合使用 400 / 500 / 700 字重。
• IBM Plex Mono —— 文档字体栈中的官方次级回退；字腔略为开放，但行高表现一致。
• Geist Mono —— 具有相近几何构造的现代替代字体。

替换字体时，正文保持 lineHeight: 1.5、按钮保持 lineHeight: 2 即可保留行高表现——通常无需调整字重。

布局

间距系统

• 基础单位： 8px（另提供更细的 1/2/4px 步进，用于紧凑的行内间隙）。
• Token（front matter）： {spacing.xxs} (1px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (96px)。
• 通用区块节奏： 此组所有页面都使用 {spacing.section}（96px）作为主要内容块之间的垂直间距。这是系统中最大的间距 token，也是首页、/zen 和 /enterprise 页面上的主导布局线索。
• 区块内部内边距： 区块内的内容行使用 {spacing.lg}（16px）垂直内边距，不设水平内边距——文字从区块左边缘齐平开始。

网格与容器

• 最大宽度： 正文区块内容列约 960px；深色首屏 TUI 模拟在约 1100px 的外层内容框架内通栏显示。
• 双栏分割： /enterprise 将左侧文本块（约 360px 宽）与右对齐表单列（约 480px 宽）配对。首页采用单栏阅读布局。
• 页脚： 桌面端为 5 列水平链接行（GitHub / Docs / Changelog / Discord / X），在平板端折叠为 2 列，在移动端折叠为 1 列。

留白理念

留白既结构化又充足。区块之间相距 96px，没有装饰性分隔带——{colors.hairline} 1px 线条是唯一的分隔信号。区块内部的内容与列左边缘齐平，不作内部缩进；项目符号使用 ASCII 方括号前缀（[+] / [-]）而非基于缩进的布局。最终页面像打印出来的代码清单，而不是经过样式设计的营销布局。

层次与深度

系统中没有投影。没有元素抬起或悬浮。让元素显得位于另一元素“之上”的唯一方式，是首屏模拟中使用的深色表面。

装饰性深度

深度来自字体密度和单一深色 TUI 模拟，而不是 CSS 效果：

• ASCII 块状像素字标 —— OpenCode 品牌名以 5 行等宽字符单元渲染，用于主导航和首屏 TUI 模拟的中心位置。
• 首屏 TUI 模拟 —— 通栏 {colors.surface-dark} 矩形，包含仿终端界面：ASCII 字标、显示 Build 命令行的 tui-prompt-row，以及底部边缘以 {colors.ash} 呈现的 tab switch agent / ctrl-p commands 快捷键提示。
• 图表块 —— 首页“open source AI coding agent”统计区块内的三个细线 ASCII 图表，在奶油色画布上以 {colors.body} 绘制抽象的点状/稀疏线图。下方使用 {typography.caption-md} 显示说明文字（Fig 1. 150K GitHub Stars、Fig 2. 850 Contributors、Fig 3. 6.5M Monthly Devs）。

形状

圆角比例

圆角词汇只有两个值：交互元素使用 4px，其他所有元素使用 0px。用户评价行中的头像圆形是系统中唯一完全圆润的元素。

摄影几何

没有摄影。视觉元素仅限于：

• ASCII 块状像素字标，用于导航和首屏 TUI 模拟。
• 行内 ASCII 图表，位于统计区块内——抽象的稀疏线图和点图，没有具体数据点。
• 头像圆点（约 32px），位于 /zen 的用户评价行中——使用 {rounded.full} 的纯色圆形。
• 产品内图标（kbd、A+、⊕、↻、K、Z），以小型等宽字符字形呈现，而非位图或 SVG。

组件

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

按钮

button-primary —— 通用 OpenCode CTA

• 背景 {colors.primary}、文字 {colors.on-primary}、字体 {typography.button-md}、内边距 4px 20px、高度约 36px、圆角 {rounded.sm}（4px）。
• 用于“Download”（顶部导航）、“Get started with Zen”、“Send”（企业联系表单）、“Subscribe”（新闻订阅页脚）、“Read docs →”。
• 按下状态在 button-primary-active 中定义——背景降为 {colors.ink-deep}。

button-secondary —— 描边替代按钮

• 背景 {colors.canvas}、文字 {colors.ink}、1px solid {colors.hairline-strong} 边框、字体 {typography.button-md}、内边距 4px 20px、圆角 {rounded.sm}。
• 较低强调级别的 CTA——两个操作配对时出现在主填充按钮旁。

button-tab + button-tab-active —— 安装标签栏

• 默认：透明背景、文字 {colors.mute}、字体 {typography.button-md}、内边距 8px 16px、圆角 {rounded.none}。
• 激活：表面相同、文字 {colors.ink}，底部以 2px {colors.ash} 下划线指示选中。
• 用于首页的安装方式标签栏（curl / npm / bun / brew / yay）。

button-disabled

• 背景 {colors.surface-card}、文字 {colors.ash}、圆角 {rounded.sm}。

徽标与标签

badge-news —— 新闻/公告条中的小型深色标签

• 背景 {colors.surface-dark}、文字 {colors.on-dark}、字体 {typography.caption-md}、内边距 2px 8px、圆角 {rounded.sm}。
• 在首页首屏标题上方以行内形式与正文并列，作为“News” / “Beta” / “Live now”标签。

badge-section-label —— 带方括号的区块标题

• 透明背景、文字 {colors.ink}、字体 {typography.heading-md}、圆角 {rounded.none}。
• 呈现为 1px {colors.hairline} 线条上方的纯 **Heading** 文本，没有标签背景——但文字形式（“[+]”、“[x]”、What is OpenCode?）使其发挥标签组件的作用。

输入框与表单

text-input + text-input-focused

• 默认：背景 {colors.surface-soft}、文字 {colors.ink}、1px solid {colors.hairline}、字体 {typography.body-md}、内边距 8px 12px、高度约 40px、圆角 {rounded.sm}。
• 聚焦：背景切换为 {colors.canvas}，边框变为 1px solid {colors.ink}（画布上的扁平聚焦信号——无光环、无发光）。
• 用于 /enterprise 上的所有联系表单字段（Full name、Role、Company、Company email、Phone number）以及首页页脚的新闻订阅邮箱字段。

textarea

• 背景 {colors.surface-soft}、文字 {colors.ink}、1px solid {colors.hairline}、字体 {typography.body-md}、内边距 12px、圆角 {rounded.sm}。
• /enterprise 上“What problem are you trying to solve?”多行文本区域。

install-snippet —— 首页标志性的安装代码块

• 背景 {colors.surface-card}（#f1eeee）、文字 {colors.ink}，使用 {typography.body-md} 渲染（Berkeley Mono 本身已是等宽字体），内边距 12px 16px、圆角 {rounded.sm}。
• 包含原始命令 curl -fsSL https://opencode.ai/install | bash，右侧带一个小型复制图标。位于安装方式标签栏下方。

卡片与容器

hero-tui-mockup —— 首页标志性的 TUI 预览

• 容器：通栏 {colors.surface-dark}（近黑色），内边距 64px 32px、圆角 {rounded.none}。
• 内容（从上到下）：居中的 {colors.on-dark} ASCII 块状像素“OPENCODE”字标；显示“Build”命令行和模型选择器文字的 {component.tui-prompt-row}；底部以 {colors.ash} 显示的 tab switch agent ctrl-p commands 快捷键提示行。

tui-prompt-row —— TUI 模拟内的内嵌命令行

• 背景 {colors.surface-dark-elevated}（#302c2c）、文字 {colors.on-dark}、字体 {typography.body-md}、内边距 8px 12px、圆角 {rounded.sm}。
• 渲染行内命令（Build Claude Opus 4.5 OpenCode Zen），带有前置竖线，模型名称以带方括号 token 的样式呈现。

list-row —— 带 ASCII 方括号项目符号的功能/优势行

• 背景 {colors.canvas}、文字 {colors.body}、字体 {typography.body-md}、内边距 8px 0。
• 每行以 [+] / [-] / [x] ASCII 标记开头，随后是粗体标签和常规描述，例如：[+] LSP enabled Automatically loads the right LSPs for the IDE。方括号标记是文本内容的一部分，而非独立图标。

faq-row —— 带方括号切换标记的 FAQ 条目

• 背景 {colors.canvas}、文字 {colors.ink}、字体 {typography.body-md}、内边距 12px 0，底部带 1px {colors.hairline} 线条。
• 每行以 + / − ASCII 标记开头，表示展开/折叠状态。始终呈现为纯文本行——没有 V 形图标，也没有动态手风琴界面。

testimonial-row —— /zen 同行引述行

• 背景 {colors.surface-soft}、文字 {colors.body}、字体 {typography.body-md}、内边距 16px 20px、圆角 {rounded.sm}。
• 布局：左侧为 32px 头像圆形（{rounded.full}），第一行以 {typography.body-strong} 显示姓名 + 职位 + 公司，第二行以 {typography.body-md} {colors.body} 显示引述。

chart-tile —— 统计区块的稀疏线图

• 背景 {colors.canvas}、文字 {colors.body}、字体 {typography.caption-md}、圆角 {rounded.none}、内边距 16px。
• 包含以行内 SVG/CSS 绘制的 ASCII 风格稀疏线图（点状、抽象——绝不展示具体数据点），下方以 {colors.mute} 显示 Fig N. <stat label> 说明。

导航

primary-nav

• 背景 {colors.canvas}、文字 {colors.ink}、字体 {typography.body-strong}、高度约 56px、圆角 {rounded.none}，底部带 1px {colors.hairline} 线条。
• 布局（桌面端）：左侧为块状像素 ASCII OpenCode 字标（约 120×24px），中间偏右为导航链接组（“GitHub [150K] · Docs · Zen · Go · Enterprise”），最右侧为带小型下载字形的 {component.button-primary} “Download” CTA。

顶部导航（移动端）

• ASCII 字标保留在左侧，导航链接折叠至右侧汉堡菜单抽屉。Download CTA 在所有断点始终可见。

页脚

footer-section

• 背景 {colors.canvas}、文字 {colors.body}、字体 {typography.caption-md}、内边距 32px 0，顶部带 1px {colors.hairline} 线条。
• 顶行：5 列水平链接网格（GitHub [150K] · Docs · Changelog · Discord · X），每项为居中单元格，并以 1px {colors.hairline} 垂直线分隔。
• 底行：左侧为 ©2026 Anomaly 版权信息，右侧为 Brand · Privacy · Terms · English ▼ 工具链接组，均使用 {typography.caption-md} {colors.mute}。

行内元素

link-inline —— 正文锚链接

• {colors.ink} 文字加下划线。品牌唯一的链接提示方式——即使正文段落中的链接也使用墨色，而不是 {colors.accent} 蓝色。Apple Blue 仅供产品内 TUI 使用。

推荐与避免

推荐

• 所有文本角色均使用 Berkeley Mono。单字体决策就是完整的品牌身份。
• 将 {colors.canvas}（#fdfcfc）保持为唯一正文背景。不要引入灰色区块带。
• 使用 ASCII 方括号标记（[+]、[-]、[x]、+、−）作为项目符号、切换符号和区块字形。它们是品牌唯一的图标体系。
• 每个落地页仅放置一次深色 {component.hero-tui-mockup}，作为首屏中心元素。正文内容绝不使用深色表面。
• 将 {colors.accent}（Apple Blue）和其余语义色阶留给 TUI 内状态；营销界面保持单色。
• 所有交互元素使用 {rounded.sm}（4px），所有容器使用 {rounded.none}（0px）。
• 内容区块以 {spacing.section}（96px）的节奏堆叠，区块之间仅使用 1px {colors.hairline} 线条。

避免

• 不要引入无衬线正文字体、展示字体或斜体样式。所有内容均由 Berkeley Mono 承担。
• 不要添加投影、渐变或氛围背景。系统是奶油色上的扁平设计。
• 不要以 SVG 图标替代 ASCII 方括号标记。方括号就是图标。
• 不要在营销 CTA 中使用语义点缀色阶（{colors.accent}、{colors.warning}、{colors.danger}、{colors.success}）。它们属于产品内 TUI。
• 不要为卡片添加 24px 以上的内部内边距。列表行使用 8px 垂直内边距，FAQ 行使用 12px。
• 不要将 OpenCode 字标渲染为矢量 logo。它始终是块状像素 ASCII。
• 不要在首屏 TUI 模拟中加入摄影或插图。它仅包含文本，并始终展示一行仿终端命令。

响应式行为

断点

触控目标

所有交互元素在约 36–40px 高度范围内满足 WCAG AA。{component.button-primary} 高约 36px，水平内边距 20px。{component.text-input} 和 {component.textarea} 高约 40px。安装方式标签栏中的 {component.button-tab} 行根据标签长度高约 32–36px，但通过行内内边距扩展为完整的 44px 可点击单元格。页脚链接使用 {typography.caption-md}（14px），但约 28px 行高（caption-md 为 2.0）加 8px 垂直内边距，形成舒适的约 44px 可点击行。

折叠策略

• 主导航： 桌面端水平链接组 → 768px 时变为 tablet-narrow 汉堡菜单抽屉。深色“Download”CTA 在所有宽度保持可见。
• 首屏 TUI 模拟： 所有断点都保持通栏深色表面；ASCII 字标等比例缩放，快捷键提示行可能在窄屏上换为两行。
• 安装代码片段 + 标签栏： 桌面端固定宽度胶囊 → 移动端通栏胶囊；标签溢出时可水平滚动。
• 页脚： 5 列水平链接网格 → 平板端 2 列 → 移动端 1 列（每个链接成为通栏行）。
• /enterprise 双栏布局： 桌面端 50/50 → 平板端堆叠为单栏，表单位于文本块下方。
• 区块内边距： {spacing.section}（96px）桌面端 → 64px 平板端 → 48px 移动端。
• 首屏标题： 桌面端 {typography.display-xl}（38px），移动端缩放至约 28px，行高保持 1.5。

图像行为

系统中除 favicon 和 OG 分享图外没有光栅图像。所有视觉元素——字标、图表、图标——均以文字或行内 SVG 渲染，不涉及宽高比适配。

迭代指南

1. 每次只聚焦一个组件。从 YAML 中取出其条目，并验证每个属性均能解析。
2. 直接引用组件名称和 token（{colors.ink}、{component.hero-tui-mockup}、{rounded.sm}）——不要改写。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 和 orphaned-tokens 警告会自动标记问题。
4. 将新变体添加为独立组件条目（-active、-disabled）——不要将它们隐藏在正文中。
5. 正文默认使用 {typography.body-md}；强调时使用 {typography.body-strong}；{typography.display-xl} 严格保留给页面顶部首屏标题。
6. 谨慎使用 {colors.surface-dark}——每页最多一个通栏深色模拟。深色表面是叙事手段，而非界面处理方式。
7. 引入新组件时，先判断能否以现有的 ASCII 方括号 + 4px 圆角 + Berkeley Mono 词汇表达，再添加新 token。系统的优势在于它几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——响应式行为根据桌面端证据和断点栈，综合推导 OpenCode 的移动端模式（汉堡菜单抽屉、单栏、页脚手风琴）。
• 根据系统策略，未记录悬停状态。
• 除营销首屏模拟外，未包含产品内 TUI 截图；此处未记录实际 opencode 终端界面（完整快捷键、面板、状态栏）。
• 未提取 /go 页面——Go SDK 的营销页面可能沿用相同界面，但会引入上文未记录的代码示例块。
• 捕获的表面中没有表单验证状态样式（成功/错误行内消息）。