Color
디자이너가 일관된 제품 디자인 경험을 만들 수 있도록 표준 컬러 차트와 가이드라인을 제공합니다. 컬러 시스템을 통해 일관된 디자인을 유지하고, 사용자 경험을 향상시킬 수 있습니다.
Light/ Dark Theme
모든 토큰은 라이트/다크 테마를 제공합니다. 테마가 전환되면 HEX 값은 전환되지만 토큰 이름은 동일하게 유지됩니다. 밝은 환경과 어두운 환경 모두 유저에게 잘 보이도록 명암 대비를 고려하여 컬러를 사용해야합니다.
Primary
UI 전체에서 가장 중요한 정보를 전달할 때 사용하는 시맨틱 입니다. 브랜드 아이덴티티를 담고 있으며, 주로 CTA 버튼이나 FAB와 같이 중요한 기능을 강조하는 데 사용합니다.
- on-primary : Primary 위 올라가는 UI 요소에 사용합니다.
- primary-low : Primary 와의 대비를 표현하기 위한 배경이나 부가적인 디자인 요소에 사용합니다.
- Primary-hover, pressed : 상호작용 상태를 표현합니다.
Gray Color
Text, Icon 과 Fill Type 을 사용할 땐 접근성 준수를 위해 아래 가이드라인에 맞춰 사용하기를 권장합니다.
gray-600에서 gray-900은 컨텐츠용 컬러이며, gray-00에서 gray-100은 Background용 컬러입니다. Disabled 컬러는 공통적으로 gray-400를 사용합니다.
모든 텍스트 정보에 같은 컬러를 쓰는 경우, 유저가 읽어야 할 정보의 우선순위를 파악하기 어려워 혼란을 줄 수 있습니다.
텍스트 정보의 위계에 맞게 시각적으로 컬러 대비를 주어 사용합니다. 상황에 따라 Bold 스타일을 활용해, 정보 표현에 더합니다.
Paper
컨텐츠와 정보들을 감싸고있는 Background 컬러입니다. Z축의 가장 하위에 위치합니다.
Interactive States
상호작용 상태에 따른 시각적 변화는 인터랙션을 직관적으로 도와 사용자 경험 향상에 도움을 줍니다.
유저에게 상태에 따른 명확한 피드백을 주어, 요소들 간의 상호작용 또는 액션에 대한 힌트를 줄 수 있습니다.
상호작용 상태와 디자인 언어가 다른 경우, 혼란스러운 경험을 줄 수 있습니다.
상호작용 상태에 따른 가이드라인에 따라 표현합니다.
Combining colors
접근성 가이드라인에 준수하여 색상을 조합해 사용합니다.
컬러 대비가 접근성에 준수하지 않거나, 다른 Scale 계열의 컬러를 함께 조합하여 사용하지 않습니다.
접근성 점수에 충족될 수 있는 컬러 대비를 사용합니다. 같은 Scale 계열을 조합하여 사용하는 것을 권장합니다.