파운데이션
컬러
무채색이 화면의 대부분을 차지하고, 브랜드 퍼플은 다음 행동에만 씁니다. 모든 색은 시맨틱 토큰으로 참조해야 라이트·다크 테마에 자동으로 대응됩니다.
- Brand
- Purple 600 · #7C3AED
- Ink
- Grey 900 · #191F28
- 시맨틱 토큰
- 38개
- 테마
- Light · Dark
Primitive 팔레트
스와치를 클릭하면 HEX 값이 복사됩니다. 점(•)이 표시된 단계가 기준색입니다.
Purple — Brand
Grey — Ink
Green
e7f8f0
0fa968
028a54
Red
fff0f1
f04452
d92b3a
Orange
fff4e6
ff8a00
b85c00
Blue
ebf3fe
3182f6
1b64da
Semantic 토큰
우측 상단 버튼으로 다크 모드로 바꾸면 같은 토큰이 어떻게 변하는지 바로 확인할 수 있습니다. 클릭하면 var() 구문이 복사됩니다.
배경
텍스트
선 · 표면
브랜드
상태
브랜드 컬러 사용
Primary — 화면의 핵심 행동 1개
Secondary — 보조 행동
추천
Brand Subtle — 선택 · 강조 태그
이렇게 하세요
- Primary 버튼 · 선택된 탭 · 체크 상태 · 포커스 링에만 브랜드 사용
- 강조가 필요하면 먼저 굵기 · 크기로 위계를 만들고, 마지막에 색
- 상태 표현은 반드시 상태 토큰(positive · negative …)
이렇게 하지 마세요
- 헤더 · 사이드바 배경을 퍼플로 채우기
- 오류 메시지에 퍼플, 성공에 퍼플 사용
- #7c3aed 같은 HEX를 코드에 직접 작성
상태 컬러
결제 상태는 모든 플랫폼에서 같은 색으로 표현합니다. 색만으로 구분하지 않도록 텍스트 라벨을 함께 씁니다.
결제완료결제대기결제실패환불완료결제취소부분취소
금액 증감의 색
한국 금융 관례와 달리 ON:GI는 증가 = Positive(초록), 감소 = Negative(빨강)으로 통일합니다. 단, 환불률 · 실패율처럼 낮을수록 좋은 지표는 색을 반전합니다(invertDelta).명도 대비
WCAG 2.2 기준. 본문은 4.5:1 이상, 18px 이상 굵은 텍스트와 아이콘은 3:1 이상이어야 합니다.
Strong
#191f28 / #ffffff16.6 · AAA
Muted
#6b7684 / #ffffff4.6 · AA
Subtle
#8b95a1 / #ffffff3.0 · AA Large
Brand
#ffffff / #7c3aed5.7 · AA
Positive
#028a54 / #e7f8f04.0 · AA Large
Negative
#d92b3a / #fff0f14.4 · AA Large
--fg-subtle(Grey 500)은 대비 3:1 수준이므로 캡션 · 플레이스홀더 · 비활성 라벨에만 사용합니다. 정보를 담은 본문에는 --fg-muted 이상을 사용하세요.