精选 · 开放 · 免费
Metabase
利用AI回答问题的开源分析平台。
databi
01
设计气质 DNA
开源数据分析AI驱动数据
一个简洁、数据驱动的仪表盘
02
色彩
#509EE3Accent
#222C3EInk
#5A6072Ink soft
#FFFFFFBG
#F0F8FFBG soft
#FAFBFEBG quiet
#8D93A5Muted
rgba(90, 96, 114, 0.15)Line
简洁、数据导向，以白色背景上的强烈强调蓝为主色。
03
字体
humanist-sans · monospace
- display
48px · 700 - h1
40px · 700 - h2
28px · 700 - body
16px · 400 - small
14px · 400
04
间距
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
基于8px的基础单位，搭配4px的微间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(90, 96, 114, 0.15)
0 1px 2px rgba(16, 24, 40, 0.05) · 0 16px 28px -6px rgba(24, 39, 75, 0.12) · 0 32px 88px -4px rgba(24, 39, 75, 0.14)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
带有清晰分区隔线的标准居中容器。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
滚动时淡入 · 按钮悬停过渡
交互元素上微妙的背景色变化或阴影抬升。 · 即时的视觉反馈。
08
组件
- button 主要按钮使用强调蓝，圆角为8px。次要按钮为线框样式。
- card 简洁的白色卡片，带有细微边框与柔和阴影。
- chip 未明确出现，但类似的UI元素呈现柔和的药丸形状。
- input 简洁、带边框的文本输入框。
- hero 大型标题与副标题，配有两个醒目的行动号召按钮。
09
文案语气与禁用清单
- 语气 专业、清晰且乐于助人。
- 标题风格 直接、以利益为导向且粗体。
- 按钮文案 使用行动导向的动词，如“试用”和“部署”。
- 不要使用深色模式主题——截图展示的是明亮、浅色界面。
- 不要使用高对比度的霓虹色——配色方案以柔和的蓝色和中性色为主。
- 不要在卡片或按钮上使用尖锐的90度直角——截图显示的是圆角。
- 不要在主要正文中使用纤细、优雅的衬线字体——字体是简洁的人文无衬线体。
- 不要使用密集的大段文字而缺少充足留白——布局是开放且通透的。
- 不要使用复杂的渐变作为主要背景——背景主要是纯白色或非常细微的浅蓝色。
- 不要使用俏皮或异想天开的插图风格——视觉元素是简洁、功能化且专业的。
- 避免: 主文案中使用过于技术化的术语
- 避免: 使用激进的销售用语
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
Metabase是一个面向开发者和数据团队的开源分析平台。设计简洁、专业且以数据为导向。关键颜色是明亮的强调蓝（#509EE3），搭配干净的白色背景（#FFFFFF）与中性文本色调（#222C3E，#5A6072）。字体基于Lato人文无衬线字体系列。关键禁忌：避免深色模式、使用高对比度霓虹色以及尖锐的直角。设计优先考虑清晰度、可读性以及专业可靠的感觉。
en · zh-CN · zh-TW · ja · ko