01
设计气质 DNA
数据库数据分析实时基础设施
为高性能数据操作构建的指挥中心仪表盘。
02
色彩
#faf569Accent#ffffffInk#a0a0a0Ink soft#151515BG#1f1f1cBG soft#131313BG quiet#dfdfdfMutedrgba(65, 65, 65, 0.8)Line高对比度深色主题，优先考虑可读性，并将注意力聚焦于充满活力的黄色强调色上。
03
字体
- display
72px · 500 - headline
36px · 500 - body
16px · 400 - small
14px · 400
在人文无衬线字体族中使用粗体进行强调 · 为展示型排版保持紧凑的行高 · 确保文本与背景之间的高对比度
04
间距
4px8px12px16px24px32px48px64px96px基于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
包内真实截图
11
System Prompt
这是一个用于ClickHouse实时数据库的高端开发者工具界面。设计采用深色模式调色板，近乎黑色的背景和用于主要操作的高饱和度黄色强调色。字体是干净的人文无衬线字体，展示部分使用粗体。关键十六进制颜色值为#151515（背景）、#faf569（强调色）和#ffffff（墨色）。关键禁忌：绝不使用浅色模式，绝不使用多种强调色，绝不使用装饰性衬线字体。布局宽敞，采用12列网格，英雄区内容居中。