Design System 03 / 03

ARCADE_

Cut every corner.斜切棱角 · 电竞张力

01

Constraints & Rules

没有圆角 —— 所有角都是切出来的，而且每类组件的切法不同：卡片深切 14px，按钮 10px，小控件 6px，徽章只切右下一角，标签只切右上。碳黑底、电光黄强调、硬边缘，配合带 overshoot 的入场动画。

C1

禁止圆角

radius 全为 0，斜角一律用 clip-path

C2

切角分级

卡片 14 / 按钮 10 / 控件 6 / 徽章·标签单角 5–8px

C3

强调色唯一

电光黄 #e8ff2e；红仅用于危险语义

C4

深度 = 硬 offset 阴影

4px 4px 0 硬阴影，禁止柔和弥散

C5

标题加宽字距 + 大写

display 级 +0.06em uppercase

C6

动效允许 overshoot

低阻尼弹簧，进场带 skew 冲击，≤ 520ms

C7

装饰限定为斜线/编号/角标

45° 斜线、001 编号、L 形角括号

C8

暗 / 亮双模式

暗为默认；亮模式换纸白底，黄色加深保持可读

NEVER · 任何圆角与柔和阴影NEVER · 磨砂玻璃半透明表面NEVER · 黄红同时大面积出现NEVER · 所有组件同一切角
02

Design Tokens

Color · light (L) / dark (D)

L
D

--ui-bg

画布

light#f2f2ee
dark#08090c
L
D

--ui-surface

面板

light#ffffff
dark#12141b
L
D

--ui-fg

主文字

light#16181c
dark#f2f4f8
L
D

--ui-accent

电光黄

light#dff000
dark#e8ff2e
L
D

--ui-accent-2

对抗红

light#e11d48
dark#ff3d5a
L
D

--ui-line

边框

light#d8dae0
dark#232734

Shape & Depth

--ui-clip (card)14px · 左上/右下
--ui-clip-btn10px · 左上/右下
--ui-clip-sm6px · 左上/右下
--ui-clip-chip5px · 仅右下
--ui-clip-tab8px · 仅右上
--ui-clip-input8px · 仅左下

Motion

spring420 / 18 / 0.8明显 overshoot
tapscale 0.94 重按压
hoverx +2, y -2 斜顶
enterx -32→0 + skewX -6°→0
duration140 / 260 / 520ms
03

Components

Button

Badge

DefaultAccentStableBetaDeprecated

Avatar / Kbd / Tooltip

ALGHAT⌘K

Input / Select

Textarea

Switch / Checkbox / Radio

Slider / Progress

000064100
072

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%
072
ALGHAT

Command palette_

Keyboard-first affordances

Open⌘K·Toggle mode⌘J

Table

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