核心：三层结构 + 语义命名 + 主题兼容 + 无障碍
一、三层架构 🧱
基础色板
品牌色、中性灰、功能色（50–900 色阶）
语义色（核心）
按用途命名：bg/text/border/interactive
示例：color-bg-primary、color-text-on-primary
组件色（可选）
给组件绑定语义色：button-primary-bg
二、命名规则 📛
结构：用途 + 角色 + 状态
关键：on-xxx 表示 “在某背景上的文字色”
三、主题切换 🌓
深色模式：不用纯黑 / 纯白，层级靠亮度，品牌色降饱和
实现：CSS 变量、Figma Variables、多平台配置
四、无障碍 ✅
文字对比度：≥4.5:1
不只靠颜色传信息，配图标 / 文字
五、落地步骤 🛠️
审计 → 建色板 → 做语义映射 → 验对比度 → 上线 → 文档
六、避坑 ❌
不直接用基础色
不做多余令牌
不简单反色做深色模式
一句话：基础色做原料，语义色做逻辑，三层管好颜色系统。
📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
👇文末加入「UIUX 学习指南」，用每天 5～10 分钟的坚持，换取终身受用的“设计竞争力”。
你会发现，那些焦虑和迷茫，都在稳步提升中烟消云散。
