BeerUi Icon 说明

来源

tdesign-icons

颜色系统

Design Url accessibility

//primary
{
    "0": "#fff2fc",
    "5": "#fed6f4",
    "10": "#fdbbed",
    "20": "#fa86df",
    "30": "#f557d3",
    "40": "#ed30ca",
    "50": "#e413c3",
    "60": "#d700bf",
    "70": "#c700bb",
    "80": "#b300b3",
    "90": "#94009e",
    "100": "#770087"
}
// success
{
    "0": "#f6fffc",
    "5": "#c1f7e8",
    "10": "#90eed7",
    "20": "#59ddc1",
    "30": "#39cbb0",
    "40": "#26baa0",
    "50": "#1ba892",
    "60": "#149783",
    "70": "#108575",
    "80": "#0c6f5e",
    "90": "#095948"
}
// Error

• 整理所有颜色
  • 识别你所有的颜色并将它们组织成逻辑组。
  • Primary colors | Secondary colors | Neutrals | Semantic colors
• 定义系统来创建扩展调色板
  • 创建基础颜色变化的系统
• 建立命名约定
  • 确保所有相关者可以理解
• 验证新的颜色
  • 确保新颜色满足您的所有颜色要求并符合可访问性标准
• 定义使用指南
  • 为背景、文本、容器等全局 UI 元素分配颜色。
• 发布测试
  • 将新的调色板和使用指南推送给团队中的相关者
• 迭代
  • 整合团队的反馈并在需要时进行更改
• 向开发人员发布
  • 然后开发人员可以将颜色系统用于他们的组件库