OpenDesign ClickHouse 设计系统解析纯黑画布上的高性能数据控制台美学实战指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文基于 OpenDesign 仓库中 design-systems/clickhouse/DESIGN.md 设计系统包展开。ClickHouse 设计系统是一套以「酸黄绿荧光 × 曜石黑」为核心的高对比暗色视觉语言专为高性能数据库、数据基础设施、开发者工具类产品打造。读完本文你将掌握这套系统的完整色彩体系、字体层级、组件规范、深度机制与响应式策略并能直接复用仓库中已编译好的tokens.css语义令牌与组件夹具把它应用到自己的暗色数据类产品界面中。1. 视觉主题与氛围终端级的高性能驾驶舱ClickHouse 的界面是一台渲染在曜石黑之上的高性能驾驶舱酸黄绿荧光acid yellow-green与纯黑#000000的碰撞让访问者在阅读任何文字之前就已经感知到「速度」这个词。整个体验完全沉浸在黑暗中——纯黑页面背景搭配深炭色卡片#414141边框营造出终端级别的美学气质唯一的色彩打断是标志性的霓虹黄绿#faff69它像黑暗控制台上的荧光笔一样划过 CTA、边框与高亮时刻。这套系统通过极端的视觉重量来传达产品承诺Inter 字体 weight 900Black配合 96px 的英雄标题让文字块拥有近乎物理形态的「质量感」。这个「面向 AI 的数据库」网站用粗重的字体、高对比的霓虹强调和超大号的性能数据数字来沟通原始力量。ClickHouse 的设计没有任何含蓄之处——这正是它的意图视觉本身就在镜像产品「极致速度与性能」的承诺。真正让 ClickHouse 与众不同之处是近黑画布与霓虹黄绿强调之间的电击般的张力。#faff69落在#000000上构成了科技品牌中最高的对比配对之一让每一个 CTA 按钮、每一张高亮卡片、每一条强调边框都无法被忽略。支撑这一体系的是森林绿#166534——用于次级 CTA在不与霓虹竞争的前提下为操作层级增加深度。关键特征一览纯黑画布#000000 霓虹黄绿#faff69强调——最大对比度超重显示字体Inter weight 900Black最大 96px深炭色卡片系统#414141边框、80% 不透明度森林绿#166534次级 CTA 按钮性能数据以超大号数字呈现大写标签 宽字距1.4px支撑导航结构激活/按下状态文字切换为淡黄#f4f692所有链接 hover 均变为霓虹黄绿——统一的交互信号下拉类元素使用内阴影营造「压入表面」的凹陷深度在仓库中这套视觉基调被固化进 design-systems/clickhouse/tokens.css 的文件头注释里Pure Black (#000000) page bg — never dark gray as page bg、Neon Volt (#faff69) as sole chromatic accent — maximum contrast on black、Charcoal borders (rgba(65,65,65,0.8)) — primary depth mechanism。也就是说DESIGN.md 的每一项视觉决策都已经转化为可执行的 CSS 变量绑定而非停留在纸面描述。2. 色彩体系与角色分工2.1 主色Primary名称色值角色Neon Volt霓虹伏特#faff69标志性品牌色——黑画布上唯一的彩色强调。用于主 CTA、强调边框、链接 hover、高亮时刻Forest Green森林绿#166534次级 CTA 色——深饱和绿用于需要与霓虹区分的「Get Started」等主操作按钮Dark Forest暗森林#14572f更深的绿色变体用于边框与次级强调2.2 次级与强调色Secondary Accent名称色值角色Pale Yellow淡黄#f4f692激活/按下状态文字色——Neon Volt 的柔和版本用于状态反馈Border Olive橄榄边框#4f5100幽灵按钮边框用暗橄榄黄——霓虹的哑光兄弟色Olive Dark暗橄榄#161600最深的霓虹调色用于微妙的品牌文字2.3 表面与背景色Surface Background名称色值角色Pure Black纯黑#000000主页面背景——绝对黑追求最大对比Near Black近黑#141414按钮背景与轻微抬升的暗色表面Charcoal炭色#414141主边框色80% 不透明度——卡片与容器收边的绝对主力Deep Charcoal深炭色#343434更暗的边框变体用于微妙的分隔线Hover Gray悬停灰#3a3a3a按钮 hover 状态背景——比近黑略亮2.4 中性色与文字色Neutrals Text名称色值角色Pure White纯白#ffffff暗色表面上的主文字Silver银灰#a0a0a0次级正文与弱化内容Mid Gray中灰#58585828%用于深度效果的微妙灰色叠加Border Gray边框灰#e5e7eb浅色边框变体罕见浅色场景下使用2.5 渐变体系没有传统意义上的渐变ClickHouse刻意不使用渐变。它依赖纯色色块与高对比边框所谓的「渐变」就是对比本身——霓虹黄绿对纯黑的视觉强度是任何渐变都会稀释掉的。仓库印证语义令牌如何固化这套色彩tokens.css 把上述每个色值都映射为语义化的 CSS 变量并且做了品牌化的语义绑定--bg: #000000; /* Pure Black — the page canvas, absolute */ --surface: #141414; /* Near Black — buttons, lifted dark surfaces */ --fg: #ffffff; /* Pure White — primary text on dark surfaces */ --fg-2: #a0a0a0; /* Silver — secondary body text on dark */ --border: rgba(65, 65, 65, 0.8); /* Charcoal — primary card edge */ --border-soft: #343434; /* Deep Charcoal — inner separator, quieter */ --accent: #faff69; /* Neon Volt — signature acid yellow-green */ --accent-on: #151515; /* Near Black text on neon — maximum readability */ --accent-hover: #1d1d1d; /* neon CTA inverts to dark on hover */ --accent-active: #f4f692; /* Pale Yellow — active/pressed state */ --success: #166534; /* Forest Green — brand-aligned secondary CTA / success */一个值得注意的设计决策是Forest Green 直接复用作--success——因为它本来就是品牌的「Get Started」CTA 色天然属于调色板的一部分而--warn#eab308与--danger#dc2626使用 schema 默认值以保证与警告/危险状态可区分。从 design-tokens.json 的契约报告看这套令牌共 56 个分为 A1-identity8 个、B-slot4 个、A226 个、A1-structure18 个四层全部有源码行号背书契约评分 100、评级 excellent。这套约定也正是仓库 README 中「保持 schema token 名称不变跨品牌切换才可靠」原则的落地。3. 字体规范Typography Rules3.1 字体族主字体InterNext.js 优化变体__Inter_d1b8ee次级展示字体Basier__basier_a58b65回退字体Arial, Helvetica代码字体Inconsolata__Inconsolata_a25f62在 tokens.css 中对应为--font-display: Inter, Basier, Arial, Helvetica, ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-mono: Inconsolata, ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;3.2 层级表完整字阶角色字体字号字重行高字距备注Display MegaInter96px (6rem)9001.00紧normal最大冲击力超重Display / HeroInter72px (4.5rem)7001.00紧normal区块英雄标题Feature HeadingBasier36px (2.25rem)6001.30紧normal特性区块锚点Sub-headingInter / Basier24px (1.5rem)600–7001.17–1.38normal卡片标题Feature TitleInter / Basier20px (1.25rem)600–7001.40normal小型特性标题Body LargeInter18px (1.13rem)400–7001.56normal引言段落、按钮文字Body / ButtonInter16px (1rem)400–7001.50normal标准正文、导航、按钮CaptionInter14px (0.88rem)400–7001.43normal元数据、描述、链接Uppercase LabelInter14px (0.88rem)6001.431.4px区块眉标宽字距CodeInconsolata16px (1rem)6001.50normal代码块、命令SmallInter12px (0.75rem)5001.33normal最小文字MicroInter11.2px (0.7rem)5001.79宽松normal标签、微型标注3.3 字体原则Weight 900 是武器展示标题使用 Inter Black900——大多数站点永远不会触碰的字重。配合 96px 字号文字拥有了近乎建筑感的物理存在。完整的字重光谱系统覆盖 400、500、600、700、900——字重即层级。大写 最大字距区块眉标使用 1.4px 字距——比大多数系统更宽——在密集的暗色背景上形成醒目的结构标签。双无衬线分工Inter 负责展示与正文Basier 以 600 字重负责特性区块标题。这形成了「数据/性能」Inter与「产品/特性」Basier两种语境间的微妙人格切换。tokens.css 的字号令牌与 DESIGN.md 严格对齐--text-4xl: 96px、--text-3xl: 72px、--text-2xl: 36px、--text-xl: 24px…并强调--leading-tight: 1.0的极紧行高是「物理质量感」的来源、--tracking-display: normal对应 DESIGN.md 中展示字距为 normal 的规定。在 components.html 中h1被直接固化为font-size: var(--text-4xl); font-weight: 900;并注释为「Inter Black — the weapon」h2对应--text-2xl 600 字重 1.30 行高Basier 风格特性标题。4. 组件样式规范Component Stylings4.1 按钮体系霓虹主按钮Neon Primary背景Neon Volt#faff69文字近黑#151515内边距0 16px圆角锐利4px边框1px solid #faff69Hover背景变暗rgb(29, 29, 29)文字保持Active文字切换为 Pale Yellow#f4f692定位黑底上的吸睛 CTA暗色实心按钮Dark Solid背景Near Black#141414文字纯白#ffffff内边距12px 16px圆角4px 或 8px边框1px solid #141414Hover背景变 Hover Gray#3a3a3a文字 80% 不透明度Active文字变 Pale Yellow定位标准操作按钮森林绿按钮Forest Green背景Forest Green#166534文字纯白#ffffff内边距12px 16px边框1px solid #141414Hover同样的暗色转移ActivePale Yellow 文字定位「Get Started」/ 主要转化按钮幽灵/描边按钮Ghost / Outlined背景透明文字纯白#ffffff内边距0 32px圆角4px边框1px solid #4f5100橄榄色调Hover暗色背景转移ActivePale Yellow 文字定位带霓虹调边框的次级操作胶囊切换Pill Toggle背景透明圆角胶囊9999px用途开关/切换元素在 components.html 中按钮体系的实现细节值得关注.btn-primary使用padding: 0 16px; height: 40px的紧凑结构hover 时反转为近黑背景 霓虹文字background: var(--accent-hover); color: var(--accent)——这是 DESIGN.md「hover 反转」决策的代码级落地.btn-ghost的border-color: #4f5100对应 Border Olive所有按钮 hover/active 均通过--motion-fast150ms--ease-standardcubic-bezier(0.2, 0, 0, 1)过渡且:focus-visible统一使用霓虹调焦点环box-shadow: var(--focus-ring)。4.2 卡片与容器背景透明或 Near Black边框1px solid rgba(65, 65, 65, 0.8)——标志性的炭色收边圆角4px小元素或 8px卡片、容器Shadow Level 1轻微rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1pxShadow Level 2中等rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4pxShadow Level 3内嵌rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset——「按压」效果霓虹高亮卡片选中/激活卡片获得霓虹黄绿边框或强调4.3 导航黑底上的暗色导航栏LogoClickHouse 字标 黄/霓虹色图标链接白色文字hover 变 Neon Volt#faff69CTANeon Volt 按钮或 Forest Green 按钮分类使用大写标签4.4 特色组件性能数据Performance Stats超大号数字72px字重 700–900下方配简短描述关键指标使用高对比霓虹强调这是性能主张的核心视觉证明霓虹高亮卡片Neon-Highlighted Card标准暗色卡片 霓虹黄绿边框高亮营造「选中」或「精选」处理强调边框让卡片在暗色画布上脱颖而出代码块Code Blocks暗色表面 Inconsolata 600 字重霓虹与白色语法高亮终端式美学信任条Trust Bar暗色背景上的公司 Logo单色/白色 Logo 处理水平布局components.html 的组件清单与 components.manifest.json 精确对应全夹具共 69 个选择器、38 个类、25 个元素按 9 个组件组组织——buttons按钮与 CTA、inputs表单与控件、cards卡片与面板、badges徽章与状态标签、links链接与行内操作、keyboard键盘提示kbd、icons图标插槽、typography字阶与文本工具类、layout布局原语。例如.badge-success使用color-mix(in oklab, var(--accent), transparent 92%)生成低饱和霓虹底色、.stat-number使用--text-3xl 700 字重 letter-spacing: -0.02em、.stat-number-accent把数字染成霓虹色。每个组件组的tokenReferences记录了它消费了哪些令牌方便审查者核对一致性。5. 布局原则Layout Principles5.1 间距系统基础单位8px刻度2px、6px、7px、8px、10px、12px、16px、20px、24px、25px、32px、40px、44px、48px、64px按钮内边距12px 16px标准、0 16px紧凑、0 32px宽幽灵按钮区块垂直间距宽裕48–64pxtokens.css 将间距刻度收敛为 8px 基线的令牌序列--space-1: 4px到--space-12: 48px并把区块节奏固化为响应式变量--section-y-desktop: 64px、--section-y-tablet: 48px、--section-y-phone: 32px。5.2 栅格与容器最大容器宽度可达 2200px超宽屏并随响应式缩放Hero全宽暗色 巨型字体特性区块多列卡片栅格 暗色边框数据水平指标条全页暗色——没有浅色区块仓库实现把工作默认容器定为--container-max: 1280px——足够承载多列密集数据布局同时兼容常规桌面注释明确说明 DESIGN.md 的上限 2200px 是超宽屏场景。三档容器内边距--container-gutter-desktop: 24px/-tablet: 16px/-phone: 12px与section section { border-top: 1px solid var(--border) }的分隔策略在 components.html 中都有对应媒体查询实现1023px 与 639px 断点。5.3 留白哲学暗黑虚空即画布纯黑背景提供无限深度——元素悬浮于黑暗之中。信息密集特性卡片与数据高度密集映射数据库产品的性能导向。霓虹高亮即导航黄绿强调像跑道灯一样引导视线穿越暗色界面。5.4 圆角刻度锐利4px按钮、徽章、小元素、代码块舒适8px卡片、容器、分隔线胶囊9999px切换按钮、状态指示器tokens.css 用--radius-sm: 4px/--radius-md: 8px/--radius-lg: 8px/--radius-pill: 9999px落地并特意将 lg 也定为 8px注释「DESIGN.md caps radius at 8px」——圆角上限 8px 是数据库精密几何的一部分。6. 深度与层级Depth Elevation层级处理方式用途扁平Level 0无阴影黑色背景、文本块描边Level 11px solid rgba(65,65,65,0.8)标准卡片、容器轻微Level 20px 1px 3px rgba(0,0,0,0.1)轻微卡片抬升抬升Level 30px 10px 15px -3px rgba(0,0,0,0.1)特性卡片、hover 状态按压/内嵌Level 40px 4px 25px rgba(0,0,0,0.14) inset激活/按下元素——「沉入表面」霓虹高亮Level 5Neon Volt 边框#faff69精选/选中卡片最大强调阴影哲学ClickHouse 在黑色画布上使用阴影时几乎不可见——它们存在的意义更多是微妙的立体感而非明显的抬升。最独特的深度机制是内嵌阴影Level 4它创造出 ClickHouse 特有的「按压入表面」效果。而霓虹边框高亮Level 5才是最主要的注意力捕获式深度机制。tokens.css 对此的编码尤其坦诚--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)炭色发丝线、--elev-raised为契约一致性保留的轻微阴影注释直言「Shadows are barely visible on black — depth comes from borders」——真正的深度信号是边框。此外还提供了霓虹调焦点环--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)让焦点反馈始终向强调色偏移与「链接 hover 全部变霓虹」形成统一交互信号。7. 做与不做Dos and DontsDo应当遵守将 Neon Volt#faff69作为唯一的彩色强调——它必须在纯黑上弹跳出来英雄展示文字使用 Inter weight 900——极端的字重就是人格本身一切保持纯黑#000000——绝不用深灰代替页面背景所有卡片收边使用炭色边框rgba(65,65,65,0.8)主 CTA 按钮使用 Forest Green#166534——与霓虹区分以形成操作层级性能数据用超大号数字展示——这是核心视觉论证区块标签使用大写 宽字距1.4px激活/按下文字状态使用 Pale Yellow#f4f692——而不只是改不透明度链接 hover永远切换为 Neon Volt——统一交互反馈Dont严禁事项不要引入额外颜色——调色板严格限定为黑、霓虹、绿、灰不要把霓虹用作背景填充——它只是强调与边框色CTA 按钮除外不要把展示字重降到 700 以下——粗重是人格核心任何地方都不要使用浅色/白色背景——整个体验是暗色的圆角不要超过 8px——锐利几何反映数据库的精密性不要在黑色上使用柔和/扩散阴影——它们不可见改用边框实现深度不要省略激活状态的内嵌阴影——「按压」效果是标志性的不要使用暖中性色——所有灰都是完全中性的这些约束在仓库中不仅是文档还被 USAGE.md 强化为使用守则「Avoid raw hex values outside the copied:roottoken block」避免在令牌块之外使用裸十六进制色值、「Avoid redefining Tailwind or design-token values independently oftokens.css」避免脱离 tokens.css 单独重定义、「Avoid adding new component recipes that are not represented incomponents.htmlorDESIGN.md」。8. 响应式行为Responsive Behavior8.1 断点表名称宽度关键变化手机Mobile640px单列卡片堆叠小平板Small Tablet640–768px微调平板Tablet768–1024px双列栅格桌面Desktop1024–1280px标准布局大桌面Large Desktop1280–1536px内容扩展超宽Ultra-wide1536–2200px最大容器宽度8.2 触控目标按钮最小内边距 12px 16px卡片表面可作为触控目标导航链接间距充足8.3 折叠策略Hero 文字96px → 72px → 48px → 36px特性栅格多列 → 2 列 → 1 列数据条水平 → 堆叠导航完整 → 汉堡菜单8.4 图片行为产品截图保持宽高比窄屏上代码块使用水平滚动所有图片都置于暗色背景上在实现层components.html 展示了两个代表性断点1023px 以下容器内边距切到 tablet 档、hero 栅格从1.5fr 1fr双列降为单列639px 以下切到 phone 档。这种「先桌面后收缩」的写法与 DESIGN.md 的断点表一一对应。9. Agent 提示词指南Agent Prompt Guide9.1 快速色彩参考品牌强调Neon Volt (#faff69)页面背景Pure Black (#000000)CTA 绿Forest Green (#166534)卡片边框Charcoal (rgba(65,65,65,0.8))主文字Pure White (#ffffff)次文字Silver (#a0a0a0)激活状态Pale Yellow (#f4f692)按钮表面Near Black (#141414)9.2 组件提示词示例「在 Pure Black#000000上创建一个 hero 区块96px Inter weight 900、行高 1.0 的巨型标题纯白文字加一个 Neon Volt#faff69CTA 按钮深色文字、4px 圆角、0 16px 内边距和一个幽灵按钮透明、1px solid #4f5100边框。」「设计一张黑底特性卡片1px solid rgba(65,65,65,0.8)边框、8px 圆角标题 24px Inter weight 700正文 16px Silver#a0a0a0再加一个霓虹高亮变体1px solid #faff69边框。」「构建一个性能数据条大数字 72px Inter weight 700 纯白下方 14px Silver 简短描述黑底。关键指标用#faff69强调。」「创建一个 Forest Green#166534CTA 按钮白色文字、12px 16px 内边距、4px 圆角、1px solid #141414边框hover 时背景变#3a3a3a、文字 80% 不透明度。」「设计一个区块眉标14px Inter weight 600、字距 1.4px、大写黑底 Silver#a0a0a0文字。」9.3 迭代指南供 Agent 自检一切保持纯黑——不要用深灰替代Neon Volt#faff69只用于强调与 CTA——绝不大面积背景Hero 用 900 字重、标题 700、标签 600、正文 400–500激活状态用 Pale Yellow#f4f692——而不是仅改不透明度所有链接 hover 变霓虹——一致交互反馈炭色边框rgba(65,65,65,0.8)是主要深度机制10. 在 OpenDesign 中使用包结构与落地路径ClickHouse 设计系统在 OpenDesign 中不是孤立文档而是一个完整的可移植设计系统包portable design-system package。从 design-systems/README.md 可知每个包遵循同一套最小机器可读结构manifest.json发现元数据与来源声明DESIGN.md面向 Agent 的规范正文tokens.css编译后的语义令牌样式表。design-systems/clickhouse/manifest.json 记录了 ClickHouse 包的完整契约id: clickhouse、category: Backend Data、schemaVersion: od-design-system-project/v1、importMode: normalized并声明了丰富的衍生文件——design-tokens.jsonDesign Tokens JSON、tailwind-v4.cssTailwind v4 映射、components.html组件夹具、USAGE.mdAgent 阅读顺序、preview/colors、typography、spacing 三个预览页以及source/来源证据与令牌契约报告。craft字段建议在组合时叠加color与accessibility-baseline两条工艺基线。Agent 的正确使用顺序见 USAGE.md先读 USAGE.md 理解包契约读 DESIGN.md 掌握视觉意图、约束与反模式把tokens.css粘贴到第一个产物artifact的style块开头再写组件 CSS——保证所有色值都来自令牌用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉核对时查看preview/页面如果使用 Tailwind v4可直接引入派生的 tailwind-v4.css——它通过theme把全部令牌映射为 Tailwind 主题变量--color-accent、--text-4xl、--shadow-focus-ring、--duration-fast等但文件头明确声明「Derived from tokens.css. Keep tokens.css as the source of truth」即tokens.css 才是唯一事实源衍生文件只读不手改。值得注意的是 source/evidence.md 的声明该包是 OpenDesign 策展的 bundled fixture内置夹具并非对上游品牌官网的实时抓取——品牌引用包仅是美学灵感而非所引用品牌的官方资产。这一点在事实边界上值得使用者留意。结语ClickHouse 设计系统演示了一种极端的克制美学一个彩色强调色 绝对黑画布 极限字重 边框深度就足以构建出「高性能、快、专业」的完整品牌叙事。它证明了暗色数据类产品不需要花哨的渐变或复杂的装饰——把对比度拉满、把字重用足、让边框承担深度就是一套可复现、可工程化、可交给 Agent 执行的方案。在 OpenDesign 中这套体系已经被完整编码为令牌、组件夹具与提示词指南任何开发者和编码代理都可以直接消费它为数据库、分析工具、开发者平台类产品快速生成风格统一的高质量界面。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 20:49:12 · 阅读 1.2k OpenDesign ClickHouse 设计系统解析：纯黑画布上的高性能数据控制台美学实战指南
OpenDesign ClickHouse 设计系统解析纯黑画布上的高性能数据控制台美学实战指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文基于 OpenDesign 仓库中 design-systems/clickhouse/DESIGN.md 设计系统包展开。ClickHouse 设计系统是一套以「酸黄绿荧光 × 曜石黑」为核心的高对比暗色视觉语言专为高性能数据库、数据基础设施、开发者工具类产品打造。读完本文你将掌握这套系统的完整色彩体系、字体层级、组件规范、深度机制与响应式策略并能直接复用仓库中已编译好的tokens.css语义令牌与组件夹具把它应用到自己的暗色数据类产品界面中。1. 视觉主题与氛围终端级的高性能驾驶舱ClickHouse 的界面是一台渲染在曜石黑之上的高性能驾驶舱酸黄绿荧光acid yellow-green与纯黑#000000的碰撞让访问者在阅读任何文字之前就已经感知到「速度」这个词。整个体验完全沉浸在黑暗中——纯黑页面背景搭配深炭色卡片#414141边框营造出终端级别的美学气质唯一的色彩打断是标志性的霓虹黄绿#faff69它像黑暗控制台上的荧光笔一样划过 CTA、边框与高亮时刻。这套系统通过极端的视觉重量来传达产品承诺Inter 字体 weight 900Black配合 96px 的英雄标题让文字块拥有近乎物理形态的「质量感」。这个「面向 AI 的数据库」网站用粗重的字体、高对比的霓虹强调和超大号的性能数据数字来沟通原始力量。ClickHouse 的设计没有任何含蓄之处——这正是它的意图视觉本身就在镜像产品「极致速度与性能」的承诺。真正让 ClickHouse 与众不同之处是近黑画布与霓虹黄绿强调之间的电击般的张力。#faff69落在#000000上构成了科技品牌中最高的对比配对之一让每一个 CTA 按钮、每一张高亮卡片、每一条强调边框都无法被忽略。支撑这一体系的是森林绿#166534——用于次级 CTA在不与霓虹竞争的前提下为操作层级增加深度。关键特征一览纯黑画布#000000 霓虹黄绿#faff69强调——最大对比度超重显示字体Inter weight 900Black最大 96px深炭色卡片系统#414141边框、80% 不透明度森林绿#166534次级 CTA 按钮性能数据以超大号数字呈现大写标签 宽字距1.4px支撑导航结构激活/按下状态文字切换为淡黄#f4f692所有链接 hover 均变为霓虹黄绿——统一的交互信号下拉类元素使用内阴影营造「压入表面」的凹陷深度在仓库中这套视觉基调被固化进 design-systems/clickhouse/tokens.css 的文件头注释里Pure Black (#000000) page bg — never dark gray as page bg、Neon Volt (#faff69) as sole chromatic accent — maximum contrast on black、Charcoal borders (rgba(65,65,65,0.8)) — primary depth mechanism。也就是说DESIGN.md 的每一项视觉决策都已经转化为可执行的 CSS 变量绑定而非停留在纸面描述。2. 色彩体系与角色分工2.1 主色Primary名称色值角色Neon Volt霓虹伏特#faff69标志性品牌色——黑画布上唯一的彩色强调。用于主 CTA、强调边框、链接 hover、高亮时刻Forest Green森林绿#166534次级 CTA 色——深饱和绿用于需要与霓虹区分的「Get Started」等主操作按钮Dark Forest暗森林#14572f更深的绿色变体用于边框与次级强调2.2 次级与强调色Secondary Accent名称色值角色Pale Yellow淡黄#f4f692激活/按下状态文字色——Neon Volt 的柔和版本用于状态反馈Border Olive橄榄边框#4f5100幽灵按钮边框用暗橄榄黄——霓虹的哑光兄弟色Olive Dark暗橄榄#161600最深的霓虹调色用于微妙的品牌文字2.3 表面与背景色Surface Background名称色值角色Pure Black纯黑#000000主页面背景——绝对黑追求最大对比Near Black近黑#141414按钮背景与轻微抬升的暗色表面Charcoal炭色#414141主边框色80% 不透明度——卡片与容器收边的绝对主力Deep Charcoal深炭色#343434更暗的边框变体用于微妙的分隔线Hover Gray悬停灰#3a3a3a按钮 hover 状态背景——比近黑略亮2.4 中性色与文字色Neutrals Text名称色值角色Pure White纯白#ffffff暗色表面上的主文字Silver银灰#a0a0a0次级正文与弱化内容Mid Gray中灰#58585828%用于深度效果的微妙灰色叠加Border Gray边框灰#e5e7eb浅色边框变体罕见浅色场景下使用2.5 渐变体系没有传统意义上的渐变ClickHouse刻意不使用渐变。它依赖纯色色块与高对比边框所谓的「渐变」就是对比本身——霓虹黄绿对纯黑的视觉强度是任何渐变都会稀释掉的。仓库印证语义令牌如何固化这套色彩tokens.css 把上述每个色值都映射为语义化的 CSS 变量并且做了品牌化的语义绑定--bg: #000000; /* Pure Black — the page canvas, absolute */ --surface: #141414; /* Near Black — buttons, lifted dark surfaces */ --fg: #ffffff; /* Pure White — primary text on dark surfaces */ --fg-2: #a0a0a0; /* Silver — secondary body text on dark */ --border: rgba(65, 65, 65, 0.8); /* Charcoal — primary card edge */ --border-soft: #343434; /* Deep Charcoal — inner separator, quieter */ --accent: #faff69; /* Neon Volt — signature acid yellow-green */ --accent-on: #151515; /* Near Black text on neon — maximum readability */ --accent-hover: #1d1d1d; /* neon CTA inverts to dark on hover */ --accent-active: #f4f692; /* Pale Yellow — active/pressed state */ --success: #166534; /* Forest Green — brand-aligned secondary CTA / success */一个值得注意的设计决策是Forest Green 直接复用作--success——因为它本来就是品牌的「Get Started」CTA 色天然属于调色板的一部分而--warn#eab308与--danger#dc2626使用 schema 默认值以保证与警告/危险状态可区分。从 design-tokens.json 的契约报告看这套令牌共 56 个分为 A1-identity8 个、B-slot4 个、A226 个、A1-structure18 个四层全部有源码行号背书契约评分 100、评级 excellent。这套约定也正是仓库 README 中「保持 schema token 名称不变跨品牌切换才可靠」原则的落地。3. 字体规范Typography Rules3.1 字体族主字体InterNext.js 优化变体__Inter_d1b8ee次级展示字体Basier__basier_a58b65回退字体Arial, Helvetica代码字体Inconsolata__Inconsolata_a25f62在 tokens.css 中对应为--font-display: Inter, Basier, Arial, Helvetica, ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-mono: Inconsolata, ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;3.2 层级表完整字阶角色字体字号字重行高字距备注Display MegaInter96px (6rem)9001.00紧normal最大冲击力超重Display / HeroInter72px (4.5rem)7001.00紧normal区块英雄标题Feature HeadingBasier36px (2.25rem)6001.30紧normal特性区块锚点Sub-headingInter / Basier24px (1.5rem)600–7001.17–1.38normal卡片标题Feature TitleInter / Basier20px (1.25rem)600–7001.40normal小型特性标题Body LargeInter18px (1.13rem)400–7001.56normal引言段落、按钮文字Body / ButtonInter16px (1rem)400–7001.50normal标准正文、导航、按钮CaptionInter14px (0.88rem)400–7001.43normal元数据、描述、链接Uppercase LabelInter14px (0.88rem)6001.431.4px区块眉标宽字距CodeInconsolata16px (1rem)6001.50normal代码块、命令SmallInter12px (0.75rem)5001.33normal最小文字MicroInter11.2px (0.7rem)5001.79宽松normal标签、微型标注3.3 字体原则Weight 900 是武器展示标题使用 Inter Black900——大多数站点永远不会触碰的字重。配合 96px 字号文字拥有了近乎建筑感的物理存在。完整的字重光谱系统覆盖 400、500、600、700、900——字重即层级。大写 最大字距区块眉标使用 1.4px 字距——比大多数系统更宽——在密集的暗色背景上形成醒目的结构标签。双无衬线分工Inter 负责展示与正文Basier 以 600 字重负责特性区块标题。这形成了「数据/性能」Inter与「产品/特性」Basier两种语境间的微妙人格切换。tokens.css 的字号令牌与 DESIGN.md 严格对齐--text-4xl: 96px、--text-3xl: 72px、--text-2xl: 36px、--text-xl: 24px…并强调--leading-tight: 1.0的极紧行高是「物理质量感」的来源、--tracking-display: normal对应 DESIGN.md 中展示字距为 normal 的规定。在 components.html 中h1被直接固化为font-size: var(--text-4xl); font-weight: 900;并注释为「Inter Black — the weapon」h2对应--text-2xl 600 字重 1.30 行高Basier 风格特性标题。4. 组件样式规范Component Stylings4.1 按钮体系霓虹主按钮Neon Primary背景Neon Volt#faff69文字近黑#151515内边距0 16px圆角锐利4px边框1px solid #faff69Hover背景变暗rgb(29, 29, 29)文字保持Active文字切换为 Pale Yellow#f4f692定位黑底上的吸睛 CTA暗色实心按钮Dark Solid背景Near Black#141414文字纯白#ffffff内边距12px 16px圆角4px 或 8px边框1px solid #141414Hover背景变 Hover Gray#3a3a3a文字 80% 不透明度Active文字变 Pale Yellow定位标准操作按钮森林绿按钮Forest Green背景Forest Green#166534文字纯白#ffffff内边距12px 16px边框1px solid #141414Hover同样的暗色转移ActivePale Yellow 文字定位「Get Started」/ 主要转化按钮幽灵/描边按钮Ghost / Outlined背景透明文字纯白#ffffff内边距0 32px圆角4px边框1px solid #4f5100橄榄色调Hover暗色背景转移ActivePale Yellow 文字定位带霓虹调边框的次级操作胶囊切换Pill Toggle背景透明圆角胶囊9999px用途开关/切换元素在 components.html 中按钮体系的实现细节值得关注.btn-primary使用padding: 0 16px; height: 40px的紧凑结构hover 时反转为近黑背景 霓虹文字background: var(--accent-hover); color: var(--accent)——这是 DESIGN.md「hover 反转」决策的代码级落地.btn-ghost的border-color: #4f5100对应 Border Olive所有按钮 hover/active 均通过--motion-fast150ms--ease-standardcubic-bezier(0.2, 0, 0, 1)过渡且:focus-visible统一使用霓虹调焦点环box-shadow: var(--focus-ring)。4.2 卡片与容器背景透明或 Near Black边框1px solid rgba(65, 65, 65, 0.8)——标志性的炭色收边圆角4px小元素或 8px卡片、容器Shadow Level 1轻微rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1pxShadow Level 2中等rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4pxShadow Level 3内嵌rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset——「按压」效果霓虹高亮卡片选中/激活卡片获得霓虹黄绿边框或强调4.3 导航黑底上的暗色导航栏LogoClickHouse 字标 黄/霓虹色图标链接白色文字hover 变 Neon Volt#faff69CTANeon Volt 按钮或 Forest Green 按钮分类使用大写标签4.4 特色组件性能数据Performance Stats超大号数字72px字重 700–900下方配简短描述关键指标使用高对比霓虹强调这是性能主张的核心视觉证明霓虹高亮卡片Neon-Highlighted Card标准暗色卡片 霓虹黄绿边框高亮营造「选中」或「精选」处理强调边框让卡片在暗色画布上脱颖而出代码块Code Blocks暗色表面 Inconsolata 600 字重霓虹与白色语法高亮终端式美学信任条Trust Bar暗色背景上的公司 Logo单色/白色 Logo 处理水平布局components.html 的组件清单与 components.manifest.json 精确对应全夹具共 69 个选择器、38 个类、25 个元素按 9 个组件组组织——buttons按钮与 CTA、inputs表单与控件、cards卡片与面板、badges徽章与状态标签、links链接与行内操作、keyboard键盘提示kbd、icons图标插槽、typography字阶与文本工具类、layout布局原语。例如.badge-success使用color-mix(in oklab, var(--accent), transparent 92%)生成低饱和霓虹底色、.stat-number使用--text-3xl 700 字重 letter-spacing: -0.02em、.stat-number-accent把数字染成霓虹色。每个组件组的tokenReferences记录了它消费了哪些令牌方便审查者核对一致性。5. 布局原则Layout Principles5.1 间距系统基础单位8px刻度2px、6px、7px、8px、10px、12px、16px、20px、24px、25px、32px、40px、44px、48px、64px按钮内边距12px 16px标准、0 16px紧凑、0 32px宽幽灵按钮区块垂直间距宽裕48–64pxtokens.css 将间距刻度收敛为 8px 基线的令牌序列--space-1: 4px到--space-12: 48px并把区块节奏固化为响应式变量--section-y-desktop: 64px、--section-y-tablet: 48px、--section-y-phone: 32px。5.2 栅格与容器最大容器宽度可达 2200px超宽屏并随响应式缩放Hero全宽暗色 巨型字体特性区块多列卡片栅格 暗色边框数据水平指标条全页暗色——没有浅色区块仓库实现把工作默认容器定为--container-max: 1280px——足够承载多列密集数据布局同时兼容常规桌面注释明确说明 DESIGN.md 的上限 2200px 是超宽屏场景。三档容器内边距--container-gutter-desktop: 24px/-tablet: 16px/-phone: 12px与section section { border-top: 1px solid var(--border) }的分隔策略在 components.html 中都有对应媒体查询实现1023px 与 639px 断点。5.3 留白哲学暗黑虚空即画布纯黑背景提供无限深度——元素悬浮于黑暗之中。信息密集特性卡片与数据高度密集映射数据库产品的性能导向。霓虹高亮即导航黄绿强调像跑道灯一样引导视线穿越暗色界面。5.4 圆角刻度锐利4px按钮、徽章、小元素、代码块舒适8px卡片、容器、分隔线胶囊9999px切换按钮、状态指示器tokens.css 用--radius-sm: 4px/--radius-md: 8px/--radius-lg: 8px/--radius-pill: 9999px落地并特意将 lg 也定为 8px注释「DESIGN.md caps radius at 8px」——圆角上限 8px 是数据库精密几何的一部分。6. 深度与层级Depth Elevation层级处理方式用途扁平Level 0无阴影黑色背景、文本块描边Level 11px solid rgba(65,65,65,0.8)标准卡片、容器轻微Level 20px 1px 3px rgba(0,0,0,0.1)轻微卡片抬升抬升Level 30px 10px 15px -3px rgba(0,0,0,0.1)特性卡片、hover 状态按压/内嵌Level 40px 4px 25px rgba(0,0,0,0.14) inset激活/按下元素——「沉入表面」霓虹高亮Level 5Neon Volt 边框#faff69精选/选中卡片最大强调阴影哲学ClickHouse 在黑色画布上使用阴影时几乎不可见——它们存在的意义更多是微妙的立体感而非明显的抬升。最独特的深度机制是内嵌阴影Level 4它创造出 ClickHouse 特有的「按压入表面」效果。而霓虹边框高亮Level 5才是最主要的注意力捕获式深度机制。tokens.css 对此的编码尤其坦诚--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)炭色发丝线、--elev-raised为契约一致性保留的轻微阴影注释直言「Shadows are barely visible on black — depth comes from borders」——真正的深度信号是边框。此外还提供了霓虹调焦点环--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)让焦点反馈始终向强调色偏移与「链接 hover 全部变霓虹」形成统一交互信号。7. 做与不做Dos and DontsDo应当遵守将 Neon Volt#faff69作为唯一的彩色强调——它必须在纯黑上弹跳出来英雄展示文字使用 Inter weight 900——极端的字重就是人格本身一切保持纯黑#000000——绝不用深灰代替页面背景所有卡片收边使用炭色边框rgba(65,65,65,0.8)主 CTA 按钮使用 Forest Green#166534——与霓虹区分以形成操作层级性能数据用超大号数字展示——这是核心视觉论证区块标签使用大写 宽字距1.4px激活/按下文字状态使用 Pale Yellow#f4f692——而不只是改不透明度链接 hover永远切换为 Neon Volt——统一交互反馈Dont严禁事项不要引入额外颜色——调色板严格限定为黑、霓虹、绿、灰不要把霓虹用作背景填充——它只是强调与边框色CTA 按钮除外不要把展示字重降到 700 以下——粗重是人格核心任何地方都不要使用浅色/白色背景——整个体验是暗色的圆角不要超过 8px——锐利几何反映数据库的精密性不要在黑色上使用柔和/扩散阴影——它们不可见改用边框实现深度不要省略激活状态的内嵌阴影——「按压」效果是标志性的不要使用暖中性色——所有灰都是完全中性的这些约束在仓库中不仅是文档还被 USAGE.md 强化为使用守则「Avoid raw hex values outside the copied:roottoken block」避免在令牌块之外使用裸十六进制色值、「Avoid redefining Tailwind or design-token values independently oftokens.css」避免脱离 tokens.css 单独重定义、「Avoid adding new component recipes that are not represented incomponents.htmlorDESIGN.md」。8. 响应式行为Responsive Behavior8.1 断点表名称宽度关键变化手机Mobile640px单列卡片堆叠小平板Small Tablet640–768px微调平板Tablet768–1024px双列栅格桌面Desktop1024–1280px标准布局大桌面Large Desktop1280–1536px内容扩展超宽Ultra-wide1536–2200px最大容器宽度8.2 触控目标按钮最小内边距 12px 16px卡片表面可作为触控目标导航链接间距充足8.3 折叠策略Hero 文字96px → 72px → 48px → 36px特性栅格多列 → 2 列 → 1 列数据条水平 → 堆叠导航完整 → 汉堡菜单8.4 图片行为产品截图保持宽高比窄屏上代码块使用水平滚动所有图片都置于暗色背景上在实现层components.html 展示了两个代表性断点1023px 以下容器内边距切到 tablet 档、hero 栅格从1.5fr 1fr双列降为单列639px 以下切到 phone 档。这种「先桌面后收缩」的写法与 DESIGN.md 的断点表一一对应。9. Agent 提示词指南Agent Prompt Guide9.1 快速色彩参考品牌强调Neon Volt (#faff69)页面背景Pure Black (#000000)CTA 绿Forest Green (#166534)卡片边框Charcoal (rgba(65,65,65,0.8))主文字Pure White (#ffffff)次文字Silver (#a0a0a0)激活状态Pale Yellow (#f4f692)按钮表面Near Black (#141414)9.2 组件提示词示例「在 Pure Black#000000上创建一个 hero 区块96px Inter weight 900、行高 1.0 的巨型标题纯白文字加一个 Neon Volt#faff69CTA 按钮深色文字、4px 圆角、0 16px 内边距和一个幽灵按钮透明、1px solid #4f5100边框。」「设计一张黑底特性卡片1px solid rgba(65,65,65,0.8)边框、8px 圆角标题 24px Inter weight 700正文 16px Silver#a0a0a0再加一个霓虹高亮变体1px solid #faff69边框。」「构建一个性能数据条大数字 72px Inter weight 700 纯白下方 14px Silver 简短描述黑底。关键指标用#faff69强调。」「创建一个 Forest Green#166534CTA 按钮白色文字、12px 16px 内边距、4px 圆角、1px solid #141414边框hover 时背景变#3a3a3a、文字 80% 不透明度。」「设计一个区块眉标14px Inter weight 600、字距 1.4px、大写黑底 Silver#a0a0a0文字。」9.3 迭代指南供 Agent 自检一切保持纯黑——不要用深灰替代Neon Volt#faff69只用于强调与 CTA——绝不大面积背景Hero 用 900 字重、标题 700、标签 600、正文 400–500激活状态用 Pale Yellow#f4f692——而不是仅改不透明度所有链接 hover 变霓虹——一致交互反馈炭色边框rgba(65,65,65,0.8)是主要深度机制10. 在 OpenDesign 中使用包结构与落地路径ClickHouse 设计系统在 OpenDesign 中不是孤立文档而是一个完整的可移植设计系统包portable design-system package。从 design-systems/README.md 可知每个包遵循同一套最小机器可读结构manifest.json发现元数据与来源声明DESIGN.md面向 Agent 的规范正文tokens.css编译后的语义令牌样式表。design-systems/clickhouse/manifest.json 记录了 ClickHouse 包的完整契约id: clickhouse、category: Backend Data、schemaVersion: od-design-system-project/v1、importMode: normalized并声明了丰富的衍生文件——design-tokens.jsonDesign Tokens JSON、tailwind-v4.cssTailwind v4 映射、components.html组件夹具、USAGE.mdAgent 阅读顺序、preview/colors、typography、spacing 三个预览页以及source/来源证据与令牌契约报告。craft字段建议在组合时叠加color与accessibility-baseline两条工艺基线。Agent 的正确使用顺序见 USAGE.md先读 USAGE.md 理解包契约读 DESIGN.md 掌握视觉意图、约束与反模式把tokens.css粘贴到第一个产物artifact的style块开头再写组件 CSS——保证所有色值都来自令牌用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉核对时查看preview/页面如果使用 Tailwind v4可直接引入派生的 tailwind-v4.css——它通过theme把全部令牌映射为 Tailwind 主题变量--color-accent、--text-4xl、--shadow-focus-ring、--duration-fast等但文件头明确声明「Derived from tokens.css. Keep tokens.css as the source of truth」即tokens.css 才是唯一事实源衍生文件只读不手改。值得注意的是 source/evidence.md 的声明该包是 OpenDesign 策展的 bundled fixture内置夹具并非对上游品牌官网的实时抓取——品牌引用包仅是美学灵感而非所引用品牌的官方资产。这一点在事实边界上值得使用者留意。结语ClickHouse 设计系统演示了一种极端的克制美学一个彩色强调色 绝对黑画布 极限字重 边框深度就足以构建出「高性能、快、专业」的完整品牌叙事。它证明了暗色数据类产品不需要花哨的渐变或复杂的装饰——把对比度拉满、把字重用足、让边框承担深度就是一套可复现、可工程化、可交给 Agent 执行的方案。在 OpenDesign 中这套体系已经被完整编码为令牌、组件夹具与提示词指南任何开发者和编码代理都可以直接消费它为数据库、分析工具、开发者平台类产品快速生成风格统一的高质量界面。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考