Color
디자이너가 일관된 제품 디자인 경험을 만들 수 있도록 표준 컬러 차트와 가이드라인을 제공합니다. 컬러 시스템을 통해 일관된 디자인을 유지하고, 사용자 경험을 향상시킬 수 있습니다.
Scale Token
Scale Token은 프로덕트의 일관된 색상 체계를 정의하는 표준화된 컬러 토큰입니다.
특별한 시맨틱한 성격이나 맥락을 갖고있지 않은 경우에 사용하며, 그 어떤 경우에도 Scale Token을 사용할 수 있습니다.
Solid
완전한 불투명한 색상으로, 투명도가 없는 색상입니다. Solid 컬러는 HEX 값으로 정의합니다.
Alpha
투명도를 가진 색상으로, 컬러의 투명도를 조절하여 주로 배경이나 다른 요소들과의 조합에 사용됩니다.
Semantic Token
시맨틱 토큰은 UI와 컬러가 전달하고자 하는 의도와 맥락을 담고 있습니다.
Informative
유저에게 정보를 전달하거나 의미를 부여하는 컬러 시스템입니다. 정보의 중요도를 나타낼 수 있으며, 특정 작업이 진행중인지, 완료되었는지, 혹은 오류가 발생했는지 등을 나타낼 때 사용됩니다.
| Token | Scale | Usage |
$semantic/primary | carrot-500 | 화면에서 가장 중요한 요소에 사용하는 색입니다. 브랜드 아이덴티티를 담고 있으며, 주로 CTA 버튼이나 중요한 기능을 강조하는 데 사용합니다. |
$semantic/primary-low | carrot-50 | Primary를 보조하는 색입니다. Primary와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다. |
$semantic/secondary | gray-900 | 중요도는 높지만 Primary보단 낮은 경우 사용합니다. 주로 타이틀 텍스트나 아이콘에 사용합니다. |
$semantic/secondary-low | gray-alpha-50 | Secondary-low를 보조하는 색입니다. Secondary-low와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다. |
$semantic/success | green-500 | ‘성공(완료)’ 혹은 ‘진행중’ 의미를 전달합니다. 일반적으로 과업을 완료했을 경우나 긍정적인 상황에 사용합니다. |
$semantic/success-low | green-50 | Success를 보조하는 색입니다. Success와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다. |
$semantic/accent | blue-500 | 특정 요소나 정보를 강조합니다. Primary와 Secondary보다 낮은 계층이며, 주로 작은 요소에 제한적으로 사용합니다. |
$semantic/warning | yellow-300 | ‘주의' 혹은 ‘경고' 의 의미를 전달합니다. 텍스트로 쓰기엔 접근성이 낮으며, 일반적으로 Fill color 사용을 권장합니다. |
$semantic/warning-low | yellow-50 | Warning를 보조하는 색입니다. Warning와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다. |
$semantic/danger | red-600 | 유저가 꼭 알아야 하는 위험한 레벨의 경고입니다. 데이터에 파괴적 변환이 있는 경우, 정책과 관련한 경고나 조치가 필요한 경우 사용합니다. |
$semantic/danger-low | red-50 | Danger를 보조하는 색입니다. Danger와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다. |
Paper (Background)
컨텐츠와 정보들을 감싸고있는 Background 컬러입니다. Z축의 가장 하위에 위치합니다.
| Token | Scale | Usage |
$semantic/default | gray-00 | 가장 기본이되는 배경 컬러 토큰입니다. |
$semantic/background | gray-100 | Paper-default 보다 아래 계층에 위치하는 토큰입니다. |
$semantic/sheet | gray-00 | Overlay 위에 위치하는 레이어 토큰입니다. 주로 Bottom Sheet나 Action Sheet와 같은 Overlay 컴포넌트의 배경으로 사용합니다. |
$semantic/floating | gray-00 | Overlay 위에 위치하는 Floating 컴포넌트의 배경으로 사용하는 토큰입니다. 주로 FAB 컴포넌트의 배경으로 사용합니다. |
$semantic/dialog | gray-00 | Alert Dialog 컴포넌트의 배경으로 사용하는 토큰입니다. |
$semantic/contents | gray-50 | 화면상의 정보나 디자인 요소들을 그룹핑하여 사용하는 토큰입니다. |
$semantic/accent | carrot-50 | 특정 영역이나 Cell을 강조하는 경우 사용하는 토큰입니다. 주로 알림함의 새로운 알림을 일시적으로 강조하기 위해 사용합니다. |
Status
상호작용에 따른 UI 요소의 상태를 표현합니다.
| Token | Scale | Usage |
$semantic/primary-hover | carrot-400 | Primary 토큰의 hover 상태를 표현하는 데 사용합니다. |
$semantic/primary-pressed | carrot-400 | Primary 토큰의 pressed 상태를 표현하는 데 사용합니다. |
$semantic/primary-low-hover | carrot-100 | Primary-low 토큰의 hover 상태를 표현하는 데 사용합니다. |
$semantic/primary-low-active | carrot-100 | Primary-low 토큰의 active 상태를 표현하는 데 사용합니다. |
$semantic/primary-low-pressed | carrot-100 | Primary-low 토큰의 pressed 상태를 표현하는 데 사용합니다. |
$semantic/gray-hover | gray-100 | gray-00을 참조하는 토큰의 hover 상태를 표현하는 데 사용합니다. |
$semantic/gray-pressed | gray-100 | gray-00을 참조하는 토큰의 pressed 상태를 표현하는 데 사용합니다. |
Divider
주로 섹션이나 항목 간에 구분을 위해 활용되거나, 디자인 요소를 감싸는 Border에 사용합니다. 시각적으로 콘텐츠를 분리하는 데 도움을 줍니다.
| Token | Scale | Usage |
$semantic/divider-1 | gray-alpha-50 | 투명도가 있어, 썸네일을 감싸는 Border나 콘텐츠 간 약한 구분을 위해 사용합니다. |
$semantic/divider-2 | gray-200 | 가장 기본이되는 Divider 컬러 토큰입니다. |
$semantic/divider-3 | gray-300 | 컨텐츠 간 강한 구분 혹은 디자인 요소를 강조해야 하는 경우 Border로 사용합니다. |
Overlay
모달 성격을 가진 컴포넌트를 사용할 때 화면 전체를 덮기 위해 사용 합니다. 컴포넌트에 강한 주목도가 필요한 경우 사용합니다.
| Token | Scale | Usage |
$semantic/overlay-dim | gray-alpha-300 | 가장 기본이되는 Overlay 컬러 토큰입니다. 주로 Bottom Sheet나 Alert Dialog와 같이 컴포넌트의 주목도가 높은 경우 사용합니다. |
$semantic/overlay-low | gray-alpha-200 | Overlay-dim 보다 약하게 화면을 막는 경우 사용합니다. 주로 Dropdown이나 FAB 같은 작은 요소와 함께 쓰이며, Bottom Sheet 위에 중첩되어 올라가는 경우에도 사용합니다. |