精选 · 开放 · 免费
Evidence
将数据仪表盘视为代码的商业智能平台，结合开发者工作流与干净专业的用户界面。
databi
01
设计气质 DNA
数据分析开发者版本控制数据产品
一款面向开发者的现代分析工具文档站点
02
色彩
#1D4ED8Accent
#111827Ink
#4B5563Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F3F4F6BG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
以中性灰为基底，单一蓝色强调色体现技术精准性
03
字体
transitional-serif · humanist-sans · geometric-sans
- display
56px · 500 - heading
36px · 500 - body
16px · 400 - caption
14px · 400 - micro
12px · 500
大写微文本使用0.4px字间距 · 大型展示标题使用-1.5px字间距 · 16px正文保持1.5倍行高 · 正文内强调内容使用600字重 · 交互元素使用500字重
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
64px
基于统一的4px网格系统，版块间保持充裕的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
1px solid #E5E7EB
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容区域配以充足水平边距，建立清晰的视觉层次
07
动效与交互
200msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态下的颜色与透明度平滑过渡 · 模态框与下拉菜单的微妙淡入效果
200ms的颜色过渡配合透明度变化 · 提供即时的视觉反馈与标准按钮按压状态
08
组件
- button 高对比度的圆角胶囊形态；主按钮为黑底填充，次按钮为白底描边
- card 白色背景搭配微弱阴影与1px边框
- chip 采用大写微文本的小型胶囊标签
- input 带有微弱阴影的简洁描边输入框
- hero 居中大标题搭配副标题与双行动按钮
09
文案语气与禁用清单
- 语气 专业、技术化且充满自信
- 标题风格 清晰简洁、富有行动号召力，具备强烈的排版层次
- 按钮文案 使用「开始使用」「预约演示」等祈使动词，表达直接明确
- 禁用深色模式——截图显示为浅色背景配深色文字（#FFFFFF背景，#111827墨色文字）
- 避免使用厚重的投影——截图显示采用微弱的1px边框与最小化高度提升
- 不要为正文使用装饰性衬线字体——截图中所有可读文本均采用无衬线字体
- 避免使用多色强调——截图显示仅用单一蓝色强调色（#1D4ED8）搭配中性灰
- 不要为按钮使用圆角矩形——截图显示采用全圆角的胶囊形按钮
- 避免在所有地方使用大写文本——截图中仅微标签保留大写形式
- 不要在主要内容区域使用渐变背景——截图显示为纯白平面
- 避免: 过度随意或口语化的表达
- 避免: 缺乏语境的技术术语
- 避免: 过多的感叹号
- 避免: 模糊或抽象的价值主张
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（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
Evidence.dev 是一个面向开发者的分析平台，将商业智能呈现为代码形式。设计采用纯白背景（#FFFFFF）搭配主黑色文字（#111827）与单一蓝色强调色（#1D4ED8）。字体组合采用过渡衬线体作为主视觉标题字体，搭配人文主义无衬线体作为正文字体，主字体家族为Geist。布局注重充足的留白、居中内容以及通过浅色边框营造的微妙卡片层次感。关键禁忌：永远不要使用深色模式，避免在内容区域使用厚重阴影或渐变，绝不使用装饰性字体呈现技术内容。界面优先考虑可读性与专业可信度，面向构建数据产品的技术受众。
en · zh-CN · zh-TW · ja · ko