デザインシステム
255 のパレットを、それぞれロールに変換しました。1つ選ぶと、キット全体がそれに合わせて変わります。
Cotton Violet
ライト
- 背景上のテキスト
- 18.7:1
- 背景上のアクセント
- 4.9:1
ライブで動作中。どのコントロールも操作できます。
役割
地#FAFFFF
面#F2F7F7
浮いた面#E7ECEC
沈んだ面#EDF2F2
細線#E0E5E5
文字色#0C1212
控えめ#5F6666
かすか#8A9393
アクセント#4E5DF6
アクセント上#FFFFFF
文字色の上#FAFFFF
データの色
#5465FF
#788BFF
#768AD5
#7A90B5
トークン
キットのすべてのコンポーネントが持つカラーブロックを、Cotton Violet の値で埋めたものです。
const t = {
bg: '#FAFFFF',
surface: '#F2F7F7',
raised: '#E7ECEC',
sunken: '#EDF2F2',
line: '#E0E5E5',
ink: '#0C1212',
muted: '#5F6666',
faint: '#8A9393',
accent: '#4E5DF6',
onAccent: '#FFFFFF',
onInk: '#FAFFFF',
}