名称：设计 描述：强制执行精确、最小化的设计用于仪表板和管理界面。在构建SaaS UI、数据密集型界面或任何需要Jony Ive级别工艺的产品时使用。
设计原则
核心理念： 每个界面都应看起来像由痴迷于1像素差异的团队设计。不是剥离的，而是精心制作的。并且为特定上下文设计。
设计方向（必需）
在编写代码之前，承诺一个方向。 不要默认。思考这个特定产品需要感觉像什么。
思考上下文
- 这个产品做什么？ 金融工具需要不同的能量，而不是创意工具。
- 谁使用它？ 高级用户想要密度。偶尔用户想要指导。
- 情感工作是什么？ 信任？效率？愉悦？专注？
- 什么会让这个令人难忘？ 每个产品都有机会感觉独特。
选择个性
| 方向 | 感觉 | 何时使用 |
|---|---|---|
| 精确与密度 | 紧间距、单色、信息优先 | 高级用户，工具中生活。Linear、Raycast、终端美学。 |
| 温暖与亲和力 | 宽松间距、柔和阴影、友好 | 想要感觉人性的产品。Notion、Coda、协作工具。 |
| 精致与信任 | 冷色调、分层深度、庄重 | 处理金钱或敏感数据的产品。Stripe、Mercury。 |
| 大胆与清晰 | 高对比度、戏剧性负空间 | 现代、果断的产品。Vercel、最小化仪表板。 |
| 实用与功能 | 柔和调色板、功能密度 | 工作比装饰更重要。GitHub、开发者工具。 |
| 数据与分析 | 图表优化、技术但易访问 | 分析、指标、商业智能。 |
选择一个。或混合两个。但承诺一个适合产品的方向。
选择基础
颜色基础（不要默认暖色）：
- 暖色（奶油色、暖灰色）：亲和、舒适、人性化
- 冷色（石板色、蓝灰色）：专业、可信、严肃
- 纯中性色（真灰色）：最小化、大胆、技术
- 带色调（轻微色彩倾向）：独特、难忘、品牌化
浅色或深色？ 深色感觉技术、专注、高级。浅色感觉开放、亲和、干净。基于上下文选择。
强调色： 一种有意义的颜色。蓝色=信任。绿色=增长。橙色=能量。紫色=创造力。
选择布局
- 密集网格 用于信息密集型界面，用户扫描和比较
- 宽松间距 用于专注任务，用户需要集中注意力
- 侧边栏导航 用于多部分应用，有许多目的地
- 顶部导航 用于更简单的工具，较少部分
选择排版
- 系统字体： 快速、原生、隐形（实用导向产品）
- 几何无衬线（Geist、Inter）：现代、干净、技术
- 人本无衬线（SF Pro、Satoshi）：更温暖、更亲和
- 等宽字体影响： 技术、开发者导向、数据密集型
核心工艺（非协商）
4px网格
所有间距使用4px基础：4px（微）、8px（紧）、12px（标准）、16px（舒适）、24px（宽松）、32px（主要）。
对称填充
TLBR必须匹配。如果顶部是16px，所有边都是16px。例外：当内容自然创建视觉平衡时。
边框半径
坚持4px网格。选择一个系统并承诺：
- 锐利：4px、6px、8px
- 柔和：8px、12px
- 最小化：2px、4px、6px
深度策略
匹配深度到设计方向。 不同产品需要不同方法：
- 仅边框（扁平）： 干净、技术。Linear、Raycast几乎不使用阴影。
- 微妙单阴影： 轻微提升，无复杂度。
- 分层阴影： 丰富、高级、立体。Stripe、Mercury。
- 表面颜色变化： 背景色调建立层次，无阴影。
工艺在于选择，而非复杂度。 一个扁平界面，完美间距，比阴影重、细节粗放的更精致。
排版层次
- 标题：600权重，-0.02em字距
- 正文：400-500权重
- 标签：500权重，正字距用于大写
- 比例：11px、12px、13px、14px（基础）、16px、18px、24px、32px
使用等宽字体用于数字、ID、代码、时间戳。使用tabular-nums用于列。
字体配对： 显示字体用于标题（一个陈述字体）+ 中性正文字体。不要混合两个显示字体。
颜色仅用于意义
灰色构建结构。颜色只在传达时出现：状态、动作、错误、成功。四层对比层次：前景 → 次要 → 柔和 → 微弱。
卡片布局
内部布局应随内容变化。 一个指标卡不必看起来像一个计划卡，也不必看起来像一个设置卡。一个可能有趋势线，另一个有头像堆栈，另一个有进度环。
表面处理保持一致： 相同边框重量、阴影深度、角半径、填充比例。
隔离控件
永远不要使用原生表单元素用于样式化UI。 原生<select>、<input type="date">渲染OS原生元素，无法样式化。构建自定义组件。
自定义选择触发器：display: inline-flex 带 white-space: nowrap 以保持文本和图标在同一行。
导航上下文
屏幕需要基础：
- 导航（侧边栏或顶部）
- 位置指示器（面包屑、活动状态）
- 用户上下文（谁登录）
构建侧边栏时，考虑使用与主要内容相同的背景。Linear、Vercel使用微妙边框分隔，而不是不同背景。
深色模式
- 边框优于阴影： 阴影在深色背景下不太可见
- 调整语义颜色： 为深色背景去饱和
- 相同层次，反转值
运动与动画
运动是沟通，不是装饰。 每个动画都应有原因。
- 计时： 150-200ms用于微交互，300-400ms用于较大过渡
- 缓动：
ease-out用于进入，ease-in用于退出，ease-in-out用于状态变化 - 交错显示： 加载多个项目时，交错50-75ms以获得精致感觉
- 滚动触发： 长页面滚动时微妙淡入（不透明度 + 小translateY）
避免：弹簧物理、弹跳超调、视差效果。保持运动功能。
纹理与氛围
对于需要视觉深度超越阴影的产品：
- 微妙渐变： 背景渐变（2-3%不透明度变化）添加维度，无干扰
- 噪点覆盖： 1-2%噪点在大表面上防止扁平（尤其是深色模式）
- 玻璃效果：
backdrop-filter: blur()用于提升表面，适度使用 - 边框渐变： 英雄卡上的微妙渐变边框，以获得高级感
匹配个性：精确产品保持扁平。精致产品分层深度。
反模式
永不：
- 戏剧性投影（
0 25px 50px...） - 大半径（16px+）在小元素上
- 无理由不对称填充
- 纯白色卡片在彩色背景上
- 厚边框（2px+）用于装饰
- 弹簧/弹跳动画
- 多种强调色
- 无目的运动
标准
不同产品想要不同东西。一个开发工具想要精确和密度。一个协作产品想要温暖和空间。一个金融产品想要信任和精致。
相同质量门槛，上下文驱动执行。
有关CSS值和实现细节，请参见references/craft-details.md。