디자인 킷
디자이너·기획자가 실제 자산을 받아 가는 곳입니다.
디자인 장이 “왜 이 값인가” 를 설명한다면, 킷은 “그래서 뭘 쓰면 되나” 입니다.
값은 어느 쪽에도 새로 적지 않습니다 — 전부 jt-tokens.css에서 나옵니다.
팔레트 · Alias · 판정 4종 · 토큰 JSON 내려받기
Color LibraryPretendard · Figtree · 두 벌 타입 세트
Type Sets29종 SVG + 폰트 7,798종 · 망 차단 자가진단
UI Icon Library최소 크기 · 최소 여백 · 무결성
브랜드 로고빈 상태 · 온보딩 일러스트
Pictogram Library지금 받을 수 있는 것
| 킷 | 상태 | 형태 |
|---|---|---|
| Color Library | ✅ | jt-tokens.json · 토큰 뷰어 · CSS 변수 |
| Type Sets | ✅ | 웹폰트가 jt-tokens.css에 내장 — 따로 받을 것 없음 |
| UI Icon Library | ✅ | SVG 29종 + Material Symbols 7,798종 |
| 브랜드 로고 | 🔶 정리 중 | SVG·PNG (사용 규칙은 확정) |
| Pictogram Library | ⏳ 예정 | — |
| Figma 킷 | ⏳ 예정 | 토큰을 Variables로 넣은 파일 |
토큰 파일 한 벌
| 파일 | 무엇에 쓰나 |
|---|---|
jt-tokens.css | 정본. 웹·앱에 링크하면 끝 |
jt-tokens.json | Figma Variables · Style Dictionary · 스크립트에서 값 읽기 |
jt-utilities.css | 컴포넌트 47종 |
jt-tailwind-v4.css | Tailwind v4 앱만 |
⚠️
jt-tokens.json은 jt-tokens.css에서 자동 생성됩니다. 직접 편집하지 마세요 — 다음 배포 때 덮어써집니다.