01
设计气质 DNA
产品分析AI优先数据驱动增长工程
为产品团队打造的、复杂的数据驱动指挥中心。
02
色彩
#7856FFAccent#1F2023Ink#525252Ink soft#FFFFFFBG#FAFAFABG soft#F5F5F5BG quiet#A3A3A3Mutedrgba(0,0,0,0.1)Line白色背景上简洁、高对比度的排版，搭配鲜艳的紫色渐变点缀。
03
字体
- display
60px · 500 - heading
36px · 500 - subheading
18px · 400 - body
16px · 400
标题使用紧凑字间距和500字重。 · 正文依赖于高度易读的人文主义无衬线字体。 · 等宽字体严格保留用于代码片段。
04
间距
4px8px12px16px24px32px48px64px96px8px基线网格，分区之间留有充足空白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
用于卡片和输入框的1px实线rgba(0,0,0,0.1)边框。
rgba(0,0,0,0.05) 0px 0px 0px 1px · rgba(0,0,0,0.08) 0px 4px 16px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
最大化居中容器，采用堆叠式分区和基于网格的功能布局。
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素上的平滑悬停过渡。 · 模态框和抽屉出现时的微妙淡入动画。
通过细微的颜色变化或背景改变来指示交互性。 · 通过状态变化或微小缩放动画提供即时反馈。
08
组件
- button 纯色主按钮，采用胶囊形圆角（999px）和白色背景上的高对比度墨色；次级操作使用幽灵按钮。
- card 浅色背景，搭配微妙的1px边框、12px圆角和16px-24px内边距。
- chip 小型圆角标签，半径16px，用于分类和筛选。
- input 带清晰边框的输入框，8px圆角，焦点状态明确。
- hero 居中标题，搭配大型几何字体、辅助说明文字和一排水平功能切换开关。
09
文案语气与禁用清单
- 语气 自信、专业且略带前瞻性。
- 标题风格 直接、主动的陈述，强调速度、数据和智能。
- 按钮文案 行动导向且清晰（例如“免费开始”、“预约演示”）。
- 不要使用俏皮或圆润的显示字体——截图显示标题使用几何形、中等字重的无衬线字体。
- 不要使用霓虹或过度饱和的颜色——截图显示精致的紫色点缀搭配中性深色系。
- 不要在卡片上使用粗边框——截图显示细微的1px边框搭配柔和阴影。
- 不要使用密集、局促的布局——截图显示充足的空白和清晰的垂直韵律。
- 不要使用斜体字进行强调——截图显示通过字重变化（500 vs 400）来实现。
- 不要为按钮使用圆角方形——截图显示主行动按钮严格采用胶囊形（999px半径）。
- 避免: 充满行话的句子
- 避免: 被动语态
- 避免: 过于俏皮的语言
10
包内真实截图
11
System Prompt
Mixpanel是一个高端的B2B SaaS产品分析平台，采用纯净白色背景、精致的深色中性色（#1F2023）和鲜艳的紫色点缀（#7856FF）。排版上，展示用几何无衬线字体，正文用人文主义无衬线字体，标题采用紧凑字间距。主按钮采用独特的胶囊形（999px半径）。关键禁忌：绝不使用俏皮字体，避免霓虹色，保持充足空白，绝不使用粗边框，使用字重而非斜体，并始终使用胶囊形按钮。定位：高端、可靠、AI领先的产品智能。