Palette

팔레트는 가족마다 차례 번호를 붙인 색이다 — 100 이 가장 옅고 1000 이 가장 짙다(회색은 흰 00 도 있다). 역할 색이 이 단계를 가리키고, 화면은 역할 이름으로 색을 부른다. 팔레트를 직접 쓰는 것은 역할로 나타내기 어려운 예외적인 자리뿐이다.

단계마다 라이트 · 다크 값이 따로 있다. 다크는 차례가 뒤집혀 작은 번호가 어둡다 — 그래서 같은 번호가 두 모드에서 비슷한 무게로 보인다(라이트의 옅은 100 은 다크에서도 바탕에 가까운 100 이다). 다크 값은 -dark 를 붙인 이름(gray-100-dark)에 있다.

Gray제목 링크 복사

글자 · 선 · 표면의 회색이다. 토스 톤의 푸른 회색이고, 라이트 1000 과 다크 00 이 같은 짙은 남색이다.

Brand제목 링크 복사

브랜드 파일(DESIGN.desk.md · DESIGN.hr.md)에만 있다. 파일 안에서는 두 브랜드 모두 같은 이름 brand-100 ~ brand-1000 이다.

Desk제목 링크 복사

HR제목 링크 복사

Chromatic제목 링크 복사

의미 색의 가족이다. 빨강은 critical, 초록은 positive, 주황은 warning, 파랑은 informative 역할이 가리킨다.

Red제목 링크 복사

Green제목 링크 복사

Orange제목 링크 복사

Blue제목 링크 복사

차트용 가족제목 링크 복사

노랑 · 남색 · 보라 · 분홍 · 갈색은 차트 · 카테고리 색에만 쓰는 가족이다. 700 이 차트 색이고, 역할 색은 이 가족을 가리키지 않는다.

Yellow제목 링크 복사

Indigo제목 링크 복사

Violet제목 링크 복사

Pink제목 링크 복사

Brown제목 링크 복사

Chart제목 링크 복사

데이터 시각화와 카테고리 색에 쓰는 10색이다. 팔레트 단계를 가리킨다 — 라이트는 가족의 700, 다크는 800-dark 다. 사용자가 카테고리 · 태그 · 캘린더 색으로 고르는 10칸도 이 색이다.

색을 고르지 않은 항목(도넛 · 순위 막대 · 주식 비중)은 아래 번호 순서로 색을 받는다.

• 한 차트에 항목이 10개를 넘으면 상위 9개 + 회색 "기타" 로 묶는다. 회색은 기타 전용이라 같은 색이 두 번 나오지 않는다.
• 막대 · 선 · 점 · 조각 같은 채움에 쓴다(UI 3:1). 차트 위 글자에는 쓰지 않는다 — 글자는 fg-neutral · fg-neutral-muted 다.
• 색만으로 구분하지 않는다 — 범례 · 라벨을 함께 쓴다. 다크의 빨강 · 주황처럼 가까운 짝이 있다.
• 색 위에 이니셜을 올리면(아바타) 글자는 fg-neutral-inverted 다 — 라이트는 흰색, 다크는 어두운 글자.
• 두 브랜드가 같은 차트 색을 쓴다. 다크 짝의 옛 이름 chart-*-light 는 별칭으로 남아 있다.

옅은 바탕제목 링크 복사

카테고리 색을 옅게 깐 면이다 — SEED 의 배너 색이 하는 일을 groo 에서는 이 색이 한다. 작은 면(카테고리 타일 · 캘린더 칩 · 주식 나라 표시)은 chart-*-weak, 넓은 면(메모 카드 · 배너)은 한 단계 옅은 chart-*-subtle 이다. 그 위 글자는 chart-*-contrast, 아이콘은 차트 색 그대로다.

• 옅은 바탕은 화면마다 섞어 만들지 않는다 — 이 토큰을 쓴다.
• 글자는 일반 차트 색보다 한 단계 바깥이다(라이트 800 · 다크 900) — 의미 색의 약한 배경 위 글자와 같은 규칙이다.
• 회색은 라이트 100 · 200 이 바닥색과 같아서 한 단계씩 진하게 둔다.

Tokens제목 링크 복사

Palette Colors제목 링크 복사

Brand제목 링크 복사

Chart제목 링크 복사

Chart 옅은 바탕제목 링크 복사

---

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.