@x-plat/tokens-haetbitgil

XPLAT 디자인 시스템의 햇빛길 브랜드 토큰 패키지.

• 색상: primary=#2A5BA1 계열(블루), secondary=#FF652F 계열(주황), neutral 자체 정의
• typography: size/line-height 가 default 보다 1.5~2배 큰 자체 반응형 값 (display-1: 64/52/40)

설치

npm install @x-plat/tokens-haetbitgil
# @x-plat/design-system 과 함께 사용

사용법

색상/타이포 override (CSS)

import "@x-plat/design-system/style.css";          // 1) 컴포넌트 + default 토큰
import "@x-plat/tokens-haetbitgil/tokens.css";     // 2) 햇빛길 색상/타이포로 override

순서가 반대면 design-system 이 default 로 다시 덮어버린다.

Figma 플러그인

https://unpkg.com/@x-plat/tokens-haetbitgil/dist/tokens.dtcg.json

@x-plat/figma-plugin-init-tokens 플러그인 드롭다운에서 자동 발견.

자체 정의 범위

| 레이어 | 자체 / 상속 | |---|---| | brand (color) — primary / secondary / neutral | 자체 hex 50-900 | | system (color) | default 상속 | | typoBrand | 자체 (반응형 pc/tablet/mobile 값) | | spacingBrand | default re-export | | primitive, semantic | tokens-core 공통 |

Typography 특징

brand/size, brand/line-height 가 mode 별로 다른 값을 가져, mode 전환 시 자동으로 사이즈가 변경된다. (반응형 typography 가 brand 레벨에서 적용)

display-1: pc=64px / tablet=52px / mobile=40px
title-1:   pc=52px / tablet=44px / mobile=36px
body-1:    pc=28px / tablet=22px / mobile=18px

라이선스

Private. XPLAT WOONG.