nothing-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nothing-Inspired UI/UX Design System

灵感源自Nothing的UI/UX设计系统

A senior product designer's toolkit trained in Swiss typography, industrial design (Braun, Teenage Engineering), and modern interface craft. Monochromatic, typographically driven, information-dense without clutter. Dark and light mode with equal rigor.

Before starting any design work, declare which Google Fonts are required and how to load them (see

references/tokens.md

Section 1). Never assume fonts are already available.

这是一套为资深产品设计师打造的工具包，经过瑞士排印、工业设计（Braun、Teenage Engineering）以及现代界面工艺的相关训练，主打单色、以排版为核心、信息密度高且无冗余元素，深色模式和浅色模式都经过同等严谨的设计打磨。

在开始任何设计工作前，请明确说明需要用到的Google Fonts字体以及加载方式（参考

references/tokens.md

第1节），永远不要假设字体已经可用。

1. DESIGN PHILOSOPHY

1. 设计哲学

Subtract, don't add. Every element must earn its pixel. Default to removal.
Structure is ornament. Expose the grid, the data, the hierarchy itself.
Monochrome is the canvas. Color is an event, not a default — except when encoding data status (see Section 3).
Type does the heavy lifting. Scale, weight, and spacing create hierarchy — not color, not icons, not borders.
Both modes are first-class. Dark mode: OLED black. Light mode: warm off-white. Neither is "derived" — both get full design attention. Ask the user which mode to start with.
Industrial warmth. Technical and precise, but never cold. A human hand should be felt.

做减法，而非加法。 每个元素的存在都要有充分理由，优先考虑移除冗余元素。
结构即装饰。 直接展示网格、数据本身以及层级关系，无需额外修饰。
单色为底。 颜色是特殊表达，而非默认配置——仅在标识数据状态时可作为默认使用（参考第3节）。
排版承担主要信息传递职责。 通过字号、字重、间距来构建层级，而非颜色、图标或边框。
深浅模式优先级一致。 深色模式采用OLED纯黑，浅色模式采用暖调米白，二者不存在「衍生关系」，都需要完整的设计考量，请先询问用户优先设计哪种模式。
工业感温度。 专业精准但不冰冷，要能感受到人文设计的痕迹。

2. CRAFT RULES — HOW TO COMPOSE

2. 工艺规则——如何搭建界面

2.1 Visual Hierarchy: The Three-Layer Rule

2.1 视觉层级：三层规则

Every screen has exactly three layers of importance. Not two, not five. Three.

Layer	What	How
Primary	The ONE thing the user sees first. A number, a headline, a state.	Doto or Space Grotesk at display size. `--text-display` . 48–96px breathing room.
Secondary	Supporting context. Labels, descriptions, related data.	Space Grotesk at body/subheading. `--text-primary` . Grouped tight (8–16px) to the primary.
Tertiary	Metadata, navigation, system info. Visible but never competing.	Space Mono at caption/label. `--text-secondary` or `--text-disabled` . ALL CAPS. Pushed to edges or bottom.

The test: Squint at the screen. Can you still tell what's most important? If two things compete, one needs to shrink, fade, or move.

Common mistake: Making everything "secondary." Evenly-sized elements with even spacing = visual flatness. Be brave — make the primary absurdly large and the tertiary absurdly small. The contrast IS the hierarchy.

每个界面的信息重要性严格分为三层，不多不少，仅三层。

层级	用途	实现方式
主层级	用户第一眼看到的唯一核心内容，可以是数字、标题、状态标识	使用Doto或Space Grotesk作为展示级字体，对应 `--text-display` ，预留48-96px的留白
次层级	辅助说明信息，包括标签、描述、关联数据	使用Space Grotesk作为正文/副标题字体，对应 `--text-primary` ，与主层级紧密排列，间距8-16px
三级层级	元数据、导航、系统信息，可见但不会抢夺注意力	使用Space Mono作为说明/标签字体，对应 `--text-secondary` 或 `--text-disabled` ，全部大写，放在界面边缘或底部

测试方法： 眯眼观看界面，你还能分辨出哪个内容最重要吗？如果有两个元素优先级冲突，就需要把其中一个缩小、降低透明度或移动位置。

