精选 · 开放 · 免费

Clickhouse

一款高性能的开发者平台，采用深色、高对比度界面，为技术精确性而构建。

Developer ToolsBold TypographyDark ModeCleanPremium
Clickhouse 网站截图
↓ 下载设计系统包 (28 MB)在 OpenDesign 中打开

原站: https://clickhouse.com

📦 浏览包内文件 →

01

设计气质 DNA

数据库数据分析实时基础设施

为高性能数据操作构建的指挥中心仪表盘。

02

色彩

#faf569Accent
#ffffffInk
#a0a0a0Ink soft
#151515BG
#1f1f1cBG soft
#131313BG quiet
#dfdfdfMuted
rgba(65, 65, 65, 0.8)Line

高对比度深色主题，优先考虑可读性，并将注意力聚焦于充满活力的黄色强调色上。

03

字体

humanist-sans · monospace

在人文无衬线字体族中使用粗体进行强调 · 为展示型排版保持紧凑的行高 · 确保文本与背景之间的高对比度

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

基于4像素的统一网格，章节间距使用更大的倍数。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgba(65, 65, 65, 0.8)

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 20px 25px -5px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽英雄区章节，内容居中，并采用12列网格进行结构化布局

07

动效与交互

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的颜色和背景过渡 · 微妙的悬停状态变化

按钮和链接上的颜色和背景色过渡。 · 通过微妙的透明度或变换变化提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Clickhouse — 桌面首屏（hero）
桌面首屏（hero）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clickhouse — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个用于ClickHouse实时数据库的高端开发者工具界面。设计采用深色模式调色板，近乎黑色的背景和用于主要操作的高饱和度黄色强调色。字体是干净的人文无衬线字体，展示部分使用粗体。关键十六进制颜色值为#151515（背景）、#faf569（强调色）和#ffffff（墨色）。关键禁忌：绝不使用浅色模式，绝不使用多种强调色，绝不使用装饰性衬线字体。布局宽敞，采用12列网格，英雄区内容居中。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko