@x-plat/design-system 0.5.65 → 0.6.0

package/dist/tokens/index.cjs

@@ -319,7 +319,6 @@ __export(tokens_exports, {
   breakpoints: () => breakpoints,
   cssVar: () => import_tokens_core2.cssVar,
   gridColumns: () => gridColumns,
-  primitive: () => import_tokens_core.primitive,
   semantic: () => import_tokens_core.semantic
 });
 module.exports = __toCommonJS(tokens_exports);
@@ -6111,6 +6110,5 @@ var import_tokens_core2 = require("@x-plat/tokens-core");
   breakpoints,
   cssVar,
   gridColumns,
-  primitive,
   semantic
 });

package/dist/tokens/index.d.cts

@@ -1,18 +1,17 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
-export { TokenVar, cssVar, primitive, semantic } from '@x-plat/tokens-core';
+export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 
-type SemanticTextToken = "semantic-text-strong" | "semantic-text-subtle" | "semantic-text-muted" | "semantic-text-brand" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link";
+type SemanticTextToken = "semantic-text-primary" | "semantic-text-secondary" | "semantic-text-tertiary" | "semantic-text-brand-primary" | "semantic-text-brand-secondary" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link" | "semantic-text-accent-red" | "semantic-text-accent-blue";
 type SurfaceVariant = "subtle" | "default" | "strong";
-type SurfaceGroup = "brand" | "success" | "error" | "warning" | "info";
-type SemanticSurfaceToken = "semantic-surface-neutral-default" | "semantic-surface-neutral-subtle" | "semantic-surface-neutral-strong" | "semantic-surface-neutral-overlay" | "semantic-surface-neutral-disabled" | `semantic-surface-${SurfaceGroup}-${SurfaceVariant}`;
-type SemanticBorderToken = "semantic-border-default" | "semantic-border-subtle" | "semantic-border-strong" | "semantic-border-disabled" | "semantic-border-success" | "semantic-border-error" | "semantic-border-warning" | "semantic-border-info";
-type SemanticIconToken = "semantic-icon-strong" | "semantic-icon-subtle" | "semantic-icon-inverse" | "semantic-icon-brand" | "semantic-icon-success" | "semantic-icon-error" | "semantic-icon-warning" | "semantic-icon-info" | "semantic-icon-disabled";
-type SemanticEmphasisToken = "semantic-emphasis-brand" | "semantic-emphasis-success" | "semantic-emphasis-error" | "semantic-emphasis-warning" | "semantic-emphasis-info";
-type SemanticInteractionToken = "semantic-interaction-overlay-10" | "semantic-interaction-overlay-25" | "semantic-interaction-focus-ring";
-type SemanticColorToken = SemanticTextToken | SemanticSurfaceToken | SemanticBorderToken | SemanticIconToken | SemanticEmphasisToken | SemanticInteractionToken;
+type SurfaceGroup = "brand" | "brand-secondary" | "success" | "error" | "warning" | "info";
+type SemanticSurfaceToken = "semantic-surface-neutral-primary" | "semantic-surface-neutral-secondary" | "semantic-surface-neutral-tertiary" | "semantic-surface-neutral-inverse" | "semantic-surface-neutral-disabled" | `semantic-surface-${SurfaceGroup}-${SurfaceVariant}`;
+type SemanticBorderToken = "semantic-border-primary" | "semantic-border-secondary" | "semantic-border-tertiary" | "semantic-border-disabled" | "semantic-border-brand-primary" | "semantic-border-brand-secondary" | "semantic-border-success" | "semantic-border-error" | "semantic-border-warning" | "semantic-border-info";
+type SemanticIconToken = "semantic-icon-primary" | "semantic-icon-secondary" | "semantic-icon-inverse" | "semantic-icon-brand" | "semantic-icon-brand-secondary" | "semantic-icon-success" | "semantic-icon-error" | "semantic-icon-warning" | "semantic-icon-info" | "semantic-icon-disabled";
+type SemanticInteractionToken = `semantic-interaction-overlay-${5 | 10 | 25 | 50 | 75}` | "semantic-interaction-focus-ring";
+type SemanticColorToken = SemanticTextToken | SemanticSurfaceToken | SemanticBorderToken | SemanticIconToken | SemanticInteractionToken;
 type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type BrandToken = `brand-primary-${Shade}` | `brand-secondary-${Shade}` | `brand-neutral-${Shade}` | "brand-base-white" | "brand-base-black-alpha-10" | "brand-base-black-alpha-25";
