Design Tokens
@featuring-corp/design-tokens — 1,000개 이상의 디자인 토큰 (색상, 간격, 타이포그래피, 반지름, 그림자)
@featuring-corp/design-tokens
3-Layer 토큰 아키텍처 기반의 디자인 토큰 패키지입니다. CSS 변수와 JavaScript 객체로 제공됩니다.
설치
npm install @featuring-corp/design-tokens3-Layer 아키텍처
| 레이어 | 역할 | 예시 |
|---|---|---|
| Global | 브랜드 독립적 원시 값 | --global-colors-red-50, --global-spacing-400 |
| Semantic | UI 용도에 매핑 | --semantic-color-text-1, --semantic-color-background-1 |
| Color Set | 브랜드별 Primary 팔레트 | --global-colors-primary-60 |
토큰 목록
| 토큰 | 설명 |
|---|---|
| Colors | 16개 색상 스케일 × 10단계 + Primary 팔레트 |
| Spacing | 0~2000 간격 스케일 |
| Typography | Heading, Body, Caption 타이포그래피 |
| Font Size | 폰트 크기 스케일 |
| Font Weight | 폰트 두께 |
| Line Height | 줄 높이 스케일 |
| Radius | 모서리 반지름 |
| Elevation | 그림자 / 엘리베이션 |
| Base Styles | Reset + Normalize CSS |
CSS 변수 사용
.my-card {
background-color: var(--semantic-color-background-1);
color: var(--semantic-color-text-1);
padding: var(--global-spacing-400);
border-radius: var(--global-radius-200);
}JavaScript 사용
import { global, semantic } from '@featuring-corp/design-tokens';
global.spacing[400] // '1rem'
global.colors.red[50] // '#e97259'
semantic.color.background[1] // 'var(--global-colors-white)'