diff --git a/assets/themes/dark.css b/assets/themes/dark.css
index 4b8a52ae..f0f87251 100644
--- a/assets/themes/dark.css
+++ b/assets/themes/dark.css
@@ -1,5 +1,5 @@
 #root.dark {
-  --orange-color-50: 46 29 21;
+  --orange-color-050: 46 29 21;
   --orange-color-100: 72 40 23;
   --orange-color-200: 108 61 32;
   --orange-color-300: 140 74 32;
@@ -10,7 +10,7 @@
   --orange-color-800: 248 201 157;
   --orange-color-900: 250 225 197;
 
-  --sunset-color-50: 46 31 20;
+  --sunset-color-050: 46 31 20;
   --sunset-color-100: 72 43 20;
   --sunset-color-200: 97 59 24;
   --sunset-color-300: 135 79 24;
@@ -21,7 +21,7 @@
   --sunset-color-800: 248 212 141;
   --sunset-color-900: 250 230 183;
 
-  --sunglow-color-50: 45 39 20;
+  --sunglow-color-050: 45 39 20;
   --sunglow-color-100: 69 59 17;
   --sunglow-color-200: 90 78 16;
   --sunglow-color-300: 123 105 13;
@@ -32,7 +32,7 @@
   --sunglow-color-800: 248 239 119;
   --sunglow-color-900: 250 247 160;
 
-  --shamrock-color-50: 33 41 20;
+  --shamrock-color-050: 33 41 20;
   --shamrock-color-100: 48 63 21;
   --shamrock-color-200: 64 82 25;
   --shamrock-color-300: 84 111 26;
@@ -43,7 +43,7 @@
   --shamrock-color-800: 227 248 152;
   --shamrock-color-900: 240 250 193;
 
-  --green-color-50: 38 51 49;
+  --green-color-050: 38 51 49;
   --green-color-100: 38 61 55;
   --green-color-200: 34 80 66;
   --green-color-300: 7 121 83;
@@ -54,7 +54,7 @@
   --green-color-800: 104 217 170;
   --green-color-900: 168 219 198;
 
-  --viking-color-50: 20 37 38;
+  --viking-color-050: 20 37 38;
   --viking-color-100: 19 57 58;
   --viking-color-200: 22 76 76;
   --viking-color-300: 22 103 103;
@@ -65,7 +65,7 @@
   --viking-color-800: 136 233 224;
   --viking-color-900: 184 247 240;
 
-  --malibu-color-50: 21 34 46;
+  --malibu-color-050: 21 34 46;
   --malibu-color-100: 23 50 72;
   --malibu-color-200: 30 71 102;
   --malibu-color-300: 31 93 138;
@@ -76,7 +76,7 @@
   --malibu-color-800: 157 219 248;
   --malibu-color-900: 197 236 250;
 
-  --blue-color-50: 30 34 52;
+  --blue-color-050: 30 34 52;
   --blue-color-100: 24 43 87;
   --blue-color-200: 28 58 122;
   --blue-color-300: 40 84 173;
@@ -87,7 +87,7 @@
   --blue-color-800: 158 191 255;
   --blue-color-900: 218 233 255;
 
-  --dodger-color-50: 26 32 54;
+  --dodger-color-050: 26 32 54;
   --dodger-color-100: 25 42 92;
   --dodger-color-200: 30 58 122;
   --dodger-color-300: 30 72 167;
@@ -98,7 +98,7 @@
   --dodger-color-800: 144 187 252;
   --dodger-color-900: 183 212 250;
 
-  --heliotrope-color-50: 29 28 51;
+  --heliotrope-color-050: 29 28 51;
   --heliotrope-color-100: 43 38 87;
   --heliotrope-color-200: 54 45 107;
   --heliotrope-color-300: 64 53 143;
@@ -109,7 +109,7 @@
   --heliotrope-color-800: 197 188 248;
   --heliotrope-color-900: 230 225 250;
 
-  --violet-color-50: 43 33 61;
+  --violet-color-050: 43 33 61;
   --violet-color-100: 53 35 82;
   --violet-color-200: 70 45 107;
   --violet-color-300: 91 53 143;
@@ -120,7 +120,7 @@
   --violet-color-800: 219 188 248;
   --violet-color-900: 239 225 250;
 
-  --purple-color-50: 50 24 51;
+  --purple-color-050: 50 24 51;
   --purple-color-100: 75 23 77;
   --purple-color-200: 92 24 92;
   --purple-color-300: 122 24 122;
@@ -131,7 +131,7 @@
   --purple-color-800: 248 144 237;
   --purple-color-900: 250 186 242;
 
-  --rosein-color-50: 51 23 41;
+  --rosein-color-050: 51 23 41;
   --rosein-color-100: 72 22 51;
   --rosein-color-200: 93 27 63;
   --rosein-color-300: 127 29 83;
