颜色
色彩，在界面设计中的使用应同时具备品牌识别性以及界面设计功能性，任何颜色的选取和使用应该是有意义的。尽管同一种颜色传达的含义会受到文化和地域的影响。
为了避免视觉传达差异，统一使用一套特定的调色板来规定颜色，定义不同基色并衍生出九宫格色板，再配以黑白叠加的方式实现色彩明暗的效果，可为产品提供一致的外观视觉感受。
色板
red
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
red-11
red-12
orange
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
orange-11
orange-12
yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
yellow-11
yellow-12
green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
green-11
green-12
cyan
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
cyan-11
cyan-12
blue
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
blue-11
blue-12
indigo
indigo-1
indigo-2
indigo-3
indigo-4
indigo-5
indigo-6
indigo-7
indigo-8
indigo-9
indigo-10
indigo-11
indigo-12
purple
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
purple-11
purple-12
pink
pink-1
pink-2
pink-3
pink-4
pink-5
pink-6
pink-7
pink-8
pink-9
pink-10
pink-11
pink-12
gray
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-10
gray-11
gray-12
颜色使用
Clair 提供了一些 CSS 类，让你可以将这些颜色使用在背景色或文字颜色中。
背景颜色
可以给一个元素加上 CSS 类 is-bg-red-7 使其背景色为上面色板中的 red-7 号颜色。文字的颜色会根据背景色的深浅自动调整为黑色或白色，除非你自己设置了其它的文字颜色。例如：
.is-bg-red-4
.is-bg-pink-4
文字颜色
给一段文字加 CSS 类 is-text-blue-8 会让这段文字显示为上面色板中的 blue-8 号颜色。
这是一 blue-8 号颜色显示的文字