디자인 시스템
255개의 팔레트를 각각 역할로 정리했습니다. 하나를 고르면 키트 전체가 함께 바뀝니다.
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',
}