Design System 01 / 03

MONO.

Nothing but signal.黑白线条 · 极简精确

01

Constraints & Rules

拒绝一切装饰。界面只由文字、线条、留白构成 —— 全部直角，没有一处曲线；色彩被移除后，层次只能靠灰度、字重与间距建立，每个像素都必须有存在的理由。

C1

禁止任何彩色

品牌强调 = 黑白反转；彩色仅限语义色

C2

圆角恒为 0

所有元素直角，包括头像、开关、Badge

C3

无投影，只有边框

深度用 1px 边框灰度表达，仅浮层允许环境阴影

C4

边框恒为 1px

hover/focus 通过提升边框灰度表达

C5

禁止渐变、模糊、纹理

表面必须是纯色

C6

排版字距收紧

Display 级 -0.04em，数据一律等宽字体

C7

动效不做 overshoot

高刚度高阻尼，位移 ≤ 8px，≤ 320ms

C8

暗 / 亮双模式

同一几何，墨色反转；暗为默认

[NEVER · 彩色图标与渐变按钮][NEVER · 任何圆角与曲线][NEVER · 弹跳 / overshoot 动画][NEVER · 磨砂玻璃与噪点纹理]
02

Design Tokens

Color · light (L) / dark (D)

L
D

--ui-bg

画布

light#fcfcfc
dark#0a0a0a
L
D

--ui-surface

卡片 / 输入框

light#f7f7f7
dark#111111
L
D

--ui-surface-2

填充底

light#efefef
dark#1a1a1a
L
D

--ui-fg

主文字

light#1a1a1a
dark#e4e4e4
L
D

--ui-fg-muted

次级文字

light#5c5c5c
dark#a1a1a1
L
D

--ui-accent

强调（反转）

light#171717
dark#ededed
L
D

--ui-line

默认边框

light#e6e6e6
dark#212121
L
D

--ui-line-strong

hover 边框

light#cccccc
dark#3a3a3a

Shape & Depth

--ui-radius0px（全部）
--ui-shadow-sm0 0 0 1px line
--ui-blur0px
border恒为 1px

Motion

spring500 / 40 / 0.6stiffness / damping / mass
tapscale 0.98
hovery -1px
enteropacity + y 8→0
duration120 / 200 / 320ms
03

Components

Button

Badge

[Default][Accent][Stable][Beta][Deprecated]

Avatar / Kbd / Tooltip

ALGHAT⌘K

Input / Select

Textarea

Switch / Checkbox / Radio

Slider / Progress

064100
72%

Tabs

Tokens are the contract between design and code.

Dialog / Toast / Dropdown

Accordion

A design system is defined by what it refuses to do. Constraints make the output recognizable.

Skeleton

Card

++++

Interactive card

Hover to feel this system's spring

[v2.0]tokens: 48

Composed patterns

++++

Create account

Full form language in one card

++++

Deploy status

Data density with badges + progress

build[Passing]
tokens[Drift · 3]
rollout72%
72%
ALGHAT
++++

Command palette

Keyboard-first affordances

Open⌘K·Toggle mode⌘J

Table

TokenLayerStatusOwner
--ui-accentSemantic[Stable]Core
--ui-clip-*Shape[Beta]ARCADE
--ui-blurDepth[Stable]GLASS
--ui-lineBorder[Frozen]MONO