3. Seed — 디렉터가 정하는 원점
/* ── 색 씨앗 ── */
--seed-color-primary: #1F2328; /* 브랜드 대표색 = 로고색(Neutral Charcoal). 전 앱 공통, 변경 불가 */
--seed-color-accent: #305CDE; /* 상호작용 강조(링크·포커스·선택) = blue-500 */
--seed-color-success: #14A870; /* 성공·정상 = green-500 */
--seed-color-warning: #F0B01C; /* 주의·경고 = yellow-500 */
--seed-color-error: #E14B4B; /* 오류·위험 = red-500 */
--seed-color-info: #305CDE; /* 정보·안내 = accent와 동일 */
/* ── 크기 씨앗 ── */
--seed-font-size: 16px; /* v5.0: 14 → 16 (웹 표준 정렬) */
--seed-radius: 8px; /* 기준 모서리 → 라운드 스케일 파생 */
--seed-unit: 4px; /* 간격 그리드 기본 단위 */2톤 상호작용 모델 — 이 시스템의 핵심 규칙
| 색 | 의미 | 쓰는 곳 |
|---|---|---|
| Charcoal #1F2328 (primary) | “이것이 제니트리다” | 솔리드 주버튼 · 헤더 · 본문 텍스트 · 주요 데이터 강조 |
| Blue #305CDE (accent) | “여기를 누를 수 있다” | 링크 · 포커스 링 · 활성 탭/네비 · 선택된 행 |
이 2톤 구성(모노톤 먹색 + 최소한의 파랑)이 “정밀·신뢰”라는 브랜드 톤을 만듭니다. 주버튼을 파랑으로 만들지 마세요. 가장 흔한 일탈이며, 브랜드가 즉시 흐려집니다.
4. Map — 씨앗에서 파생되는 계단
4-1. 색 팔레트 — 9색 체계
원칙: 시맨틱 역할이 없는 색은 팔레트에 두지 않습니다. 모든 색은 셋 중 하나 — Core(핵심 시맨틱) · Extended(데이터 시각화) · Reserve(부록 A 예비색).
neutral — 브랜드 잉크 (12단) 본문·주버튼·헤더. neutral-900이 곧 로고색이자 primary입니다.
--neutral-0:#FFFFFF;
--neutral-50:#F7F8F9; --neutral-100:#EEF0F2; --neutral-200:#DEE2E6;
--neutral-300:#C5CBD1; --neutral-400:#9DA5AF; --neutral-500:#757F8A;
--neutral-600:#5A6470; --neutral-700:#434B55; --neutral-800:#2E343B;
--neutral-900:#1F2328; /* ★ 로고색 = primary */
--neutral-950:#14171A;gray — 클린 UI 그레이 (10단) 배경·테두리·구분선·보조 텍스트·비활성.
--gray-50:#F9FAFB; --gray-100:#F2F4F6; --gray-200:#E5E8EB; --gray-300:#D1D6DB; --gray-400:#B0B8C1;
--gray-500:#8B95A1; --gray-600:#6B7684; --gray-700:#4E5968; --gray-800:#333D4B; --gray-900:#191F28;neutral = 브랜드 액션, gray = UI 구조로 역할만 다릅니다.
Core — 핵심 시맨틱 (역할 고정)
| 색 | 역할 | 50 (bg) | 100 (border) | 500 (base) | 600 (solid) | 700 (text) | 900 |
|---|---|---|---|---|---|---|---|
| blue | accent · info · 상호작용 | #EEF3FE | #D6E1FC | #305CDE | #2A4EC0 | #24419E | #1B2F66 |
| green | success · 적합 | #E7F7F0 | #C2ECD9 | #14A870 | #0F8E5F | #0C744E | #074A32 |
| yellow | warning · 보류 | #FEF6E4 | #FBE8B4 | #F0B01C | #D2960F | #A9760C | #6B4A0C |
| red | error · 부적합 | #FDECEC | #FAD3D3 | #E14B4B | #C93A3F | #A82F35 | #6B1F23 |
Extended — 데이터 시각화·특수 강조 〔v5.0: 8단계로 통일〕
| 색 | 역할 | 50 | 100 | 300 | 400 | 500 | 600 | 700 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| purple | 특수 강조 · 프리미엄 · 관리한계(OOS) · 차트 | #F4EFFB | #E6D8F5 | #AB84DA | #885CC0 | #6C3BAA | #5C3092 | #4B2777 | #30194C |
| teal | 피부과학 · 임상 데이터 · 차트 | #E6F6F6 | #BEE8E8 | #52C2C2 | #2FB1B1 | #12A3A3 | #0D8A8A | #0B7070 | #074747 |
400·900 단계 근거 — 900은 다른 램프의 700→900 명도 비율(0.635)을 적용해 도출(흰 글자 대비 purple 15.3:1 / teal 10.5:1). 400은 기존 램프에서 400이 300~500 사이에 놓이는 실측 위치(green 61%·yellow 57%·red 57%·blue 52%)의 중앙값 55%로 도출했습니다. ⚠️
teal-400(#2FB1B1)은 흰 글자 대비가 2.61:1이라 글자 배경으로 쓰지 마세요. 배경 면·테두리·차트 채움 전용입니다.
중간 단계(200·800)는 500 기준 명도 이동으로 파생합니다. 나머지 색(orange·pink·berry)은 시맨틱 역할이 없으므로 팔레트가 아닌 부록 A 예비색에만 존재합니다.
4-2. 시맨틱 매핑
| 의미 | 색 | 표현 방식 |
|---|---|---|
| 브랜드·주요 액션 | neutral | 주버튼·헤더·본문 |
| UI 구조 | gray | 배경·테두리·보조텍스트 |
| 정보·링크·포커스 | blue | 링크·인포 알림·활성 |
| 성공·완료·정상 | green | 50 배경 + 700 글자 / 솔리드는 600 |
| 주의·경고 | yellow | 50 배경 + 900 글자 |
| 오류·실패·위험 | red | 50 배경 + 700 글자 / 위험버튼은 600 |
| 특수·프리미엄 | purple | 배지·차트 |
| 과학·임상 데이터 | teal | 성분·임상 시각화·차트 |
| 품질 판정 4종 | green / red / yellow / purple | §5-4 도메인 토큰 참조 |
4-3. ⚠️ 텍스트-온-컬러 규칙 (대비 실측)
- ✅ 흰 글자 OK: neutral(15.8:1) · blue(5.66:1) · purple-500(7.38:1) · purple-400(4.84:1)
- ⚠️ 500은 흰 글자 대비 부족 → 솔리드 채움은 600단계: red600 · green600 · teal600
- 🚫 yellow는 흰 글자 금지 → warning은 yellow-50 배경 + yellow-900 글자 고정
- 🚫 teal-400은 글자 배경 금지 (2.61:1)
- 대부분의 상태 표현이 “50 배경 + 700(또는 900) 글자”라 이 문제를 자연히 피합니다
4-4. 타입 스케일 — Productive 세트 (기준 16px) 〔v5.0 재계산〕
--fs-2xs:11px; /* @deprecated — v6.0 제거 예정. --fs-xs 사용 권장 */
--fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
--fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px; --fs-4xl:32px;
--lh-tight:1.35; --lh-snug:1.45; --lh-normal:1.6; --lh-relaxed:1.75;| 역할 | 크기 | 굵기 |
|---|---|---|
| display (앱 내 대제목) | --fs-4xl 32px | 800 |
| h1 (페이지 제목) | --fs-3xl 28px | 800 |
| h2 (섹션) | --fs-2xl 24px | 700 |
| h3 (서브섹션) | --fs-xl 20px | 700 |
| body-lg (강조 본문) | --fs-lg 18px | 400 |
| body (기본) | --fs-base 16px | 400 |
| sm (보조·캡션) | --fs-sm 14px | 400 |
| caption (메타·코드값) | --fs-xs 12px | 400 |
제목은 별도 세리프 없이 Pretendard 굵기(700~800) 로 위계를 만듭니다.
4-5. 타입 스케일 — Expressive 세트 〔v5.0 신설〕
--fs-display-sm:40px; --fs-display-md:48px; --fs-display-lg:56px;
--lh-display:1.15; --ls-display:-0.02em;용법·판단 기준은 §7-4 참조.
4-6. 간격 스케일 (4px 그리드)
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
--space-9:48px; --space-10:56px; --space-11:64px; --space-12:72px;13px·17px 같은 어중간한 값을 쓰지 않습니다. 이것만 지켜도 화면이 정돈됩니다.
4-7. 라운드
--r-none:0; /* v5.0 신설 */
--r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-full:9999px;기본 카드·입력 = --r-md(8px), 큰 컨테이너 = --r-lg(16px). 더마 톤은 너무 둥글지 않게.
--r-none은 왜 토큰인가 — 표 셀·풀블리드 배너·이미지 타일·기존 앱과의 경계 맞춤처럼 각져야 하는 자리가 실제로 많습니다.border-radius:0을 직접 쓰면 나중에 “각진 곳만 살짝 둥글게” 같은 조정을 할 때 전 앱을 뒤져야 합니다. 유틸리티.jt-r-none도 함께 제공합니다.
4-8. 엘리베이션 (그림자) — 라이트
부드럽고 옅은 2겹(ambient+key) 그림자. 짙은 드롭섀도는 쓰지 않습니다.
--shadow-1: 0 1px 2px rgba(25,31,40,.06), 0 1px 3px rgba(25,31,40,.04); /* 카드 */
--shadow-2: 0 2px 8px rgba(25,31,40,.06), 0 1px 3px rgba(25,31,40,.05); /* 드롭다운 */
--shadow-3: 0 8px 24px rgba(25,31,40,.10), 0 2px 6px rgba(25,31,40,.06); /* 모달 */
--shadow-4: 0 20px 40px rgba(25,31,40,.14), 0 4px 10px rgba(25,31,40,.08);/* 모달 위 큰 팝오버 전용 */
--shadow-4는 모달 위에 뜨는 큰 팝오버 전용입니다. 일반 카드·드롭다운에 쓰면 CI의 “짙은 드롭섀도 금지” 원칙과 충돌합니다. (v4.0 충돌 C4 해소)
4-9. 레이어링 스케일 (z-index) 〔v5.0 신설〕
v4.0에는 z-index 토큰이 하나도 없었습니다. 그 결과 각 앱이 z-index:9999를 지어내 모달 위에 드롭다운이 깔리는 사고가 반복됐습니다.
--z-base:0; /* 일반 콘텐츠 */
--z-raised:10; /* 카드 hover·포커스로 살짝 떠오름 */
--z-sticky:100; /* 고정 헤더·툴바·표 헤더 */
--z-drawer:900; /* 사이드 드로어(모바일 메뉴) */
--z-dropdown:1000; /* 셀렉트·메뉴·자동완성 */
--z-overlay:1100; /* 모달 뒤 어두운 막 */
--z-modal:1200; /* 모달·다이얼로그 본체 */
--z-toast:1300; /* 토스트·스낵바 */
--z-tooltip:1400; /* 툴팁 — 항상 최상단 */규칙: 컴포넌트·앱 CSS에 z-index 숫자를 직접 쓰지 않습니다. 새 층이 필요하면 이 문서에 먼저 토큰을 추가합니다(§17-1 역순 금지).
4-10. 아이콘 · 컨트롤 · 컨테이너 스케일 〔v5.0 신설〕
--icon-sm:16px; --icon-md:20px; --icon-lg:24px;
--focus-ring-width:2px; --focus-ring-offset:2px;
--touch-target-min:44px; /* WCAG 2.5.5 */
--control-height:40px; --control-height-sm:32px; --control-height-lg:48px;
--container-narrow:720px; --container-max:1200px; --container-wide:1440px;컨트롤 높이는 본문 16px 전환에 맞춰 36/28/44 → 40/32/48로 재조정했습니다.
5. Alias — 개발자가 실제로 쓰는 의미 이름
컴포넌트는 Map 값을 직접 쓰지 않고 이 의미 이름을 씁니다. 라이트/다크가 여기서 갈립니다. 전체 목록은 jt-tokens.css에 있으며, 아래는 v5.0에서 새로 생기거나 의미가 바뀐 것 위주입니다.
5-1. 텍스트 · 배경 · 테두리
--color-text: var(--neutral-900); /* 본문 — 15.8:1 */
--color-text-secondary: var(--gray-600); /* 보조 설명 — 4.6:1 */
--color-text-tertiary: var(--gray-500); /* ⚠️ 3.04:1 — 글자에 쓰지 마세요 */
--color-text-disabled: var(--gray-400);
--color-on-primary: var(--neutral-0);
--color-bg-layout: var(--gray-50); /* 페이지 바탕 */
--color-bg-container: var(--neutral-0); /* 카드·패널·표 */
--color-bg-elevated: var(--neutral-0); /* 모달·드롭다운(그림자 동반) */
--color-border: var(--gray-200); /* 카드·구분 — 시각적 가벼움 유지 */
--color-border-strong: var(--gray-500); /* ⚠️ 폼 컨트롤 전용 — 3.04:1 */
--color-split: var(--gray-100); /* 표 행 구분선 */⚠️
--color-text-tertiary는 텍스트에 쓰지 않습니다 〔v5.0 개정〕 3.04:1로 WCAG 본문 기준(4.5:1) 미달입니다. placeholder도 텍스트입니다. v4.0에서 placeholder·도움말·카드 메타(LOT·일자)에 쓰이던 것을 전부--color-text-secondary(4.6:1)로 옮겼습니다. tertiary는 비텍스트 장식(구분 점, 비활성 아이콘 등) 전용입니다.
⚠️ 입력 테두리는 왜 두 종류인가 〔v5.0 신설〕 WCAG 1.4.11은 UI 컴포넌트 경계에 3:1을 요구합니다. 그런데 카드 테두리까지 진하게 만들면 화면이 무거워져 브랜드 톤이 깨집니다. 그래서 색이 아니라 적용 범위로 풀었습니다 — 램프에서 3:1을 넘는 가장 밝은 단계(gray-500, 3.04:1)를
--color-border-strong으로 두고 폼 컨트롤에만 적용합니다. 카드·구분선은 gray-200 그대로입니다.
5-2. 상호작용 상태 세트 〔v5.0 신설〕
v4.0에는 --color-fill-hover 하나뿐이라, 탭·목록 행 선택 같은 흔한 UI를 만들 때 개발자가 색을 지어냈습니다.
--color-fill-hover: var(--gray-50); /* 마우스 올림 */
--color-fill-active: var(--gray-100); /* 누르는 중 */
--color-fill-selected: var(--blue-50); /* 선택됨 — 파랑 계열(상호작용 신호) */
--color-fill-disabled: var(--gray-100);
--color-text-selected: var(--blue-700);
--color-border-selected: var(--color-accent);5-3. 딤(Dimmed) 4단계 〔v5.0 신설〕
“모달 뒤 어두운 막”이 v4.0에는 정의조차 없었습니다. 용도마다 필요한 농도가 다릅니다.
| 토큰 | 라이트 | 다크 | 언제 |
|---|---|---|---|
--color-dim-weak | rgba(15,18,21,.24) | rgba(0,0,0,.40) | 바텀시트·드로어 — 뒤가 보여야 맥락이 유지됨 |
--color-overlay | rgba(15,18,21,.48) | rgba(0,0,0,.64) | 모달 기본 |
--color-dim-strong | rgba(15,18,21,.72) | rgba(0,0,0,.82) | 이미지 뷰어·전체화면 — 주변을 지움 |
--color-dim-image | rgba(15,18,21,.40) | rgba(0,0,0,.52) | 제품 사진 위 흰 글자 가독 확보 |
--color-dim-image는 화장품 제품 이미지 위에 제품명·용량을 얹는 화면에서 필수입니다. 사진 밝기는 통제할 수 없으므로 딤 없이 흰 글자를 얹지 마세요.
5-4. 품질 판정 도메인 토큰 〔v5.0 신설 — 제조사 전용〕
일반 success/error와 의미를 분리합니다. “저장 성공”과 “시험 적합”은 같은 초록이어도 다른 개념이며, 나중에 판정색만 바꿔야 할 때 서로를 건드리지 않게 하기 위함입니다.
| 판정 | 토큰 | 색 계열 | 라이트 | 다크 |
|---|---|---|---|---|
| 적합 (Pass) | --color-pass | green-600 | 50 배경 + 700 글자 | 투명 배경 + #5FD6A6 |
| 부적합 (Fail) | --color-fail | red-600 | 50 배경 + 700 글자 | 투명 배경 + #F09090 |
| 보류 (Hold) | --color-hold | yellow-600 | 50 배경 + 900 글자 | 투명 배경 + #F5CE6B |
| 관리한계 이탈 (OOS) | --color-oos | purple-600 | 50 배경 + 700 글자 | 투명 배경 + #D6A8E8 |
| 제품 사진 바탕 | --color-product-bg | neutral-50 | — | elev-2 |
구별도 검증: 4종을 CIE Lab ΔE로 실측한 결과 라이트 61~124, 다크 45~86으로 전부 기준(20)을 크게 넘겨 명확히 구별됩니다. 다크 OOS는 초안(#C9A6E8)이 다크 링크색과 ΔE 23.1로 가장 가까워, 자홍 쪽으로 옮겨 #D6A8E8(ΔE 27.4, 대비 7.40:1)로 재지정했습니다.
🚫 판정을 색만으로 전달하지 마세요. 반드시 글자를 병기합니다(“적합”, “부적합”). 색각 이상 사용자와 흑백으로 인쇄되는 COA·시험성적서를 위한 것이며, 이것은 권고가 아니라 규칙입니다.