diff --git a/.github/workflows/style-dictionary.yml b/.github/workflows/style-dictionary.yml
index 6259bfc..d0fcc9d 100644
--- a/.github/workflows/style-dictionary.yml
+++ b/.github/workflows/style-dictionary.yml
@@ -60,14 +60,27 @@ jobs:
           const beforeSha = process.env.BEFORE_SHA;
           const afterSha = process.env.AFTER_SHA;
 
-          const changedFiles = execSync(
-            `git diff --name-only ${beforeSha} ${afterSha} -- tokens/`
-          ).toString().trim().split('\n').filter(f => f.endsWith('.json'));
+          function isValidSha(sha) {
+            try { execSync(`git cat-file -e ${sha}`); return true; } catch { return false; }
+          }
+
+          function resolveBase(afterSha) {
+            if (beforeSha && isValidSha(beforeSha)) return beforeSha;
+            try {
+              return execSync(`git merge-base ${afterSha} origin/default`).toString().trim();
+            } catch { return null; }
+          }
+
+          const baseSha = resolveBase(afterSha);
+          const changedFiles = baseSha
+            ? execSync(`git diff --name-only ${baseSha} ${afterSha} -- tokens/`)
+                .toString().trim().split('\n').filter(f => f.endsWith('.json'))
+            : [];
 
           const rows = [];
           for (const file of changedFiles) {
             let before = {}, after = {};
-            try { before = parseTokenFile(execSync(`git show ${beforeSha}:${file}`).toString()); } catch {}
+            try { before = parseTokenFile(execSync(`git show ${baseSha}:${file}`).toString()); } catch {}
             try { after = parseTokenFile(fs.readFileSync(file, 'utf-8')); } catch {}
 
             const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
diff --git a/MDS/Sources/MDS/Foundation/Base/BaseColor.swift b/MDS/Sources/MDS/Foundation/Base/BaseColor.swift
index 2b79f27..e2802d5 100644
--- a/MDS/Sources/MDS/Foundation/Base/BaseColor.swift
+++ b/MDS/Sources/MDS/Foundation/Base/BaseColor.swift
@@ -2,7 +2,82 @@
 //  BaseColor.swift
 //  MDS
 //
-//  Created by 최주리 on 4/21/26.
+//  Auto-generated by Style Dictionary. Do not edit manually.
 //
 
+import UIKit
 
+// MARK: - Base Color (Internal Only)
+
+internal enum BaseColor {
+    static let gray0 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    static let gray10 = UIColor(red: 0.988, green: 0.988, blue: 0.988, alpha: 1)
+    static let gray20 = UIColor(red: 0.965, green: 0.965, blue: 0.965, alpha: 1)
+    static let gray30 = UIColor(red: 0.941, green: 0.941, blue: 0.941, alpha: 1)
+    static let gray50 = UIColor(red: 0.894, green: 0.894, blue: 0.898, alpha: 1)
+    static let gray100 = UIColor(red: 0.765, green: 0.765, blue: 0.776, alpha: 1)
+    static let gray200 = UIColor(red: 0.616, green: 0.616, blue: 0.643, alpha: 1)
+    static let gray300 = UIColor(red: 0.502, green: 0.502, blue: 0.529, alpha: 1)
+    static let gray400 = UIColor(red: 0.400, green: 0.400, blue: 0.427, alpha: 1)
+    static let gray500 = UIColor(red: 0.318, green: 0.318, blue: 0.349, alpha: 1)
+    static let gray600 = UIColor(red: 0.247, green: 0.247, blue: 0.278, alpha: 1)
+    static let gray700 = UIColor(red: 0.180, green: 0.180, blue: 0.208, alpha: 1)
+    static let gray800 = UIColor(red: 0.125, green: 0.125, blue: 0.145, alpha: 1)
+    static let gray900 = UIColor(red: 0.090, green: 0.094, blue: 0.110, alpha: 1)
+    static let gray950 = UIColor(red: 0.059, green: 0.063, blue: 0.071, alpha: 1)
+    static let orange50 = UIColor(red: 1.000, green: 0.925, blue: 0.898, alpha: 1)
+    static let orange100 = UIColor(red: 1.000, green: 0.808, blue: 0.741, alpha: 1)
+    static let orange200 = UIColor(red: 1.000, green: 0.643, blue: 0.502, alpha: 1)
+    static let orange300 = UIColor(red: 1.000, green: 0.514, blue: 0.290, alpha: 1)
+    static let orange400 = UIColor(red: 0.969, green: 0.447, blue: 0.204, alpha: 1)
+    static let orange500 = UIColor(red: 0.831, green: 0.349, blue: 0.110, alpha: 1)
+    static let orange600 = UIColor(red: 0.678, green: 0.306, blue: 0.090, alpha: 1)
+    static let orange700 = UIColor(red: 0.522, green: 0.239, blue: 0.067, alpha: 1)
+    static let orange800 = UIColor(red: 0.361, green: 0.169, blue: 0.047, alpha: 1)
+    static let orange900 = UIColor(red: 0.259, green: 0.129, blue: 0.035, alpha: 1)
+    static let orange950 = UIColor(red: 0.173, green: 0.114, blue: 0.094, alpha: 1)
+    static let blue50 = UIColor(red: 0.784, green: 0.882, blue: 1.000, alpha: 1)
+    static let blue100 = UIColor(red: 0.561, green: 0.753, blue: 1.000, alpha: 1)
+    static let blue200 = UIColor(red: 0.380, green: 0.620, blue: 1.000, alpha: 1)
+    static let blue300 = UIColor(red: 0.267, green: 0.522, blue: 1.000, alpha: 1)
+    static let blue400 = UIColor(red: 0.204, green: 0.435, blue: 0.980, alpha: 1)
+    static let blue500 = UIColor(red: 0.173, green: 0.325, blue: 0.875, alpha: 1)
+    static let blue600 = UIColor(red: 0.149, green: 0.286, blue: 0.702, alpha: 1)
+    static let blue700 = UIColor(red: 0.145, green: 0.231, blue: 0.549, alpha: 1)
+    static let blue800 = UIColor(red: 0.137, green: 0.188, blue: 0.416, alpha: 1)
+    static let blue900 = UIColor(red: 0.125, green: 0.153, blue: 0.302, alpha: 1)
+    static let blue950 = UIColor(red: 0.071, green: 0.102, blue: 0.169, alpha: 1)
+    static let red50 = UIColor(red: 1.000, green: 0.820, blue: 0.827, alpha: 1)
+    static let red100 = UIColor(red: 1.000, green: 0.659, blue: 0.678, alpha: 1)
+    static let red200 = UIColor(red: 1.000, green: 0.506, blue: 0.545, alpha: 1)
+    static let red300 = UIColor(red: 0.980, green: 0.380, blue: 0.427, alpha: 1)
+    static let red400 = UIColor(red: 0.941, green: 0.259, blue: 0.318, alpha: 1)
+    static let red500 = UIColor(red: 0.792, green: 0.184, blue: 0.239, alpha: 1)
+    static let red600 = UIColor(red: 0.620, green: 0.153, blue: 0.200, alpha: 1)
+    static let red700 = UIColor(red: 0.478, green: 0.141, blue: 0.176, alpha: 1)
+    static let red800 = UIColor(red: 0.337, green: 0.125, blue: 0.145, alpha: 1)
+    static let red900 = UIColor(red: 0.235, green: 0.125, blue: 0.125, alpha: 1)
+    static let red950 = UIColor(red: 0.169, green: 0.098, blue: 0.114, alpha: 1)
+    static let green50 = UIColor(red: 0.800, green: 1.000, blue: 0.925, alpha: 1)
+    static let green100 = UIColor(red: 0.510, green: 0.965, blue: 0.796, alpha: 1)
+    static let green200 = UIColor(red: 0.306, green: 0.894, blue: 0.678, alpha: 1)
+    static let green300 = UIColor(red: 0.149, green: 0.812, blue: 0.569, alpha: 1)
+    static let green400 = UIColor(red: 0.086, green: 0.749, blue: 0.506, alpha: 1)
+    static let green500 = UIColor(red: 0.075, green: 0.627, blue: 0.424, alpha: 1)
+    static let green600 = UIColor(red: 0.075, green: 0.541, blue: 0.369, alpha: 1)
+    static let green700 = UIColor(red: 0.075, green: 0.427, blue: 0.298, alpha: 1)
+    static let green800 = UIColor(red: 0.075, green: 0.325, blue: 0.235, alpha: 1)
+    static let green900 = UIColor(red: 0.082, green: 0.216, blue: 0.169, alpha: 1)
+    static let green950 = UIColor(red: 0.094, green: 0.161, blue: 0.149, alpha: 1)
+    static let yellow50 = UIColor(red: 1.000, green: 0.957, blue: 0.831, alpha: 1)
+    static let yellow100 = UIColor(red: 1.000, green: 0.914, blue: 0.698, alpha: 1)
+    static let yellow200 = UIColor(red: 1.000, green: 0.871, blue: 0.541, alpha: 1)
+    static let yellow300 = UIColor(red: 1.000, green: 0.804, blue: 0.349, alpha: 1)
+    static let yellow400 = UIColor(red: 1.000, green: 0.761, blue: 0.204, alpha: 1)
+    static let yellow500 = UIColor(red: 1.000, green: 0.702, blue: 0.149, alpha: 1)
+    static let yellow600 = UIColor(red: 0.922, green: 0.627, blue: 0.118, alpha: 1)
+    static let yellow700 = UIColor(red: 0.710, green: 0.482, blue: 0.114, alpha: 1)
+    static let yellow800 = UIColor(red: 0.447, green: 0.325, blue: 0.118, alpha: 1)
+    static let yellow900 = UIColor(red: 0.325, green: 0.255, blue: 0.137, alpha: 1)
+    static let yellow950 = UIColor(red: 0.192, green: 0.165, blue: 0.118, alpha: 1)
+}
diff --git a/MDS/Sources/MDS/Tokens/SemanticColor.swift b/MDS/Sources/MDS/Tokens/SemanticColor.swift
new file mode 100644
index 0000000..4e99546
--- /dev/null
+++ b/MDS/Sources/MDS/Tokens/SemanticColor.swift
@@ -0,0 +1,167 @@
+//
+//  SemanticColor.swift
+//  MDS
+//
+//  Auto-generated by Style Dictionary. Do not edit manually.
+//
+
+import UIKit
+
+// MARK: - Semantic Color
+
+public enum SemanticColor {
+
+    public enum Bg {
+
+        public enum Neutral {
+            public static let inverse = BaseColor.gray10
+            public static let bold = BaseColor.gray500
+            public static let `default` = BaseColor.gray600
+            public static let subtle = BaseColor.gray700
+            public static let ghost = BaseColor.gray800
+
+            public enum Inverse {
+                public static let hover = BaseColor.gray100
+                public static let pressed = BaseColor.gray100
+            }
+
+            public enum Bold {
+                public static let disabled = BaseColor.gray700
+            }
+
+            public enum `default` {
+                public static let hover = BaseColor.gray500
+                public static let pressed = BaseColor.gray500
+                public static let disabled = BaseColor.gray800
+            }
+
+            public enum Subtle {
+                public static let hover = BaseColor.gray600
+                public static let pressed = BaseColor.gray600
+            }
+
+            public enum Ghost {
+                public static let hover = BaseColor.gray700
+                public static let pressed = BaseColor.gray700
+            }
+        }
+
+        public enum Brand {
+            public static let `default` = BaseColor.orange400
+            public static let subtle = BaseColor.orange700
+            public static let ghost = BaseColor.orange950
+        }
+
+        public enum Secondary {
+            public static let `default` = BaseColor.blue400
+            public static let subtle = BaseColor.blue900
+            public static let ghost = BaseColor.blue950
+
+            public enum `default` {
+                public static let hover = BaseColor.blue500
+                public static let pressed = BaseColor.blue600
+            }
+        }
+
+        public enum Information {
+            public static let ghost = BaseColor.blue950
+        }
+
+        public enum Success {
+            public static let ghost = BaseColor.green950
+        }
+
+        public enum Danger {
+            public static let `default` = BaseColor.red400
+            public static let ghost = BaseColor.red950
+
+            public enum `default` {
+                public static let hover = BaseColor.red500
+                public static let pressed = BaseColor.red600
+            }
+        }
+
+        public enum Dim {
+            public static let `default` = BaseColor.gray950
+        }
+    }
+
+    public enum Fg {
+
+        public enum Neutral {
+            public static let bold = BaseColor.gray10
+            public static let `default` = BaseColor.gray100
+            public static let subtle = BaseColor.gray300
+            public static let ghost = BaseColor.gray500
+            public static let inverse = BaseColor.gray950
+
+            public enum `default` {
+                public static let disabled = BaseColor.gray500
+            }
+        }
+
+        public enum Brand {
+            public static let `default` = BaseColor.orange400
+        }
+
+        public enum Secondary {
+            public static let `default` = BaseColor.blue400
+        }
+
+        public enum Success {
+            public static let bold = BaseColor.green100
+            public static let `default` = BaseColor.green400
+            public static let subtle = BaseColor.green600
+        }
+
+        public enum Danger {
+            public static let bold = BaseColor.red100
+            public static let `default` = BaseColor.red400
+            public static let subtle = BaseColor.red600
+        }
+
+        public enum Attention {
+            public static let bold = BaseColor.yellow200
+            public static let `default` = BaseColor.yellow400
+            public static let subtle = BaseColor.yellow600
+        }
+
+        public enum Information {
+            public static let `default` = BaseColor.blue400
+            public static let subtle = BaseColor.blue600
+        }
+    }
+
+    public enum Stroke {
+
+        public enum Neutral {
+            public static let `default` = BaseColor.gray600
+            public static let inverse = BaseColor.gray10
+            public static let subtle = BaseColor.gray700
+            public static let ghost = BaseColor.gray800
+
+            public enum `default` {
+                public static let focused = BaseColor.gray200
+                public static let disabled = BaseColor.gray700
+            }
+        }
+
+        public enum Brand {
+            public static let `default` = BaseColor.orange400
+            public static let subtle = BaseColor.orange600
+        }
+
+        public enum Secondary {
+            public static let `default` = BaseColor.blue400
+            public static let subtle = BaseColor.blue600
+        }
+
+        public enum Information {
+            public static let subtle = BaseColor.blue600
+        }
+
+        public enum Danger {
+            public static let `default` = BaseColor.red400
+        }
+    }
+}
diff --git a/MDS/Sources/MDS/Tokens/SemanticColorToken.swift b/MDS/Sources/MDS/Tokens/SemanticColorToken.swift
deleted file mode 100644
index a9ce217..0000000
--- a/MDS/Sources/MDS/Tokens/SemanticColorToken.swift
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-//  MDSSemanticColor.swift
-//  MDS
-//
-//  Created by 최주리 on 4/30/26.
-//
diff --git a/tokens/base/color.json b/tokens/base/color.json
new file mode 100644
index 0000000..0a9c71b
--- /dev/null
+++ b/tokens/base/color.json
@@ -0,0 +1,298 @@
+{
+  "color": {
+    "base": {
+      "gray": {
+        "0": {
+          "$value": "#FFFFFF",
+          "$type": "color"
+        },
+        "10": {
+          "$value": "#FCFCFC",
+          "$type": "color"
+        },
+        "20": {
+          "$value": "#F6F6F6",
+          "$type": "color"
+        },
+        "30": {
+          "$value": "#F0F0F0",
+          "$type": "color"
+        },
+        "50": {
+          "$value": "#E4E4E5",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#C3C3C6",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#9D9DA4",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#808087",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#66666D",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#515159",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#3F3F47",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#2E2E35",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#202025",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#17181C",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#0F1012",
+          "$type": "color"
+        }
+      },
+      "orange": {
+        "50": {
+          "$value": "#FFECE5",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#FFCEBD",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#FFA480",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#FF834A",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#F77234",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#D4591C",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#AD4E17",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#853D11",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#5C2B0C",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#422109",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#2C1D18",
+          "$type": "color"
+        }
+      },
+      "blue": {
+        "50": {
+          "$value": "#C8E1FF",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#8FC0FF",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#619EFF",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#4485FF",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#346FFA",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#2C53DF",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#2649B3",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#253B8C",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#23306A",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#20274D",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#121A2B",
+          "$type": "color"
+        }
+      },
+      "red": {
+        "50": {
+          "$value": "#FFD1D3",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#FFA8AD",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#FF818B",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#FA616D",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#F04251",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#CA2F3D",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#9E2733",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#7A242D",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#562025",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#3C2020",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#2B191D",
+          "$type": "color"
+        }
+      },
+      "green": {
+        "50": {
+          "$value": "#CCFFEC",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#82F6CB",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#4EE4AD",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#26CF91",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#16BF81",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#13A06C",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#138A5E",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#136D4C",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#13533C",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#15372B",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#182926",
+          "$type": "color"
+        }
+      },
+      "yellow": {
+        "50": {
+          "$value": "#FFF4D4",
+          "$type": "color"
+        },
+        "100": {
+          "$value": "#FFE9B2",
+          "$type": "color"
+        },
+        "200": {
+          "$value": "#FFDE8A",
+          "$type": "color"
+        },
+        "300": {
+          "$value": "#FFCD59",
+          "$type": "color"
+        },
+        "400": {
+          "$value": "#FFC234",
+          "$type": "color"
+        },
+        "500": {
+          "$value": "#FFB326",
+          "$type": "color"
+        },
+        "600": {
+          "$value": "#EBA01E",
+          "$type": "color"
+        },
+        "700": {
+          "$value": "#B57B1D",
+          "$type": "color"
+        },
+        "800": {
+          "$value": "#72531E",
+          "$type": "color"
+        },
+        "900": {
+          "$value": "#534123",
+          "$type": "color"
+        },
+        "950": {
+          "$value": "#312A1E",
+          "$type": "color"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/tokens/semantic/color-bg.json b/tokens/semantic/color-bg.json
new file mode 100644
index 0000000..295fcca
--- /dev/null
+++ b/tokens/semantic/color-bg.json
@@ -0,0 +1,144 @@
+{
+  "color": {
+    "bg": {
+      "neutral": {
+        "inverse": {
+          "$value": "{color.base.gray.10}",
+          "$type": "color"
+        },
+        "inverse-hover": {
+          "$value": "{color.base.gray.100}",
+          "$type": "color"
+        },
+        "inverse-pressed": {
+          "$value": "{color.base.gray.100}",
+          "$type": "color"
+        },
+        "bold": {
+          "$value": "{color.base.gray.500}",
+          "$type": "color"
+        },
+        "bold-disabled": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        },
+        "default": {
+          "$value": "{color.base.gray.600}",
+          "$type": "color"
+        },
+        "default-hover": {
+          "$value": "{color.base.gray.500}",
+          "$type": "color"
+        },
+        "default-pressed": {
+          "$value": "{color.base.gray.500}",
+          "$type": "color"
+        },
+        "default-disabled": {
+          "$value": "{color.base.gray.800}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        },
+        "subtle-hover": {
+          "$value": "{color.base.gray.600}",
+          "$type": "color"
+        },
+        "subtle-pressed": {
+          "$value": "{color.base.gray.600}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.gray.800}",
+          "$type": "color"
+        },
+        "ghost-hover": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        },
+        "ghost-pressed": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        }
+      },
+      "brand": {
+        "default": {
+          "$value": "{color.base.orange.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.orange.700}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.orange.950}",
+          "$type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "$value": "{color.base.blue.400}",
+          "$type": "color"
+        },
+        "default-hover": {
+          "$value": "{color.base.blue.500}",
+          "$type": "color"
+        },
+        "default-pressed": {
+          "$value": "{color.base.blue.600}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.blue.900}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.blue.950}",
+          "$type": "color"
+        }
+      },
+      "information": {
+        "ghost": {
+          "$value": "{color.base.blue.950}",
+          "$type": "color"
+        }
+      },
+      "success": {
+        "ghost": {
+          "$value": "{color.base.green.950}",
+          "$type": "color"
+        }
+      },
+      "danger": {
+        "default": {
+          "$value": "{color.base.red.400}",
+          "$type": "color"
+        },
+        "default-hover": {
+          "$value": "{color.base.red.500}",
+          "$type": "color"
+        },
+        "default-pressed": {
+          "$value": "{color.base.red.600}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.red.950}",
+          "$type": "color"
+        }
+      },
+      "dim": {
+        "default": {
+          "$value": "{color.base.gray.950}",
+          "$type": "color",
+          "$description": "80% opacity",
+          "$extensions": {
+            "opacity": 0.8
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/semantic/color-fg.json b/tokens/semantic/color-fg.json
new file mode 100644
index 0000000..7427dfb
--- /dev/null
+++ b/tokens/semantic/color-fg.json
@@ -0,0 +1,96 @@
+{
+  "color": {
+    "fg": {
+      "neutral": {
+        "bold": {
+          "$value": "{color.base.gray.10}",
+          "$type": "color"
+        },
+        "default": {
+          "$value": "{color.base.gray.100}",
+          "$type": "color"
+        },
+        "default-disabled": {
+          "$value": "{color.base.gray.500}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.gray.300}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.gray.500}",
+          "$type": "color"
+        },
+        "inverse": {
+          "$value": "{color.base.gray.950}",
+          "$type": "color"
+        }
+      },
+      "brand": {
+        "default": {
+          "$value": "{color.base.orange.400}",
+          "$type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "$value": "{color.base.blue.400}",
+          "$type": "color"
+        }
+      },
+      "success": {
+        "bold": {
+          "$value": "{color.base.green.100}",
+          "$type": "color"
+        },
+        "default": {
+          "$value": "{color.base.green.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.green.600}",
+          "$type": "color"
+        }
+      },
+      "danger": {
+        "bold": {
+          "$value": "{color.base.red.100}",
+          "$type": "color"
+        },
+        "default": {
+          "$value": "{color.base.red.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.red.600}",
+          "$type": "color"
+        }
+      },
+      "attention": {
+        "bold": {
+          "$value": "{color.base.yellow.200}",
+          "$type": "color"
+        },
+        "default": {
+          "$value": "{color.base.yellow.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.yellow.600}",
+          "$type": "color"
+        }
+      },
+      "information": {
+        "default": {
+          "$value": "{color.base.blue.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.blue.600}",
+          "$type": "color"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/semantic/color-stroke.json b/tokens/semantic/color-stroke.json
new file mode 100644
index 0000000..42837c2
--- /dev/null
+++ b/tokens/semantic/color-stroke.json
@@ -0,0 +1,64 @@
+{
+  "color": {
+    "stroke": {
+      "neutral": {
+        "default": {
+          "$value": "{color.base.gray.600}",
+          "$type": "color"
+        },
+        "default-focused": {
+          "$value": "{color.base.gray.200}",
+          "$type": "color"
+        },
+        "default-disabled": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        },
+        "inverse": {
+          "$value": "{color.base.gray.10}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.gray.700}",
+          "$type": "color"
+        },
+        "ghost": {
+          "$value": "{color.base.gray.800}",
+          "$type": "color"
+        }
+      },
+      "brand": {
+        "default": {
+          "$value": "{color.base.orange.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.orange.600}",
+          "$type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "$value": "{color.base.blue.400}",
+          "$type": "color"
+        },
+        "subtle": {
+          "$value": "{color.base.blue.600}",
+          "$type": "color"
+        }
+      },
+      "information": {
+        "subtle": {
+          "$value": "{color.base.blue.600}",
+          "$type": "color"
+        }
+      },
+      "danger": {
+        "default": {
+          "$value": "{color.base.red.400}",
+          "$type": "color"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/semantic/typography.json b/tokens/semantic/typography.json
deleted file mode 100644
index 18408f3..0000000
--- a/tokens/semantic/typography.json
+++ /dev/null
@@ -1,138 +0,0 @@
-{
-  "typography": {
-    "heading": {
-      "1": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.bold}",
-          "fontSize": "{typography.base.size.t32}",
-          "lineHeight": "{typography.base.lineHeight.t48}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "2": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.bold}",
-          "fontSize": "{typography.base.size.t24}",
-          "lineHeight": "{typography.base.lineHeight.t36}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "3": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.bold}",
-          "fontSize": "{typography.base.size.t20}",
-          "lineHeight": "{typography.base.lineHeight.t30}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "4": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.bold}",
-          "fontSize": "{typography.base.size.t16}",
-          "lineHeight": "{typography.base.lineHeight.t24}",
-          "letterSpacing": "{typography.base.letterSpacing.wide}"
-        },
-        "$type": "typography"
-      }
-    },
-    "title": {
-      "1": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t28}",
-          "lineHeight": "{typography.base.lineHeight.t42}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "2": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t24}",
-          "lineHeight": "{typography.base.lineHeight.t36}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "3": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t20}",
-          "lineHeight": "{typography.base.lineHeight.t30}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "4": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t16}",
-          "lineHeight": "{typography.base.lineHeight.t24}",
-          "letterSpacing": "{typography.base.letterSpacing.wide}"
-        },
-        "$type": "typography"
-      }
-    },
-    "body": {
-      "1": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.regular}",
-          "fontSize": "{typography.base.size.t16}",
-          "lineHeight": "{typography.base.lineHeight.t26}",
-          "letterSpacing": "{typography.base.letterSpacing.wide}"
-        },
-        "$type": "typography"
-      },
-      "2": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.regular}",
-          "fontSize": "{typography.base.size.t14}",
-          "lineHeight": "{typography.base.lineHeight.t22}",
-          "letterSpacing": "{typography.base.letterSpacing.wide}"
-        },
-        "$type": "typography"
-      }
-    },
-    "label": {
-      "1": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t18}",
-          "lineHeight": "{typography.base.lineHeight.t24}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "2": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t16}",
-          "lineHeight": "{typography.base.lineHeight.t22}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "3": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t14}",
-          "lineHeight": "{typography.base.lineHeight.t18}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      },
-      "4": {
-        "$value": {
-          "fontWeight": "{typography.base.weight.semibold}",
-          "fontSize": "{typography.base.size.t12}",
-          "lineHeight": "{typography.base.lineHeight.t16}",
-          "letterSpacing": "{typography.base.letterSpacing.default}"
-        },
-        "$type": "typography"
-      }
-    }
-  }
-}