01
设计气质 DNA
极简主义功能性清晰高级感
一个平静、有序的工作空间。
02
色彩
#4F91FBAccent#303336Ink#F2F5F7BG#55606EMutedrgba(0, 15, 36, 0.46)Line柔和中性背景上的高对比度文字，搭配单一的功能性蓝色点缀。
03
字体
- display
56px · 800 - heading
32px · 700 - body-lg
20px · 400 - body
16px · 400 - caption
14px · 400
展示标题使用 800 字重，字距紧凑。 · 正文使用 400 字重，以确保最佳可读性。 · 链接使用蓝色点缀色，不加下划线。
04
间距
4px8px12px16px24px32px48px64px80px充足的留白，营造平静、透气的布局
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0, 15, 36, 0.1)
0 4px 12px rgba(0, 15, 36, 0.08)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局，拥有宽裕的边距
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
平滑的渐显效果 · 细微的 hover 状态过渡
细微的颜色变化或透明度改变 · 即时的视觉反馈
08
组件
- button 柔和圆角的胶囊形按钮，背景为实色蓝
- card 白色背景，带有细微边框和圆角
- chip 极简的圆角标签
- input 简洁的输入框，带有细微边框
- hero 居中的图标，大号加粗标题，描述性副标题，以及单一的 CTA
09
文案语气与禁用清单
- 语气 专业、有帮助、低调
- 标题风格 直接且描述性
- 按钮文案 清晰且行动导向
- 不要使用深色模式 — 截图显示的是浅灰色背景 (#F2F5F7)。
- 不要使用装饰性衬线字体 — 截图显示所有文本均使用 humanist-sans。
- 不要使用多种明亮的点缀色 — 截图显示仅使用蓝色 (#4F91FB) 作为单一功能性点缀。
- 不要使用紧凑、局促的间距 — 截图显示的是宽裕的垂直和水平边距。
- 不要使用沉重的投影 — 截图显示的是柔和、细微的阴影。
- 不要使用激进的、棱角分明的 border-radius — 截图显示的是柔和的圆角（最大 18px）。
- 避免: 过多的标点符号
- 避免: 全大写的大声宣告
- 避免: 过于随意的俚语
10
包内真实截图
11
System Prompt
Things 网站采用冷静、极简的设计，核心是柔和的浅灰色背景 (#F2F5F7) 和深木炭色文字 (#303336)。单一的功能性蓝色点缀 (#4F91FB) 用于链接和交互元素。字体采用 humanist-sans-serif，主展示标题使用加粗的 800 字重，正文则使用标准 400 字重。布局为单栏且高度透气，利用充足的留白来强调清晰度和焦点。关键约束：不要使用深色模式；不要引入衬线字体；不要添加多种明亮颜色；避免布局局促；避免激进的阴影；避免尖锐、棱角分明的边框。