@@ -142,7 +142,7 @@
   --rosein-color-800: 248 154 197;
   --rosein-color-900: 250 195 218;
 
-  --red-color-50: 51 40 42;
+  --red-color-050: 51 40 42;
   --red-color-100: 69 41 48;
   --red-color-200: 96 39 51;
   --red-color-300: 138 43 57;
@@ -153,10 +153,10 @@
   --red-color-800: 246 134 141;
   --red-color-900: 250 191 195;
 
-  --gray-color-00: 0 0 0;
-  --gray-color-25: 8 9 13;
-  --gray-color-50: 23 23 31;
-  --gray-color-80: 26 28 36;
+  --gray-color-000: 0 0 0;
+  --gray-color-025: 8 9 13;
+  --gray-color-050: 23 23 31;
+  --gray-color-080: 26 28 36;
   --gray-color-100: 32 34 44;
   /* --gray-color-150: 32 34 44; */
   --gray-color-200: 44 47 59;
@@ -343,7 +343,7 @@
 /* PC */
 @media screen and (min-width: 1360px) {
   #root {
-    --gap-00: 0px;
+    --gap-000: 0px;
     --gap-01: 2px;
     --gap-02: 4px;
     --gap-03: 8px;
@@ -386,7 +386,7 @@
 /* iPad */
 @media screen and (min-width: 430px) and (max-width: 1360px) {
   #root {
-    --gap-00: 0px;
+    --gap-000: 0px;
     --gap-01: 2px;
     --gap-02: 4px;
     --gap-03: 8px;
@@ -427,7 +427,7 @@
 /* iPhone */
 @media screen and (max-width: 430px) {
   #root {
-    --gap-00: 0vw;
+    --gap-000: 0vw;
     --gap-01: calc(2vw / 3.75);
     --gap-02: calc(4vw / 3.75);
     --gap-03: calc(8vw / 3.75);
diff --git a/assets/themes/light.css b/assets/themes/light.css
index f86c857a..410eb449 100644
--- a/assets/themes/light.css
+++ b/assets/themes/light.css
@@ -1,5 +1,5 @@
 #root.light {
-  --orange-color-50: 255 247 237;
+  --orange-color-050: 255 247 237;
   --orange-color-100: 255 242 224;
   --orange-color-200: 255 226 189;
   --orange-color-300: 255 191 122;
@@ -10,7 +10,7 @@
   --orange-color-800: 148 41 8;
   --orange-color-900: 112 23 3;
 
-  --sunset-color-50: 255 247 232;
+  --sunset-color-050: 255 247 232;
   --sunset-color-100: 255 241 209;
   --sunset-color-200: 255 223 162;
   --sunset-color-300: 255 195 104;
@@ -21,7 +21,7 @@
   --sunset-color-800: 128 57 8;
   --sunset-color-900: 85 33 4;
 
-  --sunglow-color-50: 253 255 214;
+  --sunglow-color-050: 253 255 214;
   --sunglow-color-100: 250 250 160;
   --sunglow-color-200: 250 246 109;
   --sunglow-color-300: 250 237 68;
@@ -32,7 +32,7 @@
   --sunglow-color-800: 110 64 0;
   --sunglow-color-900: 73 39 0;
 
-  --shamrock-color-50: 249 255 224;
+  --shamrock-color-050: 249 255 224;
   --shamrock-color-100: 233 248 187;
   --shamrock-color-200: 214 241 144;
   --shamrock-color-300: 201 233 104;
@@ -43,7 +43,7 @@
   --shamrock-color-800: 58 92 6;
   --shamrock-color-900: 48 73 7;
 
-  --green-color-50: 242 252 244;
+  --green-color-050: 242 252 244;
   --green-color-100: 215 245 219;
   --green-color-200: 170 229 182;
   --green-color-300: 132 219 152;
@@ -54,7 +54,7 @@
   --green-color-800: 1 117 55;
   --green-color-900: 2 99 53;
 
-  --viking-color-50: 232 255 251;
+  --viking-color-050: 232 255 251;
   --viking-color-100: 183 244 236;
   --viking-color-200: 137 233 224;
   --viking-color-300: 94 223 214;
@@ -65,7 +65,7 @@
   --viking-color-800: 7 96 101;
   --viking-color-900: 4 63 67;
 
-  --malibu-color-50: 235 246 255;
+  --malibu-color-050: 235 246 255;
   --malibu-color-100: 181 224 255;
   --malibu-color-200: 148 210 255;
   --malibu-color-300: 117 197 255;
@@ -76,7 +76,7 @@
   --malibu-color-800: 8 83 148;
   --malibu-color-900: 3 59 112;
 
-  --blue-color-50: 235 243 255;
+  --blue-color-050: 235 243 255;
   --blue-color-100: 224 236 255;
   --blue-color-200: 184 209 252;
   --blue-color-300: 119 165 245;
@@ -87,7 +87,7 @@
   --blue-color-800: 4 40 137;
   --blue-color-900: 8 32 97;
 
-  --dodger-color-50: 232 243 255;
+  --dodger-color-050: 232 243 255;
   --dodger-color-100: 190 218 255;
   --dodger-color-200: 148 191 255;
   --dodger-color-300: 106 161 255;
@@ -98,7 +98,7 @@
   --dodger-color-800: 0 38 148;
   --dodger-color-900: 0 27 112;
 
-  --heliotrope-color-50: 232 236 255;
+  --heliotrope-color-050: 232 236 255;
   --heliotrope-color-100: 205 213 255;
   --heliotrope-color-200: 179 188 255;
   --heliotrope-color-300: 152 161 255;
@@ -109,7 +109,7 @@
   --heliotrope-color-800: 47 44 148;
   --heliotrope-color-900: 34 30 112;
 
-  --violet-color-50: 245 232 255;
+  --violet-color-050: 245 232 255;
   --violet-color-100: 231 201 255;
   --violet-color-200: 214 170 255;
   --violet-color-300: 195 139 255;
@@ -120,7 +120,7 @@
   --violet-color-800: 68 31 148;
   --violet-color-900: 46 20 112;
 
-  --purple-color-50: 255 232 251;
+  --purple-color-050: 255 232 251;
   --purple-color-100: 251 188 243;
   --purple-color-200: 247 145 237;
   --purple-color-300: 243 103 234;
@@ -131,7 +131,7 @@
   --purple-color-800: 115 1 128;
   --purple-color-900: 80 0 92;
 
-  --rosein-color-50: 255 232 241;
+  --rosein-color-050: 255 232 241;
   --rosein-color-100: 255 193 219;
   --rosein-color-200: 255 154 199;
   --rosein-color-300: 255 114 182;
@@ -142,7 +142,7 @@
   --rosein-color-800: 148 8 99;
   --rosein-color-900: 112 2 78;
 
-  --red-color-50: 255 245 246;
+  --red-color-050: 255 245 246;
   --red-color-100: 255 231 232;
   --red-color-200: 255 191 199;
   --red-color-300: 255 153 165;
@@ -153,10 +153,10 @@
   --red-color-800: 194 17 47;
   --red-color-900: 174 1 41;
 
-  --gray-color-00: 255 255 255;
-  /* --gray-color-25: 255 255 255; */
-  --gray-color-50: 245 246 250;
-  /* --gray-color-80: 245 246 250; */
+  --gray-color-000: 255 255 255;
+  /* --gray-color-025: 255 255 255; */
+  --gray-color-050: 245 246 250;
+  /* --gray-color-080: 245 246 250; */
   --gray-color-150: 233 235 242;
   --gray-color-100: 237 239 245;
   --gray-color-200: 223 226 235;
@@ -342,7 +342,7 @@
 /* PC */
 @media screen and (min-width: 1360px) {
   #root {
-    --gap-00: 0px;
+    --gap-000: 0px;
     --gap-01: 2px;
     --gap-02: 4px;
     --gap-03: 8px;
@@ -383,7 +383,7 @@
 /* iPad */
 @media screen and (min-width: 430px) and (max-width: 1360px) {
   #root {
-    --gap-00: 0px;
+    --gap-000: 0px;
     --gap-01: 2px;
     --gap-02: 4px;
     --gap-03: 8px;
@@ -426,7 +426,7 @@
 /* iPhone */
 @media screen and (max-width: 430px) {
   #root {
-    --gap-00: 0vw;
+    --gap-000: 0vw;
     --gap-01: calc(2vw / 3.75);
     --gap-02: calc(4vw / 3.75);
     --gap-03: calc(8vw / 3.75);
diff --git a/docs/_meta.json b/docs/_meta.json
index fb7b3bdc..c3852816 100644
--- a/docs/_meta.json
+++ b/docs/_meta.json
@@ -1,4 +1,9 @@
 [
+  {
+    "text": "主题",
+    "link": "/themes",
+    "activeMatch": "^/themes/"
+  },
   {
     "text": "组件",
     "link": "/components",
diff --git a/docs/themes/_meta.json b/docs/themes/_meta.json
new file mode 100644
index 00000000..bfc3fc50
--- /dev/null
+++ b/docs/themes/_meta.json
@@ -0,0 +1,9 @@
+[
+  {
+    "type": "dir",
+    "name": "design-token",
+    "label": "Design Token",
+    "collapsible": true,
+    "collapsed": false
+  }
+]
\ No newline at end of file
diff --git a/docs/themes/design-token/color.disc.mdx b/docs/themes/design-token/color.disc.mdx
new file mode 100644
index 00000000..f2dfa9eb
--- /dev/null
+++ b/docs/themes/design-token/color.disc.mdx
@@ -0,0 +1,5 @@
+import { ColorDisc } from 'docs/widgets'
+
+# 色盘
+
+<ColorDisc/>
\ No newline at end of file
diff --git a/docs/themes/index.md b/docs/themes/index.md
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/utils/index.ts b/docs/utils/index.ts
index 470dac58..01c1c96f 100644
--- a/docs/utils/index.ts
+++ b/docs/utils/index.ts
@@ -1,42 +1,28 @@
-import { camelCase } from 'change-case';
+import { isCSSStyleRule } from '@busymango/is-esm';
 
-function installedStyleSheetFilter(
-  name: string,
-  prefix: string
-): (s: CSSStyleSheet) => boolean {
-  return (item: CSSStyleSheet) => {
-    const rules = Array.from(item.cssRules);
-    const found = rules.findIndex(
-      (rule) =>
-        (rule as { selectorText?: string }).selectorText === `.${prefix}${name}`
-    );
-    return found >= 0;
-  };
-}
+const isCSSVarKey = (keyname: string) => keyname.startsWith('--');
 
 /**
  * 获取通过样式表预装的主题
- * @param name 主题名称
- * @param prefix 主题类名前缀
  * @returns 主题name样式表中的主题变量
  */
-export function getInstalledThemdFromStyle(
-  name: string,
-  prefix: string
+export function iStyleSheetsCSSVars(
+  selector: string
 ): Record<string, string> | undefined {
-  const styleSheets = Array.from(document.styleSheets);
-  const styleSheet = styleSheets.filter(
-    installedStyleSheetFilter(name, prefix)
-  )[0];
+  const sheets = Array.from(document.styleSheets);
+  const rule = sheets.find(({ cssRules }: CSSStyleSheet) =>
+    isCSSStyleRule(
+      Array.from(cssRules).find(
+        (rule) => isCSSStyleRule(rule) && rule.selectorText.startsWith(selector)
+      )
+    )
+  )?.cssRules?.[0];
 
-  if (styleSheet) {
-    const style = (styleSheet.cssRules[0] as { style?: CSSStyleDeclaration })
-      .style!;
-    const names = Array.from(style).filter((n) => n.startsWith('--'));
+  if (isCSSStyleRule(rule)) {
     return Object.fromEntries(
-      names.map((n) => [camelCase(n), style.getPropertyValue(n)])
-    ) as unknown as Record<string, string>;
-  } else {
-    return void 0;
+      Array.from(rule.style)
+        .filter(isCSSVarKey)
+        .map((name) => [name, rule.style.getPropertyValue(name)])
+    );
   }
 }
diff --git a/docs/widgets/color-disc/index.tsx b/docs/widgets/color-disc/index.tsx
new file mode 100644
index 00000000..bb678b0f
--- /dev/null
+++ b/docs/widgets/color-disc/index.tsx
@@ -0,0 +1,44 @@
+import { IFlex } from '@/components';
+
+const colors = [
+  'orange',
+  'sunset',
+  'sunglow',
+  'shamrock',
+  'green',
+  'viking',
+  'malibu',
+  'blue',
+  'dodger',
+  'heliotrope',
+  'violet',
+  'purple',
+  'rosein',
+  'red',
+  'gray',
+];
+
+const steps = Array.from({ length: 10 }, (_, i) =>
+  i === 0 ? '050' : (i * 100).toString()
+);
+
+export const ColorDisc: React.FC = () => {
+  return (
+    <div style={{}}>
+      {colors.map((color) => (
+        <IFlex key={color} gap={8}>
+          {steps.map((step) => (
+            <div
+              key={step}
+              style={{
+                width: '1em',
+                height: '1em',
+                backgroundColor: `rgb(var(--${color}-color-${step}) / 1)`,
+              }}
+            />
+          ))}
+        </IFlex>
+      ))}
+    </div>
+  );
+};
diff --git a/docs/widgets/index.tsx b/docs/widgets/index.tsx
new file mode 100644
index 00000000..e0fd7144
--- /dev/null
+++ b/docs/widgets/index.tsx
@@ -0,0 +1 @@
+export * from './color-disc';
diff --git a/rspress.config.ts b/rspress.config.ts
index 23dadde1..4017a14c 100644
--- a/rspress.config.ts
+++ b/rspress.config.ts
@@ -34,6 +34,7 @@ export default defineConfig({
   icon: './assets/favicon.svg',
   plugins: [pluginPreview()],
   globalUIComponents: [join(dir.docs, 'effects.tsx')],
+  route: { exclude: ['widgets/**/*'] },
   builderConfig: {
     source: {
       define: {