01
设计气质 DNA
文档工作流路线图团队软件
一个干净、聚焦的工作空间，帮助产品团队统一目标与任务。
02
色彩
#FFB700Accent#000000Ink#FFFFFFBG#F7F7F7BG quiet#939393Mutedrgba(0,0,0,0.09)Line采用高对比度的黑白配色，辅以单一、高饱和度的黄色作为强调色，用于突出关键的界面卡片和提示区域。
03
字体
- display
48px · 700 - heading
24px · 700 - body
16px · 400 - caption
12px · 400
UI标签和状态指示器使用大写字母。 · 主标题使用较重的字重和紧凑的字间距。
04
间距
4px8px12px16px24px32px48px60px96px基于统一的 4px 网格系统，主视觉区域留白充足。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 12px
pill · 999px
使用纤细、低不透明度的黑色边框（rgba(0,0,0,0.09））进行微妙分隔。
rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
营销站点采用单栏居中布局，产品界面截图区域则使用复杂的多栏网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
在 hover 和 focus 状态下使用平滑过渡。
交互元素在悬停时发生细微的颜色变化或阴影偏移。 · 通过状态变化提供即时的视觉反馈。
08
组件
- button 主操作使用实心黑色药丸形按钮，次级操作使用带边框的药丸形按钮。
- card 白色卡片带有柔和阴影（例如主产品界面截图），以及用于突出功能的黄色强调卡片。
- chip 带有圆角和背景色的状态指示器。
- input 简洁、带边框且有细微阴影的输入框。
- hero 居中、文字密集的主视觉区域，包含大标题、副标题，下方是突出的产品界面截图。
09
文案语气与禁用清单
- 语气 直接、专业，聚焦于团队效率。
- 标题风格 全大写、加粗、高对比度。
- 按钮文案 清晰、以行动为导向，通常包含在药丸形按钮中。
- 避免使用杂乱的背景 — 截图显示为干净、纯白的背景（#FFFFFF）。
- 避免使用低对比度的强调色 — 截图显示使用高饱和度的黄色（#FFB700）进行强调。
- 避免使用浅色或灰色的主文本色 — 截图显示主标题使用纯黑色（#000000）。
- 避免使用尖锐的直角 — 截图显示主卡片和容器使用圆角（12px）。
- 避免使用深色模式界面 — 截图显示主要为白色/浅色主题。
- 避免使用装饰性、手写体或过度风格化的字体 — 截图显示使用干净、功能性的无衬线字体和等宽字体类别。
- 避免: 随意的语言
- 避免: 复杂的术语
- 避免: 过于密集的文本块
10
包内真实截图
11
System Prompt
这是一个干净、专业的项目文档工具 SaaS 落地页。它采用鲜明的黑白配色，并辅以单一、高饱和度的黄色（#FFB700）强调色，用于突出功能卡片。字体方面，标题使用粗体的 grotesque-sans 类别，正文则使用 humanist-sans 类别。关键约束：保持高对比度，避免深色模式，使用纯白背景，并保持 UI 元素为圆角。布局居中且宽敞，聚焦于产品截图。