常见错误： 把所有内容都做成「次层级」，元素大小一致、间距均匀会导致视觉扁平化。大胆设计——主层级内容可以放得非常大，三级层级内容可以放得非常小，对比度就是层级本身。

2.2 Font Discipline

2.2 字体使用规范

Per screen, use maximum:

2 font families (Space Grotesk + Space Mono. Doto only for hero moments.)
3 font sizes (one large, one medium, one small)
2 font weights (Regular + one other — usually Light or Medium, rarely Bold)

Think of it as a budget. Every additional size/weight costs visual coherence. Before adding a new size, ask: can I create this distinction with spacing or color instead?

Decision	Size	Weight	Color
Heading vs. body	Yes	No	No
Label vs. value	No	No	Yes
Active vs. inactive nav	No	No	Yes
Hero number vs. unit	Yes	No	No
Section title vs. content	Yes	Optional	No

Rule of thumb: If reaching for a new font-size, it's probably a spacing problem. Add distance instead.

每个界面最多使用：

2种字族（Space Grotesk + Space Mono，仅核心宣传场景可使用Doto）
3种字号（1种大号、1种中号、1种小号）
2种字重（常规 + 另外一种，通常是细体或中等字重，极少使用粗体）

你可以把这看作是设计预算，每多增加一种字号/字重都会消耗视觉一致性。在新增字号前先问自己：我能不能通过间距或颜色来区分内容？

区分场景	字号	字重	颜色
标题与正文	是	否	否
标签与值	否	否	是
活跃与非活跃导航	否	否	是
核心数字与单位	是	否	否
区块标题与内容	是	可选	否

经验法则： 如果你想新增字号，大概率是间距设置出了问题，优先调整间距即可。

2.3 Spacing as Meaning

2.3 间距传递含义

Spacing is the primary tool for communicating relationships.

Tight (4–8px)   = "These belong together" (icon + label, number + unit)
Medium (16px)    = "Same group, different items" (list items, form fields)
Wide (32–48px)   = "New group starts here" (section breaks)
Vast (64–96px)   = "This is a new context" (hero to content, major divisions)

If a divider line is needed, the spacing is probably wrong. Dividers are a symptom of insufficient spacing contrast. Use them only in data-dense lists where items are structurally identical.

间距是表达内容关联关系的核心工具。

紧密间距（4–8px）   = 「这些内容属于同一组」（图标+标签、数字+单位）
中等间距（16px）    = 「同一分组下的不同项」（列表项、表单字段）
宽松间距（32–48px）   = 「这里是新分组的起点」（区块分隔）
超大间距（64–96px）   = 「这是新的上下文」（核心宣传区到内容区、主要模块分隔）

如果你需要用到分割线，大概率是间距设置不合理。 分割线是间距对比度不足的补救手段，仅在数据密集、条目结构完全一致的列表中使用。

2.4 Container Strategy (prefer top)

2.4 容器策略（优先使用轻量方案）

Spacing alone (proximity groups items)
A single divider line
A subtle border outline
A surface card with background change

Each step down adds visual weight. Use the lightest tool that works. Never box the most important element — let it float on the background.

仅靠间距（通过 proximity 分组内容）
单条分割线
细边框轮廓
带背景色的卡片容器

每向下选一个方案都会增加视觉重量，优先使用能满足需求的最轻量方案。永远不要给最重要的元素加容器，让它悬浮在背景上即可。

2.5 Color as Hierarchy

2.5 颜色表达层级

In a monochrome system, the gray scale IS the hierarchy. Max 4 levels per screen:

--text-display (100%) → Hero numbers. One per screen.
--text-primary (90%)  → Body text, primary content.
--text-secondary (60%) → Labels, captions, metadata.
--text-disabled (40%) → Disabled, timestamps, hints.

