diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index a944ed41..a5a04494 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -93,6 +93,9 @@ const formatTypographyStyles = (name: string, value: any) => {
 StyleDictionary.registerFormat({
   name: 'theme',
   formatter({ dictionary, options }) {
+    /** Used with the `??` operator when you only want to include styles on the root stylesheet */
+    const root = options.selector === ':root' ? undefined : ''
+
     return dedent`
 		/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
 
@@ -141,12 +144,30 @@ StyleDictionary.registerFormat({
         })
         .join('\n')}
 
-			${dictionary.allProperties
-        .filter((prop) => prop.type === 'borderRadius')
-        .map((prop) => {
-          return `--${prop.name}: ${prop.value};`
-        })
-        .join('\n')}
+			${
+        root ??
+        dictionary.allProperties
+          .filter((prop) => prop.type === 'borderRadius')
+          .map((prop) => {
+            return `--${prop.name}: ${prop.value};`
+          })
+          .join('\n')
+      }
+
+      ${
+        root ??
+        dictionary.allProperties
+          .filter((prop) => prop.type === 'boxShadow')
+          .map((prop) => {
+            return `--${prop.name}: ${[prop.value]
+              .flat()
+              .map((v) =>
+                typeof v === 'object' ? `${v.x}px ${v.y}px ${v.blur}px ${v.color}` : v,
+              )};`
+          })
+          .join('\n')
+      }
+
 		}\n`
   },
 })
@@ -235,16 +256,23 @@ StyleDictionary.registerFormat({
 			}
 
       module.exports.elevationUtilities = {
-        ${boxShadow.map(
-          ({ name, value }) =>
-            `'.${name}': {
-                'box-shadow': '${[value]
-                  .flat()
-                  .map((v) =>
-                    typeof v === 'object' ? `${v.x}px ${v.y}px ${v.blur}px ${v.color}` : v,
-                  )
-                  .join(', ')}'}`,
-        )}
+        ${boxShadow
+          .map(
+            ({ name }, index) =>
+              `'.elevation-${index}': {
+            'box-shadow': 'var(--${name})',
+            'background-color': 'var(--surface-${
+              index === 0
+                ? 'default'
+                : index === 1
+                ? 'hover'
+                : index === 2
+                ? 'secondary'
+                : 'tertiary'
+            })',
+          }`,
+          )
+          .join(',\n')}
       }
 
 			module.exports.borderRadiusTokens = {
diff --git a/styles/dist/blue.css b/styles/dist/blue.css
index b08fc70b..74333431 100644
--- a/styles/dist/blue.css
+++ b/styles/dist/blue.css
@@ -404,8 +404,4 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
-
-  --border-radius-sm: 0.125rem;
-  --border-radius: 0.1875rem;
-  --border-radius-full: 624.9375rem;
 }
diff --git a/styles/dist/main.css b/styles/dist/main.css
index d9111c4a..b48a55aa 100644
--- a/styles/dist/main.css
+++ b/styles/dist/main.css
@@ -561,4 +561,12 @@
   --border-radius-sm: 0.125rem;
   --border-radius: 0.1875rem;
   --border-radius-full: 624.9375rem;
+
+  --box-shadow-0: none;
+  --box-shadow-1: 0px 0.656px 4.625px #00000021, 0px 3px 13px #00000033,
+    0px 7.594px 34.875px #00000045, 0px 15px 80px #00000066;
+  --box-shadow-2: 0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033,
+    0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066;
+  --box-shadow-3: 0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033,
+    0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066;
 }
diff --git a/styles/dist/purple.css b/styles/dist/purple.css
index ba0433db..69ceb9b3 100644
--- a/styles/dist/purple.css
+++ b/styles/dist/purple.css
@@ -404,8 +404,4 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
-
-  --border-radius-sm: 0.125rem;
-  --border-radius: 0.1875rem;
-  --border-radius-full: 624.9375rem;
 }
diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js
index b672e168..4ac314c6 100644
--- a/styles/dist/tailwind-tokens.js
+++ b/styles/dist/tailwind-tokens.js
@@ -934,19 +934,20 @@ module.exports.colorUtilities = {
 
 module.exports.elevationUtilities = {
   '.elevation-0': {
-    'box-shadow': 'none',
+    'box-shadow': 'var(--box-shadow-0)',
+    'background-color': 'var(--surface-default)',
   },
   '.elevation-1': {
-    'box-shadow':
-      '0px 0.656px 4.625px #00000021, 0px 3px 13px #00000033, 0px 7.594px 34.875px #00000045, 0px 15px 80px #00000066',
+    'box-shadow': 'var(--box-shadow-1)',
+    'background-color': 'var(--surface-hover)',
   },
   '.elevation-2': {
-    'box-shadow':
-      '0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033, 0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066',
+    'box-shadow': 'var(--box-shadow-2)',
+    'background-color': 'var(--surface-secondary)',
   },
   '.elevation-3': {
-    'box-shadow':
-      '0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033, 0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066',
+    'box-shadow': 'var(--box-shadow-3)',
+    'background-color': 'var(--surface-tertiary)',
   },
 }
 
diff --git a/styles/dist/yellow.css b/styles/dist/yellow.css
index cbea8e99..27da6e0d 100644
--- a/styles/dist/yellow.css
+++ b/styles/dist/yellow.css
@@ -404,8 +404,4 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
-
-  --border-radius-sm: 0.125rem;
-  --border-radius: 0.1875rem;
-  --border-radius-full: 624.9375rem;
 }
