设计系统 v2.0
色彩体系
双重人格色彩系统：拥抱 纸张 的秩序和 霓虹 的混沌。
纸张系列 (Paper)
温暖、触感的浅色模式基底。
Click to Copy Utils
paper-0
1.0:1
--paper-0#FAFAFAClick to Copy Utils
paper-50
1.0:1
--paper-50#F5F5F5Click to Copy Utils
paper-100
1.1:1
--paper-100#F0F0F0Click to Copy Utils
paper-150
1.2:1
--paper-150#E6E6E6Click to Copy Utils
paper-200
1.3:1
--paper-200#DCDCDC碳素系列 (Carbon)
深邃、丰富的深色模式背景。
Click to Copy Utils
carbon-950
1.0:1
--carbon-950#0a0a0cClick to Copy Utils
carbon-900
1.1:1
--carbon-900#121216Click to Copy Utils
carbon-800
1.2:1
--carbon-800#1a1a20Click to Copy Utils
carbon-700
1.3:1
--carbon-700#23232cClick to Copy Utils
carbon-600
1.5:1
--carbon-600#2e2e3aClick to Copy Utils
carbon-500
1.9:1
--carbon-500#3b3b48品牌与霓虹 (Brand & Neon)
核心标识与高能强调色。
Click to Copy Utils
brand-b700
4.8:1
--brand-b700#007D7EClick to Copy Utils
brand-b600
3.6:1
--brand-b600#009293Click to Copy Utils
brand-b500
2.8:1
--brand-b500#00A9AAClick to Copy Utils
brand-b300
1.8:1
--brand-b300#45CFCFClick to Copy Utils
brand-b200
1.2:1
--brand-b200#9AF0F0Click to Copy Utils
neon-teal-strong
1.3:1
--neon-teal-strong#00F5D4Click to Copy Utils
neon-teal-soft
1.1:1
--neon-teal-soft#BFFFF3Click to Copy Utils
neon-cyan-strong
1.3:1
--neon-cyan-strong#00F0FFClick to Copy Utils
neon-cyan-soft
1.1:1
--neon-cyan-soft#D1F9FFClick to Copy Utils
neon-magenta-strong
3.6:1
--neon-magenta-strong#FF007FClick to Copy Utils
neon-magenta-soft
1.1:1
--neon-magenta-soft#FFE5F2排版色彩
用于阅读层级的对比度定义。
Click to Copy Utils
text-strong
16.7:1
--text-strong#1A1A1AClick to Copy Utils
text-normal
8.1:1
--text-normal#4D4D4DClick to Copy Utils
text-muted
3.8:1
--text-muted#808080Click to Copy Utils
text-disabled
2.0:1
--text-disabled#B3B3B3暗色模式文本
Click to Copy Utils
carbon-text-strong
18.1:1
--carbon-text-strong#F5F5F5Click to Copy Utils
carbon-text-normal
13.3:1
--carbon-text-normal#D4D4D4Click to Copy Utils
carbon-text-muted
7.8:1
--carbon-text-muted#A3A3A3语义状态
用于反馈状态的功能色。
Click to Copy Utils
info
3.5:1
--info#3B82F6Click to Copy Utils
success
2.4:1
--success#10B981Click to Copy Utils
warning
2.1:1
--warning#F59E0BClick to Copy Utils
danger
3.6:1
--danger#EF4444表面色
Click to Copy Utils
surface-info
1.0:1
--surface-info#EFF6FFClick to Copy Utils
surface-success
1.0:1
--surface-success#ECFDF5Click to Copy Utils
surface-warning
1.1:1
--surface-warning#FEF3C7Click to Copy Utils
surface-danger
1.0:1
--surface-danger#FEF2F2Click to Copy Utils
surface-brand
1.0:1
--surface-brand#E6FFFA数据可视化
用于图表和图形的分类色彩。
Click to Copy Utils
chart-1
1.6:1
--chart-1#00E0E0Click to Copy Utils
chart-2
2.0:1
--chart-2#00BFFFClick to Copy Utils
chart-3
12.4:1
--chart-3#4B0082Click to Copy Utils
chart-4
8.1:1
--chart-4#8B008BClick to Copy Utils
chart-5
3.5:1
--chart-5#FF1493玻璃拟态实验室 (Glass Lab)
基于背景模糊与透明度的物理材质。
磨砂玻璃背景模糊 + 半透明层
构造解剖 (Structural Anatomy)
用于构建组件物理边界的线条系统。
Item AItem BItem C