Foundations / Color
색상 (Color)
원시 팔레트(Primitive)를 역할별 시맨틱 토큰(Semantic)으로 감싸서 씁니다. 화면에서는 시맨틱 토큰만 사용하면 라이트/다크 모드가 자동으로 맞춰집니다.
원시 색상 (Primitive)
역할 이름으로 정한 11단계 팔레트입니다. 클라이언트 브랜드에 맞출 때는 primary 팔레트만 교체합니다.
primary
secondary
neutral
danger
warning
info
success
50100200300400500600700800900950
배경 (Background)
표면의 층위를 나타냅니다.
bg/canvas페이지 바탕
bg/surface카드·패널 표면
bg/subtle호버·보조 영역
bg/muted비활성·구분 영역
bg/inverse반전 표면 (툴팁 등)
텍스트·테두리 (Text & Border)
다람쥐 헌 쳇바퀴text/primary
다람쥐 헌 쳇바퀴text/secondary
다람쥐 헌 쳇바퀴text/disabled
다람쥐 헌 쳇바퀴text/inverse
border/default
border/strong
border/focus
의도별 색상 (Intent)
각 의도는 solid · solid-hover · on-solid · subtle · subtle-hover · text · border 7개 역할을 가집니다.
solidprimaryprimary/*
solidsecondarysecondary/*
soliddangerdanger/*
solidwarningwarning/*
solidinfoinfo/*
solidsuccesssuccess/*