设计变量 (Design Tokens)
构建用户界面的原子单位。使用这些标准化的值来确保整个产品的一致性。
间距系统 (Spacing)
基于 4px (0.25rem) 网格的间距比例。使用这些值作为 padding、margin 和 gap。
4px
1 (0.25rem)
8px
2 (0.5rem)
16px
4 (1rem)
24px
6 (1.5rem)
32px
8 (2rem)
48px
12 (3rem)
64px
16 (4rem)
96px
24 (6rem)
8
圆角 (Radius)
定义 UI 元素的形状特征。从尖锐的直角到完全圆润的胶囊形。
无圆角 (0px)
小圆角 (2px)
默认圆角 (4px)
大圆角 (8px)
超大圆角 (12px)
全圆角 (9999px)
阴影与光晕 (Shadows & Glows)
通过光影创造深度感，或使用霓虹光晕强调品牌元素。
海拔投影 (Elevation)
shadow-sm
shadow-md
shadow-lg
shadow-xl
霓虹光晕 (Neon Glow)
shadow-neon
shadow-neon-sm
响应式断点 (Breakpoints)
用于适配不同设备屏幕尺寸的断点定义。
| Token | Width | Device |
|---|---|---|
| sm | 640px | 移动设备 |
| md | 768px | 平板 |
| lg | 1024px | 桌面 |
| xl | 1280px | 宽屏 |
| 2xl | 1536px | 宽屏 (Large) |