精选 · 开放 · 免费
Clickhouse
一款高性能的开发者平台,采用深色、高对比度界面,为技术精确性而构建。
Developer ToolsBold TypographyDark ModeCleanPremium
01
设计气质 DNA
数据库数据分析实时基础设施
为高性能数据操作构建的指挥中心仪表盘。
02
色彩
#faf569Accent
#ffffffInk
#a0a0a0Ink soft
#151515BG
#1f1f1cBG soft
#131313BG quiet
#dfdfdfMuted
rgba(65, 65, 65, 0.8)Line
高对比度深色主题,优先考虑可读性,并将注意力聚焦于充满活力的黄色强调色上。
03
字体
humanist-sans · monospace
- display
72px · 500 - headline
36px · 500 - body
16px · 400 - small
14px · 400
在人文无衬线字体族中使用粗体进行强调 · 为展示型排版保持紧凑的行高 · 确保文本与背景之间的高对比度
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
组件
- button 实心的黄色主按钮,带有黑色文字和微小圆角;次要按钮采用透明背景和边框。
- card 深色表面的卡片,带有微妙的边框和圆角,通常包含集成图标。
- chip 未显著展示。
- input 在截图中未显著展示。
- hero 以深色为背景的大规模居中排版,具有清晰的层级结构和双重行动号召按钮。
09
文案语气与禁用清单
- 语气 自信、技术性强且直接。
- 标题风格 加粗、简洁的陈述,强调性能和规模。
- 按钮文案 行动导向,具有清晰的价值主张,例如“开始免费云试用”。
- 不要使用大于12px的圆角——截图显示的是微妙、功能性的圆角
- 不要使用多种强调色——截图显示的是单一、主导的黄色强调色
- 不要使用浅色模式或白色背景——截图显示的是深色模式设计
- 不要使用装饰性衬线字体——截图显示所有展示和正文文本均使用人文无衬线字体
- 不要使用繁复的纹理或图案——截图显示的是干净、扁平的表面
- 不要使用低对比度文本——截图显示的是深色背景上的高对比度白色和黄色文本
- 避免: 模糊的营销术语
- 避免: 过于随意的语言
- 避免: 缺乏上下文的复杂技术解释
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于ClickHouse实时数据库的高端开发者工具界面。设计采用深色模式调色板,近乎黑色的背景和用于主要操作的高饱和度黄色强调色。字体是干净的人文无衬线字体,展示部分使用粗体。关键十六进制颜色值为#151515(背景)、#faf569(强调色)和#ffffff(墨色)。关键禁忌:绝不使用浅色模式,绝不使用多种强调色,绝不使用装饰性衬线字体。布局宽敞,采用12列网格,英雄区内容居中。
en · zh-CN · zh-TW · ja · ko