设计基础 / 01
设计令牌
整个组件库的视觉源头：颜色、圆角、阴影、间距全部由 CSS 变量驱动。改动一处令牌，全站 97 个页面同步生效；切换 .dark 即完成深色换肤。
色彩令牌 · Surface
--color-bg / --color-fg背景层级 Surface
bg#FFFFFF
bg-2#FAFAFA
bg-3#F4F4F5
inv#0A0A0A 反色底
glass顶栏毛玻璃
bg 用于页面底色，bg-2 用于分区/表头，bg-3 用于控件填充与骨架屏。
前景层级 Foreground
text-fg
#0A0A0A · 正文与标题
text-fg-2
#737373 · 次要说明
text-fg-3
#A3A3A3 · 占位与辅助
Aa
text-inv-fg
反色底上的文字，自动对比
边框与交互态
bd-soft6% · 内部分割
bd10% · 常规描边
bd-strong22% · 强调描边
hover4% · 悬停底
active8% · 按下底
色彩令牌 · Status
success / danger / warn / info / accent实色 Success
success#10B981
success-bg · 10% 透明底
已上线
订单已支付成功
实色 Danger
danger#EF4444
danger-bg · 10% 透明底
已过期
实色 Warning
warn#F59E0B
warn-bg · 10% 透明底
即将到期
库存仅剩 3 件
实色 Info
info#3B82F6
info-bg · 10% 透明底
处理中
实色 Accent
accent#8B5CF6
accent-bg · 10% 透明底
会员专享
Pro
状态灯 Status
运行中 · 服务健康
异常 · 连接超时
预警 · 磁盘 82%
部署中 · 正在发布
空闲 · 等待任务
圆角令牌
radius token · 4 档rounded-tag
6px
标签、徽章、小型标记
rounded-btn
12px
按钮、输入框、下拉项
rounded-card
24px
卡片、弹窗、数据面板
rounded-wrap
30px
大容器、区块外框、Banner
阴影令牌
shadow token · 5 档shadow-sm
0 4px 14px
胶囊分段、次级浮起
shadow-nav
0 8px 30px
顶栏滚动吸顶
shadow-card
0 24px 60px -24px
卡片悬停浮起
shadow-pop
0 30px 100px
下拉、弹窗、Toast
shadow-fab
0 12px 30px
悬浮按钮 回到顶部
间距节奏
spacing scale基础刻度（4px 基准）
4px图标与文字间隙
8px按钮内图标间距
12px表单标签与控件
16px卡片内元素组
24px卡片内边距
28px页面左右留白
48px区块之间
栅格间距实拍
gap-3
gap-3
gap-5
gap-5
gap-7
gap-7
页面主内容区恒定 max-w-[1180px] mx-auto px-7，与顶栏、页脚对齐。
深色模式对照
light ⇄ dark浅色模式 · 变量取值
--c-bg
#FFFFFF
--c-bg-2
#FAFAFA
--c-bg-3
#F4F4F5
--c-fg
#0A0A0A
--c-inv
#0A0A0A
--c-bd
rgba(0,0,0,.10)
浅色卡片预览
白底 + 10% 黑描边，阴影收敛，适合长时间阅读与后台管理场景。
深色模式 · 变量取值
--c-bg
#0A0A0A
--c-bg-2
#101010
--c-bg-3
#171717
--c-fg
#F5F5F5
--c-inv
#F5F5F5
--c-bd
rgba(255,255,255,.10)
深色卡片预览
黑底 + 10% 白描边，反色令牌自动对调，正文对比度仍保持 AA 以上。
令牌在真实组件上的表现
跟随主题的卡片
边框、底色、文字色全部走令牌，切换到深色无需另写一套样式。
token 驱动已同步
固定黑底卡片
用于强调展示与品牌区域，在浅色与深色模式下都保持黑底白字。
card-dark不随主题
令
特性卡使用 2px 前景色描边，用于套餐推荐与重要通知。