디자인 토큰 구조 정립 (typography, dimension, radius, color)

packages/design-tokens/tokens/README.md

@@ -7,45 +7,78 @@
 
 ## Conventions
 
-- Naming은 reserved name이 아니라면 kebab-case 를 사용합니다.
+### Naming
 
-### Text
+- 토큰명은 **kebab-case** 를 사용합니다. (예: `title1-bold`, `body1-regular`)
+- 그룹명은 **camelCase** 를 허용합니다. CSS/DTCG 프로퍼티명과 일치하는 경우 camelCase가 자연스럽고, JS export 키와의 일관성을 유지합니다. (예: `fontSize`, `lineHeight`, `fontWeight`)
+- 그룹명은 **단수형** 을 사용합니다. (예: `color`, `dimension`, `radius`)
+
+### `$type` 선언
+
+- **그룹 레벨 선언을 기본으로 합니다.** DTCG 스펙에 따라 그룹에 선언된 `$type`은 자식 토큰에 상속됩니다.
+- 한 그룹 안의 토큰이 모두 같은 타입이면, **그룹에 한 번만** `$type`을 선언합니다.
+- 개별 토큰에 `$type`을 선언하는 것은 한 그룹 안에 서로 다른 타입의 토큰이 섞여 있을 때만 사용합니다.
+
+```jsonc
+// ✅ 올바른 예: 그룹 레벨 선언
+"fontSize": {
+  "$type": "dimension",
+  "t1": { "$value": "11px" },
+  "t2": { "$value": "12px" }
+}
+
+// ❌ 잘못된 예: 같은 타입인데 개별 선언
+"fontSize": {
+  "t1": { "$type": "dimension", "$value": "11px" },
+  "t2": { "$type": "dimension", "$value": "12px" }
+}
+```
+
+### `$schema` 선언
+
+- 모든 토큰 파일의 최상위에 `"$schema": "../schema.json"` 을 선언합니다.
+- 이는 에디터의 자동 완성 및 검증 기능을 위한 것입니다.
+
+### Font
+
+- 이 디자인 시스템의 기본 폰트는 **[Pretendard Variable](https://github.com/orioncactus/pretendard)** 입니다.
+- 폰트 로딩은 `assets/font.json` 의 CSS import 토큰으로 처리합니다.
+- `text.fonts.default` 토큰이 시스템 기본 폰트를 나타냅니다.
+- 폰트는 전역으로 적용합니다. (`body { font-family: var(--text-fonts-default) }` 등)
+    - typography 토큰에는 `fontFamily` 를 포함하지 않습니다. 폰트는 전역 관심사이므로 개별 토큰이 들고 다니지 않습니다.
+
+### Typography
 
 - 모든 typography는 별도의 객체로 감싸지 않습니다. (감쌀 경우 build 되는 css에 불필요하게 prefix가 붙습니다.)
-- 하나의 typography에 font-weight가 하나라면 아래처럼 선업합니다.
+- 하나의 typography에 font-weight가 하나라면 아래처럼 선언합니다.
 
-```json
+```jsonc
 {
-  ...
   "title1": {
     "$value": {
-      "fontWeight": 700,
-      "fontSize": "28px",
-      "lineHeight": "42px"
+      "fontWeight": "{fontWeight.bold}",
+      "fontSize": "{fontSize.t10}",
+      "lineHeight": "{lineHeight.t10}"
     }
   }
-  ...
-}
 ```
 
 - 하나의 typography에 font-weight가 여러 개라면 아래와 같이 font-weight를 suffix로 붙입니다.
-```json
+
+```jsonc
 {
-  ...
-  "body1-regular": {
+  "body1-bold": {
     "$value": {
-      "fontWeight": 400,
-      "fontSize": "16px",
-      "lineHeight": "26px"
+      "fontWeight": "{fontWeight.bold}",
+      "fontSize": "{fontSize.t6}",
+      "lineHeight": "{lineHeight.t7}"
     }
   },
-  "body1-semibold": {
+  "body1-regular": {
     "$value": {
-      "fontWeight": 600,
-      "fontSize": "16px",
-      "lineHeight": "26px"
+      "fontWeight": "{fontWeight.regular}",
+      "fontSize": "{fontSize.t6}",
+      "lineHeight": "{lineHeight.t7}"
     }
   }
-  ...
-}
-```
+```

packages/design-tokens/tokens/colors.tokens.jsonc → packages/design-tokens/tokens/color/primitive.tokens.jsonc

@@ -1,6 +1,6 @@
 {
-  "$schema": "schema.json",
-  "colors": {
+  "$schema": "../schema.json",
+  "color": {
     "$type": "color",
 
     "neutral": {
@@ -9,34 +9,34 @@
       "100": { "$value": "239 239 246" },
       "200": { "$value": "215 215 228" },
       "300": { "$value": "186 186 203" },
-      "400": { "$value": "153 153 173" },
-      "500": { "$value": "127 127 148" },
-      "600": { "$value": "102 102 122" },
+      "400": { "$value": "149 149 171" },
+      "500": { "$value": "113 113 135" },
+      "600": { "$value": "97 97 119" },
       "700": { "$value": "73 73 90" },
-      "800": { "$value": "46 46 56" },
+      "800": { "$value": "55 55 68" },
       "900": { "$value": "31 31 39" },
-      "950": { "$value": "22 22 27" },
+      "950": { "$value": "25 25 31" },
       "1000": { "$value": "0 0 0" }
     },
     "violet": {
       "50": { "$value": "241 240 255" },
       "100": { "$value": "222 219 255" },
-      "200": { "$value": "199 194 255" },
-      "300": { "$value": "175 168 255" },
-      "400": { "$value": "153 137 252" },
-      "500": { "$value": "133 102 255" },
-      "600": { "$value": "106 55 246" },
-      "700": { "$value": "87 29 229" },
-      "800": { "$value": "71 22 192" },
-      "900": { "$value": "57 19 155" },
-      "950": { "$value": "33 10 103" }
+      "200": { "$value": "188 182 255" },
+      "300": { "$value": "153 137 252" },
+      "400": { "$value": "133 102 255" },
+      "500": { "$value": "107 78 225" },
+      "600": { "$value": "90 62 203" },
+      "700": { "$value": "73 47 179" },
+      "800": { "$value": "58 36 148" },
+      "900": { "$value": "42 24 115" },
+      "950": { "$value": "28 16 76" }
     },
     "yellow": {
       "50": { "$value": "255 251 235" },
       "100": { "$value": "255 240 181" },
       "200": { "$value": "255 226 148" },
       "300": { "$value": "255 210 112" },
-      "400": { "$value": "255 191 63" },
+      "400": { "$value": "255 199 59" },
       "500": { "$value": "255 171 4" },
       "600": { "$value": "242 151 5" },
       "700": { "$value": "206 117 8" },

packages/design-tokens/tokens/dimension/dimension.tokens.jsonc

@@ -0,0 +1,26 @@
+{
+  "$schema": "../schema.json",
+  "dimension": {
+    "$type": "dimension",
+    "2": { "$value": "2px" },
+    "4": { "$value": "4px" },
+    "6": { "$value": "6px" },
+    "8": { "$value": "8px" },
+    "10": { "$value": "10px" },
+    "12": { "$value": "12px" },
+    "14": { "$value": "14px" },
+    "16": { "$value": "16px" },
+    "18": { "$value": "18px" },
+    "20": { "$value": "20px" },
+    "24": { "$value": "24px" },
+    "28": { "$value": "28px" },
+    "32": { "$value": "32px" },
+    "36": { "$value": "36px" },
+    "40": { "$value": "40px" },
+    "48": { "$value": "48px" },
+    "56": { "$value": "56px" },
+    "64": { "$value": "64px" },
+    "80": { "$value": "80px" },
+    "96": { "$value": "96px" }
+  }
+}

packages/design-tokens/tokens/radius/radius.tokens.jsonc

@@ -0,0 +1,27 @@
+{
+  "$schema": "../schema.json",
+  "radius": {
+    "$type": "dimension",
+    "r100": {
+      "$value": "{dimension.4}"
+    },
+    "r200": {
+      "$value": "{dimension.8}"
+    },
+    "r250": {
+      "$value": "{dimension.10}"
+    },
+    "r300": {
+      "$value": "{dimension.12}"
+    },
+    "r400": {
+      "$value": "{dimension.16}"
+    },
+    "r500": {
+      "$value": "{dimension.20}"
+    },
+    "full": {
+      "$value": "999px"
+    }
+  }
+}