FOCUS BLOCK · 09:30 — 11:00Ship the onboarding flow
现代简约Minimalism
设计风格用较少元素和清楚层级突出内容
现代简约会减少无助于理解和操作的装饰，再通过留白、排版、少量颜色和一致组件建立层级。它不是固定配方，具体圆角、阴影和间距仍要根据品牌与场景决定。
Good morning, Lin.
One clear priority for a calm day.
设计原则 · Principles
- 先用留白组织关系：相关内容靠近，不相关内容拉开；具体距离按信息密度和屏幕调整
- 中性色为主，强调色有明确职责：主操作、链接、状态可以用不同信号，但不要让颜色彼此争抢重点颜色
- 建立可复用的间距尺度：例如以 4 或 8 为基础组合常用值，遇到内容需要时可以例外
- 层级先靠排版和分组：字号、字重、颜色和分割线共同服务阅读顺序，边框与阴影按需要使用
- 阴影只表达真实层级：浮层和悬浮内容可以更明显，普通内容不必为了“高级”强行加阴影
什么时候用
- SaaS 和效率工具，让功能与信息成为重点免费开始
- 需求尚未稳定时，先搭清结构再补品牌特征✓ 现代简约复古赛博
- 内容本身足够有力，界面可以减少干扰好内容自己会说话
- 需要长期迭代，用少量规则保持扩展一致基础规则组件复用持续迭代
什么时候不用
- 高情绪活动页完全照搬冷静模板，容易缺少节奏年货节…全场五折…（冷淡脸）大促要的是热闹，简约撑不起
- 把没有对齐、层级和细节的半成品当成简约标题随便放没对齐、没网格、没字重对比这是简陋，不是简约
- 主题色到处使用，反而失去重点
- 不看受众就全站使用冷灰和低情绪表达儿童乐园（黑白灰版）小朋友要的是糖果色和圆滚滚
组成结构 · Anatomy
近黑正文 #0A0A0C
次要灰 #6D6D76
细分割线 1px
唯一主题色
圆角 6-8px
隐形阴影
1正文色Ink示例使用近黑色；纯黑或近黑都可以，关键是与背景保持足够对比度
2次要灰Gray副文、说明和占位可以使用层级较低的灰色，但仍要保证对比度
3细分割线Hairline示例用 1px 细线轻量分区；边界仍要清楚，不能淡到看不见
4强调色Accent用于突出主操作、链接或关键状态，数量和范围由信息层级决定
5圆角Radius示例使用小圆角；实际数值要与品牌气质和组件尺寸匹配
6轻量阴影Shadow示例用轻阴影区分浮层；需要看得出层级，也要避免脏重
AI 提示词 · Prompt
极简 SaaS 官网，大量留白，黑白灰+单一主题色，细分割线，8px 圆角，克制的阴影，8pt 网格，大标题紧字距，minimalist landing page, generous whitespace, black white gray with single accent color, hairline dividers, subtle shadows, 8pt grid, tight tracking headline典型使用场景
Linear 式暗色工具官网
Vercel 式开发者落地页
Stripe 式支付产品页
极简定价页