+type BrandToken = `brand-primary-${Shade}` | `brand-secondary-${Shade}` | `brand-neutral-${Shade}` | "brand-base-white" | `brand-base-overlay-${5 | 10 | 25 | 50 | 75 | 85}`;
 type SystemToken = `system-success-${Shade}` | `system-error-${Shade}` | `system-warning-${Shade}` | `system-info-${Shade}` | `system-link-${400 | 500 | 600 | 700}`;
 type ColorToken = SemanticColorToken | BrandToken | SystemToken | XplatColorTokenRegistry[keyof XplatColorTokenRegistry];
 interface ColorProps {

package/dist/tokens/index.d.ts

@@ -1,18 +1,17 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
-export { TokenVar, cssVar, primitive, semantic } from '@x-plat/tokens-core';
+export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 
-type SemanticTextToken = "semantic-text-strong" | "semantic-text-subtle" | "semantic-text-muted" | "semantic-text-brand" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link";
+type SemanticTextToken = "semantic-text-primary" | "semantic-text-secondary" | "semantic-text-tertiary" | "semantic-text-brand-primary" | "semantic-text-brand-secondary" | "semantic-text-disabled" | "semantic-text-inverse" | "semantic-text-success" | "semantic-text-error" | "semantic-text-warning" | "semantic-text-info" | "semantic-text-link" | "semantic-text-accent-red" | "semantic-text-accent-blue";
 type SurfaceVariant = "subtle" | "default" | "strong";
-type SurfaceGroup = "brand" | "success" | "error" | "warning" | "info";
-type SemanticSurfaceToken = "semantic-surface-neutral-default" | "semantic-surface-neutral-subtle" | "semantic-surface-neutral-strong" | "semantic-surface-neutral-overlay" | "semantic-surface-neutral-disabled" | `semantic-surface-${SurfaceGroup}-${SurfaceVariant}`;
-type SemanticBorderToken = "semantic-border-default" | "semantic-border-subtle" | "semantic-border-strong" | "semantic-border-disabled" | "semantic-border-success" | "semantic-border-error" | "semantic-border-warning" | "semantic-border-info";
-type SemanticIconToken = "semantic-icon-strong" | "semantic-icon-subtle" | "semantic-icon-inverse" | "semantic-icon-brand" | "semantic-icon-success" | "semantic-icon-error" | "semantic-icon-warning" | "semantic-icon-info" | "semantic-icon-disabled";
-type SemanticEmphasisToken = "semantic-emphasis-brand" | "semantic-emphasis-success" | "semantic-emphasis-error" | "semantic-emphasis-warning" | "semantic-emphasis-info";
-type SemanticInteractionToken = "semantic-interaction-overlay-10" | "semantic-interaction-overlay-25" | "semantic-interaction-focus-ring";
-type SemanticColorToken = SemanticTextToken | SemanticSurfaceToken | SemanticBorderToken | SemanticIconToken | SemanticEmphasisToken | SemanticInteractionToken;
+type SurfaceGroup = "brand" | "brand-secondary" | "success" | "error" | "warning" | "info";
+type SemanticSurfaceToken = "semantic-surface-neutral-primary" | "semantic-surface-neutral-secondary" | "semantic-surface-neutral-tertiary" | "semantic-surface-neutral-inverse" | "semantic-surface-neutral-disabled" | `semantic-surface-${SurfaceGroup}-${SurfaceVariant}`;
+type SemanticBorderToken = "semantic-border-primary" | "semantic-border-secondary" | "semantic-border-tertiary" | "semantic-border-disabled" | "semantic-border-brand-primary" | "semantic-border-brand-secondary" | "semantic-border-success" | "semantic-border-error" | "semantic-border-warning" | "semantic-border-info";
+type SemanticIconToken = "semantic-icon-primary" | "semantic-icon-secondary" | "semantic-icon-inverse" | "semantic-icon-brand" | "semantic-icon-brand-secondary" | "semantic-icon-success" | "semantic-icon-error" | "semantic-icon-warning" | "semantic-icon-info" | "semantic-icon-disabled";
+type SemanticInteractionToken = `semantic-interaction-overlay-${5 | 10 | 25 | 50 | 75}` | "semantic-interaction-focus-ring";
+type SemanticColorToken = SemanticTextToken | SemanticSurfaceToken | SemanticBorderToken | SemanticIconToken | SemanticInteractionToken;
 type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type BrandToken = `brand-primary-${Shade}` | `brand-secondary-${Shade}` | `brand-neutral-${Shade}` | "brand-base-white" | "brand-base-black-alpha-10" | "brand-base-black-alpha-25";
+type BrandToken = `brand-primary-${Shade}` | `brand-secondary-${Shade}` | `brand-neutral-${Shade}` | "brand-base-white" | `brand-base-overlay-${5 | 10 | 25 | 50 | 75 | 85}`;
 type SystemToken = `system-success-${Shade}` | `system-error-${Shade}` | `system-warning-${Shade}` | `system-info-${Shade}` | `system-link-${400 | 500 | 600 | 700}`;
 type ColorToken = SemanticColorToken | BrandToken | SystemToken | XplatColorTokenRegistry[keyof XplatColorTokenRegistry];
 interface ColorProps {

package/dist/tokens/index.js

@@ -12,7 +12,7 @@ var gridColumns = {
 };
 
 // src/tokens/colors.ts
-import { primitive, semantic } from "@x-plat/tokens-core";
+import { semantic } from "@x-plat/tokens-core";
 
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5784,6 +5784,5 @@ export {
   breakpoints,
   cssVar,
   gridColumns,
-  primitive,
   semantic
 };

package/guidelines/AGENT_PROMPT.md

@@ -20,7 +20,7 @@
 1. 컴포넌트에 `color` / `className` / `style` prop **없음**. 색상·스타일은 내부 semantic 토큰으로 고정됨.
 2. 컴포넌트는 `width: 100%` 로 부모를 채우므로 **반드시 GridItem 또는 wrapper 로 감싸서 너비를 제어**.
 3. **CSS 로 DS 컴포넌트를 오버라이드하지 않는다**.
-4. 색상·간격·타이포는 **semantic 토큰만** 사용. primitive / brand 직접 참조 금지.
+4. 색상·간격·타이포는 **semantic 토큰만** 사용. brand / system / typo primitive 직접 참조 금지.
 5. **모든 visible 그룹은 명시적 spacing 필수**. wrapper 의 `padding` / `gap` / 간격을 spacing 토큰으로 지정. 매직 넘버(`16px`, `1rem` 등) 금지.
 
 ---
@@ -430,7 +430,7 @@ import { ChatInput } from "@x-plat/design-system/components";
   <Button>B</Button>
 </div>
 
-// primitive 직접 참조 (semantic 만 허용)
+// 존재하지 않는 레이어 참조 (semantic 만 허용)
 <div style={{ padding: "var(--spacing-size-4)" }}>...</div>
 ```
 
@@ -563,15 +563,14 @@ CSS 변수 `--semantic-{category}-{role}` 사용.
 
 | 카테고리 | 키 |
 |---|---|
-| `text` | strong / subtle / muted / brand / disabled / inverse / success / error / warning / info / link / sunday / saturday |
-| `surface` | neutral.{default/subtle/strong/overlay/disabled} / brand.{subtle/default/strong} / success/error/warning/info.{subtle/default/strong} |
-| `border` | default / subtle / strong / disabled / brand / success / error / warning / info |
-| `icon` | strong / subtle / inverse / brand / success / error / warning / info / disabled |
-| `emphasis` | brand / success / error / warning / info |
-| `interaction` | overlay-10 / overlay-25 / focus-ring |
+| `text` | primary / secondary / tertiary / brand-primary / brand-secondary / disabled / inverse / success / error / warning / info / link / accent-red / accent-blue |
+| `surface` | neutral.{primary/secondary/tertiary/inverse/disabled} / brand.{subtle/default/strong} / brand-secondary.{subtle/default/strong} / success/error/warning/info.{subtle/default/strong} |
+| `border` | primary / secondary / tertiary / disabled / brand-primary / brand-secondary / success / error / warning / info |
+| `icon` | primary / secondary / inverse / brand / brand-secondary / success / error / warning / info / disabled |
+| `interaction` | overlay-5 / overlay-10 / overlay-25 / overlay-50 / overlay-75 / focus-ring |
 | `categorical` | 1-8 × {bg / area / fill / text} |
 
-예: `color: var(--semantic-text-strong)`, `background: var(--semantic-surface-brand-default)`
+예: `color: var(--semantic-text-primary)`, `background: var(--semantic-surface-brand-default)`
 
 ### 스페이싱
 

package/guidelines/Guidelines.md

@@ -43,7 +43,7 @@ React 기반 디자인 시스템 라이브러리이다. Figma Make Kit과 1:1
 
 1. **[설치 및 설정](./setup.md)** - CSS/컴포넌트 import, ToastProvider 설정
 2. **파운데이션**
-   - [컬러](./foundations/color.md) - 4레이어 semantic 토큰
+   - [컬러](./foundations/color.md) - 3레이어 semantic 토큰
    - [스페이싱](./foundations/spacing.md) - space, radius, stroke
    - [타이포그래피](./foundations/typography.md) - font, size, weight
    - [아이콘](./foundations/icons.md) - import, 크기/색상, 카테고리

package/guidelines/components/chart.md

@@ -17,7 +17,7 @@ import { Chart } from "@xplat/design-system";
 
 ## 색상
 
-primitive 팔레트 기반으로 시리즈별 색상을 자동 배정한다. line/bar는 `LINE_BAR_PALETTES`, pie/doughnut는 `PIE_PALETTES`를 사용한다.
+semantic categorical 토큰 기반으로 시리즈별 색상을 자동 배정한다. line/bar는 `LINE_BAR_PALETTES`, pie/doughnut는 `PIE_PALETTES`를 사용한다.
 
 ---
 

package/guidelines/foundations/color.md

@@ -1,15 +1,15 @@
 # 컬러 토큰 시스템
 
-## 4레이어 구조
+## 3레이어 구조
 
 | 레이어 | 접두사 | 역할 |
 |--------|--------|------|
-| Primitive | `--primitive-*` | 기초 팔레트 (hex) |
-| Brand | `--brand-*` | 브랜드 색상 |
-| System | `--system-*` | 상태 색상 (success/error/warning/info) |
+| Brand | `--brand-*` | 브랜드 색상 (hex 실값, 테마별 오버라이드) |
+| System | `--system-*` | 상태 색상 (success/error/warning/info/link, hex 실값) |
 | Semantic | `--semantic-*` | 용도 기반 최종 토큰 (brand+system 참조) |
 
-컴포넌트는 **semantic 토큰만** 소비한다. primitive/brand/system을 직접 참조하지 않는다.
+Figma `brand` / `system` / `semantic` 컬렉션과 1:1 대응한다.
+컴포넌트는 **semantic 토큰만** 소비한다. brand/system을 직접 참조하지 않는다.
 
 ---
 
@@ -19,16 +19,16 @@
 
 ```tsx
 // 텍스트
-<p className="text-semantic-text-strong">강조 텍스트</p>
-<p className="text-semantic-text-subtle">보조 텍스트</p>
+<p className="text-semantic-text-primary">강조 텍스트</p>
+<p className="text-semantic-text-secondary">보조 텍스트</p>
 <p className="text-semantic-text-error">에러 메시지</p>
 
 // 배경
-<div className="bg-semantic-surface-neutral-default">기본 배경</div>
+<div className="bg-semantic-surface-neutral-primary">기본 배경</div>
 <div className="bg-semantic-surface-brand-subtle">브랜드 배경</div>
 
 // 테두리
-<div className="border border-semantic-border-default">기본 테두리</div>
+<div className="border border-semantic-border-primary">기본 테두리</div>
 ```
 
 ---
@@ -37,12 +37,13 @@
 
 ### Text
 
-`--semantic-text-{strong, subtle, muted, brand, disabled, inverse, success, error, warning, info, link, sunday, saturday}`
+`--semantic-text-{primary, secondary, tertiary, brand-primary, brand-secondary, disabled, inverse, success, error, warning, info, link, accent-red, accent-blue}`
 
 ### Surface
 
-- Neutral: `--semantic-surface-neutral-{subtle, default, strong}`
+- Neutral: `--semantic-surface-neutral-{primary, secondary, tertiary, inverse, disabled}`
 - Brand: `--semantic-surface-brand-{subtle, default, strong}`
+- Brand Secondary: `--semantic-surface-brand-secondary-{subtle, default, strong}`
 - Success: `--semantic-surface-success-{subtle, default, strong}`
 - Error: `--semantic-surface-error-{subtle, default, strong}`
 - Warning: `--semantic-surface-warning-{subtle, default, strong}`
@@ -50,32 +51,30 @@
 
 ### Border
 
-`--semantic-border-{default, strong, subtle, disabled, focus, error, success}`
+`--semantic-border-{primary, secondary, tertiary, disabled, brand-primary, brand-secondary, success, error, warning, info}`
 
 ### Icon
 
-`--semantic-icon-{default, subtle, disabled, inverse, brand, success, warning, error, info}`
-
-### Emphasis
-
-`--semantic-emphasis-{brand, success, error, warning, info}`
+`--semantic-icon-{primary, secondary, inverse, brand, brand-secondary, success, error, warning, info, disabled}`
 
 ### Interaction
 
-`--semantic-interaction-{primary, primary-hover, primary-active, primary-disabled, secondary, secondary-hover, secondary-active, danger, danger-hover, danger-active}`
+`--semantic-interaction-{overlay-5, overlay-10, overlay-25, overlay-50, overlay-75, focus-ring}`
+
+### Categorical (XPLAT 확장)
 
-### Categorical
+Figma 컬렉션에는 없고 차트/태그/아바타 시리즈 색으로 사용한다.
 
-`--semantic-categorical-{1, 2, 3, 4, 5, 6, 7, 8}`
+`--semantic-categorical-{1..8}-{bg, area, fill, text}`
 
 ---
 
 ## 잘못된 사용
 
 ```css
-/* 금지: primitive 토큰 직접 사용 */
-color: var(--primitive-blue-500);
+/* 금지: brand/system 토큰 직접 사용 */
+color: var(--brand-primary-500);
 
 /* 올바른 방법: semantic 토큰 사용 */
-color: var(--semantic-text-brand);
+color: var(--semantic-text-brand-primary);
 ```

package/guidelines/foundations/typography.md

@@ -1,63 +1,113 @@
 # 타이포그래피 토큰 시스템
 
-## 3레이어 구조
+## 2레이어 구조
 
-| 레이어 | 역할 |
-|--------|------|
-| Primitive | 기초 폰트 수치 |
-| Brand | 브랜드별 커스텀 |
-| Semantic | 컴포넌트가 소비하는 최종 토큰 |
+| 레이어 | 접두사 | 역할 |
+|--------|--------|------|
+| Primitive | `--typo-*` | 기초 폰트 수치 (pc/tablet/mobile 반응형) |
+| Semantic | `--semantic-typo-*` | 컴포넌트가 소비하는 합성 스타일 23종 |
+
+Figma `typography` 컬렉션은 primitive 만 갖고, pc / tablet / mobile 을 **모드**로 둔다.
+density(compact/airy) 축과 브랜드 오버라이드 레이어는 없다.
+
+컴포넌트는 **semantic 만** 소비한다. `--typo-*` 를 직접 참조하지 않는다.
 
 ---
 
-## Font Family
+## 반응형 동작
 
-| 토큰 | 용도 |
+primitive 의 size / line-height / letter-spacing 은 브레이크포인트별로 값이 다르다.
+CSS 는 PC 기준값을 `:root` 에 두고 tablet/mobile 을 `@media` 로 덮는다.
+
+| 모드 | 범위 |
 |------|------|
-| `--font-family-sans` | 기본 산세리프 |
-| `--font-family-serif` | 세리프 |
-| `--font-family-suit` | SUIT 폰트 |
+| pc | ≥ 1024px |
+| tablet | 768 ~ 1023px |
+| mobile | < 768px |
 
-## Font Size
+semantic 스타일은 primitive 를 `var()` 로 참조하므로 자동으로 반응형이 된다.
 
-`--font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}`
+---
 
-## Line Height (Density)
+## Primitive
 
-3단계 밀도를 지원한다.
+### Font Family
 
-| 밀도 | 용도 |
+| 토큰 | 용도 |
 |------|------|
-| compact | 정보 밀집 UI |
-| default | 기본 |
-| airy | 여유 있는 UI |
+| `--typo-font-family-default` | 본문·라벨·캡션 |
+| `--typo-font-family-brand` | display·title (브랜드 표현) |
 
-## Font Weight
+### Size / Line Height
+
+`--typo-size-{key}` · `--typo-lh-{key}`
+
+key: `display-1` `display-2` `title-1` `title-2` `heading-1` `heading-2` `body-1` `body-2` `label-1` `label-2` `caption-1` `caption-2`
+
+### Font Weight
 
 | 토큰 | 값 |
 |------|-----|
-| `--font-weight-regular` | 400 |
-| `--font-weight-medium` | 500 |
-| `--font-weight-semibold` | 600 |
-| `--font-weight-bold` | 700 |
+| `--typo-weight-regular` | 400 |
+| `--typo-weight-medium` | 500 |
+| `--typo-weight-semibold` | 600 |
+| `--typo-weight-bold` | 700 |
 
-## Letter Spacing
+### Letter Spacing
 
 | 토큰 | 용도 |
 |------|------|
-| `--letter-spacing-tight` | 좁은 자간 |
-| `--letter-spacing-normal` | 기본 자간 |
-| `--letter-spacing-wide` | 넓은 자간 |
+| `--typo-ls-tight` | display·title·heading |
+| `--typo-ls-normal` | body·label-1 |
+| `--typo-ls-wide` | label-2·caption |
 
 ---
 
 ## Semantic Text Styles
 
-| 스타일 | 용도 |
-|--------|------|
-| display | 대형 타이틀, 히어로 |
-| title | 페이지 타이틀 |
-| heading | 섹션 타이틀 |
-| body | 본문 텍스트 |
-| label | 폼 라벨, 버튼 텍스트 |
-| caption | 부가 설명, 힌트 |
+스타일 하나가 5개 속성(`font` `size` `lh` `ls` `weight`)을 갖는다.
+접미사는 weight — `b`=bold, `sb`=semibold, `m`=medium, `r`=regular.
+
+| 계열 | 스타일 | 용도 |
+|------|--------|------|
+| display | `display-1-b` `display-1-sb` `display-2-b` `display-2-sb` | 대형 타이틀, 히어로 |
+| title | `title-1-sb` `title-1-m` `title-2-sb` `title-2-m` | 페이지 타이틀 |
+| heading | `heading-1-sb` `heading-1-m` `heading-2-m` | 섹션 타이틀 |
+| body | `body-1-sb` `body-1-m` `body-1-r` `body-2-m` `body-2-r` | 본문 텍스트 |
+| label | `label-1-sb` `label-1-m` `label-2-sb` `label-2-m` | 폼 라벨, 버튼 텍스트 |
+| caption | `caption-1-sb` `caption-1-r` `caption-2-r` | 부가 설명, 힌트 |
+
+### 사용법
+
+속성별 변수로 참조한다.
+
+```scss
+.my-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+}
+```
+
+또는 유틸리티 클래스로 한 번에 적용한다.
+
+```tsx
+<span className="typo-label-2-m">라벨</span>
+```
+
+---
+
+## 잘못된 사용
+
+```scss
+/* 금지: px 하드코딩 */
+font-size: 14px;
+
+/* 금지: primitive 직접 참조 */
+font-size: var(--typo-size-label-2);
+
+/* 올바른 방법: semantic 사용 */
+font-size: var(--semantic-typo-label-2-m-size);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.65",
+  "version": "0.6.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",