One accent color
Keep one color across the entire product. Wherever it shows up is where you want the user to look and to click.
What you'll run into
- 页面挺花的，但用户找不到主按钮
- 每加一个状态就加一种颜色，最后自己都记不住哪个代表什么
- AI 生成的界面每个模块一个色，像调色板
Color interrupts a visual scan and pulls attention over. A page can be interrupted only so many times — once you run out, you are done. Spread color across six elements and you are telling the user all six matter equally, which means there is no focal point.
Where the accent goes
| 该用 | 不该用 | 原因 |
|---|---|---|
| 主按钮 | 次要按钮 | 次要按钮用幽灵样式或纯文字链接 |
| 选中态、当前位置 | 所有可点的东西 | 可点不等于重要，鼠标形状已经在暗示了 |
| 链接 | 正文里的强调 | 正文强调用加粗，别用彩色 |
| 关键数据 | 所有数字 | 只给那个最该被看到的数上色 |
| 品牌标识 | 装饰性图形 | 装饰用中性色，别抢主体 |
Semantic colors are the exception: success green, warning yellow, error red do not count as accent — they carry information, not guidance. But they need restraint too: three semantic colors on one screen usually means the state design is too complicated.
Hand the rest to grayscale
Once color is gone, the hierarchy has to be carried by grayscale. A workable gray scale looks roughly like this.
主文字
正文
次要
辅助
分隔线
底色
六档从近黑到近白。多数界面用这六个就够，不需要更细的分档。