diff --git a/loom.config.ts b/loom.config.ts
index 9bb4c0668eb..7dddb0b1a02 100644
--- a/loom.config.ts
+++ b/loom.config.ts
@@ -14,6 +14,7 @@ import {stylelint} from '@shopify/loom-plugin-stylelint';
 import {prettier} from '@shopify/loom-plugin-prettier';
 import replace from '@rollup/plugin-replace';
 import image from '@rollup/plugin-image';
+import json from '@rollup/plugin-json';
 
 import packageJSON from './package.json';
 import {styles} from './config/rollup/plugin-styles';
@@ -140,6 +141,9 @@ function rollupAdjustPluginsPlugin() {
         delimiters: ['', ''],
       }),
       image(),
+      json({
+        compact: true,
+      }),
       styles(stylesConfig),
     ];
   });
diff --git a/package.json b/package.json
index 45e86e1aee0..fd6ff467a33 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "version": "yarn run readme-update-version",
     "storybook": "start-storybook -p 6006 --quiet",
     "storybook:build": "build-storybook -o build-internal/storybook/static",
-    "validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'"
+    "validate-tokens": "ajv validate -s src/tokens/schemas/token-group.json -d 'src/tokens/token-groups/*.json'"
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.10.0",
@@ -86,6 +86,7 @@
     "@babel/core": "^7.15.0",
     "@babel/node": "^7.14.9",
     "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/pluginutils": "^3.1.0",
     "@shopify/babel-preset": "^24.1.2",
diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md
index 1177a338b86..7d3ddec0545 100644
--- a/src/components/IndexTable/README.md
+++ b/src/components/IndexTable/README.md
@@ -156,7 +156,7 @@ function SimpleSmallScreenIndexTableExample() {
         selected={selectedResources.includes(id)}
         position={index}
       >
-        <div style={{padding: '1.2rem 1.6rem'}}>
+        <div style={{padding: '12px 16px'}}>
           <p>
             <TextStyle variation="strong">{name}</TextStyle>
           </p>
diff --git a/src/tokens/_color.ts b/src/tokens/_color.ts
deleted file mode 100644
index 128f0a55332..00000000000
--- a/src/tokens/_color.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-/**
- * All light color-scheme tokens.
- *
- * Note: These values were cut/paste directly from the devtools.
- */
-export const lightColorScheme: TokenGroup = {
-  background: 'rgba(246, 246, 247, 1)',
-  'background-hovered': 'rgba(241, 242, 243, 1)',
-  'background-pressed': 'rgba(237, 238, 239, 1)',
-  'background-selected': 'rgba(237, 238, 239, 1)',
-  surface: 'rgba(255, 255, 255, 1)',
-  'surface-neutral': 'rgba(228, 229, 231, 1)',
-  'surface-neutral-hovered': 'rgba(219, 221, 223, 1)',
-  'surface-neutral-pressed': 'rgba(201, 204, 208, 1)',
-  'surface-neutral-disabled': 'rgba(241, 242, 243, 1)',
-  'surface-neutral-subdued': 'rgba(246, 246, 247, 1)',
-  'surface-subdued': 'rgba(250, 251, 251, 1)',
-  'surface-disabled': 'rgba(250, 251, 251, 1)',
-  'surface-hovered': 'rgba(246, 246, 247, 1)',
-  'surface-pressed': 'rgba(241, 242, 243, 1)',
-  'surface-depressed': 'rgba(237, 238, 239, 1)',
-  'surface-search-field': 'rgba(241, 242, 243, 1)',
-  backdrop: 'rgba(0, 0, 0, 0.5)',
-  overlay: 'rgba(255, 255, 255, 0.5)',
-  'shadow-from-dim-light': 'rgba(0, 0, 0, 0.2)',
-  'shadow-from-ambient-light': 'rgba(23, 24, 24, 0.05)',
-  'shadow-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  'hint-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  border: 'rgba(140, 145, 150, 1)',
-  'border-neutral-subdued': 'rgba(186, 191, 195, 1)',
-  'border-hovered': 'rgba(153, 158, 164, 1)',
-  'border-disabled': 'rgba(210, 213, 216, 1)',
-  'border-subdued': 'rgba(201, 204, 207, 1)',
-  'border-depressed': 'rgba(87, 89, 89, 1)',
-  'border-shadow': 'rgba(174, 180, 185, 1)',
-  'border-shadow-subdued': 'rgba(186, 191, 196, 1)',
-  divider: 'rgba(225, 227, 229, 1)',
-  icon: 'rgba(92, 95, 98, 1)',
-  'icon-hovered': 'rgba(26, 28, 29, 1)',
-  'icon-pressed': 'rgba(68, 71, 74, 1)',
-  'icon-disabled': 'rgba(186, 190, 195, 1)',
-  'icon-subdued': 'rgba(140, 145, 150, 1)',
-  text: 'rgba(32, 34, 35, 1)',
-  'text-disabled': 'rgba(140, 145, 150, 1)',
-  'text-subdued': 'rgba(109, 113, 117, 1)',
-  interactive: 'rgba(44, 110, 203, 1)',
-  'interactive-disabled': 'rgba(189, 193, 204, 1)',
-  'interactive-hovered': 'rgba(31, 81, 153, 1)',
-  'interactive-pressed': 'rgba(16, 50, 98, 1)',
-  focused: 'rgba(69, 143, 255, 1)',
-  'surface-selected': 'rgba(242, 247, 254, 1)',
-  'surface-selected-hovered': 'rgba(237, 244, 254, 1)',
-  'surface-selected-pressed': 'rgba(229, 239, 253, 1)',
-  'icon-on-interactive': 'rgba(255, 255, 255, 1)',
-  'text-on-interactive': 'rgba(255, 255, 255, 1)',
-  'action-secondary': 'rgba(255, 255, 255, 1)',
-  'action-secondary-disabled': 'rgba(255, 255, 255, 1)',
-  'action-secondary-hovered': 'rgba(246, 246, 247, 1)',
-  'action-secondary-pressed': 'rgba(241, 242, 243, 1)',
-  'action-secondary-depressed': 'rgba(109, 113, 117, 1)',
-  'action-primary': 'rgba(0, 128, 96, 1)',
-  'action-primary-disabled': 'rgba(241, 241, 241, 1)',
-  'action-primary-hovered': 'rgba(0, 110, 82, 1)',
-  'action-primary-pressed': 'rgba(0, 94, 70, 1)',
-  'action-primary-depressed': 'rgba(0, 61, 44, 1)',
-  'icon-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-primary': 'rgba(0, 123, 92, 1)',
-  'text-primary-hovered': 'rgba(0, 108, 80, 1)',
-  'text-primary-pressed': 'rgba(0, 92, 68, 1)',
-  'surface-primary-selected': 'rgba(241, 248, 245, 1)',
-  'surface-primary-selected-hovered': 'rgba(179, 208, 195, 1)',
-  'surface-primary-selected-pressed': 'rgba(162, 188, 176, 1)',
-  'border-critical': 'rgba(253, 87, 73, 1)',
-  'border-critical-subdued': 'rgba(224, 179, 178, 1)',
-  'border-critical-disabled': 'rgba(255, 167, 163, 1)',
-  'icon-critical': 'rgba(215, 44, 13, 1)',
-  'surface-critical': 'rgba(254, 211, 209, 1)',
-  'surface-critical-subdued': 'rgba(255, 244, 244, 1)',
-  'surface-critical-subdued-hovered': 'rgba(255, 240, 240, 1)',
-  'surface-critical-subdued-pressed': 'rgba(255, 233, 232, 1)',
-  'surface-critical-subdued-depressed': 'rgba(254, 188, 185, 1)',
-  'text-critical': 'rgba(215, 44, 13, 1)',
-  'action-critical': 'rgba(216, 44, 13, 1)',
-  'action-critical-disabled': 'rgba(241, 241, 241, 1)',
-  'action-critical-hovered': 'rgba(188, 34, 0, 1)',
-  'action-critical-pressed': 'rgba(162, 27, 0, 1)',
-  'action-critical-depressed': 'rgba(108, 15, 0, 1)',
-  'icon-on-critical': 'rgba(255, 255, 255, 1)',
-  'text-on-critical': 'rgba(255, 255, 255, 1)',
-  'interactive-critical': 'rgba(216, 44, 13, 1)',
-  'interactive-critical-disabled': 'rgba(253, 147, 141, 1)',
-  'interactive-critical-hovered': 'rgba(205, 41, 12, 1)',
-  'interactive-critical-pressed': 'rgba(103, 15, 3, 1)',
-  'border-warning': 'rgba(185, 137, 0, 1)',
-  'border-warning-subdued': 'rgba(225, 184, 120, 1)',
-  'icon-warning': 'rgba(185, 137, 0, 1)',
-  'surface-warning': 'rgba(255, 215, 157, 1)',
-  'surface-warning-subdued': 'rgba(255, 245, 234, 1)',
-  'surface-warning-subdued-hovered': 'rgba(255, 242, 226, 1)',
-  'surface-warning-subdued-pressed': 'rgba(255, 235, 211, 1)',
-  'text-warning': 'rgba(145, 106, 0, 1)',
-  'border-highlight': 'rgba(68, 157, 167, 1)',
-  'border-highlight-subdued': 'rgba(152, 198, 205, 1)',
-  'icon-highlight': 'rgba(0, 160, 172, 1)',
-  'surface-highlight': 'rgba(164, 232, 242, 1)',
-  'surface-highlight-subdued': 'rgba(235, 249, 252, 1)',
-  'surface-highlight-subdued-hovered': 'rgba(228, 247, 250, 1)',
-  'surface-highlight-subdued-pressed': 'rgba(213, 243, 248, 1)',
-  'text-highlight': 'rgba(52, 124, 132, 1)',
-  'border-success': 'rgba(0, 164, 124, 1)',
-  'border-success-subdued': 'rgba(149, 201, 180, 1)',
-  'icon-success': 'rgba(0, 127, 95, 1)',
-  'surface-success': 'rgba(174, 233, 209, 1)',
-  'surface-success-subdued': 'rgba(241, 248, 245, 1)',
-  'surface-success-subdued-hovered': 'rgba(236, 246, 241, 1)',
-  'surface-success-subdued-pressed': 'rgba(226, 241, 234, 1)',
-  'text-success': 'rgba(0, 128, 96, 1)',
-  'decorative-one-icon': 'rgba(126, 87, 0, 1)',
-  'decorative-one-surface': 'rgba(255, 201, 107, 1)',
-  'decorative-one-text': 'rgba(61, 40, 0, 1)',
-  'decorative-two-icon': 'rgba(175, 41, 78, 1)',
-  'decorative-two-surface': 'rgba(255, 196, 176, 1)',
-  'decorative-two-text': 'rgba(73, 11, 28, 1)',
-  'decorative-three-icon': 'rgba(0, 109, 65, 1)',
-  'decorative-three-surface': 'rgba(146, 230, 181, 1)',
-  'decorative-three-text': 'rgba(0, 47, 25, 1)',
-  'decorative-four-icon': 'rgba(0, 106, 104, 1)',
-  'decorative-four-surface': 'rgba(145, 224, 214, 1)',
-  'decorative-four-text': 'rgba(0, 45, 45, 1)',
-  'decorative-five-icon': 'rgba(174, 43, 76, 1)',
-  'decorative-five-surface': 'rgba(253, 201, 208, 1)',
-  'decorative-five-text': 'rgba(79, 14, 31, 1)',
-};
-
-/**
- * All dark color-scheme tokens.
- *
- * Note: These values were cut/paste directly from the devtools.
- */
-export const darkColorScheme: TokenGroup = {
-  background: 'rgba(11, 12, 13, 1)',
-  'background-hovered': 'rgba(11, 12, 13, 1)',
-  'background-pressed': 'rgba(11, 12, 13, 1)',
-  'background-selected': 'rgba(11, 12, 13, 1)',
-  surface: 'rgba(32, 33, 35, 1)',
-  'surface-neutral': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-hovered': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-pressed': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-disabled': 'rgba(49, 51, 53, 1)',
-  'surface-neutral-subdued': 'rgba(68, 71, 74, 1)',
-  'surface-subdued': 'rgba(26, 28, 29, 1)',
-  'surface-disabled': 'rgba(26, 28, 29, 1)',
-  'surface-hovered': 'rgba(47, 49, 51, 1)',
-  'surface-pressed': 'rgba(62, 64, 67, 1)',
-  'surface-depressed': 'rgba(80, 83, 86, 1)',
-  'surface-search-field': 'rgba(47, 49, 51, 1)',
-  backdrop: 'rgba(0, 0, 0, 0.5)',
-  overlay: 'rgba(33, 33, 33, 0.5)',
-  'shadow-from-dim-light': 'rgba(255, 255, 255, 0.2)',
-  'shadow-from-ambient-light': 'rgba(23, 24, 24, 0.05)',
-  'shadow-from-direct-light': 'rgba(255, 255, 255, 0.15)',
-  'hint-from-direct-light': 'rgba(185, 185, 185, 0.2)',
-  border: 'rgba(80, 83, 86, 1)',
-  'border-neutral-subdued': 'rgba(130, 135, 139, 1)',
-  'border-hovered': 'rgba(80, 83, 86, 1)',
-  'border-disabled': 'rgba(103, 107, 111, 1)',
-  'border-subdued': 'rgba(130, 135, 139, 1)',
-  'border-depressed': 'rgba(142, 145, 145, 1)',
-  'border-shadow': 'rgba(91, 95, 98, 1)',
-  'border-shadow-subdued': 'rgba(130, 135, 139, 1)',
-  divider: 'rgba(69, 71, 73, 1)',
-  icon: 'rgba(166, 172, 178, 1)',
-  'icon-hovered': 'rgba(225, 227, 229, 1)',
-  'icon-pressed': 'rgba(166, 172, 178, 1)',
-  'icon-disabled': 'rgba(84, 87, 90, 1)',
-  'icon-subdued': 'rgba(120, 125, 129, 1)',
-  text: 'rgba(227, 229, 231, 1)',
-  'text-disabled': 'rgba(111, 115, 119, 1)',
-  'text-subdued': 'rgba(153, 159, 164, 1)',
-  interactive: 'rgba(54, 163, 255, 1)',
-  'interactive-disabled': 'rgba(38, 98, 182, 1)',
-  'interactive-hovered': 'rgba(103, 175, 255, 1)',
-  'interactive-pressed': 'rgba(136, 188, 255, 1)',
-  focused: 'rgba(38, 98, 182, 1)',
-  'surface-selected': 'rgba(2, 14, 35, 1)',
-  'surface-selected-hovered': 'rgba(7, 29, 61, 1)',
-  'surface-selected-pressed': 'rgba(13, 43, 86, 1)',
-  'icon-on-interactive': 'rgba(255, 255, 255, 1)',
-  'text-on-interactive': 'rgba(255, 255, 255, 1)',
-  'action-secondary': 'rgba(77, 80, 83, 1)',
-  'action-secondary-disabled': 'rgba(32, 34, 35, 1)',
-  'action-secondary-hovered': 'rgba(84, 87, 91, 1)',
-  'action-secondary-pressed': 'rgba(96, 100, 103, 1)',
-  'action-secondary-depressed': 'rgba(123, 127, 132, 1)',
-  'action-primary': 'rgba(0, 128, 96, 1)',
-  'action-primary-disabled': 'rgba(0, 86, 64, 1)',
-  'action-primary-hovered': 'rgba(0, 150, 113, 1)',
-  'action-primary-pressed': 'rgba(0, 164, 124, 1)',
-  'action-primary-depressed': 'rgba(0, 179, 136, 1)',
-  'icon-on-primary': 'rgba(230, 255, 244, 1)',
-  'text-on-primary': 'rgba(255, 255, 255, 1)',
-  'text-primary': 'rgba(0, 141, 106, 1)',
-  'text-primary-hovered': 'rgba(0, 158, 120, 1)',
-  'text-primary-pressed': 'rgba(0, 176, 133, 1)',
-  'surface-primary-selected': 'rgba(12, 18, 16, 1)',
-  'surface-primary-selected-hovered': 'rgba(40, 48, 44, 1)',
-  'surface-primary-selected-pressed': 'rgba(54, 64, 59, 1)',
-  'border-critical': 'rgba(227, 47, 14, 1)',
-  'border-critical-subdued': 'rgba(227, 47, 14, 1)',
-  'border-critical-disabled': 'rgba(131, 23, 4, 1)',
-  'icon-critical': 'rgba(218, 45, 13, 1)',
-  'surface-critical': 'rgba(69, 7, 1, 1)',
-  'surface-critical-subdued': 'rgba(69, 7, 1, 1)',
-  'surface-critical-subdued-hovered': 'rgba(68, 23, 20, 1)',
-  'surface-critical-subdued-pressed': 'rgba(107, 16, 3, 1)',
-  'surface-critical-subdued-depressed': 'rgba(135, 24, 5, 1)',
-  'text-critical': 'rgba(233, 128, 122, 1)',
-  'action-critical': 'rgba(205, 41, 12, 1)',
-  'action-critical-disabled': 'rgba(187, 37, 10, 1)',
-  'action-critical-hovered': 'rgba(227, 47, 14, 1)',
-  'action-critical-pressed': 'rgba(250, 53, 17, 1)',
-  'action-critical-depressed': 'rgba(253, 87, 73, 1)',
-  'icon-on-critical': 'rgba(255, 248, 247, 1)',
-  'text-on-critical': 'rgba(255, 255, 255, 1)',
-  'interactive-critical': 'rgba(253, 114, 106, 1)',
-  'interactive-critical-disabled': 'rgba(254, 172, 168, 1)',
-  'interactive-critical-hovered': 'rgba(253, 138, 132, 1)',
-  'interactive-critical-pressed': 'rgba(253, 159, 155, 1)',
-  'border-warning': 'rgba(153, 112, 0, 1)',
-  'border-warning-subdued': 'rgba(153, 112, 0, 1)',
-  'icon-warning': 'rgba(104, 75, 0, 1)',
-  'surface-warning': 'rgba(153, 112, 0, 1)',
-  'surface-warning-subdued': 'rgba(77, 59, 29, 1)',
-  'surface-warning-subdued-hovered': 'rgba(82, 63, 32, 1)',
-  'surface-warning-subdued-pressed': 'rgba(87, 67, 34, 1)',
-  'text-warning': 'rgba(202, 149, 0, 1)',
-  'border-highlight': 'rgba(68, 157, 167, 1)',
-  'border-highlight-subdued': 'rgba(68, 157, 167, 1)',
-  'icon-highlight': 'rgba(44, 108, 115, 1)',
-  'surface-highlight': 'rgba(0, 105, 113, 1)',
-  'surface-highlight-subdued': 'rgba(18, 53, 57, 1)',
-  'surface-highlight-subdued-hovered': 'rgba(20, 58, 62, 1)',
-  'surface-highlight-subdued-pressed': 'rgba(24, 65, 70, 1)',
-  'text-highlight': 'rgba(162, 239, 250, 1)',
-  'border-success': 'rgba(0, 135, 102, 1)',
-  'border-success-subdued': 'rgba(0, 135, 102, 1)',
-  'icon-success': 'rgba(0, 94, 70, 1)',
-  'surface-success': 'rgba(0, 94, 70, 1)',
-  'surface-success-subdued': 'rgba(28, 53, 44, 1)',
-  'surface-success-subdued-hovered': 'rgba(31, 58, 48, 1)',
-  'surface-success-subdued-pressed': 'rgba(35, 65, 54, 1)',
-  'text-success': 'rgba(88, 173, 142, 1)',
-  'decorative-one-icon': 'rgba(255, 186, 67, 1)',
-  'decorative-one-surface': 'rgba(142, 102, 9, 1)',
-  'decorative-one-text': 'rgba(255, 255, 255, 1)',
-  'decorative-two-icon': 'rgba(245, 182, 192, 1)',
-  'decorative-two-surface': 'rgba(206, 88, 20, 1)',
-  'decorative-two-text': 'rgba(255, 255, 255, 1)',
-  'decorative-three-icon': 'rgba(0, 227, 141, 1)',
-  'decorative-three-surface': 'rgba(0, 124, 90, 1)',
-  'decorative-three-text': 'rgba(255, 255, 255, 1)',
-  'decorative-four-icon': 'rgba(0, 221, 218, 1)',
-  'decorative-four-surface': 'rgba(22, 124, 121, 1)',
-  'decorative-four-text': 'rgba(255, 255, 255, 1)',
-  'decorative-five-icon': 'rgba(244, 183, 191, 1)',
-  'decorative-five-surface': 'rgba(194, 51, 86, 1)',
-  'decorative-five-text': 'rgba(255, 255, 255, 1)',
-};
diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts
deleted file mode 100644
index d954cc21140..00000000000
--- a/src/tokens/_depth.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const depth: TokenGroup = {
-  'shadow-transparent': '0 0 0 0 transparent',
-  'shadow-faint': '0 1px 0 0 rgba(22, 29, 37, 0.05)',
-  'shadow-base':
-    '0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)',
-  'shadow-deep':
-    '0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)',
-  'shadow-button': '0 1px 0 rgba(0, 0, 0, 0.05)',
-  'shadow-top-bar': '0 2px 2px -1px rgba(0, 0, 0, 0.15)',
-  'shadow-card':
-    '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)',
-  'shadow-popover':
-    '-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)',
-  'shadow-layer':
-    '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)',
-  'shadow-modal':
-    '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)',
-  'shadows-inset-button': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
-  'shadows-inset-button-pressed': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
-};
diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts
deleted file mode 100644
index 15eccf8ea48..00000000000
--- a/src/tokens/_legacy-tokens.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-/**
- * This file contains legacy design tokens that have not yet been categorized
- * and organized into files. The goal is to eventually remove this file by
- * categorizing tokens by group, moving them into separate files, and/or
- * deprecating any undesired tokens.
- */
-export const legacyTokens: TokenGroup = {
-  'override-loading-z-index': '514',
-  'choice-size': '20px',
-  'icon-size': '10px',
-  'choice-margin': '1px',
-  'control-border-width': '2px',
-  'banner-border-default':
-    'inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)',
-  'banner-border-success':
-    'inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)',
-  'banner-border-highlight':
-    'inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)',
-  'banner-border-warning':
-    'inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)',
-  'banner-border-critical':
-    'inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)',
-  'thin-border-subdued': '1px solid var(--p-border-subdued)',
-  'text-field-spinner-offset': '2px',
-  'text-field-focus-ring-offset': '-4px',
-  'button-group-item-spacing': '-1px',
-  'range-slider-thumb-size-base': '16px',
-  'range-slider-thumb-size-active': '24px',
-  'frame-offset': '0px',
-};
diff --git a/src/tokens/_motion.ts b/src/tokens/_motion.ts
deleted file mode 100644
index 583e5060184..00000000000
--- a/src/tokens/_motion.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const motion: TokenGroup = {
-  'duration-0': '0ms',
-  'duration-50': '50ms',
-  'duration-100': '100ms',
-  'duration-150': '150ms',
-  'duration-200': '200ms',
-  'duration-250': '250ms',
-  'duration-300': '300ms',
-  'duration-350': '350ms',
-  'duration-400': '400ms',
-  'duration-450': '450ms',
-  'duration-500': '500ms',
-  ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
-  'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
-  'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
-  'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
-  linear: 'cubic-bezier(0, 0, 1, 1)',
-};
diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts
deleted file mode 100644
index 11cc1e48fef..00000000000
--- a/src/tokens/_shape.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {TokenGroup} from './tokens';
-import {rem} from './utilities';
-
-export const shape: TokenGroup = {
-  'border-radius-05': rem('2px'),
-  'border-radius-1': rem('4px'),
-  'border-radius-2': rem('8px'),
-  'border-radius-3': rem('12px'),
-  'border-radius-4': rem('16px'),
-  'border-radius-5': rem('20px'),
-  'border-radius-base': rem('3px'),
-  'border-radius-large': rem('6px'),
-  'border-radius-half': '50%',
-};
diff --git a/src/tokens/_spacing.ts b/src/tokens/_spacing.ts
deleted file mode 100644
index c9fca077cc1..00000000000
--- a/src/tokens/_spacing.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {TokenGroup} from './tokens';
-import {rem} from './utilities';
-
-export const spacing: TokenGroup = {
-  'space-0': '0',
-  'space-025': rem('1px'),
-  'space-05': rem('2px'),
-  'space-1': rem('4px'),
-  'space-2': rem('8px'),
-  'space-3': rem('12px'),
-  'space-4': rem('16px'),
-  'space-5': rem('20px'),
-  'space-6': rem('24px'),
-  'space-8': rem('32px'),
-  'space-10': rem('40px'),
-  'space-12': rem('48px'),
-  'space-16': rem('64px'),
-  'space-20': rem('80px'),
-  'space-24': rem('96px'),
-  'space-28': rem('112px'),
-  'space-32': rem('128px'),
-};
diff --git a/src/tokens/_typography.ts b/src/tokens/_typography.ts
deleted file mode 100644
index 5774acd2fba..00000000000
--- a/src/tokens/_typography.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const typography: TokenGroup = {
-  'font-weight-regular': '400',
-  'font-weight-medium': '500',
-  'font-weight-semibold': '600',
-  'font-weight-bold': '700',
-};
diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts
deleted file mode 100644
index ebbe8edf367..00000000000
--- a/src/tokens/_z-index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type {TokenGroup} from './tokens';
-
-export const zIndex: TokenGroup = {
-  'z-1': '100',
-  'z-2': '400',
-  'z-3': '510',
-  'z-4': '512',
-  'z-5': '513',
-  'z-6': '514',
-  'z-7': '515',
-  'z-8': '516',
-  'z-9': '517',
-  'z-10': '518',
-  'z-11': '519',
-  'z-12': '520',
-};
diff --git a/tokens/schemas/token-group.json b/src/tokens/schemas/token-group.json
similarity index 100%
rename from tokens/schemas/token-group.json
rename to src/tokens/schemas/token-group.json
diff --git a/tokens/color.dark.json b/src/tokens/token-groups/color.dark.json
similarity index 100%
rename from tokens/color.dark.json
rename to src/tokens/token-groups/color.dark.json
diff --git a/tokens/color.light.json b/src/tokens/token-groups/color.light.json
similarity index 100%
rename from tokens/color.light.json
rename to src/tokens/token-groups/color.light.json
diff --git a/src/tokens/token-groups/depth.json b/src/tokens/token-groups/depth.json
new file mode 100644
index 00000000000..571c5a9ad92
--- /dev/null
+++ b/src/tokens/token-groups/depth.json
@@ -0,0 +1,14 @@
+{
+  "shadow-transparent": "0 0 0 0 transparent",
+  "shadow-faint": "0 1px 0 0 rgba(22, 29, 37, 0.05)",
+  "shadow-base": "0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)",
+  "shadow-deep": "0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)",
+  "shadow-button": "0 1px 0 rgba(0, 0, 0, 0.05)",
+  "shadow-top-bar": "0 2px 2px -1px rgba(0, 0, 0, 0.15)",
+  "shadow-card": "0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)",
+  "shadow-popover": "-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)",
+  "shadow-layer": "0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)",
+  "shadow-modal": "0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)",
+  "shadows-inset-button": "inset 0 -1px 0 rgba(0, 0, 0, 0.2)",
+  "shadows-inset-button-pressed": "inset 0 1px 0 rgba(0, 0, 0, 0.15)"
+}
diff --git a/src/tokens/token-groups/legacy-tokens.json b/src/tokens/token-groups/legacy-tokens.json
new file mode 100644
index 00000000000..dd46534326e
--- /dev/null
+++ b/src/tokens/token-groups/legacy-tokens.json
@@ -0,0 +1,19 @@
+{
+  "override-loading-z-index": "514",
+  "choice-size": "20px",
+  "icon-size": "10px",
+  "choice-margin": "1px",
+  "control-border-width": "2px",
+  "banner-border-default": "inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)",
+  "banner-border-success": "inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)",
+  "banner-border-highlight": "inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)",
+  "banner-border-warning": "inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)",
+  "banner-border-critical": "inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)",
+  "thin-border-subdued": "1px solid var(--p-border-subdued)",
+  "text-field-spinner-offset": "2px",
+  "text-field-focus-ring-offset": "-4px",
+  "button-group-item-spacing": "-1px",
+  "range-slider-thumb-size-base": "16px",
+  "range-slider-thumb-size-active": "24px",
+  "frame-offset": "0px"
+}
diff --git a/tokens/motion.json b/src/tokens/token-groups/motion.json
similarity index 100%
rename from tokens/motion.json
rename to src/tokens/token-groups/motion.json
diff --git a/tokens/shape.json b/src/tokens/token-groups/shape.json
similarity index 65%
rename from tokens/shape.json
rename to src/tokens/token-groups/shape.json
index a0b34dc1140..d34254ec9d7 100644
--- a/tokens/shape.json
+++ b/src/tokens/token-groups/shape.json
@@ -5,5 +5,7 @@
   "border-radius-3": "12px",
   "border-radius-4": "16px",
   "border-radius-5": "20px",
-  "border-radius-6": "50%"
+  "border-radius-base": "3px",
+  "border-radius-large": "6px",
+  "border-radius-half": "50%"
 }
