Brand role map
색은 네 축으로만 씁니다. 어느 축을 어디에 쓰고 어디에 쓰지 않는지를 한 장으로 정리했습니다. 단계 값과 토큰 이름은 Colors 에 있습니다.
브랜드 역할 맵
색은 네 축으로만 씁니다. 제품 Primary 는 행동과 선택, Status 는 처리 결과, Severity 는 보안 위협 등급, Brand 는 회사 정체성 표기입니다. 한 요소에 두 축을 겹치지 않고, 어느 축이든 색만으로 의미를 전달하지 않습니다. 이 시스템은 관리자 웹 제품 기준이라 Brand 는 제품 UI 의 Accent 가 아닙니다.
| 역할 | 쓰는 곳 | 쓰지 않는 곳 |
|---|---|---|
| 제품 Primary | 주요 행동 버튼(화면당 하나), 링크, 활성·선택 상태(탭 · 내비게이션 · 체크 · 스위치), 포커스 링 | 위험도나 처리 결과 표현, 넓은 면의 장식 배경, 로고 |
| Status | 성공·실패·검토 대기 알림(토스트 · 배너 · 인라인 메시지), 입력 검증 오류, 파괴적 행동 버튼(danger) | 위협 등급(심각도) 표현, 탐색·선택 상태, 브랜드 강조 |
| Severity | 위협·이벤트 등급 태그, 점·밴드, 표 행 강조, 대시보드 KPI. 항상 라벨(Critical 등)을 병기 | 버튼·링크, 일반 처리 결과(성공/실패), 색만 있는 점·배경 |
| Brand | 로고 · 헤더 마크, 로그인 · 온보딩의 회사 정체성 표기 | 제품 UI 의 Accent · CTA · 위험도 · 상태. 헤더 Accent 선택지에 없음 — 브랜드 디자인 시스템은 별도 제작 |
| Gray | 화면 바탕, 텍스트, 구분선, 비활성 상태. 정보 밀도가 높은 콘솔의 기본 색 | 강조. 회색 톤 차이만으로 상태나 등급을 표현 |
JS Console
주요 행동은 제품 Primary, 회사 정체성은 헤더 마크에만. 두 색이 같은 화면에 있어도 역할이 겹치지 않습니다.
브랜드 색을 CTA 나 보조 버튼에 쓰지 않습니다. 제품 컬러가 바뀌어도 브랜드 색은 그대로라 제품 간 구분이 사라지고, 강조 위계도 깨집니다.
CriticalHighMediumLowInfo
심각도는 Severity 색 + 라벨을 함께 씁니다. 색을 구분하지 못해도 등급을 읽을 수 있고, 다크 테마에서도 의미가 같습니다.
색만 있는 점으로 등급을 전달하거나, 심각도 색을 버튼에 쓰지 않습니다. 파괴적 행동은 Status 의 danger 버튼입니다.