Color

groo 의 색은 제품의 위계 · 상태 · 브랜드를 나타낸다. 체계는 역할 색과 팔레트 두 층이다.

역할 색

색마다 인터페이스에서 맡는 역할 — 주요 동작 · 오류 · 정보 같은 — 을 준다. 화면은 값이 아니라 역할 이름으로 색을 부른다.

접근성 — 글자와 그 글자가 놓이는 배경의 짝마다 WCAG AA 대비를 검사기가 잰다(본문 4.5:1 · UI 3:1). 한국 웹 접근성 기준(KWCAG 2.2)도 같은 식이다.
빈틈없는 갱신 — 값이 같아도 뜻이 다르면 따로 바꿀 수 있다. 오류 글자 색만 진하게 해도 오류 채움 버튼은 영향받지 않는다.
테마 — 역할마다 라이트 · 다크 값을 함께 둔다.

회색 · 브랜드 · 빨강 · 초록 · 주황 · 파랑 가족마다 차례 번호를 붙인 색이다. 역할 색이 이 단계를 가리키고, 역할로 나타내기 어려운 예외적인 자리에서만 직접 쓴다. 차트 10색도 팔레트 단계다 — 노랑 · 남색 · 보라 · 분홍 · 갈색은 차트용 가족이다.

팔레트도 모드를 탄다 — 단계마다 라이트 · 다크 값이 있어, 한 모드를 기준으로 고른 단계가 다른 모드에서도 알맞은 명도로 보인다.

이름과 구조는 당근 SEED 를 따르고 값은 groo 색이다. SEED 는 대비를 APCA 로 맞추는데 groo 는 WCAG AA 가 규칙이라, SEED 값을 WCAG 로 재면 흐린 글자가 흰 바탕에서 3.42:1 로 못 미친다.
브랜드가 둘이다 — Desk 파랑 · HR 초록. 브랜드 역할은 브랜드마다 값이 다르고, 나머지 역할은 두 브랜드가 같다.
팔레트의 가족이 다르다 — SEED 의 carrot 대신 두 브랜드(Desk 파랑 · HR 초록)와 주황(warning)을 두고, 차트 10색을 고르려고 노랑 · 남색 · 보라 · 분홍 · 갈색을 둔다(SEED 에는 차트 색이 없다). 단계 값은 WCAG AA 를 지키게 groo 가 새로 뽑았고, AA 에 못 미치는 몇 자리는 역할이 SEED 와 다른 단계를 가리킨다(fg-disabled 다크가 gray-500 대신 gray-600 등).