diff --git a/tokens/spacing.json b/src/tokens/token-groups/spacing.json
similarity index 100%
rename from tokens/spacing.json
rename to src/tokens/token-groups/spacing.json
diff --git a/tokens/typography.json b/src/tokens/token-groups/typography.json
similarity index 100%
rename from tokens/typography.json
rename to src/tokens/token-groups/typography.json
diff --git a/tokens/z-index.json b/src/tokens/token-groups/z-index.json
similarity index 100%
rename from tokens/z-index.json
rename to src/tokens/token-groups/z-index.json
diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
index 44d13c7c4a8..8630b72e380 100644
--- a/src/tokens/tokens.ts
+++ b/src/tokens/tokens.ts
@@ -1,11 +1,13 @@
-import {depth} from './_depth';
-import {legacyTokens} from './_legacy-tokens';
-import {lightColorScheme, darkColorScheme} from './_color';
-import {motion} from './_motion';
-import {shape} from './_shape';
-import {spacing} from './_spacing';
-import {typography} from './_typography';
-import {zIndex} from './_z-index';
+import depth from './token-groups/depth.json';
+import legacyTokens from './token-groups/legacy-tokens.json';
+import darkColorScheme from './token-groups/color.dark.json';
+import lightColorScheme from './token-groups/color.light.json';
+import motion from './token-groups/motion.json';
+import shape from './token-groups/shape.json';
+import spacing from './token-groups/spacing.json';
+import typography from './token-groups/typography.json';
+import zIndex from './token-groups/z-index.json';
+import {tokensToRems} from './utilities';
 
 /**
  * Values to convert to CSS custom properties.
@@ -56,12 +58,12 @@ export interface Tokens {
 }
 
 export const tokens: Tokens = {
-  depth,
   colorSchemes,
-  legacyTokens,
+  depth,
+  legacyTokens: tokensToRems(legacyTokens),
   motion,
-  shape,
-  spacing,
+  shape: tokensToRems(shape),
+  spacing: tokensToRems(spacing),
   typography,
   zIndex,
 };
diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts
index 71fc8bdb971..21077f4d590 100644
--- a/src/tokens/utilities.ts
+++ b/src/tokens/utilities.ts
@@ -1,5 +1,17 @@
+import type {TokenGroup} from './tokens';
+
 const BASE_FONT_SIZE = 16;
 
-export function rem(px: string) {
-  return `${parseInt(px, 10) / BASE_FONT_SIZE}rem`;
+function rem(value: string) {
+  return value.replace(
+    // https://regex101.com/r/RBL7EE/1
+    /\d+(?:\.\d+|\d*)px/g,
+    (px: string) => `${parseInt(px, 10) / BASE_FONT_SIZE}rem`,
+  );
+}
+
+export function tokensToRems(tokenGroup: TokenGroup): TokenGroup {
+  return Object.fromEntries(
+    Object.entries(tokenGroup).map(([token, value]) => [token, rem(value)]),
+  );
 }
diff --git a/tokens/legacy-tokens.json b/tokens/legacy-tokens.json
deleted file mode 100644
index 14489af1f64..00000000000
--- a/tokens/legacy-tokens.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "card-shadow": "0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)",
-  "popover-shadow": "-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)",
-  "modal-shadow": "0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)",
-  "top-bar-shadow": "0 2px 2px -1px var(--p-shadow-from-direct-light)",
-  "button-drop-shadow": "0 1px 0 rgba(0, 0, 0, 0.05)",
-  "button-inner-shadow": "inset 0 -1px 0 rgba(0, 0, 0, 0.2)",
-  "button-pressed-inner-shadow": "inset 0 1px 0 rgba(0, 0, 0, 0.15)",
-  "override-loading-z-index": "514",
-  "choice-size": "2rem",
-  "icon-size": "1rem",
-  "choice-margin": "0.1rem",
-  "control-border-width": "0.2rem",
-  "banner-border-default": "inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)",
-  "banner-border-success": "inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)",
-  "banner-border-highlight": "inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)",
-  "banner-border-warning": "inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)",
-  "banner-border-critical": "inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)",
-  "thin-border-subdued": "0.1rem solid var(--p-border-subdued)",
-  "text-field-spinner-offset": "0.2rem",
-  "text-field-focus-ring-offset": "-0.4rem",
-  "button-group-item-spacing": "-0.1rem",
-  "range-slider-thumb-size-base": "1.6rem",
-  "range-slider-thumb-size-active": "2.4rem",
-  "frame-offset": "0px"
-}
diff --git a/yarn.lock b/yarn.lock
index 379983f4e7f..d1d683d8df6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1788,6 +1788,13 @@
     "@rollup/pluginutils" "^3.0.4"
     mini-svg-data-uri "^1.1.3"
 
+"@rollup/plugin-json@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
+  integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+
 "@rollup/plugin-node-resolve@^13.0.0":
   version "13.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz#b10222f4145a019740acb7738402130d848660c0"