Colors
컬러는 브랜드 인지, 정보 위계, 상태 전달을 동시에 담당하는 핵심 시각 요소입니다.
디자인 시스템의 컬러는 제품 전반에서 일관된 경험을 만들기 위한 기준으로 정의되며, 모든 UI는 지정된 컬러 토큰과 사용 원칙을 기반으로 적용되어야 합니다.
Color Usage Guidelines
- Color는 명확한 커뮤니케이션을 위해 Hex Code보다는 컬러명을 사용합니다.
- WCAG 2.0 기반으로 컬러 별 10단계(50-900)를 지원하며, 각 컬러 별 주요 색상은 500입니다.
- 모든 화면에서는 정의된 컬러 토큰을 우선 적용하고, 접근성과 시각적 일관성을 해치지 않도록 임의의 컬러 사용은 지양합니다.
- 텍스트와 배경의 명도 대비는 가독성을 충분히 확보할 수 있어야 하며, 신규 컬러가 필요한 경우에도 기존 시스템 안에서 확장 가능성을 먼저 검토한 뒤 제한적으로 추가하는 것을 원칙으로 합니다.
Brand Colors
Brand Colors는 제품 전반에서 브랜드의 정체성을 가장 직접적으로 드러내는 핵심 컬러 체계입니다.
그중 Primary Green은 서비스의 대표 컬러로, 주요 액션, 활성 상태, 강조 요소와 같이 사용자의 주의를 유도하고 브랜드 경험을 일관되게 전달해야 하는 영역에 우선적으로 적용합니다.
이 컬러는 단순한 포인트 색상이 아니라, 제품 전체에서 시각적 중심축 역할을 하는 기준 색상입니다.
따라서 모든 화면에서는 정의된 컬러 토큰과 사용 원칙을 기반으로 일관되게 활용해야 하며, 브랜드 인지와 정보 위계를 동시에 강화하는 방향으로 사용해야 합니다.
Main Green Colour Variation
Green Scale은 Primary Green을 기준으로 확장된 단계형 컬러 세트입니다. 강조 수준과 사용 맥락에 따라 배경, 텍스트, 상태 표현 등에 일관되게 활용할 수 있습니다.
Text Colour
텍스트 위계에 따라 CTA, Primary, Secondary, Tertiary 컬러로 사용하며 각 화면 구성 요소에 따라 이외의 컬러를 사용합니다.
| Name | Usage | Hex |
| Gray 700 | 제목 (Title, Subtitle, Body), Tap, Filter, OSD Viewer 및 본문 텍스트 색상 | #616161 |
| Gray 900 | 제목 (Heading, Title) or Icon, Button Info 강조 텍스트 색상 | #212121 |
Background Depth
배경 색상과 아웃라인에만 사용하며 텍스트 색상에서의 사용을 지양합니다.
| Name | Usage | Hex |
| BG Color / 00dp | 기본 배경 색상이자 목록과 유사한 구성 항목의 구분에 대한 배경색 | #FFFFFF |
| BG Color / -01dp | 2번째 배경 색상 | #FAFAFA |
| BG Color / -02dp | 3번째 배경 색상 | #F5F5F5 |
| BG Color / -03dp | 4번째 배경 색상 | #EEEEEE |
| Divider Color / Gray200 | 디바이더 라인에 사용하는 색상 | #EEEEEE |
Selected Color
컴포넌트의 Selected에 대한 Status에 따른 색상을 정의합니다.
| Name | Usage | Hex |
| (Table) Selected Color / 01dp | Table Row의 선택 시 표출되는 색상 | #E6F7EF |
| (Table) Selected Hover Color / 02dp | Table의 선택된 Row에 Hover 시 표출되는 색상 | #D2F2E6 |
| Selected Color / -02dp | 특정 요소를 선택 시 표출되는 색상 (e.g. Dropdown Item) | #F5F5F5 |
| Selected Hover Color / -03dp | 선택된 요소를 Hover 시 표출되는 색상 (e.g. Dropdown Item) | #EEEEEE |
Border Colour
영역을 구분하는 테두리 색상으로 사용하며, 배경색이나 텍스트 색상에는 사용하지 않습니다.
| Name | Usage | Hex |
| Gray 200 | 컴포넌트 Action 시 Default or Hover 테두리 | #EEEEEE |
| Gray 300 | 활성화 시 사용하는 테두리 색상 (e.g. Input, Dropdown) | #E0E0E0 |
Secondary & Extra Colours
Secondary & Extra Color는 Chip, Badge, Avatar Color에서 사용되며, State Color 색상을 포함하여 카테고리에 따라 주요 컬러를 다양하게 제공합니다.
