diff --git a/core/color/new-common.json b/core/color/new-common.json
new file mode 100644
index 00000000..e69de29b
diff --git a/core/color/new-dark.json b/core/color/new-dark.json
new file mode 100644
index 00000000..fa4535e1
--- /dev/null
+++ b/core/color/new-dark.json
@@ -0,0 +1,35 @@
+{
+  "color": {
+    "theme": {
+      "bg": {
+        "primary": "linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%)",
+        "secondary": "linear-gradient(180deg, #262626 0%, #0f0f0f 100%)",
+        "mob": {
+          "primary": "#000000",
+          "secondary": "#1a1a1a"
+        }
+      },
+      "surface": {
+        "neutral": {
+          "00": {
+            "default": "#ffffff00",
+            "hover": "#ffffff12",
+            "active": "#ffffff1c",
+            "disabled": "#ffffff1c"
+          },
+          "01": {
+            "default": "#ffffff1c",
+            "hover": "#ffffff33",
+            "active": "#ffffff1c",
+            "disabled": "#ffffff1c"
+          },
+          "02": {
+            "primary": "#262626",
+            "secondary": "#1a1a1a",
+            "tertiary": "#000000"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/core/color/new-light.json b/core/color/new-light.json
new file mode 100644
index 00000000..e69de29b
diff --git a/theme-data/common/common.json b/theme-data/common/common.json
index 5d245672..e818c942 100644
--- a/theme-data/common/common.json
+++ b/theme-data/common/common.json
@@ -2,47 +2,47 @@
   "theme": {
     "common": {
       "text": {
-        "white": "@color-white-alpha-95",
+        "white": "@color-white-alpha-95 @color-theme-content-text-neutral-primary-white",
         "gray": "@color-white-alpha-70",
-        "black": "@color-black-alpha-95",
-        "disabled": "@color-white-alpha-40",
+        "black": "@color-black-alpha-95 @color-theme-content-text-neutral-primary-black",
+        "disabled": "@color-white-alpha-40 @color-theme-content-text-neutral-disabled",
         "success": {
-          "normal": "@color-green-40",
-          "hover": "@color-green-20"
+          "normal": "@color-green-40 @color-theme-content-text-positive-default",
+          "hover": "@color-green-20 @color-theme-content-text-positive-hover"
         },
         "error": {
-          "normal": "@color-red-40",
-          "hover": "@color-red-20"
+          "normal": "@color-red-40 @color-theme-content-text-negative-default",
+          "hover": "@color-red-20 @color-theme-content-text-negative-hover"
         },
         "warning": {
-          "normal": "@color-yellow-40"
+          "normal": "@color-yellow-40 @color-theme-content-text-warning-default"
         },
         "secondary-light": "@color-white-alpha-70",
         "secondary-dark": "@color-black-alpha-60"
       },
       "overlay": {
         "primary": {
-          "normal": "@color-black-alpha-90"
+          "normal": "@color-black-alpha-90 @color-theme-surface-neutral-02"
         },
         "secondary": {
-          "normal": "@color-black-alpha-40"
+          "normal": "@color-black-alpha-40 @color-theme-surface-neutral-00"
         }
       },
       "button": {
         "primary": {
-          "normal": "@color-white-alpha-95",
-          "hover": "@color-white-alpha-80",
-          "pressed": "@color-white-alpha-70",
-          "disabled": "@color-white-alpha-20"
+          "normal": "@color-white-alpha-95 @color-theme-content-btn-neutral-primary-default",
+          "hover": "@color-white-alpha-80 @color-theme-content-btn-neutral-primary-hover",
+          "pressed": "@color-white-alpha-70 @color-theme-content-btn-neutral-primary-pressed",
+          "disabled": "@color-white-alpha-20 @color-theme-content-btn-neutral-primary-disabled"
         },
         "secondary": {
-          "normal": "@color-white-alpha-00",
-          "hover": "@color-white-alpha-07",          
-          "disabled": "@color-white-alpha-00",
+          "normal": "@color-white-alpha-00 @color-theme-content-btn-neutral-secondary-default",
+          "hover": "@color-white-alpha-07 @color-theme-content-btn-neutral-secondary-hover",
+          "disabled": "@color-white-alpha-00 @color-theme-content-btn-neutral-secondary-disabled",
           "active": {
-            "normal": "@color-white-alpha-20",
+            "normal": "@color-white-alpha-20 @color-theme-content-btn-neutral-secondary-active-default",
             "hover": "@color-white-alpha-30",
-            "pressed": "@color-white-alpha-40"
+            "pressed": "@color-white-alpha-40 @color-theme-content-btn-neutral-secondary-active-pressed"
           }
         },
         "secondary-dark": {
@@ -57,20 +57,20 @@
       },
       "outline": {
         "button": {
-          "normal": "@color-white-alpha-30"
+          "normal": "@color-white-alpha-30 @color-theme-border-neutral-01"
         },
         "primary": {
-          "normal": "@color-white-alpha-40"
+          "normal": "@color-white-alpha-40 @color-theme-border-neutral-02"
         },
         "input": {
-          "normal": "@color-white-alpha-50"
+          "normal": "@color-white-alpha-50 @color-theme-border-neutral-03"
         },
         "disabled": {
-          "normal": "@color-white-alpha-20"
+          "normal": "@color-white-alpha-20 @color-theme-border-neutral-00"
         },
         "closed-caption": {
           "secondary": {
-            "light": "@color-white-alpha-20",
+            "light": "@color-white-alpha-20 @color-theme-border-neutral-00",
             "dark": "@color-black-alpha-20"
           }
         }
@@ -80,57 +80,57 @@
           "normal": "@color-black-alpha-20"
         },
         "shareContent": {
-          "active": "@color-orange-60",
-          "inactive": "@color-gray-60",
-          "selected": "@color-green-40"
+          "active": "@color-orange-60 @color-theme-border-notice-00",
+          "inactive": "@color-gray-60 @color-theme-border-neutral-06",
+          "selected": "@color-green-40 @color-theme-border-positive-00"
         }
       },
       "background": {
         "solid": {
           "secondary-dark": "@color-gray-95",
-          "primary-light": "@color-white-alpha-100"
+          "primary-light": "@color-white-alpha-100 @color-theme-content-indicator-neutral-02"
         }
       },
       "touchbar": {
         "background": {
           "blue": {
-            "normal": "@color-blue-60",
-            "pressed": "@color-blue-80"
+            "normal": "@color-blue-60 @color-theme-content-macOS-blue-default",
+            "pressed": "@color-blue-80 @color-theme-content-macOS-blue-pressed"
           },
           "pink": {
-            "normal": "@color-pink-60",
-            "pressed": "@color-pink-80"
+            "normal": "@color-pink-60 @color-theme-content-macOS-pink-default",
+            "pressed": "@color-pink-80 @color-theme-content-macOS-pink-pressed"
           },
           "mint": {
-            "normal": "@color-mint-60",
-            "pressed": "@color-mint-80"
+            "normal": "@color-mint-60 @color-theme-content-macOS-red-default",
+            "pressed": "@color-mint-80 @color-theme-content-macOS-red-pressed"
           },
           "purple": {
-            "normal": "@color-purple-60",
-            "pressed": "@color-purple-80"
+            "normal": "@color-purple-60 @color-theme-content-macOS-purple-default",
+            "pressed": "@color-purple-80 @color-theme-content-macOS-purple-pressed"
           },
           "violet": {
-            "normal": "@color-violet-60",
-            "pressed": "@color-violet-80"
+            "normal": "@color-violet-60 @color-theme-content-macOS-violet-default",
+            "pressed": "@color-violet-80 @color-theme-content-macOS-violet-pressed"
           },
           "orange": {
-            "normal": "@color-orange-60",
-            "pressed": "@color-orange-80"
+            "normal": "@color-orange-60 @color-theme-content-macOS-orange-default",
+            "pressed": "@color-orange-80 @color-theme-content-macOS-orange-pressed"
           },
           "green": {
-            "normal": "@color-green-60",
-            "pressed": "@color-green-80"
+            "normal": "@color-green-60 @color-theme-content-macOS-green-default",
+            "pressed": "@color-green-80 @color-theme-content-macOS-green-pressed"
           },
           "red": {
-            "normal": "@color-red-60",
-            "pressed": "@color-red-80"
+            "normal": "@color-red-60 @color-theme-content-macOS-red-default",
+            "pressed": "@color-red-80 @color-theme-content-macOS-red-pressed"
           },
           "transparent": "@color-black-alpha-00"
         },
         "icon": {
-          "stable": "@color-green-50",
-          "attention": "@color-red-40",
-          "secure": "@color-blue-40"
+          "stable": "@color-green-50 @color-theme-content-macOS-green-icon",
+          "attention": "@color-red-40 @color-theme-content-macOS-red-icon",
+          "secure": "@color-blue-40 @color-theme-content-macOS-blue-icon"
         }
       }
     }
diff --git a/theme-data/dark/dark-additional.json b/theme-data/dark/dark-additional.json
index 824c7e58..bba2e875 100644
--- a/theme-data/dark/dark-additional.json
+++ b/theme-data/dark/dark-additional.json
@@ -3,153 +3,153 @@
     "text": {
       "team": {
         "cobalt": {
-          "normal": "@color-cobalt-40",
-          "hover": "@color-cobalt-40",
-          "active": "@color-cobalt-20"
+          "normal": "@color-cobalt-40 @color-theme-content-text-decorative-cobalt-default",
+          "hover": "@color-cobalt-40 @color-theme-content-text-decorative-cobalt-default",
+          "active": "@color-cobalt-20 @color-theme-content-text-decorative-cobalt-active"
         },
         "cyan": {
-          "normal": "@color-cyan-40",
-          "hover": "@color-cyan-40",
-          "active": "@color-cyan-20"
+          "normal": "@color-cyan-40 @color-theme-content-text-decorative-cyan-default",
+          "hover": "@color-cyan-40 @color-theme-content-text-decorative-cyan-default",
+          "active": "@color-cyan-20 @color-theme-content-text-decorative-cyan-active"
         },
         "mint": {
-          "normal": "@color-mint-40",
-          "hover": "@color-mint-40",
-          "active": "@color-mint-20"
+          "normal": "@color-mint-40 @color-theme-content-text-decorative-mint-default",
+          "hover": "@color-mint-40 @color-theme-content-text-decorative-mint-default",
+          "active": "@color-mint-20 @color-theme-content-text-decorative-mint-active"
         },
         "lime": {
-          "normal": "@color-lime-40",
-          "hover": "@color-lime-40",
-          "active": "@color-lime-20"
+          "normal": "@color-lime-40 @color-theme-content-text-decorative-lime-default",
+          "hover": "@color-lime-40 @color-theme-content-text-decorative-lime-default",
+          "active": "@color-lime-20 @color-theme-content-text-decorative-lime-active"
         },
         "gold": {
-          "normal": "@color-gold-40",
-          "hover": "@color-gold-40",
-          "active": "@color-gold-20"
+          "normal": "@color-gold-40 @color-theme-content-text-decorative-gold-default",
+          "hover": "@color-gold-40 @color-theme-content-text-decorative-gold-default",
+          "active": "@color-gold-20 @color-theme-content-text-decorative-gold-active"
         },
         "orange": {
-          "normal": "@color-orange-40",
-          "hover": "@color-orange-40",
-          "active": "@color-orange-20"
+          "normal": "@color-orange-40 @color-theme-content-text-notice-default",
+          "hover": "@color-orange-40 @color-theme-content-text-notice-default",
+          "active": "@color-orange-20 @color-theme-content-text-notice-active"
         },
         "pink": {
-          "normal": "@color-pink-40",
-          "hover": "@color-pink-40",
-          "active": "@color-pink-20"
+          "normal": "@color-pink-40 @color-theme-content-text-decorative-pink-default",
+          "hover": "@color-pink-40 @color-theme-content-text-decorative-pink-default",
+          "active": "@color-pink-20 @color-theme-content-text-decorative-pink-active"
         },
         "purple": {
-          "normal": "@color-purple-40",
-          "hover": "@color-purple-40",
-          "active": "@color-purple-20"
+          "normal": "@color-purple-40 @color-theme-content-text-decorative-purple-default",
+          "hover": "@color-purple-40 @color-theme-content-text-decorative-purple-default",
+          "active": "@color-purple-20 @color-theme-content-text-decorative-purple-active"
         },
         "violet": {
-          "normal": "@color-violet-40",
-          "hover": "@color-violet-40",
-          "active": "@color-violet-20"
+          "normal": "@color-violet-40 @color-theme-content-text-decorative-violet-default",
+          "hover": "@color-violet-40 @color-theme-content-text-decorative-violet-default",
+          "active": "@color-violet-20 @color-theme-content-text-decorative-violet-active"
         },
         "slate": {
-          "normal": "@color-slate-40",
-          "hover": "@color-slate-40",
-          "active": "@color-slate-20"
+          "normal": "@color-slate-40 @color-theme-content-text-decorative-slate-default",
+          "hover": "@color-slate-40 @color-theme-content-text-decorative-slate-default",
+          "active": "@color-slate-20 @color-theme-content-text-decorative-slate-active"
         }
       }
     },
     "background": {
       "label": {
         "cobalt": {
-          "normal": "@color-cobalt-90",
-          "hover": "@color-cobalt-80",
-          "active": "@color-cobalt-70"
+          "normal": "@color-cobalt-90 @color-theme-content-indicator-decorative-cobalt-03",
+          "hover": "@color-cobalt-80 @color-theme-content-indicator-decorative-cobalt-02",
+          "active": "@color-cobalt-70 @color-theme-content-indicator-decorative-cobalt-01"
         },
         "gold": {
-          "normal": "@color-gold-90",
-          "hover": "@color-gold-80",
-          "active": "@color-gold-70"
+          "normal": "@color-gold-90 @color-theme-content-indicator-decorative-gold-03",
+          "hover": "@color-gold-80 @color-theme-content-indicator-decorative-gold-02",
+          "active": "@color-gold-70 @color-theme-content-indicator-decorative-gold-01"
         },
         "lime": {
-          "normal": "@color-lime-90",
-          "hover": "@color-lime-80",
-          "active": "@color-lime-70"
+          "normal": "@color-lime-90 @color-theme-content-indicator-decorative-lime-03",
+          "hover": "@color-lime-80 @color-theme-content-indicator-decorative-lime-02",
+          "active": "@color-lime-70 @color-theme-content-indicator-decorative-lime-01"
         },
         "mint": {
-          "normal": "@color-mint-90",
-          "hover": "@color-mint-80",
-          "active": "@color-mint-70"
+          "normal": "@color-mint-90 @color-theme-content-indicator-decorative-mint-03",
+          "hover": "@color-mint-80 @color-theme-content-indicator-decorative-mint-02",
+          "active": "@color-mint-70 @color-theme-content-indicator-decorative-mint-01"
         },
         "orange": {
-          "normal": "@color-orange-90",
-          "hover": "@color-orange-80",
-          "active": "@color-orange-70"
+          "normal": "@color-orange-90 @color-theme-content-indicator-notice-03",
+          "hover": "@color-orange-80 @color-theme-content-indicator-notice-02",
+          "active": "@color-orange-70 @color-theme-content-indicator-notice-01"
         },
         "pink": {
-          "normal": "@color-pink-90",
-          "hover": "@color-pink-80",
-          "active": "@color-pink-70"
+          "normal": "@color-pink-90 @color-theme-content-indicator-decorative-pink-03",
+          "hover": "@color-pink-80 @color-theme-content-indicator-decorative-pink-02",
+          "active": "@color-pink-70 @color-theme-content-indicator-decorative-pink-01"
         },
         "purple": {
-          "normal": "@color-purple-90",
-          "hover": "@color-purple-80",
-          "active": "@color-purple-70"
+          "normal": "@color-purple-90 @color-theme-content-indicator-decorative-purple-03",
+          "hover": "@color-purple-80 @color-theme-content-indicator-decorative-purple-02",
+          "active": "@color-purple-70 @color-theme-content-indicator-decorative-purple-01"
         },
         "slate": {
-          "normal": "@color-slate-90",
-          "hover": "@color-slate-80",
-          "active": "@color-slate-70"
+          "normal": "@color-slate-90 @color-theme-content-indicator-decorative-slate-03",
+          "hover": "@color-slate-80 @color-theme-content-indicator-decorative-slate-02",
+          "active": "@color-slate-70 @color-theme-content-indicator-decorative-slate-01"
         },
         "violet": {
-          "normal": "@color-violet-90",
-          "hover": "@color-violet-80",
-          "active": "@color-violet-70"
+          "normal": "@color-violet-90 @color-theme-content-indicator-decorative-violet-03",
+          "hover": "@color-violet-80 @color-theme-content-indicator-decorative-violet-02",
+          "active": "@color-violet-70 @color-theme-content-indicator-decorative-violet-01"
         }
       },
       "common": {
-        "normal": "@color-white-alpha-100"
+        "normal": "@color-white-alpha-100 @color-theme-content-indicator-neutral-02"
       },
       "namelabel": {
-        "normal": "@color-black-alpha-50"
+        "normal": "@color-black-alpha-50 @color-theme-content-indicator-neutral-03"
       }
     },
     "gradientdivider": {
-      "normal": ["@color-white-alpha-00", "@color-white-alpha-20"],
-      "hover": ["@color-white-alpha-00", "@color-white-alpha-60"],
+      "normal": ["@color-white-alpha-00", "@color-white-alpha-20", "@color-theme-border-decorative-gradient-primary-default"],
+      "hover": ["@color-white-alpha-00", "@color-white-alpha-60", "@color-theme-border-decorative-gradient-primary-hover"],
       "error": {
-        "normal": ["@color-red-40*0", "@color-red-40*0.6"],
-        "hover": ["@color-red-40*0", "@color-red-40*0.9"]
+        "normal": ["@color-red-40*0", "@color-red-40*0.6", "@color-theme-border-decorative-gradient-negative-default"],
+        "hover": ["@color-red-40*0", "@color-red-40*0.9", "@color-theme-border-decorative-gradient-negative-hover"]
       },
       "warning": {
-        "normal": ["@color-yellow-40*0", "@color-yellow-40*0.6"],
-        "hover": ["@color-yellow-40*0", "@color-yellow-40*0.9"]
+        "normal": ["@color-yellow-40*0", "@color-yellow-40*0.6", "@color-theme-border-decorative-gradient-warning-default"],
+        "hover": ["@color-yellow-40*0", "@color-yellow-40*0.9", "@color-theme-border-decorative-gradient-warning-hover"]
       },
       "announce": {
-        "normal": ["@color-blue-40*0", "@color-blue-40*0.6"],
-        "hover": ["@color-blue-40*0", "@color-blue-40*0.9"]
+        "normal": ["@color-blue-40*0", "@color-blue-40*0.6", "@color-theme-border-decorative-gradient-accent-default"],
+        "hover": ["@color-blue-40*0", "@color-blue-40*0.9", "@color-theme-border-decorative-gradient-accent-hover"]
       }
     },
     "outline": {
       "label": {
-        "cobalt": "@color-cobalt-40",
-        "gold": "@color-gold-40",
-        "lime": "@color-lime-40",
-        "mint": "@color-mint-40",
-        "orange": "@color-orange-40",
-        "pink": "@color-pink-40",
-        "purple": "@color-purple-40",
-        "slate": "@color-slate-40",
-        "violet": "@color-violet-40"
+        "cobalt": "@color-cobalt-40 @color-theme-border-decorative-cobalt",
+        "gold": "@color-gold-40 @color-theme-border-decorative-gold",
+        "lime": "@color-lime-40 @color-theme-border-decorative-lime",
+        "mint": "@color-mint-40 @color-theme-border-decorative-mint",
+        "orange": "@color-orange-40 @color-theme-border-decorative-notice-00",
+        "pink": "@color-pink-40 @color-theme-border-decorative-pink",
+        "purple": "@color-purple-40 @color-theme-border-decorative-purple",
+        "slate": "@color-slate-40 @color-theme-border-decorative-slate",
+        "violet": "@color-violet-40 @color-theme-border-decorative-violet"
       }
     },
     "avatar": {
-      "default": "@color-gray-70",
-      "cobalt": "@color-cobalt-70",
+      "default": "@color-gray-70 @color-theme-content-indicator-neutral-01",
+      "cobalt": "@color-cobalt-70 @color-theme-content-decorative-cobalt-01",
       "cyan": "@color-cyan-70",
-      "gold": "@color-gold-70",
-      "lime": "@color-lime-70",
-      "mint": "@color-mint-70",
+      "gold": "@color-gold-70 @color-theme-content-decorative-gold-01",
+      "lime": "@color-lime-70 @color-theme-content-decorative-lime-01",
+      "mint": "@color-mint-70 @color-theme-content-decorative-mint-01",
       "orange": "@color-orange-70",
-      "pink": "@color-pink-70",
-      "purple": "@color-purple-70",
-      "slate": "@color-slate-70",
-      "violet": "@color-violet-70",
+      "pink": "@color-pink-70 @color-theme-content-decorative-pink-01",
+      "purple": "@color-purple-70 @color-theme-content-decorative-purple-01",
+      "slate": "@color-slate-70 @color-theme-content-decorative-slate-01",
+      "violet": "@color-violet-70 @color-theme-content-decorative-violet-01",
       "yellow": "@color-yellow-70"
     }
   }
diff --git a/theme-data/dark/dark-common.json b/theme-data/dark/dark-common.json
index cf9eb5cd..de3ea209 100644
--- a/theme-data/dark/dark-common.json
+++ b/theme-data/dark/dark-common.json
@@ -3,77 +3,77 @@
     "color": "@color-blue",
     "text": {
       "primary": {
-        "normal": "@color-white-alpha-95",
-        "disabled": "@color-white-alpha-40"
+        "normal": "@color-white-alpha-95 @color-theme-content-text-neutral-primary",
+        "disabled": "@color-white-alpha-40 @color-theme-content-text-neutral-disabled"
       },
       "inverted": {
         "normal": "@color-black-alpha-95",
         "disabled": "@color-black-alpha-50"
       },
       "secondary": {
-        "normal": "@color-white-alpha-70",
+        "normal": "@color-white-alpha-70 @color-theme-content-text-neutral-secondary",
         "inverted": {
           "normal": "@color-black-alpha-60"
         }
       },
       "error": {
-        "normal": "@color-red-40",
-        "hover": "@color-red-20",
-        "active": "@color-red-20"
+        "normal": "@color-red-40 @color-theme-content-text-negative-default",
+        "hover": "@color-red-20 @color-theme-content-text-negative-hover",
+        "active": "@color-red-20 @color-theme-content-text-negative-active"
       },
       "success": {
-        "normal": "@color-green-40",
-        "hover": "@color-green-20",
-        "active": "@color-green-20"
+        "normal": "@color-green-40 @color-theme-content-text-positive-default",
+        "hover": "@color-green-20  @color-theme-content-text-positive-hover",
+        "active": "@color-green-20  @color-theme-content-text-positive-active"
       },
       "warning": {
-        "normal": "@color-yellow-40",
-        "hover": "@color-yellow-20",
-        "active": "@color-yellow-20"
+        "normal": "@color-yellow-40 @color-theme-content-text-warning-default",
+        "hover": "@color-yellow-20 @color-theme-content-text-warning-hover",
+        "active": "@color-yellow-20 @color-theme-content-text-warning-active"
       },
       "highlight": "@theme-color-80",
       "accent": {
-        "normal": "@theme-color-40",
-        "hover": "@theme-color-20",
-        "active": "@theme-color-20"
+        "normal": "@theme-color-40 @color-theme-content-text-accent-default",
+        "hover": "@theme-color-20 @color-theme-content-text-accent-hover",
+        "active": "@theme-color-20 @color-theme-content-text-accent-active"
       },
       "teamdefault": {
-        "normal": "@color-white-alpha-70",
-        "hover": "@color-white-alpha-70",
-        "active": "@color-white-alpha-95"
+        "normal": "@color-white-alpha-70 @color-theme-content-text-neutral-secondary",
+        "hover": "@color-white-alpha-70 @color-theme-content-text-neutral-secondary",
+        "active": "@color-white-alpha-95 @color-theme-content-text-neutral-primary"
       },
       "alert": {
         "purple": {
-          "normal": "@color-purple-40",
-          "hover": "@color-purple-20",
-          "active": "@color-purple-20"
+          "normal": "@color-purple-40 @color-theme-content-text-decorative-purple-default",
+          "hover": "@color-purple-20 @color-theme-content-text-decorative-purple-active",
+          "active": "@color-purple-20 @color-theme-content-text-decorative-purple-active"
         },
         "orange": {
-          "normal": "@color-orange-30",
-          "hover": "@color-orange-10",
-          "active": "@color-orange-10"
+          "normal": "@color-orange-30 @color-theme-content-text-notice-default",
+          "hover": "@color-orange-10 @color-theme-content-text-notice-active",
+          "active": "@color-orange-10 @color-theme-content-text-notice-active"
         }
       }
     },
     "background": {
       "primary": {
-        "ghost": "@color-white-alpha-00",
-        "hover": "@color-white-alpha-07",
-        "active": "@color-white-alpha-11",
-        "disabled": "@color-white-alpha-11"
+        "ghost": "@color-white-alpha-00 @color-theme-surface-neutral-00-default",
+        "hover": "@color-white-alpha-07 @color-theme-surface-neutral-00-hover",
+        "active": "@color-white-alpha-11 @color-theme-surface-neutral-00-active",
+        "disabled": "@color-white-alpha-11 @color-theme-surface-neutral-00-disabled"
       },
       "solid": {
         "primary": {
           "normal": "@color-black-alpha-100"
         },
         "secondary": {
-          "normal": "@color-gray-95"
+          "normal": "@color-gray-95 @color-theme-content-indicator-neutral-03"
         },
         "tertiary": {
-          "normal": "@color-gray-90"
+          "normal": "@color-gray-90 @color-theme-content-indicator-neutral-02"
         },
         "quaternary": {
-          "normal": "@color-gray-80"
+          "normal": "@color-gray-80 @color-theme-content-indicator-neutral-01"
         }
       },
       "secondary": {
@@ -86,44 +86,44 @@
         "normal": "@theme-color-60"
       },
       "gradient": {
-        "primary": "@theme-gradation-primary",
-        "secondary": "@theme-gradation-secondary"
+        "primary": "@theme-gradation-primary @color-theme-bg-primary",
+        "secondary": "@theme-gradation-secondary @color-theme-bg-primary"
       },
       "alert": {
         "default": {
-          "normal": "@theme-background-solid-tertiary-normal",
-          "hover": "@theme-background-solid-tertiary-normal",
-          "active": "@color-gray-80"
+          "normal": "@theme-background-solid-tertiary-normal @color-theme-content-indicator-neutral-02",
+          "hover": "@theme-background-solid-tertiary-normal @color-theme-content-indicator-neutral-02",
+          "active": "@color-gray-80 @color-theme-content-indicator-neutral-01"
         },
         "success": {
-          "normal": "@color-green-90",
-          "hover": "@color-green-90",
-          "active": "@color-green-80"
+          "normal": "@color-green-90 @color-theme-surface-positive-default",
+          "hover": "@color-green-90 @color-theme-surface-positive-default",
+          "active": "@color-green-80 @color-theme-surface-positive-active"
         },
         "warning": {
-          "normal": "@color-yellow-90",
-          "hover": "@color-yellow-90",
-          "active": "@color-yellow-80"
+          "normal": "@color-yellow-90 @color-theme-content-indicator-warning-02",
+          "hover": "@color-yellow-90 @color-theme-content-indicator-warning-02",
+          "active": "@color-yellow-80 @color-theme-content-indicator-warning-01"
         },
         "error": {
-          "normal": "@color-red-90",
-          "hover": "@color-red-90",
-          "active": "@color-red-80"
+          "normal": "@color-red-90 @color-theme-surface-negative-default",
+          "hover": "@color-red-90 @color-theme-surface-negative-default",
+          "active": "@color-red-80 @color-theme-surface-negative-active"
         },
         "theme": {
-          "normal": "@theme-color-90",
-          "hover": "@theme-color-90",
-          "active": "@theme-color-80"
+          "normal": "@theme-color-90 @color-theme-content-indicator-accent-03",
+          "hover": "@theme-color-90 @color-theme-content-indicator-accent-03",
+          "active": "@theme-color-80 @color-theme-content-indicator-accent-02"
         },
         "purple": {
-          "normal": "@color-purple-90",
-          "hover": "@color-purple-90",
-          "active": "@color-purple-80"
+          "normal": "@color-purple-90 @color-theme-content-indicator-decorative-purple-03",
+          "hover": "@color-purple-90 @color-theme-content-indicator-decorative-purple-03",
+          "active": "@color-purple-80 @color-theme-content-indicator-decorative-purple-02"
         },
         "orange": {
-          "normal": "@color-orange-90",
-          "hover": "@color-orange-90",
-          "active": "@color-orange-80"
+          "normal": "@color-orange-90 @color-theme-content-indicator-notice-03",
+          "hover": "@color-orange-90 @color-theme-content-indicator-notice-03",
+          "active": "@color-orange-80 @color-theme-content-indicator-notice-02"
         }
       }
     },
@@ -132,20 +132,20 @@
         "normal": "none"
       },
       "primary": {
-        "normal": "@color-white-alpha-95",
-        "hover": "@color-white-alpha-80",
-        "pressed": "@color-white-alpha-70",
-        "disabled": "@color-white-alpha-20"
+        "normal": "@color-white-alpha-95 @color-theme-content-btn-neutral-primary-default",
+        "hover": "@color-white-alpha-80 @color-theme-content-btn-neutral-primary-hover",
+        "pressed": "@color-white-alpha-70 @color-theme-content-btn-neutral-primary-pressed",
+        "disabled": "@color-white-alpha-20 @color-theme-content-btn-neutral-primary-disabled"
       },
       "secondary": {
-        "normal": "@color-white-alpha-00",
-        "hover": "@color-white-alpha-07",
-        "pressed": "@color-white-alpha-20",
-        "disabled": "@color-white-alpha-00",
+        "normal": "@color-white-alpha-00 @color-theme-content-btn-neutral-secondary-default",
+        "hover": "@color-white-alpha-07 @color-theme-content-btn-neutral-secondary-hover",
+        "pressed": "@color-white-alpha-20 @color-theme-content-btn-neutral-secondary-pressed",
+        "disabled": "@color-white-alpha-00 @color-theme-content-btn-neutral-secondary-disabled",
         "active": {
-          "normal": "@color-white-alpha-20",
-          "hover": "@color-white-alpha-30",
-          "pressed": "@color-white-alpha-40"
+          "normal": "@color-white-alpha-20 @color-theme-content-btn-neutral-secondary-active-default",
+          "hover": "@color-white-alpha-30 @color-theme-content-btn-neutral-secondary-active-default",
+          "pressed": "@color-white-alpha-40 @color-theme-content-btn-neutral-secondary-active-pressed"
         }
       },
       "inverted": {
@@ -154,54 +154,54 @@
         "pressed": "@color-gray-80"
       },
       "join": {
-        "normal": "@color-green-60",
-        "hover": "@color-green-70",
-        "pressed": "@color-green-80"
+        "normal": "@color-green-60 @color-theme-content-btn-positive-default",
+        "hover": "@color-green-70 @color-theme-content-btn-positive-hover",
+        "pressed": "@color-green-80 @color-theme-content-btn-positive-pressed"
       },
       "cancel": {
-        "normal": "@color-red-60",
-        "hover": "@color-red-70",
-        "pressed": "@color-red-80"
+        "normal": "@color-red-60 @color-theme-content-btn-negative-default",
+        "hover": "@color-red-70 @color-theme-content-btn-negative-hover",
+        "pressed": "@color-red-80 @color-theme-content-btn-negative-pressed"
       },
       "accent": {
-        "normal": "@theme-color-60",
-        "hover": "@theme-color-70",
-        "pressed": "@theme-color-80"
+        "normal": "@theme-color-60 @color-theme-content-btn-accent-default",
+        "hover": "@theme-color-70 @color-theme-content-btn-accent-hover",
+        "pressed": "@theme-color-80 @color-theme-content-btn-accent-pressed"
       }
     },
     "outline": {
       "primary": {
-        "normal": "@color-white-alpha-40"
+        "normal": "@color-white-alpha-40 @color-theme-border-neutral-02"
       },
       "theme": {
-        "normal": "@theme-color-40"
+        "normal": "@theme-color-40 @color-theme-border-accent-00"
       },
       "secondary": {
-        "normal": "@color-white-alpha-20"
+        "normal": "@color-white-alpha-20 @color-theme-border-neutral-00"
       },
       "input": {
-        "normal": "@color-white-alpha-50",
-        "active": "@color-white-alpha-90"
+        "normal": "@color-white-alpha-50 @color-theme-border-neutral-03",
+        "active": "@color-white-alpha-90 @color-theme-border-neutral-04"
       },
       "button": {
-        "normal": "@color-white-alpha-30"
+        "normal": "@color-white-alpha-30 @color-theme-border-neutral-01"
       },
       "join": {
-        "normal": "@color-green-40"
+        "normal": "@color-green-40 @color-theme-border-positive-00"
       },
       "cancel": {
-        "normal": "@color-red-40"
+        "normal": "@color-red-40 @color-theme-border-negative-00"
       },
       "disabled": {
-        "normal": "@color-white-alpha-20"
+        "normal": "@color-white-alpha-20 @color-theme-border-neutral-00"
       },
       "gradient": {
-        "active": ["@color-cobalt-70", "@color-cyan-40", "@color-green-50"]
+        "active": ["@color-cobalt-70", "@color-cyan-40", "@color-green-50", "@color-theme-border-decorative-gradient-device"]
       },
       "share": {
         "selected": "@color-green-50",
         "active": "@color-orange-50",
-        "inactive": "@color-gray-50"
+        "inactive": "@color-gray-50 @color-theme-border-neutral-04"
       },
       "overlay": {
         "normal": "@color-gray-40"
@@ -212,17 +212,17 @@
     },
     "control": {
       "active": {
-        "normal": "@theme-color-40",
-        "hover": "@theme-color-50",
-        "pressed": "@theme-color-60",
-        "active": "@theme-color-60",
-        "disabled": "@theme-color-80"
+        "normal": "@theme-color-40 @color-theme-content-control-accent-active-default",
+        "hover": "@theme-color-50 @color-theme-content-control-accent-active-hover",
+        "pressed": "@theme-color-60 @color-theme-content-control-accent-active-pressed",
+        "active": "@theme-color-60 @color-theme-content-control-accent-active-pressed",
+        "disabled": "@theme-color-80 @color-theme-content-control-accent-active-disabled"
       },
       "inactive": {
-        "normal": "@color-white-alpha-20",
-        "hover": "@color-white-alpha-30",
-        "pressed": "@color-white-alpha-40",
-        "disabled": "@color-white-alpha-11"
+        "normal": "@color-white-alpha-20 @color-theme-content-control-neutral-inactive-default",
+        "hover": "@color-white-alpha-30 @color-theme-content-control-neutral-inactive-hover",
+        "pressed": "@color-white-alpha-40 @color-theme-content-control-neutral-inactive-pressed",
+        "disabled": "@color-white-alpha-11 @color-theme-content-control-neutral-inactive-disabled"
       }
     },
     "overlay": {
@@ -231,12 +231,12 @@
       }
     },
     "indicator": {
-      "unstable": "@color-orange-50",
-      "attention": "@color-red-50",
-      "stable": "@color-green-50",
-      "locked": "@color-gray-50",
-      "caution": "@color-yellow-50",
-      "secure": "@color-blue-50"
+      "unstable": "@color-orange-50 @color-theme-content-indicator-notice-00",
+      "attention": "@color-red-50 @color-theme-content-indicator-negative-00",
+      "stable": "@color-green-50 @color-theme-content-indicator-positive-00",
+      "locked": "@color-gray-50 @color-theme-content-indicator-neutral-00",
+      "caution": "@color-yellow-50 @color-theme-content-indicator-warning-00",
+      "secure": "@color-blue-50 @color-theme-content-indicator-accent-00"
     },
     "whiteboard": {
       "stickyNote": {
@@ -249,48 +249,48 @@
     },
     "scrollbar": {
       "button": {
-        "normal": "@color-white-alpha-20",
-        "hover": "@color-white-alpha-30",
-        "pressed": "@color-white-alpha-40"
+        "normal": "@color-white-alpha-20 @color-theme-content-scrollbar-thumb-default",
+        "hover": "@color-white-alpha-30 @color-theme-content-scrollbar-thumb-hover",
+        "pressed": "@color-white-alpha-40 @color-theme-content-scrollbar-thumb-pressed"
       },
       "arrow": {
-        "normal": "@color-white-alpha-70",
+        "normal": "@color-white-alpha-70 @color-theme-content-text-neutral-secondary",
         "background": {
-          "normal": "@color-white-alpha-00",
-          "hover": "@color-white-alpha-11",
-          "pressed": "@color-white-alpha-20"
+          "normal": "@color-white-alpha-00 @color-theme-content-scrollbar-bg-default",
+          "hover": "@color-white-alpha-11 @color-theme-content-scrollbar-bg-hover",
+          "pressed": "@color-white-alpha-20 @color-theme-content-scrollbar-bg-pressed"
         }
       },
       "background": {
         "secondary": {
-          "ghost": "@color-white-alpha-00",
-          "normal": "@color-white-alpha-11"
+          "ghost": "@color-white-alpha-00 @color-theme-content-scrollbar-bg-default",
+          "normal": "@color-white-alpha-11 @color-theme-content-scrollbar-bg-hover"
         }
       }
     },
     "illustrations": {
       "empty": {
-        "primary": ["@color-lime-40", "@color-cobalt-50"],
-        "secondary": ["@color-cobalt-50", "@color-violet-60"]
+        "primary": ["@color-lime-40", "@color-cobalt-50", "@color-theme-illustration-empty-00"],
+        "secondary": ["@color-cobalt-50", "@color-violet-60", "@color-theme-illustration-empty-01"]
       },
       "onboarding": {
-        "primary": ["@color-yellow-30", "@color-lime-40"],
-        "secondary": ["@color-red-50", "@color-violet-60"],
-        "tertiary": ["@color-yellow-30", "@color-orange-50"],
-        "quartenary": ["@color-lime-40", "@color-cobalt-50"],
-        "quinary": ["@color-cobalt-50", "@color-violet-60"]
-      },
-      "success": ["@color-green-40", "@color-lime-40"],
-      "error": ["@color-pink-50", "@color-red-60"],
-      "default": "@color-white-alpha-100"
+        "primary": ["@color-yellow-30", "@color-lime-40", "@color-theme-illustration-onboarding-00"],
+        "secondary": ["@color-red-50", "@color-violet-60", "@color-theme-illustration-onboarding-01"],
+        "tertiary": ["@color-yellow-30", "@color-orange-50", "@color-theme-illustration-onboarding-02"],
+        "quartenary": ["@color-lime-40", "@color-cobalt-50", "@color-theme-illustration-onboarding-03"],
+        "quinary": ["@color-cobalt-50", "@color-violet-60", "@color-theme-illustration-onboarding-04"]
+      },
+      "success": ["@color-green-40", "@color-lime-40", "@color-theme-illustration-positive"],
+      "error": ["@color-pink-50", "@color-red-60", "@color-theme-illustration-negative"],
+      "default": "@color-white-alpha-100 @color-theme-illustration-default"
     },
     "globaltint": {
-      "normal": "@color-blue-50",
-      "selected": "@color-blue-60"
+      "normal": "@color-blue-50 @color-theme-surface-accent-mobile-default",
+      "selected": "@color-blue-60 @color-theme-surface-accent-mobile-selected"
     },
     "groupedbackground": {
       "tertiary": {
-        "normal": "@color-gray-90"
+        "normal": "@color-gray-90 @color-theme-surface-02-primary"
       },
       "quaternary": {
         "normal": "@color-gray-80"
diff --git a/theme-data/light/light-additional.json b/theme-data/light/light-additional.json
index 3c271f74..600c8870 100644
--- a/theme-data/light/light-additional.json
+++ b/theme-data/light/light-additional.json
@@ -3,153 +3,153 @@
     "text": {
       "team": {
         "cobalt": {
-          "normal": "@color-cobalt-70",
-          "hover": "@color-cobalt-70",
-          "active": "@color-cobalt-90"
+          "normal": "@color-cobalt-70 @color-theme-content-text-decorative-cobalt-default",
+          "hover": "@color-cobalt-70 @color-theme-content-text-decorative-cobalt-default",
+          "active": "@color-cobalt-90 @color-theme-content-text-decorative-cobalt-active"
         },
         "cyan": {
-          "normal": "@color-cyan-70",
-          "hover": "@color-cyan-70",
-          "active": "@color-cyan-90"
+          "normal": "@color-cyan-70 @color-theme-content-text-decorative-cyan-default",
+          "hover": "@color-cyan-70 @color-theme-content-text-decorative-cyan-default",
+          "active": "@color-cyan-90 @color-theme-content-text-decorative-cyan-active"
         },
         "mint": {
-          "normal": "@color-mint-70",
-          "hover": "@color-mint-70",
-          "active": "@color-mint-90"
+          "normal": "@color-mint-70 @color-theme-content-text-decorative-mint-default",
+          "hover": "@color-mint-70 @color-theme-content-text-decorative-mint-default",
+          "active": "@color-mint-90 @color-theme-content-text-decorative-mint-active"
         },
         "lime": {
-          "normal": "@color-lime-70",
-          "hover": "@color-lime-70",
-          "active": "@color-lime-90"
+          "normal": "@color-lime-70 @color-theme-content-text-decorative-lime-default",
+          "hover": "@color-lime-70 @color-theme-content-text-decorative-lime-default",
+          "active": "@color-lime-90 @color-theme-content-text-decorative-lime-active"
         },
         "gold": {
-          "normal": "@color-gold-70",
-          "hover": "@color-gold-70",
-          "active": "@color-gold-90"
+          "normal": "@color-gold-70 @color-theme-content-text-decorative-gold-default",
+          "hover": "@color-gold-70 @color-theme-content-text-decorative-gold-default",
+          "active": "@color-gold-90 @color-theme-content-text-decorative-gold-active"
         },
         "orange": {
-          "normal": "@color-orange-70",
-          "hover": "@color-orange-70",
-          "active": "@color-orange-90"
+          "normal": "@color-orange-70 @color-theme-content-text-notice-default",
+          "hover": "@color-orange-70 @color-theme-content-text-notice-default",
+          "active": "@color-orange-90 @color-theme-content-text-notice-active"
         },
         "pink": {
-          "normal": "@color-pink-70",
-          "hover": "@color-pink-70",
-          "active": "@color-pink-90"
+          "normal": "@color-pink-70 @color-theme-content-text-decorative-pink-default",
+          "hover": "@color-pink-70 @color-theme-content-text-decorative-pink-default",
+          "active": "@color-pink-90 @color-theme-content-text-decorative-pink-active"
         },
         "purple": {
-          "normal": "@color-purple-70",
-          "hover": "@color-purple-70",
-          "active": "@color-purple-90"
+          "normal": "@color-purple-70 @color-theme-content-text-decorative-purple-default",
+          "hover": "@color-purple-70 @color-theme-content-text-decorative-purple-default",
+          "active": "@color-purple-90 @color-theme-content-text-decorative-purple-active"
         },
         "violet": {
-          "normal": "@color-violet-70",
-          "hover": "@color-violet-70",
-          "active": "@color-violet-90"
+          "normal": "@color-violet-70 @color-theme-content-text-decorative-violet-default",
+          "hover": "@color-violet-70 @color-theme-content-text-decorative-violet-default",
+          "active": "@color-violet-90 @color-theme-content-text-decorative-violet-active"
         },
         "slate": {
-          "normal": "@color-slate-70",
-          "hover": "@color-slate-70",
-          "active": "@color-slate-90"
+          "normal": "@color-slate-70 @color-theme-content-text-decorative-slate-default",
+          "hover": "@color-slate-70 @color-theme-content-text-decorative-slate-default",
+          "active": "@color-slate-90 @color-theme-content-text-decorative-slate-active"
         }
       }
     },
     "background": {
       "label": {
         "cobalt": {
-          "normal": "@color-cobalt-10",
-          "hover": "@color-cobalt-20",
-          "active": "@color-cobalt-30"
+          "normal": "@color-cobalt-10 @color-theme-content-indicator-decorative-cobalt-03",
+          "hover": "@color-cobalt-20 @color-theme-content-indicator-decorative-cobalt-02",
+          "active": "@color-cobalt-30 @color-theme-content-indicator-decorative-cobalt-01"
         },
         "gold": {
-          "normal": "@color-gold-10",
-          "hover": "@color-gold-20",
-          "active": "@color-gold-30"
+          "normal": "@color-gold-10 @color-theme-content-indicator-decorative-gold-03",
+          "hover": "@color-gold-20 @color-theme-content-indicator-decorative-gold-02",
+          "active": "@color-gold-30 @color-theme-content-indicator-decorative-gold-01"
         },
         "lime": {
-          "normal": "@color-lime-10",
-          "hover": "@color-lime-20",
-          "active": "@color-lime-30"
+          "normal": "@color-lime-10 @color-theme-content-indicator-decorative-lime-03",
+          "hover": "@color-lime-20 @color-theme-content-indicator-decorative-lime-02",
+          "active": "@color-lime-30 @color-theme-content-indicator-decorative-lime-01"
         },
         "mint": {
-          "normal": "@color-mint-10",
-          "hover": "@color-mint-20",
-          "active": "@color-mint-30"
+          "normal": "@color-mint-10 @color-theme-content-indicator-decorative-mint-03",
+          "hover": "@color-mint-20 @color-theme-content-indicator-decorative-mint-02",
+          "active": "@color-mint-30 @color-theme-content-indicator-decorative-mint-01"
         },
         "orange": {
-          "normal": "@color-orange-10",
-          "hover": "@color-orange-20",
-          "active": "@color-orange-30"
+          "normal": "@color-orange-10 @color-theme-content-indicator-notice-03",
+          "hover": "@color-orange-20 @color-theme-content-indicator-notice-02",
+          "active": "@color-orange-30 @color-theme-content-indicator-notice-01"
         },
         "pink": {
-          "normal": "@color-pink-10",
-          "hover": "@color-pink-20",
-          "active": "@color-pink-30"
+          "normal": "@color-pink-10 @color-theme-content-indicator-decorative-pink-03",
+          "hover": "@color-pink-20 @color-theme-content-indicator-decorative-pink-02",
+          "active": "@color-pink-30 @color-theme-content-indicator-decorative-pink-01"
         },
         "purple": {
-          "normal": "@color-purple-10",
-          "hover": "@color-purple-20",
-          "active": "@color-purple-30"
+          "normal": "@color-purple-10 @color-theme-content-indicator-decorative-purple-03",
+          "hover": "@color-purple-20 @color-theme-content-indicator-decorative-purple-02",
+          "active": "@color-purple-30 @color-theme-content-indicator-decorative-purple-01"
         },
         "slate": {
-          "normal": "@color-slate-10",
-          "hover": "@color-slate-20",
-          "active": "@color-slate-30"
+          "normal": "@color-slate-10 @color-theme-content-indicator-decorative-slate-03",
+          "hover": "@color-slate-20 @color-theme-content-indicator-decorative-slate-02",
+          "active": "@color-slate-30 @color-theme-content-indicator-decorative-slate-01"
         },
         "violet": {
-          "normal": "@color-violet-10",
-          "hover": "@color-violet-20",
-          "active": "@color-violet-30"
+          "normal": "@color-violet-10 @color-theme-content-indicator-decorative-violet-03",
+          "hover": "@color-violet-20 @color-theme-content-indicator-decorative-violet-02",
+          "active": "@color-violet-30 @color-theme-content-indicator-decorative-violet-01"
         }
       },
       "common": {
-        "normal": "@color-white-alpha-100"
+        "normal": "@color-white-alpha-100 @color-theme-content-indicator-neutral-02"
       },
       "namelabel": {
-        "normal": "@color-black-alpha-50"
+        "normal": "@color-black-alpha-50 @color-theme-content-indicator-neutral-03"
       }
     },
     "gradientdivider": {
-      "normal": ["@color-black-alpha-00", "@color-black-alpha-20"],
-      "hover": ["@color-black-alpha-00", "@color-black-alpha-60"],
+      "normal": ["@color-black-alpha-00", "@color-black-alpha-20", "@color-theme-border-decorative-gradient-primary-default"],
+      "hover": ["@color-black-alpha-00", "@color-black-alpha-60", "@color-theme-border-decorative-gradient-primary-hover"],
       "error": {
-        "normal": ["@color-red-70*0", "@color-red-70*0.6"],
-        "hover": ["@color-red-70*0", "@color-red-70*0.9"]
+        "normal": ["@color-red-70*0", "@color-red-70*0.6", "@color-theme-border-decorative-gradient-negative-default"],
+        "hover": ["@color-red-70*0", "@color-red-70*0.9", "@color-theme-border-decorative-gradient-negative-hover"]
       },
       "warning": {
-        "normal": ["@color-yellow-70*0", "@color-yellow-70*0.6"],
-        "hover": ["@color-yellow-70*0", "@color-yellow-70*0.9"]
+        "normal": ["@color-yellow-70*0", "@color-yellow-70*0.6", "@color-theme-border-decorative-gradient-warning-default"],
+        "hover": ["@color-yellow-70*0", "@color-yellow-70*0.9", "@color-theme-border-decorative-gradient-warning-hover"]
       },
       "announce": {
-        "normal": ["@color-blue-70*0", "@color-blue-70*0.6"],
-        "hover": ["@color-blue-70*0", "@color-blue-70*0.9"]
+        "normal": ["@color-blue-70*0", "@color-blue-70*0.6", "@color-theme-border-decorative-gradient-accent-default"],
+        "hover": ["@color-blue-70*0", "@color-blue-70*0.9", "@color-theme-border-decorative-gradient-accent-hover"]
       }
     },
     "outline": {
       "label": {
-        "cobalt": "@color-cobalt-40",
-        "gold": "@color-gold-40",
-        "lime": "@color-lime-40",
-        "mint": "@color-mint-40",
-        "orange": "@color-orange-40",
-        "pink": "@color-pink-40",
-        "purple": "@color-purple-40",
-        "slate": "@color-slate-40",
-        "violet": "@color-violet-40"
+        "cobalt": "@color-cobalt-40 @color-theme-border-decorative-cobalt",
+        "gold": "@color-gold-40 @color-theme-border-decorative-gold",
+        "lime": "@color-lime-40 @color-theme-border-decorative-lime",
+        "mint": "@color-mint-40 @color-theme-border-decorative-mint",
+        "orange": "@color-orange-40 @color-theme-border-decorative-notice-00",
+        "pink": "@color-pink-40 @color-theme-border-decorative-pink",
+        "purple": "@color-purple-40 @color-theme-border-decorative-purple",
+        "slate": "@color-slate-40 @color-theme-border-decorative-slate",
+        "violet": "@color-violet-40 @color-theme-border-decorative-violet"
       }
     },
     "avatar": {
-      "default": "@color-gray-70",
-      "cobalt": "@color-cobalt-70",
+      "default": "@color-gray-70 @color-theme-content-indicator-neutral-01",
+      "cobalt": "@color-cobalt-70 @color-theme-content-decorative-cobalt-01",
       "cyan": "@color-cyan-70",
-      "gold": "@color-gold-70",
-      "lime": "@color-lime-70",
-      "mint": "@color-mint-70",
+      "gold": "@color-gold-70 @color-theme-content-decorative-gold-01",
+      "lime": "@color-lime-70 @color-theme-content-decorative-lime-01",
+      "mint": "@color-mint-70 @color-theme-content-decorative-mint-01",
       "orange": "@color-orange-70",
-      "pink": "@color-pink-70",
-      "purple": "@color-purple-70",
-      "slate": "@color-slate-70",
-      "violet": "@color-violet-70",
+      "pink": "@color-pink-70 @color-theme-content-decorative-pink-01",
+      "purple": "@color-purple-70 @color-theme-content-decorative-purple-01",
+      "slate": "@color-slate-70 @color-theme-content-decorative-slate-01",
+      "violet": "@color-violet-70 @color-theme-content-decorative-violet-01",
       "yellow": "@color-yellow-70"
     }
   }
diff --git a/theme-data/light/light-common.json b/theme-data/light/light-common.json
index 6d4ed8d3..106b3118 100644
--- a/theme-data/light/light-common.json
+++ b/theme-data/light/light-common.json
@@ -3,77 +3,77 @@
     "color": "@color-blue",
     "text": {
       "primary": {
-        "normal": "@color-black-alpha-95",
-        "disabled": "@color-black-alpha-40"
+        "normal": "@color-black-alpha-95 @color-theme-content-text-neutral-primary",
+        "disabled": "@color-black-alpha-40 @color-theme-content-text-neutral-disabled"
       },
       "inverted": {
         "normal": "@color-white-alpha-95",
         "disabled": "@color-white-alpha-80"
       },
       "secondary": {
-        "normal": "@color-black-alpha-70",
+        "normal": "@color-black-alpha-70 @color-theme-content-text-neutral-secondary",
         "inverted": {
           "normal": "@color-white-alpha-70"
         }
       },
       "error": {
-        "normal": "@color-red-70",
-        "hover": "@color-red-90",
-        "active": "@color-red-90"
+        "normal": "@color-red-70 @color-theme-content-text-negative-default",
+        "hover": "@color-red-90 @color-theme-content-text-negative-hover",
+        "active": "@color-red-90 @color-theme-content-text-negative-active"
       },
       "success": {
-        "normal": "@color-green-70",
-        "hover": "@color-green-90",
-        "active": "@color-green-90"
+        "normal": "@color-green-70 @color-theme-content-text-positive-default",
+        "hover": "@color-green-90 @color-theme-content-text-positive-hover",
+        "active": "@color-green-90 @color-theme-content-text-positive-active"
       },
       "warning": {
-        "normal": "@color-yellow-70",
-        "hover": "@color-yellow-90",
-        "active": "@color-yellow-90"
+        "normal": "@color-yellow-70 @color-theme-content-text-warning-default",
+        "hover": "@color-yellow-90 @color-theme-content-text-warning-hover",
+        "active": "@color-yellow-90 @color-theme-content-text-warning-active"
       },
       "highlight": "@theme-color-20",
       "accent": {
-        "normal": "@theme-color-70",
-        "hover": "@theme-color-90",
-        "active": "@theme-color-90"
+        "normal": "@theme-color-70 @color-theme-content-text-accent-default",
+        "hover": "@theme-color-90 @color-theme-content-text-accent-hover",
+        "active": "@theme-color-90 @color-theme-content-text-accent-active"
       },
       "teamdefault": {
-        "normal": "@color-black-alpha-70",
-        "hover": "@color-black-alpha-70",
-        "active": "@color-black-alpha-95"
+        "normal": "@color-black-alpha-70 @color-theme-content-text-neutral-secondary",
+        "hover": "@color-black-alpha-70 @color-theme-content-text-neutral-secondary",
+        "active": "@color-black-alpha-95 @color-theme-content-text-neutral-primary"
       },
       "alert": {
         "purple": {
-          "normal": "@color-purple-70",
-          "hover": "@color-purple-90",
-          "active": "@color-purple-90"
+          "normal": "@color-purple-70 @color-theme-content-text-decorative-purple-default",
+          "hover": "@color-purple-90 @color-theme-content-text-decorative-purple-active",
+          "active": "@color-purple-90 @color-theme-content-text-decorative-purple-active"
         },
         "orange": {
-          "normal": "@color-orange-70",
-          "hover": "@color-orange-90",
-          "active": "@color-orange-90"
+          "normal": "@color-orange-70 @color-theme-content-text-notice-default",
+          "hover": "@color-orange-90 @color-theme-content-text-notice-active",
+          "active": "@color-orange-90 @color-theme-content-text-notice-active"
         }
       }
     },
     "background": {
       "primary": {
-        "ghost": "@color-white-alpha-00",
-        "hover": "@color-black-alpha-07",
-        "active": "@color-black-alpha-11",
-        "disabled": "@color-black-alpha-11"
+        "ghost": "@color-white-alpha-00 @color-theme-surface-neutral-00-default",
+        "hover": "@color-black-alpha-07 @color-theme-surface-neutral-00-hover",
+        "active": "@color-black-alpha-11 @color-theme-surface-neutral-00-active",
+        "disabled": "@color-black-alpha-11 @color-theme-surface-neutral-00-disabled"
       },
       "solid": {
         "primary": {
           "normal": "@color-white-alpha-100"
         },
         "secondary": {
-          "normal": "@color-gray-10"
+          "normal": "@color-gray-10 @color-theme-content-indicator-neutral-03"
         },
         "tertiary": {
-          "normal": "@color-gray-05"
+          "normal": "@color-gray-05 @color-theme-content-indicator-neutral-02"
         },
         "quaternary": {
-          "normal": "@color-white-alpha-100"
+          "normal": "@color-white-alpha-100 @color-theme-content-indicator-neutral-01"
         }
       },
       "secondary": {
@@ -86,44 +86,44 @@
         "normal": "@theme-color-60"
       },
       "gradient": {
-        "primary": "@theme-gradation-primary",
-        "secondary": "@theme-gradation-secondary"
+        "primary": "@theme-gradation-primary @color-theme-bg-primary",
+        "secondary": "@theme-gradation-secondary @color-theme-bg-primary"
       },
       "alert": {
         "default": {
-          "normal": "@theme-background-solid-tertiary-normal",
-          "hover": "@theme-background-solid-tertiary-normal",
-          "active": "@color-gray-20"
+          "normal": "@theme-background-solid-tertiary-normal @color-theme-content-indicator-neutral-02",
+          "hover": "@theme-background-solid-tertiary-normal @color-theme-content-indicator-neutral-02",
+          "active": "@color-gray-20 @color-theme-content-indicator-neutral-01"
         },
         "success": {
-          "normal": "@color-green-10",
-          "hover": "@color-green-10",
-          "active": "@color-green-20"
+          "normal": "@color-green-10 @color-theme-surface-positive-default",
+          "hover": "@color-green-10 @color-theme-surface-positive-default",
+          "active": "@color-green-20 @color-theme-surface-positive-active"
         },
         "warning": {
-          "normal": "@color-yellow-10",
-          "hover": "@color-yellow-10",
-          "active": "@color-yellow-20"
+          "normal": "@color-yellow-10 @color-theme-content-indicator-warning-02",
+          "hover": "@color-yellow-10 @color-theme-content-indicator-warning-02",
+          "active": "@color-yellow-20 @color-theme-content-indicator-warning-01"
         },
         "error": {
-          "normal": "@color-red-10",
-          "hover": "@color-red-10",
-          "active": "@color-red-20"
+          "normal": "@color-red-10 @color-theme-surface-negative-default",
+          "hover": "@color-red-10 @color-theme-surface-negative-default",
+          "active": "@color-red-20 @color-theme-surface-negative-active"
         },
         "theme": {
-          "normal": "@theme-color-10",
-          "hover": "@theme-color-10",
-          "active": "@theme-color-20"
+          "normal": "@theme-color-10 @color-theme-content-indicator-accent-03",
+          "hover": "@theme-color-10 @color-theme-content-indicator-accent-03",
+          "active": "@theme-color-20 @color-theme-content-indicator-accent-02"
         },
         "purple": {
-          "normal": "@color-purple-10",
-          "hover": "@color-purple-10",
-          "active": "@color-purple-20"
+          "normal": "@color-purple-10 @color-theme-content-indicator-decorative-purple-03",
+          "hover": "@color-purple-10 @color-theme-content-indicator-decorative-purple-03",
+          "active": "@color-purple-20 @color-theme-content-indicator-decorative-purple-02"
         },
         "orange": {
-          "normal": "@color-orange-10",
-          "hover": "@color-orange-10",
-          "active": "@color-orange-20"
+          "normal": "@color-orange-10 @color-theme-content-indicator-notice-03",
+          "hover": "@color-orange-10 @color-theme-content-indicator-notice-03",
+          "active": "@color-orange-20 @color-theme-content-indicator-notice-02"
         }
       }
     },
@@ -132,20 +132,20 @@
         "normal": "none"
       },
       "primary": {
-        "normal": "@color-black-alpha-95",
-        "hover": "@color-black-alpha-80",
-        "pressed": "@color-black-alpha-70",
-        "disabled": "@color-black-alpha-20"
+        "normal": "@color-black-alpha-95 @color-theme-content-btn-neutral-primary-default",
+        "hover": "@color-black-alpha-80 @color-theme-content-btn-neutral-primary-hover",
+        "pressed": "@color-black-alpha-70 @color-theme-content-btn-neutral-primary-pressed",
+        "disabled": "@color-black-alpha-20 @color-theme-content-btn-neutral-primary-disabled"
       },
       "secondary": {
-        "normal": "@color-black-alpha-00",
-        "hover": "@color-black-alpha-07",
-        "pressed": "@color-black-alpha-20",
-        "disabled": "@color-white-alpha-00",
+        "normal": "@color-black-alpha-00 @color-theme-content-btn-neutral-secondary-default",
+        "hover": "@color-black-alpha-07 @color-theme-content-btn-neutral-secondary-hover",
+        "pressed": "@color-black-alpha-20 @color-theme-content-btn-neutral-secondary-pressed",
+        "disabled": "@color-white-alpha-00 @color-theme-content-btn-neutral-secondary-disabled",
         "active": {
-          "normal": "@color-black-alpha-20",
-          "hover": "@color-black-alpha-30",
-          "pressed": "@color-black-alpha-40"
+          "normal": "@color-black-alpha-20 @color-theme-content-btn-neutral-secondary-active-default",
+          "hover": "@color-black-alpha-30 @color-theme-content-btn-neutral-secondary-active-default",
+          "pressed": "@color-black-alpha-40 @color-theme-content-btn-neutral-secondary-active-pressed"
         }
       },
       "inverted": {
@@ -154,54 +154,54 @@
         "pressed": "@color-gray-20"
       },
       "join": {
-        "normal": "@color-green-60",
-        "hover": "@color-green-70",
-        "pressed": "@color-green-80"
+        "normal": "@color-green-60 @color-theme-content-btn-positive-default",
+        "hover": "@color-green-70 @color-theme-content-btn-positive-hover",
+        "pressed": "@color-green-80 @color-theme-content-btn-positive-pressed"
       },
       "cancel": {
-        "normal": "@color-red-60",
-        "hover": "@color-red-70",
-        "pressed": "@color-red-80"
+        "normal": "@color-red-60 @color-theme-content-btn-negative-default",
+        "hover": "@color-red-70 @color-theme-content-btn-negative-hover",
+        "pressed": "@color-red-80 @color-theme-content-btn-negative-pressed"
       },
       "accent": {
-        "normal": "@theme-color-60",
-        "hover": "@theme-color-70",
-        "pressed": "@theme-color-80"
+        "normal": "@theme-color-60 @color-theme-content-btn-accent-default",
+        "hover": "@theme-color-70 @color-theme-content-btn-accent-hover",
+        "pressed": "@theme-color-80 @color-theme-content-btn-accent-pressed"
       }
     },
     "outline": {
       "primary": {
-        "normal": "@color-black-alpha-40"
+        "normal": "@color-black-alpha-40 @color-theme-border-neutral-02"
       },
       "theme": {
-        "normal": "@theme-color-60"
+        "normal": "@theme-color-60 @color-theme-border-accent-00"
       },
       "secondary": {
-        "normal": "@color-black-alpha-20"
+        "normal": "@color-black-alpha-20 @color-theme-border-neutral-00"
       },
       "input": {
-        "normal": "@color-black-alpha-50",
-        "active": "@color-black-alpha-90"
+        "normal": "@color-black-alpha-50 @color-theme-border-neutral-03",
+        "active": "@color-black-alpha-90 @color-theme-border-neutral-04"
       },
       "button": {
-        "normal": "@color-black-alpha-30"
+        "normal": "@color-black-alpha-30 @color-theme-border-neutral-01"
       },
       "join": {
-        "normal": "@color-green-70"
+        "normal": "@color-green-70 @color-theme-border-positive-00"
       },
       "cancel": {
-        "normal": "@color-red-70"
+        "normal": "@color-red-70 @color-theme-border-negative-00"
       },
       "disabled": {
-        "normal": "@color-black-alpha-20"
+        "normal": "@color-black-alpha-20 @color-theme-border-neutral-00"
       },
       "gradient": {
-        "active": ["@color-cobalt-70", "@color-cyan-40", "@color-green-50"]
+        "active": ["@color-cobalt-70", "@color-cyan-40", "@color-green-50", "@color-theme-border-decorative-gradient-device"]
       },
       "share": {
         "selected": "@color-green-50",
         "active": "@color-orange-50",
-        "inactive": "@color-gray-50"
+        "inactive": "@color-gray-50 @color-theme-border-neutral-04"
       },
       "overlay": {
         "normal": "@color-gray-60"
@@ -212,17 +212,17 @@
     },
     "control": {
       "active": {
-        "normal": "@theme-color-60",
-        "hover": "@theme-color-70",
-        "pressed": "@theme-color-80",
-        "active": "@theme-color-80",
-        "disabled": "@theme-color-20"
+        "normal": "@theme-color-60 @color-theme-content-control-accent-active-default",
+        "hover": "@theme-color-70 @color-theme-content-control-accent-active-hover",
+        "pressed": "@theme-color-80 @color-theme-content-control-accent-active-pressed",
+        "active": "@theme-color-80 @color-theme-content-control-accent-active-pressed",
+        "disabled": "@theme-color-20 @color-theme-content-control-accent-active-disabled"
       },
       "inactive": {
-        "normal": "@color-black-alpha-20",
-        "hover": "@color-black-alpha-30",
-        "pressed": "@color-black-alpha-40",
-        "disabled": "@color-black-alpha-11"
+        "normal": "@color-black-alpha-20 @color-theme-content-control-neutral-inactive-default",
+        "hover": "@color-black-alpha-30 @color-theme-content-control-neutral-inactive-hover",
+        "pressed": "@color-black-alpha-40 @color-theme-content-control-neutral-inactive-pressed",
+        "disabled": "@color-black-alpha-11 @color-theme-content-control-neutral-inactive-disabled"
       }
     },
     "overlay": {
@@ -231,12 +231,12 @@
       }
     },
     "indicator": {
-      "unstable": "@color-orange-60",
-      "attention": "@color-red-60",
-      "stable": "@color-green-60",
-      "locked": "@color-gray-60",
-      "caution": "@color-yellow-50",
-      "secure": "@color-blue-60"
+      "unstable": "@color-orange-60 @color-theme-content-indicator-notice-00",
+      "attention": "@color-red-60 @color-theme-content-indicator-negative-00",
+      "stable": "@color-green-60 @color-theme-content-indicator-positive-00",
+      "locked": "@color-gray-60 @color-theme-content-indicator-neutral-00",
+      "caution": "@color-yellow-50 @color-theme-content-indicator-warning-00",
+      "secure": "@color-blue-60 @color-theme-content-indicator-accent-00"
     },
     "whiteboard": {
       "stickyNote": {
@@ -249,48 +249,48 @@
     },
     "scrollbar": {
       "button": {
-        "normal": "@color-black-alpha-20",
-        "hover": "@color-black-alpha-30",
-        "pressed": "@color-black-alpha-40"
+        "normal": "@color-black-alpha-20 @color-theme-content-scrollbar-thumb-default",
+        "hover": "@color-black-alpha-30 @color-theme-content-scrollbar-thumb-hover",
+        "pressed": "@color-black-alpha-40 @color-theme-content-scrollbar-thumb-pressed"
       },
       "arrow": {
-        "normal": "@color-black-alpha-60",
+        "normal": "@color-black-alpha-60 @color-theme-content-text-neutral-secondary",
         "background": {
-          "normal": "@color-black-alpha-00",
-          "hover": "@color-black-alpha-11",
-          "pressed": "@color-black-alpha-20"
+          "normal": "@color-black-alpha-00 @color-theme-content-scrollbar-bg-default",
+          "hover": "@color-black-alpha-11 @color-theme-content-scrollbar-bg-hover",
+          "pressed": "@color-black-alpha-20 @color-theme-content-scrollbar-bg-pressed"
         }
       },
       "background": {
         "secondary": {
-          "ghost": "@color-black-alpha-00",
-          "normal": "@color-black-alpha-11"
+          "ghost": "@color-black-alpha-00 @color-theme-content-scrollbar-bg-default",
+          "normal": "@color-black-alpha-11 @color-theme-content-scrollbar-bg-hover"
         }
       }
     },
     "illustrations": {
       "empty": {
-        "primary": ["@color-lime-40", "@color-cobalt-50"],
-        "secondary": ["@color-cobalt-50", "@color-violet-60"]
+        "primary": ["@color-lime-40", "@color-cobalt-50", "@color-theme-illustration-empty-00"],
+        "secondary": ["@color-cobalt-50", "@color-violet-60", "@color-theme-illustration-empty-01"]
       },
       "onboarding": {
-        "primary": ["@color-yellow-30", "@color-lime-40"],
-        "secondary": ["@color-red-50", "@color-violet-60"],
-        "tertiary": ["@color-yellow-30", "@color-orange-50"],
-        "quartenary": ["@color-lime-40", "@color-cobalt-50"],
-        "quinary": ["@color-cobalt-50", "@color-violet-60"]
-      },
-      "success": ["@color-green-40", "@color-lime-40"],
-      "error": ["@color-pink-50", "@color-red-60"],
-      "default": "@color-gray-100"
+        "primary": ["@color-yellow-30", "@color-lime-40", "@color-theme-illustration-onboarding-00"],
+        "secondary": ["@color-red-50", "@color-violet-60", "@color-theme-illustration-onboarding-01"],
+        "tertiary": ["@color-yellow-30", "@color-orange-50", "@color-theme-illustration-onboarding-02"],
+        "quartenary": ["@color-lime-40", "@color-cobalt-50", "@color-theme-illustration-onboarding-03"],
+        "quinary": ["@color-cobalt-50", "@color-violet-60", "@color-theme-illustration-onboarding-04"]
+      },
+      "success": ["@color-green-40", "@color-lime-40", "@color-theme-illustration-positive"],
+      "error": ["@color-pink-50", "@color-red-60", "@color-theme-illustration-negative"],
+      "default": "@color-gray-100 @color-theme-illustration-default"
     },
     "globaltint": {
-      "normal": "@color-blue-60",
-      "selected": "@color-blue-60"
+      "normal": "@color-blue-60 @color-theme-surface-accent-mobile-default",
+      "selected": "@color-blue-60 @color-theme-surface-accent-mobile-selected"
     },
     "groupedbackground": {
       "tertiary": {
-        "normal": "@color-gray-05"
+        "normal": "@color-gray-05 @color-theme-surface-02-primary"
       },
       "quaternary": {
         "normal": "@color-white-alpha-100"