diff --git a/styles/src/tokens.json b/styles/src/tokens.json
index c2df98fc..c7b4b78e 100644
--- a/styles/src/tokens.json
+++ b/styles/src/tokens.json
@@ -1,6 +1,6 @@
 {
   "global": {
-    "border-radius": {
+    "borderRadius": {
       "small": {
         "value": "2",
         "type": "borderRadius"
@@ -266,6 +266,123 @@
         "value": "underline",
         "type": "textDecoration"
       }
+    },
+    "boxShadow": {
+      "0": {
+        "value": "none",
+        "type": "boxShadow"
+      },
+      "1": {
+        "value": [
+          {
+            "color": "#00000021",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "0.65625",
+            "blur": "4.625",
+            "spread": "0"
+          },
+          {
+            "color": "#00000033",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "3",
+            "blur": "13",
+            "spread": "0"
+          },
+          {
+            "color": "#00000045",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "7.59375",
+            "blur": "34.875",
+            "spread": "0"
+          },
+          {
+            "color": "#00000066",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "15",
+            "blur": "80",
+            "spread": "0"
+          }
+        ],
+        "type": "boxShadow"
+      },
+      "2": {
+        "value": [
+          {
+            "color": "#00000021",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "2.1875",
+            "blur": "4.625",
+            "spread": "0"
+          },
+          {
+            "color": "#00000033",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "10",
+            "blur": "13",
+            "spread": "0"
+          },
+          {
+            "color": "#00000045",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "25.3125",
+            "blur": "34.875",
+            "spread": "0"
+          },
+          {
+            "color": "#00000066",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "50",
+            "blur": "80",
+            "spread": "0"
+          }
+        ],
+        "type": "boxShadow"
+      },
+      "3": {
+        "value": [
+          {
+            "color": "#00000021",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "4.375",
+            "blur": "4.625",
+            "spread": "0"
+          },
+          {
+            "color": "#00000033",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "20",
+            "blur": "13",
+            "spread": "0"
+          },
+          {
+            "color": "#00000045",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "50.625",
+            "blur": "34.875",
+            "spread": "0"
+          },
+          {
+            "color": "#00000066",
+            "type": "dropShadow",
+            "x": "0",
+            "y": "100",
+            "blur": "80",
+            "spread": "0"
+          }
+        ],
+        "type": "boxShadow"
+      }
     }
   },
   "colors": {
@@ -660,123 +777,6 @@
           "type": "color"
         }
       }
-    },
-    "elevation": {
-      "0": {
-        "value": "none",
-        "type": "boxShadow"
-      },
-      "1": {
-        "value": [
-          {
-            "color": "#00000021",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "0.65625",
-            "blur": "4.625",
-            "spread": "0"
-          },
-          {
-            "color": "#00000033",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "3",
-            "blur": "13",
-            "spread": "0"
-          },
-          {
-            "color": "#00000045",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "7.59375",
-            "blur": "34.875",
-            "spread": "0"
-          },
-          {
-            "color": "#00000066",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "15",
-            "blur": "80",
-            "spread": "0"
-          }
-        ],
-        "type": "boxShadow"
-      },
-      "2": {
-        "value": [
-          {
-            "color": "#00000021",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "2.1875",
-            "blur": "4.625",
-            "spread": "0"
-          },
-          {
-            "color": "#00000033",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "10",
-            "blur": "13",
-            "spread": "0"
-          },
-          {
-            "color": "#00000045",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "25.3125",
-            "blur": "34.875",
-            "spread": "0"
-          },
-          {
-            "color": "#00000066",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "50",
-            "blur": "80",
-            "spread": "0"
-          }
-        ],
-        "type": "boxShadow"
-      },
-      "3": {
-        "value": [
-          {
-            "color": "#00000021",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "4.375",
-            "blur": "4.625",
-            "spread": "0"
-          },
-          {
-            "color": "#00000033",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "20",
-            "blur": "13",
-            "spread": "0"
-          },
-          {
-            "color": "#00000045",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "50.625",
-            "blur": "34.875",
-            "spread": "0"
-          },
-          {
-            "color": "#00000066",
-            "type": "dropShadow",
-            "x": "0",
-            "y": "100",
-            "blur": "80",
-            "spread": "0"
-          }
-        ],
-        "type": "boxShadow"
-      }
     }
   },
   "yellow-accent": {