01
设计气质 DNA
路线图规划对齐可视化优先级
团队优先事项的洁净白板
02
色彩
#000000Ink#222222Ink soft#FFFFFFBG#FAFAFABG soft#F3F3F3BG quiet#999999Mutedrgba(243, 243, 243, 1)Line中性画布，搭配代表路线图轨道的多彩鲜明强调色。
03
字体
- display
40px · 700 - h2
32px · 700 - h3
21px · 500 - body
16px · 400 - caption
14px · 400
标题采用粗体字重，字距紧凑 · 正文保持充裕的行高以确保可读性 · 次要文本使用浅墨色
04
间距
4px8px16px24px32px48px64px96px章节间采用充裕的垂直韵律，卡片与按钮内部则保持紧凑内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 8px
pill · 999px
活动状态使用细微的 2px 实线边框，其他情况则无边框或使用 box-shadow 制造层次感。
0 8px 16px rgba(0, 0, 0, 0.16) · 0 4px 16px rgba(0, 0, 0, 0.32) · 0 0 0 3px rgb(243, 243, 243)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单栏垂直流动布局，内容块居中。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
按钮与卡片的细微 hover 状态 · 交互元素的 focus 过渡效果
按钮可能略微加深；卡片可能随阴影略微上浮。 · 提供即时反馈，可能伴有轻微的缩放或透明度变化。
08
组件
- button 高对比度的黑色，搭配白色文字与圆润药丸形状。
- card 白色或浅灰背景，采用细微边框或 box-shadow 营造高度感。
- chip 多彩标签（绿、粉、紫），呈药丸形状并带有彩色 box-shadow。
- input 未完全可见，但可能采用细微边框的极简设计。
- hero 居中布局，包含大型渐变球形标志、加粗双色标题与主要操作按钮。
09
文案语气与禁用清单
- 语气 直接、清晰、专业。
- 标题风格 使用粗体无衬线字体的简短陈述句。
- 按钮文案 简洁且面向行动，带有箭头符号。
- 勿使用装饰性或衬线字体——截图显示标题为洁净的几何无衬线字体。
- 勿添加复杂的投影——截图显示为细微、柔和的 box-shadow。
- 勿使用繁杂或深色背景——截图显示以白色为基调。
- 勿使首屏区域杂乱——截图显示核心元素周围有充裕的留白。
- 勿使用圆角方形徽章——截图显示为药丸形标签。
- 勿在卡片上使用粗重边框——截图显示卡片通过细微阴影或背景变化分隔。
- 避免: 术语堆砌的语言
- 避免: 复杂的句子结构
- 避免: 视觉杂乱或喧闹的背景
10
包内真实截图
11
System Prompt
这是一个极简风格的 SaaS 路线图工具网站。它使用洁净的白色背景与黑色文字，以实现最佳可读性。标题采用几何无衬线字体，正文则使用人文无衬线字体。关键色彩为中性的黑、白、灰，仅在状态徽章与路线图轨道指示器上使用多彩鲜明的强调色（绿、粉、紫、蓝）。布局居中并拥有充裕的间距。关键禁忌：切勿使用装饰性字体，切勿添加复杂阴影，切勿用不必要的元素使界面杂乱。设计优先考虑清晰度与专注度。