精选 · 开放 · 免费

Statsig

一个简洁、高可信度的 SaaS 平台，用于产品实验和分析。

01

设计气质 DNA

面向产品团队的现代企业数据工作台。

02

色彩

一套高对比度的中性调色板，搭配单个用于关键交互元素的鲜亮蓝色点缀。

03

字体

geometric-sans · monospace

• display50px · 500
• headline40px · 600
• subhead24px · 400
• body16px · 400
• small14px · 400
• micro12px · 400

正文颜色为 #1F2328 · 次要文本颜色为 #535963 · 点缀元素使用 #367EED

04

间距

基于 4px 的一致网格，主要版块使用 20px、40px 和 80px 的宏观间距。

05

表面 (圆角 / 阴影 / 边线)

1px solid #1F2328

rgba(27, 37, 40, 0.05) 0px 0px 20px 0px · rgb(212, 215, 220) 0px 0px 0px 1px inset

06

布局

标准顶部导航布局，居中显示核心内容区，下方是堆叠的内容版块。

07

动效与交互

按钮和导航链接的 hover 状态 · focus 或 hover 时的平滑透明度过渡

交互元素上细微的背景色偏移或透明度变化。 · 通过状态变化提供即时视觉反馈。

08

组件

• button 圆润的胶囊形状，采用深色背景 (#1F2328) 或带边框的轮廓样式。
• card 带有细微阴影和圆角的洁净白色表面。
• chip 圆角边框，浅灰色背景和细边框。
• input 浅灰色背景或带边框的圆角输入框。
• hero 等距产品界面截图上方的大尺寸居中排版。

09

文案语气与禁用清单

• 语气 直接、技术性且自信。
• 标题风格 简洁有力、以行动为导向的陈述，聚焦于度量和交付。
• 按钮文案 清晰且具有交易性质，聚焦于开始免费试用或了解其工作原理。

• 不要使用沉重的投影——截图显示的是细微、弥散的盒状阴影
• 不要使用圆角方形——截图显示的是完美的圆形胶囊按钮
• 不要使用明亮的霓虹点缀色——截图显示的是专业、柔和的蓝色 (#367EED)
• 不要使界面杂乱——截图显示的是充足的留白和简洁、基于网格的布局
• 不要使用多变的背景色——截图显示的是严格的白色和浅灰色 (#F6F6F6) 背景系统
• 不要使用装饰性字体——截图显示的是高度易读、中性的几何无衬线字体
• 避免: 模糊的营销术语
• 避免: 过于俏皮或随意的语言
• 避免: 杂乱或繁琐的 UI 模式

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko