01
设计气质 DNA
实验分析度量面向开发者
面向产品团队的现代企业数据工作台。
02
色彩
#367EEDAccent#1F2328Ink#535963Ink soft#FFFFFFBG#F6F6F6BG soft#F2F2F2BG quiet#808080Mutedrgba(31,35,40,0.1)Line一套高对比度的中性调色板，搭配单个用于关键交互元素的鲜亮蓝色点缀。
03
字体
- display
50px · 500 - headline
40px · 600 - subhead
24px · 400 - body
16px · 400 - small
14px · 400 - micro
12px · 400
正文颜色为 #1F2328 · 次要文本颜色为 #535963 · 点缀元素使用 #367EED
04
间距
4px8px16px20px24px40px60px80px基于 4px 的一致网格，主要版块使用 20px、40px 和 80px 的宏观间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 10px
lg · 30px
pill · 999px
1px solid #1F2328
rgba(27, 37, 40, 0.05) 0px 0px 20px 0px · rgb(212, 215, 220) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准顶部导航布局，居中显示核心内容区，下方是堆叠的内容版块。
07
动效与交互
200msmicro
400mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
按钮和导航链接的 hover 状态 · focus 或 hover 时的平滑透明度过渡
交互元素上细微的背景色偏移或透明度变化。 · 通过状态变化提供即时视觉反馈。
08
组件
- button 圆润的胶囊形状，采用深色背景 (#1F2328) 或带边框的轮廓样式。
- card 带有细微阴影和圆角的洁净白色表面。
- chip 圆角边框，浅灰色背景和细边框。
- input 浅灰色背景或带边框的圆角输入框。
- hero 等距产品界面截图上方的大尺寸居中排版。
09
文案语气与禁用清单
- 语气 直接、技术性且自信。
- 标题风格 简洁有力、以行动为导向的陈述，聚焦于度量和交付。
- 按钮文案 清晰且具有交易性质，聚焦于开始免费试用或了解其工作原理。
- 不要使用沉重的投影——截图显示的是细微、弥散的盒状阴影
- 不要使用圆角方形——截图显示的是完美的圆形胶囊按钮
- 不要使用明亮的霓虹点缀色——截图显示的是专业、柔和的蓝色 (#367EED)
- 不要使界面杂乱——截图显示的是充足的留白和简洁、基于网格的布局
- 不要使用多变的背景色——截图显示的是严格的白色和浅灰色 (#F6F6F6) 背景系统
- 不要使用装饰性字体——截图显示的是高度易读、中性的几何无衬线字体
- 避免: 模糊的营销术语
- 避免: 过于俏皮或随意的语言
- 避免: 杂乱或繁琐的 UI 模式
10
包内真实截图
11
System Prompt
一款简洁、面向开发者的 B2B SaaS 平台，用于产品实验和分析。设计采用以白色 (#FFFFFF) 和近黑色 (#1F2328) 为主导的中性调色板，搭配单个鲜亮蓝色点缀 (#367EED)。字体属于几何无衬线类别，使用强大的字体比例和紧凑的字间距用于展示标题。关键禁忌：避免杂乱的布局、沉重的投影或俏皮的排版。保持充足的留白，使用胶囊形状按钮，并保持直接、技术性的语调。确保高对比度和清晰的视觉层次。