version: alpha name: ClickHouse-design-analysis description: A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident sans, yellow CTAs, and yellow-text stat numbers carry the brand voice across every page. Code blocks and product UI fragments embed directly in dark cards. The yellow + black pairing (and yellow used scarcely as accent) is the system's signature — brand identity without atmospheric decoration.
colors: primary: "#faff69" primary-active: "#e6eb52" primary-disabled: "#3a3a1f" ink: "#ffffff" body: "#cccccc" body-strong: "#e6e6e6" muted: "#888888" muted-soft: "#5a5a5a" hairline: "#2a2a2a" hairline-strong: "#3a3a3a" canvas: "#0a0a0a" surface-soft: "#121212" surface-card: "#1a1a1a" surface-elevated: "#242424" surface-yellow-band: "#faff69" on-primary: "#0a0a0a" on-dark: "#ffffff" on-yellow: "#0a0a0a" accent-emerald: "#22c55e" accent-rose: "#ef4444" accent-blue: "#3b82f6" success: "#22c55e" warning: "#f59e0b" error: "#ef4444"
typography: display-xl: fontFamily: "Inter, sans-serif" fontSize: 72px fontWeight: 700 lineHeight: 1.05 letterSpacing: -2.5px display-lg: fontFamily: "Inter, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: -2px display-md: fontFamily: "Inter, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: -1.5px display-sm: fontFamily: "Inter, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: -1px title-lg: fontFamily: "Inter, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: -0.3px title-md: fontFamily: "Inter, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 stat-display: fontFamily: "Inter, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.5px body-md: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "Inter, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 1.5px code: fontFamily: "JetBrains Mono, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 button: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0
rounded: xs: 4px sm: 6px md: 8px lg: 12px pill: 9999px full: 9999px
spacing: 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.md}" padding: 12px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 40px button-text-link: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" button-icon-circular: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 36px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 96px hero-stat-card: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.stat-display}" feature-card-yellow: backgroundColor: "{colors.surface-yellow-band}" textColor: "{colors.on-yellow}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px feature-card-dark: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 32px code-window-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 24px product-mockup-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px stat-callout: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.stat-display}" cta-band-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 64px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 14px height: 40px text-input-focused: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.md}" category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" rounded: "{rounded.md}" padding: 8px 14px category-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" rounded: "{rounded.md}" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 12px events-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px customer-logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-md}" padding: 32px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: 64px
概览
ClickHouse 的营销界面是数据库/数据平台品类中对比度最高的。基础氛围是接近纯黑的画布（{colors.canvas} — #0a0a0a），以电光黄（{colors.primary} — #faff69）作为唯一的品牌能量。黄色承担每一个主 CTA、每一个数据大字（stat callout）、每一个"GET STARTED"徽标——在单个元素上克制使用，但在整版黄色 CTA 卡片上慷慨铺陈。白色字体使用自信的无衬线粗体，撑起编辑正文。
黄 + 黑这对组合是 ClickHouse 一眼可识别的关键。Snowflake 用冷蓝渐变、Databricks 用红 + 板岩灰，而 ClickHouse 押注一种电光黄完成所有品牌表达。代码块、终端输出和产品 UI 片段直接嵌入每个页面的深色 {colors.surface-card}（#1a1a1a）卡片中。
字体使用 Inter，且全部走自信字重——展示字重 700（配 -1 到 -2.5px 的负字距），副标题与按钮 600，正文 400。系统没有展示衬线作为反衬字——只有一种几何化的人文无衬线，靠尺寸和字重构建层级。
关键特征：
- 接近纯黑的画布（
{colors.canvas}— #0a0a0a）配白色字体。本系统无浅色模式营销界面。 - 电光黄主色（
{colors.primary}— #faff69）。用于主 CTA、大号数据数字（"2.8k+"、"74k+"）以及整版黄色 CTA 带。 - Inter 展示字重 700、副标题/按钮 600、正文 400。无衬线反衬字体。
- 深色表面卡片（
{colors.surface-card}— #1a1a1a）承载功能卡片、代码窗口和产品 mockup。卡片比画布仅亮一档——色彩块对比是克制的。 - 代码块以 JetBrains Mono 在
{colors.surface-card}中渲染，SQL 语法高亮采用克制的蓝/黄/灰。 - 黄色 + 无衬线 700 + 超大字号的数据数字承担可信度时刻（"779+"、"2.8k+"、"47k+" 等社区/贡献者/星标数）。
- 圆角分等级：
{rounded.md}（8px）用于按钮，{rounded.lg}（12px）用于内容卡片。除小型徽标外不使用 pill。 - 章节节奏
{spacing.section}（96px）划分主编辑带。
配色
品牌与点缀
- 主色（电光黄）（
{colors.primary}— #faff69）：标志性品牌色。所有主 CTA 背景、大号数据数字、整版黄色 CTA 卡片。黄色即是品牌。 - 主色激活态（
{colors.primary-active}— #e6eb52）：按下/悬停的稍深变体。 - 主色禁用态（
{colors.primary-disabled}— #3a3a1f）：在深色画布上去饱和的暗黄。
表面
- 画布（
{colors.canvas}— #0a0a0a）：默认页面底色，接近纯黑。 - 表面柔（
{colors.surface-soft}— #121212）：章节分隔带、极柔的色带底色。 - 表面卡片（
{colors.surface-card}— #1a1a1a）：功能卡片、代码窗口、产品 mockup、价格档卡片。 - 表面浮起（
{colors.surface-elevated}— #242424）：大卡片内部嵌套的小卡片。 - 黄色色带（
{colors.surface-yellow-band}— #faff69）：黄色 CTA 卡片/色带底色，与主色同 hex。 - 细线（
{colors.hairline}— #2a2a2a）：卡片上的 1px 边框。 - 粗细线（
{colors.hairline-strong}— #3a3a3a）：输入框下划线与强调用的较重分隔线。
文字
- 主文字 / 深底文字（
{colors.on-dark}— #ffffff）：所有标题与主文字。 - 正文（
{colors.body}— #cccccc）：默认正文色。 - 正文强调（
{colors.body-strong}— #e6e6e6）：强调段落。 - 弱化（
{colors.muted}— #888888）：页脚链接、说明文字、面包屑。 - 弱化柔（
{colors.muted-soft}— #5a5a5a）：三级文字、极小字。 - 在主色上 / 在黄底上（
{colors.on-primary}/{colors.on-yellow}— #0a0a0a）：黄色 CTA 与黄底色带上的黑色字。高对比的黄 + 黑组合即品牌动作信号。
语义/点缀
- 点缀翠绿（
{colors.accent-emerald}— #22c55e）：成功状态、产品 UI 中"活跃"状态指示。 - 点缀玫瑰（
{colors.accent-rose}— #ef4444）：错误状态、"下线"指示。 - 点缀蓝（
{colors.accent-blue}— #3b82f6）：信息状态、代码语法高亮。
字体
字体族
系统对所有内容（展示、正文、导航、按钮、说明文字）统一使用 Inter。JetBrains Mono 处理代码块。降级栈为 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。
这种单字体策略是有意为之：Inter 700 + 600 + 400 三个字重覆盖整个层级，不需要衬线或展示反衬字。Inter 的几何化人文骨架在粗体下显得精确、富有工程感，恰好契合 ClickHouse "性能优先"的定位。
层级
| Token | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xl} | 72px | 700 | 1.05 | -2.5px | 首页 h1（"The leading database for AI"） |
{typography.display-lg} | 56px | 700 | 1.1 | -2px | 章节大标题 |
{typography.display-md} | 40px | 700 | 1.15 | -1.5px | 子章节标题、CTA 带标题 |
{typography.display-sm} | 32px | 700 | 1.2 | -1px | 卡片标题、价格档价格 |
{typography.title-lg} | 24px | 700 | 1.3 | -0.3px | 价格方案名、较大功能标题 |
{typography.title-md} | 18px | 600 | 1.4 | 0 | 卡片标题、引言段落 |
{typography.title-sm} | 16px | 600 | 1.4 | 0 | 小卡片标题、列表标签 |
{typography.stat-display} | 56px | 700 | 1.0 | -1.5px | 数据大字（"779+"、"47k+"）——始终是黄色 |
{typography.body-md} | 16px | 400 | 1.55 | 0 | 默认正文 |
{typography.body-sm} | 14px | 400 | 1.55 | 0 | 页脚正文、极小字 |
{typography.caption} | 13px | 500 | 1.4 | 0 | 徽标文字、说明文字 |
{typography.caption-uppercase} | 12px | 600 | 1.4 | 1.5px | 章节小标、"NEW" 徽标 |
{typography.code} | 14px | 400 | 1.55 | 0 | 代码块 — JetBrains Mono |
{typography.button} | 14px | 600 | 1.0 | 0 | 标准按钮标签 |
{typography.nav-link} | 14px | 500 | 1.4 | 0 | 顶部导航菜单项 |
原则
所有展示尺寸字重都保持 700。负字距（-1 到 -2.5px）必不可少——Inter 700 不收字距会显得太宽、太"苹果营销"。收紧的字距让 ClickHouse 显出精确的工程感。
正文与标签用 400 / 500 / 600。层级靠尺寸与字重构建，不靠字体对比。
字体替代说明
Inter 是开源字体，文档化的选择。Söhne 是相近的商用替代品（如有授权）。Geist 是另一种现代替代品。
布局
间距系统
- 基础单位： 4px。
- Token：
{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.section}（96px）。 - 卡片内边距： 功能卡片、价格档
{spacing.xl}（32px）；代码窗口卡片、活动卡片{spacing.lg}（24px）。
网格与容器
- 最大内容宽： ~1280px 居中。
- 编辑正文： 12 栏单网格；首屏常用 7/5 分栏（左侧 h1，右侧代码 mockup）。
- 功能卡片栅格： 桌面 3 栏、平板 2 栏、手机 1 栏。
- 价格栅格： 桌面 3-4 栏，手机 1 栏。
留白哲学
ClickHouse 使用紧凑、略微压缩的留白，适合开发者工具品牌——足够宽以保持编辑感，紧到让人感觉"工程级"而不是"营销软"。章节节奏 96px 是标准；卡片内边距对功能卡片保持 32px。
层次与深度
| 层级 | 处理 | 用途 |
|---|---|---|
| 平 | 无阴影、无边框 | 正文区、顶部导航、首屏 |
| 细线 | 1px {colors.hairline} 边框 | 代码窗口卡片、内容卡片 |
| 表面卡片 | {colors.surface-card} 底色 —— 无阴影 | 功能卡片、价格档、活动卡片 |
| 黄色色带 | {colors.primary} 底色 —— 无阴影 | 整版黄色 CTA 卡片/色带 |
系统不使用投影。深度来自黑画布与 {colors.surface-card}（仅比画布亮一档的暗色）之间的对比——对比克制，更像"工程级暗面板"而不是"浮起卡片"。
装饰性深度
- 代码窗口卡片自带产品外壳——行号、语法高亮、底部状态栏——增加视觉密度而不依赖外部阴影。
- 黄黑对比为 CTA 完成大部分"提升"工作。
形状
圆角等级
| Token | 值 | 用途 |
|---|---|---|
{rounded.xs} | 4px | 仅徽标点缀 |
{rounded.sm} | 6px | 小型行内按钮 |
{rounded.md} | 8px | 标准 CTA 按钮、文本输入 |
{rounded.lg} | 12px | 内容卡片、代码窗口卡片、价格档 |
{rounded.pill} | 9999px | 徽标胶囊 |
{rounded.full} | 9999px / 50% | 头像、图标按钮 |
组件
顶部导航
top-nav —— 黑色顶栏吸顶。高 64px，底色 {colors.canvas}。左侧为 ClickHouse logo + 字标，中左为主菜单（Product、Use Cases、Pricing、Resources、Customers），右侧为 "Sign in" + "Get Started" {component.button-primary}（黄色）。菜单项使用 {typography.nav-link}（Inter 14px / 500）。
按钮
button-primary —— 标志性黄色 CTA。底色 {colors.primary}（#faff69），文字 {colors.on-primary}（黑），字体 {typography.button}（Inter 14px / 600），内边距 12px × 20px，高 40px，圆角 {rounded.md}（8px）。黄黑组合是 ClickHouse 的标志。
button-secondary —— 深色表面卡片按钮。底色 {colors.surface-card}，文字 {colors.on-dark}，形状与主按钮一致。
button-text-link —— 行内文字按钮，无背景。用于 "Sign in" 与行内链接 CTA。
text-link —— 深底上的行内正文链接（黄色）。带下划线。
button-icon-circular —— 深色上的 36 × 36 圆形图标按钮。
卡片与容器
hero-band —— 黑画布首屏，7-5 分栏：左侧 h1 + 副标题 + 按钮组，右侧为代码窗口或产品 mockup。垂直内边距 {spacing.section}（96px）。
hero-stat-card —— 黄色大号数据（"779+"、"47k+"）内联于画布上。无卡片表面——仅以 {typography.stat-display}（56px / 700）显示的黄色文字。
feature-card-yellow —— 整版黄色卡片（"Built for every modern data challenge"）。底色 {colors.primary}，文字 {colors.on-yellow}（黑），圆角 {rounded.lg}（12px），内边距 {spacing.xl}（32px）。黄色卡片本身即是视觉强调。
feature-card-dark —— 标准深色功能卡片。底色 {colors.surface-card}，文字 {colors.on-dark}，圆角 {rounded.lg}，内边距 {spacing.xl}（32px）。
code-window-card —— 展示 SQL 代码块的深色卡片。底色 {colors.surface-card}，代码以 JetBrains Mono 配合语法高亮，圆角 {rounded.lg}，内边距 {spacing.lg}（24px）。在面向开发者的页面里常作为首屏右侧元素。
product-mockup-card —— 展示 ClickHouse 实际产品 UI（查询编辑器、仪表盘、监控面板）的卡片。形状与 {component.feature-card-dark} 一致，内部嵌入产品外壳。
pricing-tier-card —— 标准档位卡片。底色 {colors.surface-card}，圆角 {rounded.lg}，内边距 {spacing.xl}（32px）。
pricing-tier-card-featured —— 主推档位翻转为 {colors.primary}（黄色）。黄色表面本身即"主推"信号。
stat-callout —— 行内黄色大数字（"779+"、"2.8k+"、"47k+"）。背景透明，文字 {colors.primary}，字体 {typography.stat-display}。作为平整的布局块使用，不是带表面的卡片。
events-card —— 用于 /company/events。深色卡片，含活动标题、{typography.caption-uppercase} 显示的日期、地点和 "Register" CTA。圆角 {rounded.lg}，内边距 {spacing.lg}。
customer-logo-strip —— 横向单色客户 logo 条。底色 {colors.canvas}，logo 用 {colors.muted}，垂直内边距 {spacing.xl}（32px）。
输入与表单
text-input —— 深色文本输入。底色 {colors.surface-card}，文字 {colors.on-dark}，圆角 {rounded.md}（8px），内边距 10px × 14px，高 40px。
text-input-focused —— 边框加粗为 {colors.primary}（黄色）以示强调。
标签 / 徽标
badge-pill —— 小型深色胶囊标签。底色 {colors.surface-card}，文字 {colors.on-dark}，字体 {typography.caption}，圆角 {rounded.pill}。
badge-yellow —— 黄色胶囊，用于 "NEW"、"GET STARTED" 等强调。底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.caption-uppercase}，圆角 {rounded.pill}。
标签 / 筛选
category-tab + category-tab-active —— 深色标签导航。默认：透明底 + 弱化文字。激活态：surface-card 底 + on-dark 文字。内边距 8px × 14px，圆角 {rounded.md}。
CTA / 页脚
cta-band-yellow —— 页脚前的"Deploy your way" CTA 带。整版黄色填充，黑色字，圆角 {rounded.lg}，内边距 64px。包含 {typography.display-md} 的 h2 和 CTA——通常是黄色面上的黑色按钮。
footer —— 黑色页脚收束每个页面。底色 {colors.canvas}，文字 {colors.muted}。桌面 4 栏链接列表（Product / Use Cases / Resources / Company）。垂直内边距 64px。顶部为 {colors.on-dark} 的 ClickHouse 字标。
推荐与避免
推荐
- 每个页面以黑色画布为锚。黄黑组合是品牌能量。
- 把
{colors.primary}（黄色）留给主 CTA、数据大字和整版黄色 CTA 带。元素层稀缺、版层丰富才是它的力量所在。 - 展示标题一律用 Inter 700，字距 -1 到 -2.5px。
- 在
{component.code-window-card}里展示真实 SQL 代码块——ClickHouse 是数据库，展示查询本身，不要画营销插画代替查询。 - 用
{component.stat-callout}数字建立可信度（社区规模、贡献者、性能基准）。黄色数据数字是标志。 - 每个章节用
{spacing.section}（96px）节奏对齐。
避免
- 不要引入第二种品牌色。ClickHouse 是单色 + 黄色。
- 展示字重不要超过 700，也不要用 500 充当标题。层级靠尺寸而非字重梯度。
- 不要把黄色用于正文或大块表面填充（整版黄卡除外）。
- 除小型徽标外，不要用圆角按钮 / pill。标准按钮圆角是 8px（md）。
- 不要在连续两个章节里使用相同的表面模式。黑画布 → 深色功能卡 → 黄色 CTA 卡 → 黑画布 → 代码窗口卡。
- 不要用抽象插画代替 SQL 代码 mockup。代码本身即是营销能量。
- 不要为悬停态添加超出系统既有编码的样式。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| 手机 | < 768px | 汉堡菜单；首屏 h1 72→36px；code-window-card 堆到下方；功能栅格 1 栏；价格 1 栏 |
| 平板 | 768–1024px | 顶栏收紧；功能卡 2 栏；价格 2 栏 |
| 桌面 | 1024–1440px | 完整顶栏；功能卡 3 栏；价格 3-4 栏 |
| 宽屏 | > 1440px | 与桌面相同但外侧留白更多；最大内容 1280px |
触控目标
{component.button-primary}最小 40 × 40px。{component.button-icon-circular}正好 36 × 36——略低于 WCAG 44，但视觉居中。{component.text-input}高 40px。
折叠策略
- 顶栏在 < 768px 折成汉堡菜单。
- 首屏 7-5 网格在手机上折为单列。
- 功能卡栅格只减少列数，不缩放卡片。
- 代码窗口卡片字号不变；手机上卡片内可横向滚动。
- 价格档 4 → 2 → 1；主推档黄色在各断点保持视觉区分。
图片行为
- 深色 mockup 中的代码块字号不变；手机上横向滚动而不换行。
- 客户 logo 条保留原始宽度；移动端换行。
迭代指南
- 一次专注一个组件。引用其 YAML 键（如
{component.code-window-card}、{component.pricing-tier-card-featured}）。 - 同一组件的变体（
-active、-disabled、-focused）作为独立条目存在。 - 始终使用
{token.refs}——绝不内联 hex。 - 不要写悬停态。只有默认态与按下/激活态。
- 展示标题保持 Inter 700 + 负字距。正文保持 Inter 400。
- 黄黑组合是品牌契约。不要用次要点缀色软化它。
- 拿不准强调力度时，先加大 Inter 700 字号而不是增加颜色。
已知缺口
- 精确的黄色 hex（#faff69）取自截图，ClickHouse 官方品牌色可能略有差异。
- Inter 字重除 400 / 500 / 600 / 700 之外的轴向值未做规范——只记录了观察到的静态字重。
- 动效与过渡时长（代码打字机效果、数据计数器动画）不在范围内。
- 超出
{component.text-input-focused}的表单校验态未提取。 - 实际的 ClickHouse Cloud 产品界面（查询控制台、监控仪表盘、表浏览器）与营销页共享部分 token，但增加了许多产品专用组件，这些不在范围内。
- 客户 logo 条的精确不透明度/处理方式有差异——这里用的是近似的弱化灰。