Overview
공유 baseline 과 브랜드 파일의 관계
Groo는 "사람과 일상이 숲처럼 자라나는" 가치를 담은 듀얼 브랜드 시스템입니다. HR(조직 관리, B2B)과 Desk(개인 생산성, B2C)는 동일한 골격을 공유하되 primary 색상으로만 분기합니다.
레퍼런스 — 토스의 신뢰감 있는 미니멀리즘, 전 연령 가독성.
그룹 색 · 로고 칠 (v121 — 2026-10-22)
- 그룹(그루)에는 브랜드 색이 없다. 그룹 화면 — 홈의 그룹 쪽 · 그루 계정 로그인 · 그룹 문서 — 의 채움 · 링크는 짙은 회색
bg-neutral-inverted(라이트#1A1F2E위 흰 글자 · 다크#F5F6FA위#242938글자, 글자는fg-neutral-inverted)다. 그룹용 primary 토큰은 두지 않는다. - 그룹 화면의 포커스 링도 짙은 회색이다 — 이 파일의
stroke-focus-ring은 채움과 같은gray-1000(라이트#1A1F2E— 흰 면 16.4:1 · 회색 바닥 15.2:1, 다크#F5F6FA— 바닥 15.2:1 · 카드 13.4:1 · 시트 11.6:1). 담다 · 이음 파일은 같은 이름이 브랜드 색이다. 브랜드 역할(fg-brand · bg-brand-* · stroke-brand-*)은 이 파일에 두지 않는다 — 그룹 화면은 brand 변형을 쓰지 않으므로, 이 파일로 만든 스펙 값 JSON 은 brand 칸을 싣지 않고skipped에 적는다(2026-10-23 그루 계정 지시서 I-18 Q1-A). - 색은 로고에만 있다. 로고 칠은 고정값이고 라이트 · 다크가 같다 — 진한 잎
#075B3C· 겹침#218D49· 밝은 잎#43BF5E· 기둥#A96D57. 로고를 그릴 때만 쓰는 값이라 UI 토큰이 아니다 — 화면의 채움 · 글자 · 선에 쓰지 않는다. 다크 바탕(#1A1F2E)에서 진한 잎이 2.01:1 로 어두운 것은 받아들였다(다크에서 잎을 밝히거나 타일 · 테두리를 두르지 않는다). - 서비스 색 — 담다는 파랑(
DESIGN.desk.md브랜드 램프 그대로), 이음은 그룹 초록이다 — 이음 브랜드 램프의 600 이 로고 진한 잎#075B3C다(DESIGN.hr.mdv121). - 사용자 결정(2026-10-22) — 색 고르기 https://claude.ai/artifact/G4ygEuztK398wjqhEVsdUa · 로고 칠 비교 https://claude.ai/artifact/JH9rn2VGaQjKpfis7m7hWA · 로고 다크 보정 https://claude.ai/artifact/1CV3wbUT88J2RWghmeeLkX.
로고 쓰는 자리 (2026-10-23 사용자 결정 — 로고 반영 https://claude.ai/artifact/LBXCCKsCqmGj45vs5erxwe). 칠은 위 고정값 그대로다 — 알림 작은 아이콘만 OS 가 한 색으로 칠한다. 크기는 그 페이지 그림의 값이다. 서비스 이름은 그 서비스의 이름이다(담다 앱이면 "그루 담다").
| 자리 | 모양 | 크기 · 배치 |
|---|---|---|
| 앱 아이콘 | 흰 타일 + 시안 나무(groo_icon.svg 그대로) | OS 아이콘 크기 |
| 앱 첫 화면(스플래시) | 나무 + 서비스 이름을 한 묶음으로 화면 정중앙에, 그 아래 Progress Circle brand 40 | 나무 96 · 나무 ↔ 이름 16 · 이름 32 / 40 · 700 · 묶음 ↔ 원 32 · 바닥 bg-layer-default(Layout "화면 바탕" — 셸 밖 화면) |
| 로그인 | 가로 묶음 — 나무 + 서비스 이름 | 나무 56 + 8 + 이름 32 / 40 · 700(사이드바 머리 — 나무 24 + 8 + 이름 — 와 같은 짜임) |
| 알림 작은 아이콘(안드로이드) | 한 색 나무 실루엣 — OS 가 투명도만 보고 한 색으로 칠한다(칠한 로고를 따로 만드는 것이 아니다) | 24dp · 업데이트 · 결제 감지 알림 모두 |
파일 분리 (v17부터)
DESIGN.md(이 파일): 공유 baseline — typography, spacing, rounded, neutral colors, neutral components. brand-agnostic이므로primaryliteral 미정의 → lint missingPrimary warning 1건 영구 수용(공유 라이브러리 진실 신호).DESIGN.hr.md: HR 브랜드 self-contained 시스템 — 공유 토큰 복제 + HR primary#075B3C(v121 그루 초록) + HR brand 컴포넌트. brand 컨텍스트가 암묵적이라 토큰명에-hr접미사 없음(primary,border-focus,button-primary등).DESIGN.desk.md: Desk 브랜드 self-contained 시스템 — 공유 토큰 복제 + Desk primary#0147AD.- lint:
npm run lint:all로 3파일 검증. HR/Desk 파일은 0 warnings, DESIGN.md만 missingPrimary 1건. - 공유 토큰 변경 시: 3파일 모두 수동 동기 — design.md spec이 cross-file token reference 미지원이라 자동화 불가.