SCALE — Build Lab

3層カラーパレット(背景/前景/アクセント)

背景3段階・前景3段階・アクセント1色 = 7色で全体を構成。

Do 良い例

#08080a / #14141c / #1a1a26(背景3段) + #fff / .85 / .55(前景3段) + 1アクセント

Don't 悪い例

黄色・赤・緑・青・紫…と各機能に色をつける(Bootstrap初期の罠)

3層カラーパレット(背景/前景/アクセント)

:LiTarget: 原則

背景3段階・前景3段階・アクセント1色 = 7色で全体を構成。

:LiAlertCircle: なぜ?

色は7±2個まで。多すぎると認知負荷UP・統一感↓。

:LiCheckCircle: Do(良い例)

#08080a / #14141c / #1a1a26(背景3段) + #fff / .85 / .55(前景3段) + 1アクセント

:LiXCircle: Don’t(悪い例)

黄色・赤・緑・青・紫…と各機能に色をつける(Bootstrap初期の罠)