Nothing 风格 UI/UX 设计系统
一个高级产品设计师的工具包，融合瑞士排版、工业设计（Braun、Teenage Engineering）和现代界面工艺。单色、排版驱动、信息密集且无杂乱。深色和浅色模式同等严谨。
在开始任何设计工作之前，请声明所需加载的 Google Fonts（参见 references/tokens.md 第 1 节）。切勿假设字体已就绪。
1. 设计理念
- 减法，而非加法。 每个元素都必须赢得其像素值。默认做法是移除。
- 结构即是装饰。 暴露网格、数据、层级本身。
- 单色是画布。 色彩是一个事件，而不是默认项——除非用于编码数据状态（见第 3 节）。
- 排版承担重任。 字号、字重和间距创造层次——而不是颜色，不是图标，不是边框。
- 两种模式都是主角。 深色模式：OLED 黑色。浅色模式：暖米白色。两者均非“衍生”——都获得完整的设计关注。请询问用户从哪种模式开始。
- 工业温暖。 技术感且精确，但绝不冰冷。应能感受到人的手笔。
2. 创作规则 — 如何布局
2.1 视觉层次：三层规则
每个屏幕正好有 三层重要性。不是两层，不是五层。三层。
| 层级 | 内容 | 如何实现 |
|---|---|---|
| 主要层 | 用户首先看到的唯一内容。一个数字、一个标题、一种状态。 | 使用 Doto 或 Space Grotesk，字号为显示大小。--text-display。留出 48–96px 的呼吸空间。 |
| 次要层 | 支撑性上下文。标签、描述、相关数据。 | 使用 Space Grotesk，字号为正文/副标题。--text-primary。紧凑排列（8–16px）在主要层旁边。 |
| 第三层 | 元数据、导航、系统信息。可见但从不竞争。 | 使用 Space Mono，字号为说明/标签。--text-secondary 或 --text-disabled。全大写。推到边缘或底部。 |
测试方法： 眯眼看屏幕。你还能分辨出最重要的是什么吗？如果两个元素竞争，其中一个需要缩小、淡出或移动。
常见错误： 把所有东西都做成“次要层”。等大的元素搭配等距间距 = 视觉扁平。要勇敢——让主要层荒谬地大，而第三层荒谬地小。这种对比本身就是层次。
2.2 字体纪律
每个屏幕最多使用：
- 2 个字体家族（Space Grotesk + Space Mono。Doto 仅用于英雄时刻。）
- 3 个字号（一个大号、一个中号、一个小号）
- 2 个字重（Regular + 另一个——通常是 Light 或 Medium，很少用 Bold）
把它想象成一个预算。每增加一个字号/字重，都会消耗视觉一致性。在新增字号前，问问自己：我能否用间距或颜色来创建这种区分？
| 决策 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 标题 vs. 正文 | 是 | 否 | 否 |
| 标签 vs. 数值 | 否 | 否 | 是 |
| 激活 vs. 未激活导航 | 否 | 否 | 是 |
| 英雄数字 vs. 单位 | 是 | 否 | 否 |
| 章节标题 vs. 内容 | 是 | 可选 | 否 |
经验法则： 如果准备用新字号，那很可能是一个间距问题。改用增加间距。
2.3 间距即意义
间距是传达关系的主要工具。
紧凑 (4–8px) = “这些元素属于一起”（图标 + 标签，数字 + 单位）
中等 (16px) = “同一组，不同项目”（列表项，表单字段）
宽松 (32–48px) = “新组从这里开始”（段落分隔）
广阔 (64–96px) = “这是一个新语境”（英雄区域到内容区域，主要分隔）
如果需要分隔线，那间距很可能错了。 分隔线是间距对比度不足的症状。仅用于数据密集型且结构完全相同的列表中。
2.4 容器策略（优先无容器）
- 仅使用间距（通过邻近性分组项目）
- 一条分隔线
- 微妙的边框轮廓
- 带背景变化的表面卡片
每向下一步，视觉重量都会增加。使用能满足要求的最轻量工具。永远不要将最重要的元素放入盒子中——让它浮动在背景上。
2.5 色彩即层次
在单色系统中，灰色阶就是颜色层次。每个屏幕最多 4 级：
--text-display (100%) → 英雄数字。每个屏幕一个。
--text-primary (90%) → 正文，主要内容。
--text-secondary (60%) → 标签，说明，元数据。
--text-disabled (40%) → 禁用状态，时间戳，提示。
红色 (#D71921) 不属于层次。 它是一个打断信号——“看这里，现在就看。”如果没有紧急情况，屏幕上就不应有红色。
数据状态色（成功绿色、警告琥珀色、强调红色）在编码数据值时，不受“只有一种强调色”规则的限制。将颜色应用到数值本身，而不是标签或行背景。完整颜色系统请参见 references/tokens.md。
2.6 一致性与变化
在以下方面保持一致： 字体家族、标签处理（始终使用 Space Mono 全大写）、间距节奏、色彩角色、组件形状、对齐方式。
在每一屏中，仅在一个地方打破模式： 一个超大号数字、一个圆形组件混在矩形中、一个红色点缀在灰色中、一个 Doto 标题、一个在其它元素都很紧凑的地方使用的大间距。
这唯一的打破就是设计本身。没有它：死板的网格。有超过一个：视觉混乱。
2.7 布局平衡
不对称 > 对称。 居中的布局感觉平庸。偏好故意失衡的布局：
- 左大右小： 英雄指标 + 元数据堆叠。
- 上重下轻： 大标题靠近顶部，下方内容稀疏。
- 边缘锚定： 重要元素固定在屏幕边缘，负空间留在中央。
用更多的空白空间来平衡重的元素，而不是用更多重的元素。
2.8 Nothing 氛围
- 通过留白展现自信。 大面积的未中断的背景区域。抵制填充空间的冲动。
- 小处见精准。 字间距、精确的灰度值、4px 的间隙。微观决策汇聚成工艺。
- 数据即美感。 用 Space Mono 48px 显示
36GB/s本身就是视觉元素。无需插图。 - 机械诚实。 控件看起来就像控件。一个开关 = 物理开关。一个仪表 = 仪器。
- 一个惊喜时刻。 一个点阵标题。一个圆形组件。一个红点。克制使得这一表达瞬间变得强大。
- 打击感，而非流畅感。 想象 UI 的声音：点击而不是嗖嗖声，滴答声而不是铃声。设计感觉机械而精确的过渡。
2.9 数据密集型屏幕的视觉多样性
当一个屏幕上出现 3 个以上数据区域时，变化视觉形式：
| 形式 | 最适合 | 重量 |
|---|---|---|
| 英雄数字（大号 Doto/Space Mono） | 单个关键指标 | 重 — 仅用一次 |
| 分段进度条 | 向目标进展 | 中 |
| 同心圆 / 弧 | 多个相关百分比 | 中 |
| 行内紧凑条 | 行中的次要指标 | 轻 |
| 仅数字 + 状态色 | 无比例的数值 | 最轻 |
| 迷你趋势线图 | 随时间变化的趋势 | 中 |
| 统计数据行（标签 + 数值） | 简单数据点 | 轻 |
主要区域 → 最重的处理。次要区域 → 不同的形式。第三区域 → 最轻的处理。形式变化，声音保持一致。
3. 反模式 — 永远不要做的事
- UI 框架中不使用渐变
- 无阴影。无模糊。平面表面，边框分隔。
- 无骨架屏加载。使用
[LOADING...]文本或分段旋转加载动画。 - 无 Toast 弹出提示。使用内联状态文本：
[SAVED]、[ERROR: ...] - 无难过表情插图、可爱吉祥物或多段落空状态
- 表格中无斑马条纹
- 无填充图标、多色图标或表情符号作为 UI 元素
- 无视差、滚动劫持或无节制的动画
- 无弹簧/弹跳缓动函数。仅使用微妙的 ease-out。
- 卡片边框圆角不超过 16px。按钮为药丸形（999px）或技术形（4–8px）。
- 数据可视化：在引入颜色之前，使用不透明度（100%/60%/30%）或图案（实线/条纹/点线）进行区分。
4. 工作流程
- 声明字体 — 告知用户需要加载哪些 Google Font（参见
references/tokens.md） - 询问模式 — 深色还是浅色？两者均非默认。
- 勾勒层次 — 在编写任何代码之前，确定 3 个层级
- 布局设计 — 应用创作规则（第 2.1–2.9 节）
- 检查令牌 — 查阅
references/tokens.md获取精确值 - 构建组件 — 查阅
references/components.md获取模式 - 适配平台 — 查阅
references/platform-mapping.md获取输出约定
5. 参考文件
有关详细的令牌值、组件规格和平台特定指南：
references/tokens.md— 字体、字号比例、色彩系统（深色 + 浅色）、间距比例、网格、动效、图标、点阵元素references/components.md— 卡片、按钮、输入框、列表、表格、导航、标签、分段控件、进度条、图表、组件、覆盖层、状态模式references/platform-mapping.md— HTML/CSS、SwiftUI、React/Tailwind、Paper 输出约定