이 화면의 모든 값은 jt-tokens.css 정본을 그대로 불러와 그린 것입니다. 문서의 값과 화면이 어긋날 수 없습니다. 색을 클릭하면 이름이 복사됩니다.
개발자는 Alias만 쓰면 됩니다. 팔레트를 직접 쓰면 라이트/다크 전환이 자동으로 되지 않습니다.
| ① 팔레트 | --neutral-* --gray-* --blue-* … | 색 자체의 계단. 값이 고정됨 |
| ② Alias | --color-text --color-primary --color-fill-selected … | 팔레트를 가리킴. 라이트/다크가 여기서 갈림 |
| ③ 컴포넌트 | .jt-btn --jt-btn-bg … | Alias만 참조. 앱은 --jt-* 만 덮어씀 |
탭 선택, 목록 행 선택, 눌린 버튼 — 모든 선택형 UI가 이 4종을 씁니다.
Charcoal = "제니트리다", Blue = "누를 수 있다". 주 버튼을 파랑으로 만들지 않습니다.
⚠️ 색만으로 판정을 전달하지 마세요. 반드시 글자를 함께 넣습니다 — 색맹 사용자와 흑백 인쇄된 COA·시험성적서에서 정보가 사라집니다.
배경 위 글자 대비를 실시간 계산합니다. 본문 4.5:1, 큰 글자·UI 요소 3:1 이상이어야 합니다. 라이트·다크 양쪽을 전환해 확인하세요.
참고용입니다. 컴포넌트에서 직접 쓰지 마세요.
--font-base | 제니트리 Janytree — 본문은 Pretendard 단독 (라틴이 Inter 기반) |
--font-num | 1,180,000 · CP-JT0299 · 50.4 g — 숫자는 Figtree |
--font-display | Professional Dermo Cosmetics — 영문 대형은 Figtree |
40px 이상은 line-height 1.15 + letter-spacing -0.02em 필수. 한글은 대형에서 자간이 벌어져 보입니다. 모바일에서는 자동으로 한 단계 낮아집니다.
--shadow-4는 모달 오버레이·스포트라이트 전용입니다. 카드·버튼에 쓰지 마세요.
복잡한 앱의 1번 고질병(z-index:9999 경쟁)을 구조로 막습니다. 컴포넌트에 숫자를 직접 쓰지 마세요. 100 단위 간격은 사이에 끼워 넣을 여지입니다.
위 토큰만으로 조립된 것입니다. 자세한 사용법은 COMPONENTS.md 참조.