Color Tokens

    品牌色和语义化颜色 Token 系统，提供完整的色彩规范，包含品牌色、中性色以及多种语义色。

    基础用法

    Tip

    点击色块可复制 token 名称，每组颜色包含 10 个色阶（从浅到深）

    颜色转换工具
    Brand
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Gray
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Blue
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Cyan
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Geekblue
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Gold
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Green
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Lime
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Magenta
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Orange
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Purple
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Red
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Volcano
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Yellow
    Token
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    设计规范

    色阶系统

    所有颜色均采用 10 级色阶系统，从浅色背景到深色文本，确保在不同场景下都有良好的视觉对比度：

    • Level 1-3：浅色系，用于背景、强调区域
    • Level 4-6：中等色，用于主要内容、交互元素
    • Level 7-10：深色系，用于文本、标题、重要信息

    Brand（品牌色）

    项目的主品牌色，用于表达品牌个性的橙色系。

    Token使用场景
    brand-1 ~ brand-3浅色背景、强调区域
    brand-4 ~ brand-6品牌按钮、主要内容
    brand-7 ~ brand-10深色文本、标题

    Gray（中性色）

    用于表达中性状态的灰色系，包含 9 个色阶（使用 rgba 透明度）。

    Token使用场景
    gray-1 ~ gray-3背景色、分割线
    gray-4 ~ gray-6次要文本、禁用状态
    gray-7 ~ gray-9主要文本、标题

    语义色系

    系统提供多种语义化颜色，用于不同的功能和场景：

    颜色用途
    Blue信息、链接、主要操作
    Cyan科技、清新风格
    Geekblue技术感、深蓝色调
    Gold警告、VIP 标识
    Green成功、安全状态
    Lime清新、活力风格
    Magenta时尚、女性向
    Orange警告、注意状态
    Purple高端、神秘感
    Red错误、危险状态
    Volcano强调、火山橙
    Yellow警示、提示状态

    使用建议

    选择合适的色阶

    // 背景色使用浅色阶
<div className="bg-blue-1 text-blue-10">
  信息卡片
</div>

// 按钮使用中等色阶
<button className="bg-brand-5 text-white">
  主要按钮
</button>

// 文本使用深色阶
<span className="text-gray-8">次要文本</span>
<span className="text-gray-9">主要文本</span>

    颜色搭配

    • 单一色调：使用同一颜色的不同色阶，保持视觉统一
    • 对比色：使用互补色（如 Blue + Orange）突出重点
    • 品牌色 + 中性色：品牌色用于强调，中性色用于主体内容

    注意事项

    1. 可读性优先：确保文本与背景有足够的对比度
    2. 保持克制：避免使用过多颜色，保持视觉简洁
    3. 语义一致：相同功能使用相同颜色，保持用户体验一致
    4. 深色模式：在深色模式下需要调整颜色使用方案