Design System 02 / 03

GLASS.

Calm surfaces, soft light.轻盈通透 · 克制蓝

01

Constraints & Rules

一座克制、精密、向上的「塔」—— 技术控制台美学（ArcTower）。扁平表面叠在 1px 发丝描边上，投影归零；圆角收敛在 4/6/10/16px；全站只有一种蓝在起强调作用，大量留白是品牌的一部分。

C1

单一强调蓝

一个视图只有一种蓝起强调作用，其余仅语义色

C2

圆角体系 xs4/sm6/md10/lg16

主圆角 10px；大容器 ≤ 16px，禁止过度圆润

C3

扁平 + 描边，而非投影

1px 描边分层；仅弹层允许大投影 + 蓝色辉光

C4

按钮只有 4 类

Primary / Border / Ghost / Danger，hover 上浮 1px

C5

状态色用软底 chip

10% 色底 + 35% 色描边 + 实色文字，Pill 圆角

C6

焦点 = 蓝描边 + 3px 柔光环

所有表单控件统一 focus 语言

C7

暗 / 亮完全对等

画布 = 素色底 + 点阵纹理；暗：#0a0a0a（非纯黑）

C8

交互过渡 150–200ms ease

尺寸/进度 400ms cubic-bezier(.4,0,.2,1)，禁止漂浮感

NEVER · 纯黑 #000 背景NEVER · 多个彩色强调同时出现NEVER · Material 式大投影堆叠NEVER · ≥16px 圆角用于大容器NEVER · 大面积渐变背景
02

Design Tokens

Color · light (L) / dark (D)

L
D

--ui-bg

画布 · 叠点阵纹理

light#f8f8fc
dark#0a0a0a
L
D

--ui-surface

卡片 / 面板

light#ffffff
dark#161616
L
D

--ui-fg

主文字

light#0a0a0a
dark#fafafa
L
D

--ui-fg-muted

二级文字

light#6b7280
dark#a1a1aa
L
D

--ui-accent

唯一品牌蓝

light#0080ff
dark#3b82f6
L
D

--ui-accent-soft

选中 / hover / 柔光环

lightrgba(74,144,226,.1)
darkrgba(59,130,246,.15)
L
D

--ui-line

描边；soft 档 6% / 7%

lightrgba(0,0,0,.1)
darkrgba(255,255,255,.12)
L
D

--ui-accent-2

Primary hover

light#3a7bc8
dark#2563eb

Shape & Depth

--ui-radius4 / 6 / 10 / 16px
--ui-shadow-lg弹层：大投影 + 蓝色辉光
--ui-progress-bar蓝色渐变 #6ba3e8→#8fbcf0
border1px 发丝边，投影归零

Motion

spring320 / 32 / 0.8stiffness / damping / mass
hovertranslateY(-1px)按钮上浮
dialogy 8→0 + scale .98→1 · 250ms
duration150 / 200 / 400ms
03

Components

Button

Badge

DefaultAccentStableBetaDeprecated

Avatar / Kbd / Tooltip

ALGHAT⌘K

Input / Select

Textarea

Switch / Checkbox / Radio

Slider / Progress

064100

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.0tokens: 48

Composed patterns

Create account

Full form language in one card

Deploy status

Data density with badges + progress

buildPassing
tokensDrift · 3
rollout72%
ALGHAT

Command palette

Keyboard-first affordances

Open⌘K·Toggle mode⌘J

Table

TokenLayerStatusOwner
--ui-accentSemanticStableCore
--ui-clip-*ShapeBetaARCADE
--ui-blurDepthStableGLASS
--ui-lineBorderFrozenMONO