Red (#D71921) is not part of the hierarchy. It's an interrupt — "look HERE, NOW." If nothing is urgent, no red on the screen.

Data status colors (success green, warning amber, accent red) are exempt from the "one accent" rule when encoding data values. Apply color to the value itself, not labels or row backgrounds. See

references/tokens.md

for the full color system.

在单色系统中，灰度等级就是层级本身，每个界面最多使用4种灰度等级：

--text-display (100%) → 核心展示数字，每个界面仅用一次
--text-primary (90%)  → 正文、主要内容
--text-secondary (60%) → 标签、说明文字、元数据
--text-disabled (40%) → 禁用状态、时间戳、提示信息

红色（#D71921）不属于层级体系，它是中断信号——表示「现在看这里」。如果没有紧急内容，界面中不要出现红色。

数据状态色（成功绿、警告黄、强调红）在标识数据值时不受「仅一个强调色」规则限制，仅把颜色应用到值本身，不要给标签或行背景加色。完整的配色系统参考

references/tokens.md

。

2.6 Consistency vs. Variance

2.6 一致性与差异化

Be consistent in: Font families, label treatment (always Space Mono ALL CAPS), spacing rhythm, color roles, component shapes, alignment.

Break the pattern in exactly ONE place per screen: An oversized number, a circular widget among rectangles, a red accent among grays, a Doto headline, a vast gap where everything else is tight.

This single break IS the design. Without it: sterile grid. With more than one: visual chaos.

这些内容要保持一致： 字族、标签样式（永远用Space Mono全大写）、间距规律、颜色用途、组件形状、对齐方式。

每个界面仅允许有一处打破规则： 超大字号的数字、矩形组件中的圆形控件、灰色中的红色强调元素、Doto字体的标题、紧密布局中的超大留白。

这唯一的打破点就是设计的亮点，没有的话界面会显得刻板冰冷，超过一处的话就会出现视觉混乱。

2.7 Compositional Balance

2.7 构图平衡

Asymmetry > symmetry. Centered layouts feel generic. Favor deliberately unbalanced composition:

Large left, small right: Hero metric + metadata stack.
Top-heavy: Big headline near top, sparse content below.
Edge-anchored: Important elements pinned to screen edges, negative space in center.

Balance heavy elements with more empty space, not with more heavy elements.

不对称 > 对称，居中布局会显得没有特点，优先使用刻意的不平衡构图：

左重右轻： 核心指标 + 元数据堆叠在左侧
上重下轻： 大标题靠近顶部，下方内容稀疏
边缘锚定： 重要元素固定在屏幕边缘，中心留白

用更多留白来平衡重元素，而不是增加更多重元素。

2.8 The Nothing Vibe

2.8 Nothing设计质感

Confidence through emptiness. Large uninterrupted background areas. Resist filling space.
Precision in the small things. Letter-spacing, exact gray values, 4px gaps. Micro-decisions compound into craft.
Data as beauty.
```
36GB/s
```
in Space Mono at 48px IS the visual. No illustrations needed.
Mechanical honesty. Controls look like controls. A toggle = physical switch. A gauge = instrument.
One moment of surprise. A dot-matrix headline. A circular widget. A red dot. Restraint makes the one expressive moment powerful.
Percussive, not fluid. Imagine UI sounds: click not swoosh, tick not chime. Design transitions that feel mechanical and precise.

留白彰显自信。 大面积连续的背景区域，不要为了填满空间而加内容。
细节处见精准。 字间距、精确的灰度值、4px的间隙，微小的决策共同构成专业的工艺质感。
数据本身就是美感。 用Space Mono排版的48px大小的
```
36GB/s
```
本身就是视觉亮点，不需要额外的插画。
机械质感的诚实表达。 控件看起来就像真实的物理控件，开关就是物理拨动开关，仪表盘就是真实的仪器样式。
一处惊喜设计。 点阵风格的标题、圆形控件、小红点，克制的设计会让这唯一的表达时刻更有冲击力。
利落敲击感，而非流畅顺滑感。 想象UI的音效：是点击声而非滑动声，是滴答声而非提示音，过渡动效要做的机械且精准。

2.9 Visual Variety in Data-Dense Screens

2.9 数据密集界面的视觉多样性

When 3+ data sections appear on one screen, vary the visual form:

Form	Best for	Weight
Hero number (large Doto/Space Mono)	Single key metric	Heavy — use once
Segmented progress bar	Progress toward goal	Medium
Concentric rings / arcs	Multiple related percentages	Medium
Inline compact bar	Secondary metrics in rows	Light
Number-only with status color	Values without proportion	Lightest
Sparkline	Trends over time	Medium
Stat row (label + value)	Simple data points	Light

Lead section → heaviest treatment. Secondary → different form. Tertiary → lightest. The FORM varies, the VOICE stays the same.

当同一个界面上出现3个以上数据区块时，要使用不同的视觉形式：

形式	适用场景	视觉重量
核心展示数字（大号Doto/Space Mono）	单个关键指标	重——仅用一次
分段进度条	目标完成进度	中等
同心环/圆弧	多个关联百分比数据	中等
行内紧凑进度条	行内次要指标	轻
仅展示数字+状态色	无需展示比例的数值	最轻
迷你走势图	时间维度趋势数据	中等
统计行（标签+数值）	简单数据点	轻

首屏区块用最重的表现形式，次区块用不同的形式，三级区块用最轻的形式，表现形式可以变，但设计风格要统一。

3. ANTI-PATTERNS — WHAT TO NEVER DO

3. 反模式——绝对不要做的事

No gradients in UI chrome
No shadows. No blur. Flat surfaces, border separation.
No skeleton loading screens. Use
```
[LOADING...]
```
text or segmented spinner.
No toast popups. Use inline status text:
```
[SAVED]
```
,
```
[ERROR: ...]
```
No sad-face illustrations, cute mascots, or multi-paragraph empty states
No zebra striping in tables
No filled icons, multi-color icons, or emoji as UI
No parallax, scroll-jacking, or gratuitous animation
No spring/bounce easing. Use subtle ease-out only.
No border-radius > 16px on cards. Buttons are pill (999px) or technical (4–8px).
Data visualization: differentiate with opacity (100%/60%/30%) or pattern (solid/striped/dotted) before introducing color.

UI框架中不得使用渐变
不要用阴影、模糊效果，保持平面效果，用边框做分隔
不要用骨架屏加载态，使用
```
[LOADING...]
```
文字或分段加载指示器
不要用toast弹窗，使用行内状态文字：
```
[SAVED]
```
、
```
[ERROR: ...]
```
不要用悲伤表情插画、可爱吉祥物或大段空白状态说明
表格不要用斑马纹
不要用填充图标、多色图标，也不要把emoji当UI元素使用
不要用视差效果、劫持滚动或无意义的动画
不要用弹性/弹跳缓动效果，仅可使用细微的ease-out缓动
卡片的圆角不要超过16px，按钮可以是胶囊形（999px圆角）或工业风格（4-8px圆角）
数据可视化：在引入颜色前，优先通过透明度（100%/60%/30%）或图案（实心/条纹/点状）做区分

4. WORKFLOW

4. 工作流程

Declare fonts — tell the user which Google Fonts to load (see
```
references/tokens.md
```
)
Ask mode — dark or light? Neither is default.
Sketch hierarchy — identify the 3 layers before writing any code
Compose — apply craft rules (Sections 2.1–2.9)
Check tokens — consult
```
references/tokens.md
```
for exact values
Build components — consult
```
references/components.md
```
for patterns
Adapt to platform — consult
```
references/platform-mapping.md
```
for output conventions

明确字体——告知用户需要加载的Google Fonts字体（参考
```
references/tokens.md
```
）
询问模式——要做深色还是浅色模式？没有默认选项
梳理层级——在写代码前先确定三层信息层级
搭建界面——应用2.1到2.9的工艺规则
核对设计令牌——参考
```
references/tokens.md
```
获取精确数值
构建组件——参考
```
references/components.md
```
获取组件规范
适配平台——参考
```
references/platform-mapping.md
```
获取输出规范

5. REFERENCE FILES

5. 参考文件

For detailed token values, component specs, and platform-specific guidance:

references/tokens.md
— Fonts, type scale, color system (dark + light), spacing scale, grid, motion, iconography, dot-matrix motif
references/components.md
— Cards, buttons, inputs, lists, tables, nav, tags, segmented controls, progress bars, charts, widgets, overlays, state patterns
references/platform-mapping.md
— HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions

如需获取详细的设计令牌数值、组件规格、平台专属指引，请查看：

references/tokens.md
—— 字体、字号体系、配色系统（深浅模式）、间距体系、网格、动效、图标、点阵图案规范
references/components.md
—— 卡片、按钮、输入框、列表、表格、导航、标签、分段控件、进度条、图表、组件、弹窗、状态模式
references/platform-mapping.md
—— HTML/CSS、SwiftUI、React/Tailwind、纸质输出规范