基础色板
由品牌主色推导出完整 10 阶色板，作为语义色、组件状态和插画用色的基础。每组色阶从浅底色到深强调渐变。
组件示例
用当前语义色、字号、圆角和阴影生成常用组件片段，帮助检查 token 在真实界面中的组合效果。
主题预览
同一组语义色在 Light 和 Dark 模式下的实际表现，确保两套主题都有足够的视觉层次。
Light
Dark
对比度参考
自动校验所有前景/背景组合的对比比率，标注 AA / AAA 通过情况。
品牌颜色
品牌主色及其 8 级交互梯度，从最浅底色到最深强调。覆盖按钮、标签、卡片等全部品牌表达场景，核心三色（primary / hover / active）不跟随深浅模式变化。
辅助色
辅助色用于分类标签、数据可视化、运营活动和品牌延展，不承担成功、警告、危险等系统反馈含义。
功能色
用于成功、警告、危险和信息反馈的状态色，包含正色和浅底色两组，深浅模式自动适配。
文本 / 图标颜色
从主文本到水印的 8 级灰度梯度，确保界面中每层信息都有清晰的视觉优先级。包含链接色和反色文本。图标颜色直接复用本组文本色——主图标用主文本色、次要图标用次文本色、禁用图标用禁用文本色，深色 / 品牌底上用反色文本或常量白。
背景颜色
页面、容器、浮层和遮罩四个层级的界面背景，加上品牌底色和禁用底色，构建完整的空间层次。
边框颜色
分割线、输入框描边和卡片边界的三级边框色，从弱到强逐步增加存在感。
常量色
不跟随主题和深浅模式切换的固定颜色，适用于品牌资产、遮罩反色和特殊图形。
字体家族
系统默认采用苹方 PingFang SC，保持中文界面在设计稿中的清晰度与一致性。拉丁字符跟随中文主字体。
PingFang SC, system-ui
Inter, system-ui
字号规范
字体、字号和行高共同决定信息层级。每个 token 定义了从展示标题到辅助说明的完整排印体系。
圆角
7 个圆角变量定义界面的视觉气质。柔和策略适合移动端，克制策略适合工具型产品。
阴影
多层阴影系统区分界面层级，深色模式使用高光和描边组合增强空间感。
透明度
用于交互状态叠加（悬停、按下）、禁用态和遮罩层的统一透明度变量，确保全局一致的交互反馈。
动效
标准化过渡时长和缓动曲线，确保全局一致的交互节奏和动画感受。
间距
基于 4px 基准的间距体系，覆盖组件内边距到区块间距的全部场景，保证界面在不同页面中保持一致密度。