精选 · 开放 · 免费

Segment

一个简化复杂数据管道的专业客户数据平台。

01

设计气质 DNA

为处理客户数据而设计的可靠基础设施管道

02

色彩

高对比度深色模式营造技术感与高级感，蓝色用于主要操作。

03

字体

humanist-sans · monospace

• display56px · 700
• headline40px · 700
• body16px · 400

在大型展示文字上使用紧凑的字间距以保持视觉密度。 · 正文采用 1.75 的标准行高以确保可读性。 · 字重保持保守，主要使用 400 和 700。

04

间距

版块间充足的垂直间距营造出平静、整洁的布局。

05

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

边框使用极少，主要为按钮和下划线使用的 1px 或 2px 边框。

0px 10px 37.5px 0px rgba(18, 28, 45, 0.15) · inset 0px 0px 0px 2px rgb(24, 102, 238) · inset 0px 0px 0px 2px rgb(255, 255, 255)

06

布局

简洁的上重式布局，包含突出的首屏区域，其后是多列功能网格。

07

动效与交互

交互元素上平滑的 background-color 和 color 过渡。 · 按钮和链接在 hover 时微妙的 transform 效果。

通过背景颜色或不透明度的微妙变化来指示可交互性。 · 通过颜色变化提供即时视觉反馈。

08

组件

• button 圆角药丸形按钮，主要操作使用纯蓝色填充，次要操作使用描边。
• card 简洁的深色卡片，通过细微的边框或背景变化来区分内容区域。
• chip 小型药丸形标签，浅色背景配深色文字，用于分类。
• input 标准的表单字段，具有清晰的边框和圆角。
• hero 全宽深色区域，包含大标题、辅助文字和突出的插图。

09

文案语气与禁用清单

• 语气 专业、实用、直接。
• 标题风格 清晰直接，常使用第一人称复数以建立信任。
• 按钮文案 行动导向且具体，引导用户进入下一步。

• 不要使用杂乱、多彩的渐变——截图显示的是纯色深海军蓝背景。
• 不要使用尖锐的方形圆角——截图显示所有组件都使用圆角（4px、8px、50px）。
• 不要在长段落中使用居中文本——截图显示正文左对齐以提高可读性。
• 不要使用纤细、精致的字体——截图显示的是粗体、清晰的标题和易读的正文。
• 不要使用杂乱的导航栏——截图显示的是简单的、顶部对齐的、项目极少的导航。
• 不要使用厚重的投影来营造深度——截图显示的是用于扁平化设计美学的微妙、柔和阴影。
• 避免: 过于随意的俚语
• 避免: 侵略性的销售语言
• 避免: 不必要的复杂术语

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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