diff --git a/.changeset/fuzzy-days-grow.md b/.changeset/fuzzy-days-grow.md
new file mode 100644
index 000000000..380fce8f3
--- /dev/null
+++ b/.changeset/fuzzy-days-grow.md
@@ -0,0 +1,37 @@
+---
+'@launchpad-ui/progress-bubbles': minor
+'@launchpad-ui/split-button': minor
+'@launchpad-ui/navigation': minor
+'@launchpad-ui/pagination': minor
+'@launchpad-ui/clipboard': minor
+'@launchpad-ui/markdown': minor
+'@launchpad-ui/snackbar': minor
+'@launchpad-ui/tab-list': minor
+'@launchpad-ui/counter': minor
+'@launchpad-ui/popover': minor
+'@launchpad-ui/tooltip': minor
+'@launchpad-ui/avatar': minor
+'@launchpad-ui/banner': minor
+'@launchpad-ui/button': minor
+'@launchpad-ui/drawer': minor
+'@launchpad-ui/filter': minor
+'@launchpad-ui/select': minor
+'@launchpad-ui/slider': minor
+'@launchpad-ui/toggle': minor
+'@launchpad-ui/tokens': minor
+'@launchpad-ui/alert': minor
+'@launchpad-ui/icons': minor
+'@launchpad-ui/modal': minor
+'@launchpad-ui/table': minor
+'@launchpad-ui/toast': minor
+'@launchpad-ui/card': minor
+'@launchpad-ui/chip': minor
+'@launchpad-ui/form': minor
+'@launchpad-ui/menu': minor
+'@launchpad-ui/tag': minor
+'@launchpad-ui/data-table': minor
+'@launchpad-ui/inline-edit': minor
+'@launchpad-ui/core': minor
+---
+
+Use base 16 font size
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 06b899945..ec68c8b33 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -67,10 +67,10 @@ export const decorators = [
         return (
           <MotionConfig reducedMotion="user">
             <div style={{ display: 'flex', flexDirection: 'row', minHeight: '100vh' }}>
-              <div style={{ width: '50vw', padding: '1rem' }}>
+              <div style={{ width: '50vw', padding: '0.625rem' }}>
                 <StoryFn />
               </div>
-              <div data-theme="dark" style={{ width: '50vw', padding: '1rem' }}>
+              <div data-theme="dark" style={{ width: '50vw', padding: '0.625rem' }}>
                 <StoryFn />
               </div>
             </div>
@@ -81,7 +81,7 @@ export const decorators = [
         document.documentElement.setAttribute('data-theme', theme);
         return (
           <MotionConfig reducedMotion="user">
-            <div style={{ padding: '1rem' }}>
+            <div style={{ padding: '0.625rem' }}>
               <StoryFn />
             </div>
           </MotionConfig>
diff --git a/.storybook/styles.css b/.storybook/styles.css
index 64536d7bd..cd34f293f 100644
--- a/.storybook/styles.css
+++ b/.storybook/styles.css
@@ -1,5 +1,5 @@
 html {
-  font-size: 62.5%;
+  font-size: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility;
diff --git a/apps/remix/app/routes/components.popover.tsx b/apps/remix/app/routes/components.popover.tsx
index 394db2380..c59133d73 100644
--- a/apps/remix/app/routes/components.popover.tsx
+++ b/apps/remix/app/routes/components.popover.tsx
@@ -4,7 +4,7 @@ export default function Index() {
   return (
     <Popover isOpen>
       <Button>Target</Button>
-      <div style={{ padding: '2rem' }}>Content to show</div>
+      <div style={{ padding: '1.25rem' }}>Content to show</div>
     </Popover>
   );
 }
diff --git a/apps/remix/app/routes/components.tab-list.tsx b/apps/remix/app/routes/components.tab-list.tsx
index 442a37bca..814037e87 100644
--- a/apps/remix/app/routes/components.tab-list.tsx
+++ b/apps/remix/app/routes/components.tab-list.tsx
@@ -5,10 +5,10 @@ export default function Index() {
   return (
     <TabList>
       <Item key="1" title="Active tab">
-        <p style={{ padding: '1rem' }}>Active tab</p>
+        <p style={{ padding: '0.625rem' }}>Active tab</p>
       </Item>
       <Item key="2" title="Another tab">
-        <p style={{ padding: '1rem' }}>Another tab</p>
+        <p style={{ padding: '0.625rem' }}>Another tab</p>
       </Item>
     </TabList>
   );
diff --git a/apps/remix/app/styles/global.css b/apps/remix/app/styles/global.css
index 790be03e6..d0e814645 100644
--- a/apps/remix/app/styles/global.css
+++ b/apps/remix/app/styles/global.css
@@ -1,5 +1,5 @@
 html {
-  font-size: 62.5%;
+  font-size: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility;
diff --git a/packages/alert/src/styles/Alert.module.css b/packages/alert/src/styles/Alert.module.css
index 4a493ca30..74dfc3a1f 100644
--- a/packages/alert/src/styles/Alert.module.css
+++ b/packages/alert/src/styles/Alert.module.css
@@ -19,10 +19,10 @@
 .Alert {
   position: relative;
   display: flex;
-  gap: 1.4rem;
+  gap: 0.875rem;
   border: none;
-  padding: 1.4rem 1.8rem;
-  font-size: 1.4rem;
+  padding: 0.875rem 1.125rem;
+  font-size: 0.875rem;
   line-height: 1.45;
   white-space: normal;
   width: 100%;
@@ -34,15 +34,15 @@
 
 .Alert-heading {
   margin-top: 0;
-  margin-bottom: 0.4rem;
-  font-size: 1.6rem;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
   color: var(--lp-color-text-feedback-base);
   font-weight: var(--lp-font-weight-medium);
   line-height: 1.25;
 }
 
 .Alert :global(.ButtonGroup) {
-  margin-top: 1.2rem;
+  margin-top: 0.75rem;
 }
 
 .Alert .Alert-icon {
@@ -58,7 +58,7 @@
 /* Alert size variants */
 
 .Alert.Alert--small {
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 }
 
 .Alert.Alert--small .Alert-icon {
@@ -68,7 +68,7 @@
 
 .Alert.Alert--wide {
   width: 86%;
-  margin-top: 0.8rem;
+  margin-top: 0.5rem;
 }
 
 .Alert.Alert--compact {
@@ -188,7 +188,7 @@
 
 .Alert-content {
   flex-grow: 1;
-  max-width: 70rem;
+  max-width: 43.75rem;
   min-width: 1px;
   word-break: break-word;
 }
diff --git a/packages/avatar/src/styles/Avatar.module.css b/packages/avatar/src/styles/Avatar.module.css
index 2b451d281..e9400d7f5 100644
--- a/packages/avatar/src/styles/Avatar.module.css
+++ b/packages/avatar/src/styles/Avatar.module.css
@@ -44,25 +44,25 @@
 }
 
 .Avatar.Avatar--tiny {
-  height: 1rem;
-  width: 1rem;
-  font-size: 0.5rem;
+  height: 0.625rem;
+  width: 0.625rem;
+  font-size: 0.3125rem;
 }
 
 .Avatar.Avatar--small {
-  height: 1.6rem;
-  width: 1.6rem;
-  font-size: 0.8rem;
+  height: 1rem;
+  width: 1rem;
+  font-size: 0.5rem;
 }
 
 .Avatar.Avatar--medium {
-  height: 2.4rem;
-  width: 2.4rem;
-  font-size: 1.1rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: 0.6875rem;
 }
 
 .Avatar.Avatar--large {
-  height: 4rem;
-  width: 4rem;
-  font-size: 2rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1.25rem;
 }
diff --git a/packages/banner/src/styles/Banner.module.css b/packages/banner/src/styles/Banner.module.css
index e25b0259a..e19425ac3 100644
--- a/packages/banner/src/styles/Banner.module.css
+++ b/packages/banner/src/styles/Banner.module.css
@@ -15,8 +15,8 @@
 
 .Banner {
   display: flex;
-  padding: 1.4rem 1.8rem;
-  font-size: 1.4rem;
+  padding: 0.875rem 1.125rem;
+  font-size: 0.875rem;
   line-height: 1.45;
   white-space: normal;
   border-bottom: 1px;
@@ -25,8 +25,8 @@
 
 .Banner-heading {
   margin-top: 0;
-  margin-bottom: 0.4rem;
-  font-size: 1.6rem;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
   font-weight: var(--lp-font-weight-medium);
   line-height: 1.25;
 }
@@ -36,7 +36,7 @@
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
-  margin-left: 1.4rem;
+  margin-left: 0.875rem;
   flex-grow: 1;
 }
 
diff --git a/packages/button/src/styles/Button.css b/packages/button/src/styles/Button.css
index 5e2d72fca..54a13c233 100644
--- a/packages/button/src/styles/Button.css
+++ b/packages/button/src/styles/Button.css
@@ -17,34 +17,34 @@
   border-radius: var(--Button-border-radius-default);
   font-size: var(--Button-font-size-default);
   line-height: var(--Button-line-height-default);
-  padding: 0.7rem 0.8rem;
+  padding: 0.4375rem 0.5rem;
   cursor: default;
   user-select: none;
   appearance: none;
-  min-height: 3.2rem;
+  min-height: 2rem;
 }
 
 .Button--tiny {
   border-radius: var(--Button-border-radius-small);
   font-size: var(--lp-font-size-100);
   line-height: var(--Button-line-height-small);
-  padding: 0.1rem 0.4rem;
-  min-height: 2rem;
+  padding: 0.0625rem 0.25rem;
+  min-height: 1.25rem;
 }
 
 .Button--small {
   border-radius: var(--Button-border-radius-small);
   font-size: var(--Button-font-size-small);
   line-height: var(--Button-line-height-small);
-  padding: 0.3rem 0.8rem;
-  min-height: 2.4rem;
+  padding: 0.1875rem 0.5rem;
+  min-height: 1.5rem;
 }
 
 .Button--big {
   font-size: var(--Button-font-size-large);
   line-height: var(--Button-line-height-large);
-  padding: 0.7rem 1.2rem;
-  min-height: 4rem;
+  padding: 0.4375rem 0.75rem;
+  min-height: 2.5rem;
 }
 
 .Button--fit {
@@ -57,11 +57,11 @@
 }
 
 .Button:not(.Button--icon) > .Button-icon:first-child {
-  margin-right: 0.5rem;
+  margin-right: 0.3125rem;
 }
 
 .Button:not(.Button--icon) > .Button-icon:last-child {
-  margin-left: 0.5rem;
+  margin-left: 0.3125rem;
 }
 
 .Button:hover {
@@ -389,15 +389,15 @@
 .Button.Button--icon {
   padding: 0;
   line-height: 1;
-  height: 3.2rem;
-  width: 3.2rem;
+  height: 2rem;
+  width: 2rem;
   min-height: auto;
   flex-shrink: 0;
 }
 
 .Button.Button--icon.Button--small {
-  height: 2.4rem;
-  width: 2.4rem;
+  height: 1.5rem;
+  width: 1.5rem;
 }
 /* stylelint-enable no-descending-specificity */
 
diff --git a/packages/button/src/styles/ButtonGroup.css b/packages/button/src/styles/ButtonGroup.css
index 91cf787e4..569596d19 100644
--- a/packages/button/src/styles/ButtonGroup.css
+++ b/packages/button/src/styles/ButtonGroup.css
@@ -5,11 +5,11 @@
 }
 
 .ButtonGroup--normal {
-  gap: 1rem;
+  gap: 0.625rem;
 }
 
 .ButtonGroup--large {
-  gap: 2rem;
+  gap: 1.25rem;
 }
 
 .ButtonGroup--compact > .Button + .Button,
diff --git a/packages/button/src/styles/ButtonVariables.css b/packages/button/src/styles/ButtonVariables.css
index 16d028f11..e981a6a7f 100644
--- a/packages/button/src/styles/ButtonVariables.css
+++ b/packages/button/src/styles/ButtonVariables.css
@@ -39,14 +39,14 @@
 
   /* End Remaining Legacy Tokens */
 
-  --Button-font-size-default: 1.4rem;
-  --Button-font-size-small: 1.4rem;
-  --Button-font-size-large: 1.6rem;
+  --Button-font-size-default: 0.875rem;
+  --Button-font-size-small: 0.875rem;
+  --Button-font-size-large: 1rem;
   --Button-font-weight: var(--lp-font-weight-medium);
   --Button-line-height-default: 114%;
   --Button-line-height-small: 114%;
   --Button-line-height-large: 150%;
-  --Button-border-radius-default: 0.6rem;
+  --Button-border-radius-default: 0.375rem;
   --Button-border-radius-small: var(--lp-border-radius-regular);
   --Button-border-radius-link: 1px;
   --Button-border-radius-withIcon: 50%;
diff --git a/packages/button/stories/Button.stories.css b/packages/button/stories/Button.stories.css
index 3ef1729db..ce5a91df7 100644
--- a/packages/button/stories/Button.stories.css
+++ b/packages/button/stories/Button.stories.css
@@ -6,8 +6,8 @@
 .Storygroup-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 12rem auto;
-  grid-gap: 1.2rem;
+  grid-template-columns: 7.5rem auto;
+  grid-gap: 0.75rem;
   justify-items: flex-start;
 }
 
diff --git a/packages/card/src/styles/Card.module.css b/packages/card/src/styles/Card.module.css
index 13c809395..c6b6deb93 100644
--- a/packages/card/src/styles/Card.module.css
+++ b/packages/card/src/styles/Card.module.css
@@ -16,7 +16,7 @@
 }
 
 .sub {
-  height: 16rem;
+  height: 10rem;
 }
 
 .featureCard:hover {
@@ -79,7 +79,7 @@ input[type='radio']:focus + .featureCard {
   border: var(--lp-border-width-200) solid var(--color-border-interactive-disabled, #e6e6e6);
   color: var(--lp-color-text-interactive-disabled);
   background-color: var(--lp-color-bg-ui-primary);
-  height: 6rem;
+  height: 3.75rem;
 }
 
 .hide {
diff --git a/packages/card/stories/RadioCard.stories.tsx b/packages/card/stories/RadioCard.stories.tsx
index 189a88a96..84d7c5d04 100644
--- a/packages/card/stories/RadioCard.stories.tsx
+++ b/packages/card/stories/RadioCard.stories.tsx
@@ -8,7 +8,7 @@ export default {
   description: 'A radio button with a label and optional image and subtext.',
   decorators: [
     (Story: StoryFn) => (
-      <div style={{ display: 'flex', width: '24rem' }}>
+      <div style={{ display: 'flex', width: '15rem' }}>
         <Story />
       </div>
     ),
diff --git a/packages/chip/src/styles/Chip.module.css b/packages/chip/src/styles/Chip.module.css
index d43940c85..b8f325b22 100644
--- a/packages/chip/src/styles/Chip.module.css
+++ b/packages/chip/src/styles/Chip.module.css
@@ -39,7 +39,7 @@
   display: inline-flex;
   align-items: center;
   font-weight: var(--lp-font-weight-semibold);
-  border-radius: 0.2rem;
+  border-radius: 0.125rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -50,17 +50,17 @@
 }
 
 .small {
-  font-size: 1.4rem;
+  font-size: 0.875rem;
   line-height: 1.4;
-  padding: 0.215rem 0.6rem;
-  height: 2.4rem;
+  padding: 0.13437rem 0.375rem;
+  height: 1.5rem;
 }
 
 .chip.tiny {
-  font-size: 1.2rem;
+  font-size: 0.75rem;
   line-height: 1.33;
-  padding: 0.2rem 0.4rem;
-  height: 2rem;
+  padding: 0.125rem 0.25rem;
+  height: 1.25rem;
 }
 
 .info {
@@ -111,5 +111,5 @@
 }
 
 .icon {
-  margin-right: 0.2rem;
+  margin-right: 0.125rem;
 }
diff --git a/packages/clipboard/src/styles/CopyCodeButton.module.css b/packages/clipboard/src/styles/CopyCodeButton.module.css
index 5ab491f91..c589fa1c4 100644
--- a/packages/clipboard/src/styles/CopyCodeButton.module.css
+++ b/packages/clipboard/src/styles/CopyCodeButton.module.css
@@ -14,7 +14,7 @@
   font-size: var(--lp-font-size-200);
   text-align: left;
   margin: 0;
-  padding: 0.275rem 0.8rem;
+  padding: 0.17188rem 0.5rem;
   cursor: pointer;
   color: var(--lp-color-text-ui-primary-base);
   border: 1px solid var(--lp-color-border-interactive-secondary-base);
@@ -33,7 +33,7 @@
 
   &.basic,
   &.minimal {
-    padding: 0.275rem 0.4rem;
+    padding: 0.17188rem 0.25rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -88,10 +88,10 @@
 
 .CopyCodeButton--icon {
   padding: 0;
-  height: 1.5rem;
-  width: 1.7rem;
+  height: 0.9375rem;
+  width: 1.0625rem;
   min-height: auto;
-  margin-left: 0.65rem;
+  margin-left: 0.40625rem;
   flex-shrink: 0;
   top: -0.5px;
 }
diff --git a/packages/clipboard/src/styles/CopyToClipboard.module.css b/packages/clipboard/src/styles/CopyToClipboard.module.css
index 9dec7b9b5..ed9ce8d0f 100644
--- a/packages/clipboard/src/styles/CopyToClipboard.module.css
+++ b/packages/clipboard/src/styles/CopyToClipboard.module.css
@@ -11,5 +11,5 @@
 }
 
 .Clipboard-copied {
-  margin-left: 0.5rem;
+  margin-left: 0.3125rem;
 }
diff --git a/packages/clipboard/stories/CopyToClipboard.stories.tsx b/packages/clipboard/stories/CopyToClipboard.stories.tsx
index 706683813..f24cd6f2c 100644
--- a/packages/clipboard/stories/CopyToClipboard.stories.tsx
+++ b/packages/clipboard/stories/CopyToClipboard.stories.tsx
@@ -97,7 +97,7 @@ const WithImperativeHandleWrapper = () => {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       onClick={handleClick}
-      style={{ border: '3px solid #efefef', padding: '2rem', maxWidth: '500px' }}
+      style={{ border: '3px solid #efefef', padding: '1.25rem', maxWidth: '500px' }}
     >
       <h2>Triggering copy imperatively</h2>
       <p>
diff --git a/packages/counter/src/styles/Counter.module.css b/packages/counter/src/styles/Counter.module.css
index df5e43e9f..df9ade733 100644
--- a/packages/counter/src/styles/Counter.module.css
+++ b/packages/counter/src/styles/Counter.module.css
@@ -1,13 +1,13 @@
 .Counter {
   display: inline-block;
-  font-size: 1.1rem;
+  font-size: 0.6875rem;
   font-weight: var(--lp-font-weight-bold);
   line-height: var(--lp-line-height-200);
   padding: 2px 8px;
-  border-radius: 1rem;
+  border-radius: 0.625rem;
   color: var(--lp-color-text-ui-secondary);
   border: 1px solid var(--lp-color-blue-500);
-  min-width: 2rem;
+  min-width: 1.25rem;
   vertical-align: middle;
 }
 
diff --git a/packages/data-table/src/styles/DataTable.css.ts b/packages/data-table/src/styles/DataTable.css.ts
index 7a5da9efe..352da6ce8 100644
--- a/packages/data-table/src/styles/DataTable.css.ts
+++ b/packages/data-table/src/styles/DataTable.css.ts
@@ -38,7 +38,7 @@ const cell = style([
 const headerCell = style([
   cell,
   {
-    padding: `1rem ${vars.spacing[600]}`,
+    padding: `0.625rem ${vars.spacing[600]}`,
   },
 ]);
 
diff --git a/packages/drawer/src/styles/Drawer.module.css b/packages/drawer/src/styles/Drawer.module.css
index bf23655ae..128466953 100644
--- a/packages/drawer/src/styles/Drawer.module.css
+++ b/packages/drawer/src/styles/Drawer.module.css
@@ -10,7 +10,7 @@
 }
 
 .drawer {
-  --page-gutter-width: 1rem;
+  --page-gutter-width: 0.625rem;
 
   z-index: var(--lp-z-index-400);
   position: fixed;
@@ -20,7 +20,7 @@
 
 @media (--tablet) {
   .drawer {
-    --page-gutter-width: 4rem;
+    --page-gutter-width: 2.5rem;
   }
 }
 
@@ -49,19 +49,19 @@
 
 @media (--tablet) {
   .small .content {
-    width: 45rem;
+    width: 28.125rem;
   }
 
   .medium .content {
-    width: 65rem;
+    width: 40.625rem;
   }
 
   .large .content {
-    width: 80rem;
+    width: 50rem;
   }
 
   .xLarge .content {
-    width: 120rem;
+    width: 75rem;
   }
 
   .full .content {
@@ -71,7 +71,7 @@
 }
 
 .content section {
-  padding: 3.2rem var(--page-gutter-width);
+  padding: 2rem var(--page-gutter-width);
 }
 
 .content section + section {
@@ -80,6 +80,6 @@
 
 .closeButton {
   position: absolute;
-  right: 1rem;
-  top: 1rem;
+  right: 0.625rem;
+  top: 0.625rem;
 }
diff --git a/packages/filter/src/styles/Filter.module.css b/packages/filter/src/styles/Filter.module.css
index 470b93f0d..5c6576a88 100644
--- a/packages/filter/src/styles/Filter.module.css
+++ b/packages/filter/src/styles/Filter.module.css
@@ -26,7 +26,7 @@
   border-radius: var(--lp-border-radius-medium);
   padding-top: 0;
   padding-bottom: 0;
-  line-height: 3.2rem;
+  line-height: 2rem;
   display: flex;
   align-items: center;
   margin: 0;
@@ -36,17 +36,17 @@
 
 .appliedButton {
   color: var(--lp-color-text-ui-primary-base);
-  height: 2rem;
+  height: 1.25rem;
   background-color: var(--lp-color-bg-interactive-secondary-hover);
-  padding: 0.2rem 0.6rem;
-  border-radius: 0.2rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.125rem;
   display: flex;
 }
 
 .button,
 .appliedButton {
   font-family: inherit;
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   cursor: pointer;
   border-width: var(--lp-border-width-200);
   border-style: solid;
@@ -67,12 +67,12 @@
 }
 
 .name {
-  margin-right: 0.5rem;
+  margin-right: 0.3125rem;
   font-weight: var(--lp-font-weight-medium);
 }
 
 .appliedName {
-  margin-right: 0.3rem;
+  margin-right: 0.1875rem;
 }
 
 .description {
@@ -82,8 +82,8 @@
 
 .description,
 .appliedDescription {
-  margin-right: 0.5rem;
-  max-width: 16rem;
+  margin-right: 0.3125rem;
+  max-width: 10rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -91,11 +91,11 @@
 
 .clear {
   cursor: pointer;
-  padding: 0.3rem;
+  padding: 0.1875rem;
 }
 
 .button.isClearable {
-  padding-right: 3.1rem;
+  padding-right: 1.9375rem;
   background-color: var(--lp-component-filter-color-bg-clearable);
 
   &:focus,
@@ -122,15 +122,15 @@
 .clearTooltip {
   line-height: 1;
   position: absolute;
-  right: 0.7rem;
+  right: 0.4375rem;
 }
 
 .filterClearButton {
   text-decoration: none;
   color: var(--lp-color-text-interactive-destructive);
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   font-weight: var(--lp-font-weight-medium);
-  padding: 1rem;
+  padding: 0.625rem;
   width: 100%;
   border-bottom: 1px solid var(--lp-color-border-interactive-secondary-base);
 }
diff --git a/packages/form/src/IconField.tsx b/packages/form/src/IconField.tsx
index 3b966c0b8..dcd4a7257 100644
--- a/packages/form/src/IconField.tsx
+++ b/packages/form/src/IconField.tsx
@@ -42,7 +42,7 @@ const IconField = ({
         })}
         size="small"
         className={styles.iconFieldIcon}
-        style={renderIconLast ? { right: '0.5rem' } : { left: '0.5rem' }}
+        style={renderIconLast ? { right: '0.313rem' } : { left: '0.313rem' }}
         aria-label={ariaLabel}
       />
     </Tooltip>
diff --git a/packages/form/src/styles/Form.module.css b/packages/form/src/styles/Form.module.css
index f1be9ff96..d25817afc 100644
--- a/packages/form/src/styles/Form.module.css
+++ b/packages/form/src/styles/Form.module.css
@@ -8,7 +8,7 @@
 }
 
 .formGroup {
-  margin: 2rem 0;
+  margin: 1.25rem 0;
   padding: 0;
   border: none;
 }
@@ -16,7 +16,7 @@
 /* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 .formIncreasedErrorMargin .formGroup {
-  margin: 2.8rem 0;
+  margin: 1.75rem 0;
 }
 
 .formInline .formGroup {
@@ -36,8 +36,8 @@
 .formInput {
   display: block;
   width: 100%;
-  padding: 0.6rem 1rem;
-  font-size: 1.3rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.8125rem;
   font-family: var(--lp-font-family-base);
   line-height: var(--lp-line-height-300);
   background-color: var(--lp-color-bg-field-base);
@@ -45,7 +45,7 @@
   border: 1px solid var(--lp-color-border-field-base);
   border-radius: var(--lp-border-radius-regular);
   transition: all var(--lp-duration-100) linear;
-  height: 3.2rem;
+  height: 2rem;
 }
 
 .formInput:placeholder-shown {
@@ -64,12 +64,12 @@ select.formInput {
   appearance: none;
   background: transparent;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z" fill="%23646f7a"/></svg>');
-  background-size: 2rem;
+  background-size: 1.25rem;
   background-repeat: no-repeat;
   background-position:
     right 0.4em top 50%,
     0 0;
-  padding-right: 2rem;
+  padding-right: 1.25rem;
 }
 
 .suffixContainer .formInput {
@@ -85,11 +85,11 @@ select.formInput {
 }
 
 .iconField:global(.IconBefore) .formInput {
-  padding-left: 3rem;
+  padding-left: 1.875rem;
 }
 
 .iconField:global(.IconAfter) .formInput {
-  padding-right: 3rem;
+  padding-right: 1.875rem;
 }
 
 .iconFieldIcon {
@@ -99,11 +99,11 @@ select.formInput {
 }
 
 .iconField:global(.IconBefore) .iconFieldIcon {
-  left: 1rem;
+  left: 0.625rem;
 }
 
 .iconField:global(.IconAfter) .iconFieldIcon {
-  right: 1rem;
+  right: 0.625rem;
 }
 
 .suffixContainer .formInput:focus {
@@ -112,11 +112,11 @@ select.formInput {
 
 .inlineForm .formGroup + .formGroup,
 .inlineForm .formGroup + :global(.Button) {
-  margin-left: 1rem;
+  margin-left: 0.625rem;
 }
 
 .label {
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   font-family: var(--lp-font-family-base);
   word-break: break-word;
 }
@@ -148,16 +148,16 @@ select.formInput {
 .formGroup .label {
   display: flex;
   align-items: center;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.125rem;
 }
 
 .formGroup .label + .label {
-  margin-top: 0.5rem;
+  margin-top: 0.3125rem;
 }
 
 .fieldError {
   color: var(--lp-color-text-feedback-error);
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 
   & svg {
     transform: translateY(-1px);
@@ -167,7 +167,7 @@ select.formInput {
 /* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 .formIncreasedErrorMargin .fieldError {
-  min-height: 2.8rem;
+  min-height: 1.75rem;
 }
 
 .label .fieldError {
@@ -176,13 +176,13 @@ select.formInput {
 
 .form:not(.inlineForm) .fieldError {
   display: block;
-  padding-top: 0.5rem;
+  padding-top: 0.3125rem;
   text-align: left;
 }
 
 .formIncreasedErrorMargin:not(.inlineForm) .fieldError {
-  padding-top: 0.1rem;
-  padding-bottom: 0.5rem;
+  padding-top: 0.0625rem;
+  padding-bottom: 0.3125rem;
 }
 
 .form .isInvalid .label {
@@ -203,15 +203,15 @@ select.formInput {
 
 .hint {
   display: block;
-  margin-top: 0.3rem;
-  font-size: 1.3rem;
+  margin-top: 0.1875rem;
+  font-size: 0.8125rem;
   font-weight: var(--lp-font-weight-regular);
   color: var(--lp-color-text-ui-secondary);
 }
 
 .field .hint {
   margin: 0;
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   color: var(--lp-color-text-ui-secondary);
   fill: var(--lp-color-text-ui-secondary);
 }
@@ -223,11 +223,11 @@ select.formInput {
 
 .fieldErrorMessage {
   color: var(--lp-color-text-feedback-error);
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 }
 
 .field.formGroup {
-  margin: 1rem 0;
+  margin: 0.625rem 0;
 }
 
 .field.formGroup:first-child {
@@ -304,16 +304,16 @@ input[type='checkbox']:disabled {
 .checkbox {
   align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
   flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
-  margin-right: 0.5rem;
-  margin-top: 0.4rem;
+  margin-right: 0.3125rem;
+  margin-top: 0.25rem;
 }
 
 .radio {
-  margin-right: 0.5rem;
+  margin-right: 0.3125rem;
 }
 
 .number {
-  min-width: 4.5rem;
+  min-width: 2.8125rem;
 }
 
 .suffixContainer {
@@ -359,8 +359,8 @@ input[type='checkbox']:disabled {
 }
 
 .formInputTiny {
-  padding: 0.1rem 0.6rem;
-  height: 2.4rem;
+  padding: 0.0625rem 0.375rem;
+  height: 1.5rem;
 }
 
 .iconField {
@@ -373,7 +373,7 @@ input[type='checkbox']:disabled {
 
 .fieldSet {
   border: none;
-  margin: 2rem 0;
+  margin: 1.25rem 0;
   padding: 0;
 }
 
@@ -394,7 +394,7 @@ input[type='checkbox']:disabled {
   position: relative;
 
   & .numberField-input {
-    padding-right: 2.4rem;
+    padding-right: 1.5rem;
   }
 
   & .numberField-stepperContainer {
@@ -402,15 +402,15 @@ input[type='checkbox']:disabled {
     opacity: 0;
     flex-direction: column;
     position: absolute;
-    width: 2.4rem;
+    width: 1.5rem;
     top: 1px;
     bottom: 1px;
     right: 1px;
     transition: all var(--lp-duration-100) linear;
 
     & .numberField-stepper {
-      --numberField-stepper-padding: 0.4rem;
-      --numberField-stepper-border-radius: calc(var(--lp-border-radius-regular) - 0.1rem);
+      --numberField-stepper-padding: 0.25rem;
+      --numberField-stepper-border-radius: calc(var(--lp-border-radius-regular) - 0.0625rem);
 
       background-color: var(--lp-color-bg-field-base);
       flex: auto;
diff --git a/packages/form/stories/TextArea.stories.css b/packages/form/stories/TextArea.stories.css
index a20915bb4..4af23c118 100644
--- a/packages/form/stories/TextArea.stories.css
+++ b/packages/form/stories/TextArea.stories.css
@@ -5,8 +5,8 @@
 .Textarea-storygroup-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 8rem auto;
-  grid-gap: 1.2rem;
+  grid-template-columns: 5rem auto;
+  grid-gap: 0.75rem;
   justify-items: flex-start;
 }
 
diff --git a/packages/icons/src/styles/Icon.module.css b/packages/icons/src/styles/Icon.module.css
index b3bd803cc..f91b1332e 100644
--- a/packages/icons/src/styles/Icon.module.css
+++ b/packages/icons/src/styles/Icon.module.css
@@ -11,43 +11,43 @@
 }
 
 .small {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 .tiny {
-  width: 1rem;
-  height: 1rem;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 .micro {
-  width: 0.7rem;
-  height: 0.7rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
 }
 
 .medium {
-  width: 2rem;
-  height: 2rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .mlarge {
-  width: 3rem;
-  height: 3rem;
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
 .large {
-  width: 4rem;
-  height: 4rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 .xlarge {
-  width: 6rem;
-  height: 6rem;
+  width: 3.75rem;
+  height: 3.75rem;
 }
 
 .huge {
-  width: 10rem;
-  height: 10rem;
+  width: 6.25rem;
+  height: 6.25rem;
 }
 
 .icon svg {
@@ -81,7 +81,7 @@
 }
 
 .isRounded {
-  border-radius: 10rem;
+  border-radius: 6.25rem;
 }
 
 .flairIconContainer {
diff --git a/packages/icons/stories/Icon.stories.tsx b/packages/icons/stories/Icon.stories.tsx
index 9c348dd10..0bf5950f3 100644
--- a/packages/icons/stories/Icon.stories.tsx
+++ b/packages/icons/stories/Icon.stories.tsx
@@ -40,12 +40,12 @@ const render: ArgsStoryFn<ReactRenderer> = (args, { globals }) => (
       display: 'grid',
       justifyContent: 'space-evenly',
       gridTemplateColumns: globals.theme === 'side-by-side' ? 'repeat(3, auto)' : 'repeat(4, auto)',
-      rowGap: '4rem',
-      marginTop: '4rem',
+      rowGap: '2.5rem',
+      marginTop: '2.5rem',
     }}
   >
     {icons.map((item, index) => (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }} key={index}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }} key={index}>
         <Icon name={item} size="medium" />
         <span>{item}</span>
       </div>
diff --git a/packages/inline-edit/src/styles/InlineEdit.css.ts b/packages/inline-edit/src/styles/InlineEdit.css.ts
index 93eb01a15..32600e4c9 100644
--- a/packages/inline-edit/src/styles/InlineEdit.css.ts
+++ b/packages/inline-edit/src/styles/InlineEdit.css.ts
@@ -22,8 +22,8 @@ const inline = recipe({
 const cancelButton = style({
   selectors: {
     '.Button--icon&': {
-      height: '3rem',
-      width: '3rem',
+      height: '1.875rem',
+      width: '1.875rem',
     },
   },
 });
diff --git a/packages/markdown/src/styles/Markdown.module.css b/packages/markdown/src/styles/Markdown.module.css
index aa60ac772..485447fb4 100644
--- a/packages/markdown/src/styles/Markdown.module.css
+++ b/packages/markdown/src/styles/Markdown.module.css
@@ -1,16 +1,16 @@
 .Markdown {
-  margin-top: 0.5rem;
+  margin-top: 0.3125rem;
 }
 
 .Markdown ol,
 .Markdown ul {
-  padding-left: 2rem;
+  padding-left: 1.25rem;
 }
 
 .Markdown ul li + li,
 .Markdown ol li + li,
 .Markdown > * :not(:first-child) {
-  margin-top: 0.2rem;
+  margin-top: 0.125rem;
 }
 
 .Markdown > p {
@@ -18,7 +18,7 @@
 }
 
 .Markdown p + p {
-  padding-top: 1.5rem;
+  padding-top: 0.9375rem;
 }
 
 .Markdown blockquote {
diff --git a/packages/menu/src/styles/Menu.css b/packages/menu/src/styles/Menu.css
index f06dc8df4..f06f7df50 100644
--- a/packages/menu/src/styles/Menu.css
+++ b/packages/menu/src/styles/Menu.css
@@ -6,10 +6,10 @@
   text-decoration: none;
   cursor: pointer;
   outline: none;
-  padding: 0.6rem 2.5rem;
+  padding: 0.375rem 1.5625rem;
   text-align: left;
   font-family: inherit;
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -30,7 +30,7 @@
 }
 
 .Menu-item-list {
-  min-width: 12rem;
+  min-width: 7.5rem;
   overflow: auto;
   max-height: 55vh;
 }
@@ -103,7 +103,7 @@
 }
 
 .Menu-item--nested {
-  padding-left: 4rem;
+  padding-left: 2.5rem;
 }
 
 .Menu-item--header {
@@ -111,7 +111,7 @@
 }
 
 .Menu-item .Gravatar {
-  margin-right: 0.5rem;
+  margin-right: 0.3125rem;
 }
 
 .Menu-item.is-highlighted {
@@ -133,7 +133,7 @@
 
 .Menu-item-icon {
   position: absolute;
-  left: 0.5rem;
+  left: 0.3125rem;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -143,8 +143,8 @@
 }
 
 .Menu-search {
-  padding: 1rem;
-  font-size: 1.3rem;
+  padding: 0.625rem;
+  font-size: 0.8125rem;
   border-bottom: 1px solid var(--lp-color-border-ui-primary);
 }
 
@@ -173,19 +173,19 @@
 }
 
 .MenuSize--xl {
-  width: 32rem;
+  width: 20rem;
 }
 
 .MenuSize--lg {
-  width: 24rem;
+  width: 15rem;
 }
 
 .MenuSize--md {
-  width: 16rem;
+  width: 10rem;
 }
 
 .MenuSize--sm {
-  width: 12rem;
+  width: 7.5rem;
 }
 
 .VirtualMenu-item-list {
diff --git a/packages/menu/stories/Menu.stories.css b/packages/menu/stories/Menu.stories.css
index aad7763ee..e97912ef4 100644
--- a/packages/menu/stories/Menu.stories.css
+++ b/packages/menu/stories/Menu.stories.css
@@ -1,5 +1,5 @@
 .MenuItem {
-  padding: 0.5rem;
+  padding: 0.3125rem;
   font-weight: bold;
   border-bottom: 1px solid #ccc;
 }
diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css
index de809c172..d412d4660 100644
--- a/packages/modal/src/styles/Modal.module.css
+++ b/packages/modal/src/styles/Modal.module.css
@@ -34,13 +34,13 @@
 .modal {
   position: relative;
   border: 1px solid var(--lp-color-border-ui-secondary);
-  border-radius: 0.2rem;
+  border-radius: 0.125rem;
   box-shadow: 0 0 6px var(--lp-color-shadow-ui-primary);
   display: flex;
   flex-direction: column;
   width: 100%;
   max-height: 100%;
-  padding-bottom: 1.6rem;
+  padding-bottom: 1rem;
   color: var(--lp-color-text-ui-secondary);
   background-color: var(--lp-component-modal-color-bg-content);
 }
@@ -48,8 +48,8 @@
 .header {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
-  padding: 1.6rem;
+  gap: 0.25rem;
+  padding: 1rem;
 }
 
 .title {
@@ -71,18 +71,18 @@
 
 .headerMain {
   display: flex;
-  gap: 0.8rem;
+  gap: 0.5rem;
   align-items: flex-start;
 }
 
 .headerDescription {
-  font-size: 1.4rem;
+  font-size: 0.875rem;
   color: var(--lp-color-text-overlay-primary);
   margin: 0;
 }
 
 .headerRequiredFields {
-  font-size: 1.4rem;
+  font-size: 0.875rem;
   color: var(--lp-color-text-overlay-primary);
   font-weight: var(--lp-font-weight-regular);
 }
@@ -97,8 +97,8 @@
 }
 
 .body {
-  padding: 0 1.6rem;
-  font-size: 1.5rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
   line-height: 1.5;
   color: var(--lp-color-text-ui-primary-base);
 
@@ -112,7 +112,7 @@
 }
 
 .footer {
-  padding: 1.6rem 1.6rem 0;
+  padding: 1rem 1rem 0;
   display: flex;
   justify-content: flex-end;
 }
@@ -122,7 +122,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  padding: 1.6rem;
+  padding: 1rem;
 }
 
 @media screen and (max-width: 429px) {
@@ -135,29 +135,29 @@
 
 @media screen and (min-width: 430px) {
   .overlay {
-    padding: 1.6rem;
+    padding: 1rem;
     align-items: center;
   }
 
   .modal {
-    padding-bottom: 2.4rem;
+    padding-bottom: 1.5rem;
   }
 
   .header {
-    padding: 2.4rem;
-    gap: 0.8rem;
+    padding: 1.5rem;
+    gap: 0.5rem;
   }
 
   .footer {
-    padding: 2.4rem 2.4rem 0;
+    padding: 1.5rem 1.5rem 0;
   }
 
   .footer.absoluteFooter {
-    padding: 2.4rem;
+    padding: 1.5rem;
   }
 
   .body {
-    padding: 0 2.4rem;
+    padding: 0 1.5rem;
   }
 
   .xsmall.modal {
@@ -165,18 +165,18 @@
   }
 
   .small.modal {
-    width: 45rem;
+    width: 28.125rem;
   }
 
   .medium.modal {
-    width: 65rem;
+    width: 40.625rem;
   }
 
   .large.modal {
-    width: 85rem;
+    width: 53.125rem;
   }
 
   .xlarge.modal {
-    width: 105rem;
+    width: 65.625rem;
   }
 }
diff --git a/packages/navigation/src/styles/Navigation.module.css b/packages/navigation/src/styles/Navigation.module.css
index b8131388d..fa4438e3e 100644
--- a/packages/navigation/src/styles/Navigation.module.css
+++ b/packages/navigation/src/styles/Navigation.module.css
@@ -1,17 +1,17 @@
 @import '../../../tokens/dist/media-queries.css';
 
 .Navigation {
-  --page-gutter-width: 1rem;
+  --page-gutter-width: 0.625rem;
 }
 
 @media (--tablet) {
   .Navigation {
-    --page-gutter-width: 4rem;
+    --page-gutter-width: 2.5rem;
   }
 }
 
 .Navigation .Nav--primary {
-  padding: 0 2.5rem;
+  padding: 0 1.5625rem;
 
   /**
    * The Navigation collapses at the point where horizontal scroll begins, so
@@ -25,11 +25,11 @@
    * In a collapsed state, we need to take up the same vertical space to avoid
    * shifting the page layout.
    */
-  padding: 1rem var(--page-gutter-width) 0.85rem;
+  padding: 0.625rem var(--page-gutter-width) 0.53125rem;
 }
 
 .Navigation--collapsed .NavigationList-wrapper {
-  padding: 1 1.4rem;
+  padding: 1 0.875rem;
 }
 
 .Nav {
@@ -42,10 +42,10 @@
 .Nav--secondary::after {
   content: '';
   position: absolute;
-  height: 0.1rem;
+  height: 0.0625rem;
   width: 100%;
   left: 0;
-  bottom: 0.2rem;
+  bottom: 0.125rem;
   background-color: var(--lp-color-border-ui-secondary);
 }
 
@@ -61,9 +61,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: 1.5rem;
+  font-size: 0.9375rem;
   font-weight: var(--lp-font-weight-medium);
-  padding: 0 1.2rem;
+  padding: 0 0.75rem;
   text-decoration: none;
   color: var(--lp-color-text-interactive-secondary);
   position: relative;
@@ -81,7 +81,7 @@
   overflow: hidden;
   user-select: none;
   pointer-events: none;
-  padding: 0 0.4rem;
+  padding: 0 0.25rem;
 }
 
 .Nav--primary .NavItem.is-active {
@@ -97,12 +97,12 @@
 }
 
 .Nav--primary .NavItem-name {
-  padding: 1.3rem 0.4rem;
+  padding: 0.8125rem 0.25rem;
 }
 
 .Nav--secondary .NavItem-name {
-  padding: 0 0.4rem;
-  border-bottom-width: 0.3rem;
+  padding: 0 0.25rem;
+  border-bottom-width: 0.1875rem;
 }
 
 .NavItem.is-active .NavItem-name {
@@ -116,9 +116,9 @@
 
 .Nav--secondary .NavItem {
   display: block;
-  font-size: 1.7rem;
+  font-size: 1.0625rem;
   font-weight: var(--lp-font-weight-medium);
-  padding: 1rem 1.2rem 0.1rem;
+  padding: 0.625rem 0.75rem 0.0625rem;
   text-decoration: none;
   color: var(--lp-color-text-ui-secondary);
   position: relative;
@@ -137,12 +137,12 @@
 }
 
 .NavItem:focus .NavItem-name {
-  box-shadow: 0 0 0 0.2rem var(--lp-color-blue-500);
-  border-radius: 0.6rem;
+  box-shadow: 0 0 0 0.125rem var(--lp-color-blue-500);
+  border-radius: 0.375rem;
 }
 
 .Nav--primary .NavItem:focus .NavItem-name {
-  padding: 1.3rem 0.4rem;
+  padding: 0.8125rem 0.25rem;
 }
 
 .Nav--primary .NavItem:hover {
@@ -165,7 +165,7 @@
 }
 
 .Nav--secondary .Nav-items {
-  gap: 1rem;
+  gap: 0.625rem;
 }
 
 @media (--tablet) {
@@ -184,7 +184,7 @@
 
 .NavItem-chip {
   align-self: center;
-  margin-left: 0.8rem;
+  margin-left: 0.5rem;
 }
 
 .NavItem-tooltip {
diff --git a/packages/pagination/src/styles/Pagination.module.css b/packages/pagination/src/styles/Pagination.module.css
index 5f29b5c62..019cc768d 100644
--- a/packages/pagination/src/styles/Pagination.module.css
+++ b/packages/pagination/src/styles/Pagination.module.css
@@ -6,21 +6,21 @@
 }
 
 .PaginationText {
-  padding: 0 0.5rem;
+  padding: 0 0.3125rem;
 }
 
 .PaginationButton {
   color: var(--lp-color-black-300);
   text-decoration: none;
-  font-size: 1.7rem;
+  font-size: 1.0625rem;
   cursor: pointer;
-  padding: 0.4rem;
+  padding: 0.25rem;
   vertical-align: top;
 }
 
 @media (--mobile) {
   .Pagination {
-    font-size: 1.7rem;
+    font-size: 1.0625rem;
     align-items: center;
   }
 
@@ -31,7 +31,7 @@
 
 @media (--tablet) {
   .Pagination {
-    font-size: 1.5rem;
+    font-size: 0.9375rem;
     align-items: flex-end;
   }
 
diff --git a/packages/popover/src/styles/Popover.module.css b/packages/popover/src/styles/Popover.module.css
index 659610e80..8c0e09384 100644
--- a/packages/popover/src/styles/Popover.module.css
+++ b/packages/popover/src/styles/Popover.module.css
@@ -10,7 +10,7 @@
 }
 
 .Popover {
-  --gap: 1rem;
+  --gap: 0.625rem;
 
   z-index: var(--lp-z-index-600);
   position: absolute;
diff --git a/packages/popover/stories/Popover.stories.tsx b/packages/popover/stories/Popover.stories.tsx
index 2a41d3b15..a851acf42 100644
--- a/packages/popover/stories/Popover.stories.tsx
+++ b/packages/popover/stories/Popover.stories.tsx
@@ -68,7 +68,7 @@ export const Default: Story = {
   args: {
     children: [
       <Button key="1">Target</Button>,
-      <div key="2" style={{ padding: '2rem' }}>
+      <div key="2" style={{ padding: '1.25rem' }}>
         Content to show
       </div>,
     ],
diff --git a/packages/progress-bubbles/src/ProgressBubbles.tsx b/packages/progress-bubbles/src/ProgressBubbles.tsx
index 23942579f..fc91ad119 100644
--- a/packages/progress-bubbles/src/ProgressBubbles.tsx
+++ b/packages/progress-bubbles/src/ProgressBubbles.tsx
@@ -7,7 +7,7 @@ import { Fragment } from 'react';
 import styles from './styles/ProgressBubbles.module.css';
 import { useDimensions } from './utils';
 
-const ICON_WIDTH = 2.8;
+const ICON_WIDTH = 1.75;
 
 type ProgressBubbleInfo = {
   label: string;
diff --git a/packages/progress-bubbles/src/styles/ProgressBubbles.module.css b/packages/progress-bubbles/src/styles/ProgressBubbles.module.css
index 8ae5a1900..97bf6bce1 100644
--- a/packages/progress-bubbles/src/styles/ProgressBubbles.module.css
+++ b/packages/progress-bubbles/src/styles/ProgressBubbles.module.css
@@ -12,15 +12,15 @@
 .ProgressBubbles {
   display: flex;
   align-items: center;
-  margin: 0 2rem;
+  margin: 0 1.25rem;
 }
 
 .ProgressBubbles-bubble {
   background-color: var(--lp-component-progressbubbles-color-bg);
-  width: 2rem;
-  height: 2rem;
-  border-radius: 1rem;
-  padding-top: 2rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.625rem;
+  padding-top: 1.25rem;
   box-sizing: border-box;
 
   /* text label */
@@ -29,7 +29,7 @@
   justify-content: center;
   white-space: nowrap;
   color: var(--lp-color-text-ui-secondary);
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 }
 
 .ProgressBubbles-bubble--first {
@@ -42,7 +42,7 @@
 
 .ProgressBubbles-line {
   flex-grow: 1;
-  height: 0.2rem;
+  height: 0.125rem;
   background-color: var(--lp-component-progressbubbles-color-bg);
 }
 
@@ -56,20 +56,20 @@
 }
 
 .ProgressBubbles--vertical .ProgressBubbles-line {
-  width: 0.2rem;
+  width: 0.125rem;
   height: auto;
 }
 
 .ProgressBubbles--vertical .ProgressBubbles-bubble {
-  padding: 0 0 0 2rem;
+  padding: 0 0 0 1.25rem;
   justify-content: flex-start;
 }
 
 .ProgressBubblesUsingItems-line {
   flex-grow: 1;
-  height: 0.7rem;
+  height: 0.4375rem;
   background-color: var(--lp-component-progressbubbles-color-bg);
-  margin: 0 -0.5rem;
+  margin: 0 -0.3125rem;
 }
 
 .ProgressBubblesUsingItems-line--completed {
@@ -82,7 +82,7 @@
   flex-direction: column;
   justify-content: center;
   white-space: nowrap;
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   align-items: center;
 }
 
@@ -93,8 +93,8 @@
   border: var(--lp-border-width-300) solid transparent;
   display: flex;
   justify-content: center;
-  gap: 0.2rem;
-  height: 2.8rem;
+  gap: 0.125rem;
+  height: 1.75rem;
   position: relative;
   text-align: center;
   z-index: 1;
@@ -107,8 +107,8 @@ div.ProgressBubbles-icon--current {
 
 .ProgressBubbles-icon svg {
   fill: var(--lp-color-white-0);
-  height: 1.6rem;
-  width: 1.6rem;
+  height: 1rem;
+  width: 1rem;
 }
 
 .ProgressBubbles-icon--pending svg {
@@ -129,18 +129,18 @@ div.ProgressBubbles-icon--warning {
 }
 
 div.ProgressBubbles-icon--warning svg {
-  height: 3.6rem;
-  width: 3.6rem;
+  height: 2.25rem;
+  width: 2.25rem;
   fill: var(--lp-component-progressbubbles-color-fill-warning);
 }
 
 .ProgressBubbles-icon--multiple {
-  border-radius: 2.4rem;
+  border-radius: 1.5rem;
 }
 
 .ProgressBubbles-text {
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  margin-bottom: 0.3125rem;
+  margin-top: 0.3125rem;
 }
 
 .ProgressBubblesPopoverTarget {
@@ -149,12 +149,12 @@ div.ProgressBubbles-icon--warning svg {
 
 .ProgressBubbles-label {
   color: var(--lp-color-text-ui-secondary);
-  padding-top: 1rem;
+  padding-top: 0.625rem;
   position: absolute;
-  top: 2rem;
+  top: 1.25rem;
   overflow: hidden;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.3125rem;
+  margin-bottom: 0.3125rem;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
diff --git a/packages/progress-bubbles/stories/ProgressBubbles.stories.tsx b/packages/progress-bubbles/stories/ProgressBubbles.stories.tsx
index d66105280..8530db6be 100644
--- a/packages/progress-bubbles/stories/ProgressBubbles.stories.tsx
+++ b/packages/progress-bubbles/stories/ProgressBubbles.stories.tsx
@@ -48,7 +48,7 @@ const items = [
     label: 'Complete',
     icons: <Icon name="star" />,
     popover: (
-      <div style={{ padding: '1rem' }}>
+      <div style={{ padding: '0.625rem' }}>
         <p>You can trigger a popover from a progress bubble item</p>
         <Button onClick={() => alert('Clicked button from popover.')}>Fire alert</Button>
       </div>
diff --git a/packages/select/src/MultiSelect/MultiSelectMenuHeader.tsx b/packages/select/src/MultiSelect/MultiSelectMenuHeader.tsx
index 71f651670..cc6e04550 100644
--- a/packages/select/src/MultiSelect/MultiSelectMenuHeader.tsx
+++ b/packages/select/src/MultiSelect/MultiSelectMenuHeader.tsx
@@ -34,7 +34,7 @@ const MultiSelectMenuHeader = <T extends object>(props: MultiSelectMenuHeaderPro
 
   return (
     <div data-test-id="menu-header">
-      <ButtonGroup style={{ margin: '0.8rem 1.6rem' }}>
+      <ButtonGroup style={{ margin: '0.5rem 1rem' }}>
         {isSelectableAll && (
           <Button onClick={handleSelectAll} data-test-id="select-all-btn">
             <div style={{ display: 'flex', alignItems: 'center' }}>
diff --git a/packages/select/src/styles/Select.module.css b/packages/select/src/styles/Select.module.css
index 3602b4aa6..7212e94a5 100644
--- a/packages/select/src/styles/Select.module.css
+++ b/packages/select/src/styles/Select.module.css
@@ -14,7 +14,7 @@
   padding: 0;
   margin: 0;
   outline: none;
-  font-size: 1.6rem;
+  font-size: 1rem;
   overflow: auto;
 }
 
@@ -29,7 +29,7 @@
 }
 
 .option {
-  padding: 0.8rem 1.6rem;
+  padding: 0.5rem 1rem;
   color: var(--lp-color-text-ui-primary-base);
   cursor: pointer;
   list-style-type: none;
@@ -61,7 +61,7 @@
   color: var(--lp-color-text-ui-secondary);
   font-weight: bold;
   font-size: var(--lp-font-size-100);
-  padding: 0.4rem 1.6rem;
+  padding: 0.25rem 1rem;
 }
 
 .popover {
@@ -84,7 +84,7 @@
   position: relative;
   flex-direction: row;
   border-radius: var(--lp-border-radius-regular);
-  min-height: 3.2rem;
+  min-height: 2rem;
   display: flex;
   overflow: visible;
   width: 100%;
@@ -115,7 +115,7 @@
 
 .valueContainer {
   flex: 1;
-  padding: 0.4rem;
+  padding: 0.25rem;
   display: grid;
   align-items: center;
 }
@@ -130,7 +130,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   box-sizing: border-box;
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
   text-align: left;
   display: flex;
   align-items: center;
@@ -154,7 +154,7 @@
 }
 
 .closeIndicatorContainer {
-  padding: 0.4rem;
+  padding: 0.25rem;
 
   svg {
     width: 16px;
@@ -163,7 +163,7 @@
 }
 
 .expandIndicatorContainer {
-  padding: 0.4rem;
+  padding: 0.25rem;
 
   svg {
     width: 20px;
@@ -212,15 +212,15 @@
 
   .searchIcon {
     position: absolute;
-    top: 1.5rem;
-    left: 1.4rem;
+    top: 0.9375rem;
+    left: 0.875rem;
   }
 
   input {
     width: 100%;
     border: none;
-    font-size: 1.6rem;
-    padding: 1.575rem 1.6rem 1.575rem 4rem;
+    font-size: 1rem;
+    padding: 0.98438rem 1rem 0.98438rem 2.5rem;
 
     &:focus-visible {
       outline: none;
diff --git a/packages/slider/src/styles/Slider.module.css b/packages/slider/src/styles/Slider.module.css
index f6affd1b5..458b2984e 100644
--- a/packages/slider/src/styles/Slider.module.css
+++ b/packages/slider/src/styles/Slider.module.css
@@ -1,6 +1,6 @@
 .Slider {
-  --slider-height: 1rem;
-  --slider-knob-size: 1.6rem;
+  --slider-height: 0.625rem;
+  --slider-knob-size: 1rem;
 
   position: relative;
   height: var(--slider-height);
diff --git a/packages/snackbar/src/styles/Snackbar.module.css b/packages/snackbar/src/styles/Snackbar.module.css
index e44bfbc48..4416feeee 100644
--- a/packages/snackbar/src/styles/Snackbar.module.css
+++ b/packages/snackbar/src/styles/Snackbar.module.css
@@ -3,9 +3,9 @@
   color: var(--lp-color-white-0);
   padding: var(--lp-spacing-500);
   display: inline-flex;
-  gap: 1.4rem;
+  gap: 0.875rem;
   box-sizing: border-box;
-  width: 37.6rem;
+  width: 23.5rem;
   border-radius: 2px;
   word-break: break-word;
 }
@@ -34,7 +34,7 @@
 .Snackbar-heading {
   margin-top: 0;
   margin-bottom: var(--lp-spacing-200);
-  font-size: 1.6rem;
+  font-size: 1rem;
   font-weight: var(--lp-font-weight-medium);
   line-height: 1.5;
   color: var(--lp-color-white-0);
diff --git a/packages/snackbar/src/styles/SnackbarCenter.module.css b/packages/snackbar/src/styles/SnackbarCenter.module.css
index cf25a3159..56a3ee8fb 100644
--- a/packages/snackbar/src/styles/SnackbarCenter.module.css
+++ b/packages/snackbar/src/styles/SnackbarCenter.module.css
@@ -1,9 +1,9 @@
 .SnackbarCenter {
   position: fixed;
-  inset: 2rem 2rem auto auto;
+  inset: 1.25rem 1.25rem auto auto;
   z-index: var(--lp-z-index-400);
 }
 
 .SnackbarCenter-item:not(:first-child) {
-  margin-top: 2rem;
+  margin-top: 1.25rem;
 }
diff --git a/packages/split-button/src/styles/SplitButton.css b/packages/split-button/src/styles/SplitButton.css
index 56099be62..9f82c2200 100644
--- a/packages/split-button/src/styles/SplitButton.css
+++ b/packages/split-button/src/styles/SplitButton.css
@@ -16,7 +16,7 @@
   }
 
   & .Button--primary.SplitButton-drop {
-    margin-left: 0.1rem;
+    margin-left: 0.0625rem;
   }
 }
 
@@ -24,8 +24,8 @@
   border-left-width: 1px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: 0 0.8rem;
-  margin-left: -0.1rem;
+  padding: 0 0.5rem;
+  margin-left: -0.0625rem;
 }
 
 .SplitButton-drop.Button > span {
@@ -64,7 +64,7 @@
 }
 
 .SplitButton-drop.Button--small {
-  padding: 0 0.4rem;
+  padding: 0 0.25rem;
 }
 
 .SplitButton-drop.Button:focus-visible {
diff --git a/packages/split-button/stories/SplitButton.stories.css b/packages/split-button/stories/SplitButton.stories.css
index 21e8f8829..333613b47 100644
--- a/packages/split-button/stories/SplitButton.stories.css
+++ b/packages/split-button/stories/SplitButton.stories.css
@@ -5,8 +5,8 @@
 .Storygroup-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 12rem auto;
-  grid-gap: 1.2rem;
+  grid-template-columns: 7.5rem auto;
+  grid-gap: 0.75rem;
   justify-items: flex-start;
 }
 
diff --git a/packages/tab-list/src/styles/TabList.module.css b/packages/tab-list/src/styles/TabList.module.css
index 42ce4d526..36569b889 100644
--- a/packages/tab-list/src/styles/TabList.module.css
+++ b/packages/tab-list/src/styles/TabList.module.css
@@ -6,8 +6,8 @@
 
 .TabList-item {
   display: block;
-  padding: 0.6rem 1rem;
-  font-size: 1.3rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.8125rem;
   font-weight: var(--lp-font-weight-medium);
   text-decoration: none;
   color: var(--lp-color-text-interactive-secondary);
diff --git a/packages/tab-list/stories/TabList.stories.tsx b/packages/tab-list/stories/TabList.stories.tsx
index 76293a174..3b10d7671 100644
--- a/packages/tab-list/stories/TabList.stories.tsx
+++ b/packages/tab-list/stories/TabList.stories.tsx
@@ -22,10 +22,10 @@ export const TabListExample: Story = {
   args: {
     children: [
       <Item key="1" title="Active tab">
-        <p style={{ padding: '1rem' }}>Active tab</p>
+        <p style={{ padding: '0.625rem' }}>Active tab</p>
       </Item>,
       <Item key="2" title="Another tab">
-        <p style={{ padding: '1rem' }}>Another tab</p>
+        <p style={{ padding: '0.625rem' }}>Another tab</p>
       </Item>,
     ],
   },
@@ -36,10 +36,10 @@ export const TabListActiveTabExample: Story = {
     activeTab: '2',
     children: [
       <Item key="1" title="Active tab">
-        <p style={{ padding: '1rem' }}>Active tab</p>
+        <p style={{ padding: '0.625rem' }}>Active tab</p>
       </Item>,
       <Item key="2" title="Another tab">
-        <p style={{ padding: '1rem' }}>Another tab</p>
+        <p style={{ padding: '0.625rem' }}>Another tab</p>
       </Item>,
     ],
   },
@@ -50,16 +50,16 @@ export const TabListDisabledTabsExample: Story = {
     disabledTabs: ['3', '4'],
     children: [
       <Item key="1" title="Active tab">
-        <p style={{ padding: '1rem' }}>Active tab</p>
+        <p style={{ padding: '0.625rem' }}>Active tab</p>
       </Item>,
       <Item key="2" title="Another tab">
-        <p style={{ padding: '1rem' }}>Another tab</p>
+        <p style={{ padding: '0.625rem' }}>Another tab</p>
       </Item>,
       <Item key="3" title="One more tab">
-        <p style={{ padding: '1rem' }}>Active tab</p>
+        <p style={{ padding: '0.625rem' }}>Active tab</p>
       </Item>,
       <Item key="4" title="Yet another tab">
-        <p style={{ padding: '1rem' }}>Another tab</p>
+        <p style={{ padding: '0.625rem' }}>Another tab</p>
       </Item>,
     ],
   },
@@ -70,13 +70,13 @@ export const TabListFocusableContent: Story = {
     children: [
       <Item key="3" title="Active tab">
         <div>
-          <p style={{ padding: '1rem 0' }}>Active tab</p>
+          <p style={{ padding: '0.625rem 0' }}>Active tab</p>
           <Button kind="primary">Click me</Button>
         </div>
       </Item>,
       <Item key="4" title="Another tab">
         <div>
-          <p style={{ padding: '1rem 0' }}>Another tab</p>
+          <p style={{ padding: '0.625rem 0' }}>Another tab</p>
           <Button kind="primary">Click me</Button>
         </div>
       </Item>,
diff --git a/packages/table/src/styles/Table.module.css b/packages/table/src/styles/Table.module.css
index 57e59628a..5047c0454 100644
--- a/packages/table/src/styles/Table.module.css
+++ b/packages/table/src/styles/Table.module.css
@@ -17,7 +17,7 @@
 }
 
 .Table--compact {
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 }
 
 .Table-header {
@@ -25,7 +25,7 @@
 }
 
 .Table-cell {
-  padding: 1rem 2rem;
+  padding: 0.625rem 1.25rem;
 }
 
 .Table-cell--left {
@@ -49,7 +49,7 @@
 }
 
 .Table--compact .Table-cell {
-  padding: 0.5rem 1rem;
+  padding: 0.3125rem 0.625rem;
 }
 
 .Table-cell--head {
@@ -67,8 +67,8 @@
 .Table--resourceTable .Table-cell--head {
   background: var(--lp-color-bg-ui-secondary);
   color: var(--lp-color-text-ui-secondary);
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
 }
 
 .TableHeader-title {
@@ -80,7 +80,7 @@
 }
 
 .TableHeader-description {
-  font-size: 1.3rem;
+  font-size: 0.8125rem;
 }
 
 .TableHeader-counter {
@@ -88,7 +88,7 @@
 }
 
 .TableHeaderToolbar-secondRow {
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.46875rem;
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/packages/tag/src/styles/Tag.module.css b/packages/tag/src/styles/Tag.module.css
index e941b2df7..916612b52 100644
--- a/packages/tag/src/styles/Tag.module.css
+++ b/packages/tag/src/styles/Tag.module.css
@@ -20,7 +20,7 @@
   border-radius: var(--lp-border-radius-regular);
   max-width: 100%;
   font-weight: var(--lp-font-weight-medium);
-  margin-right: 0.6rem;
+  margin-right: 0.375rem;
   box-sizing: border-box;
   cursor: default;
   display: inline-grid;
@@ -29,17 +29,17 @@
 .tag.small {
   font-size: var(--lp-font-size-200);
   line-height: var(--lp-font-size-200);
-  padding: 0 0.4rem 0 0.6rem;
-  height: 2.4rem;
-  margin-bottom: 0.4rem;
+  padding: 0 0.25rem 0 0.375rem;
+  height: 1.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .tag.tiny {
   font-size: var(--lp-font-size-100);
   line-height: 1.25;
   height: 20px;
-  margin-bottom: 0.2rem;
-  padding: 0 0.2rem 0 0.4rem;
+  margin-bottom: 0.125rem;
+  padding: 0 0.125rem 0 0.25rem;
 }
 
 a.tag,
@@ -62,7 +62,8 @@ a.tag,
 
 .isFocusVisible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--lp-color-bg-ui-primary),
+  box-shadow:
+    0 0 0 2px var(--lp-color-bg-ui-primary),
     0 0 0 4px var(--lp-color-shadow-interactive-focus);
 }
 
@@ -81,17 +82,17 @@ a.tag,
 }
 
 .tagContent {
-  padding: 0.4rem 0.2rem 0.4rem 0;
+  padding: 0.25rem 0.125rem 0.25rem 0;
 
   .tiny & {
-    padding: 0.15rem 0.2rem 0.15rem 0;
+    padding: 0.09375rem 0.125rem 0.09375rem 0;
   }
 }
 
 .removeButton {
-  border-radius: 0.6rem;
-  width: 2rem;
-  height: 2rem;
+  border-radius: 0.375rem;
+  width: 1.25rem;
+  height: 1.25rem;
   margin: 0;
   display: flex;
   padding: 0;
@@ -111,9 +112,9 @@ a.tag,
   }
 
   .tiny & {
-    border-radius: 0.3rem;
-    width: 1.6rem;
-    height: 1.6rem;
+    border-radius: 0.1875rem;
+    width: 1rem;
+    height: 1rem;
   }
 }
 
@@ -131,10 +132,10 @@ a.tag,
 .tagGroupActions {
   display: inline;
   vertical-align: top;
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.25rem;
   line-height: 1;
 
   .tiny & {
-    margin-bottom: 0.2rem;
+    margin-bottom: 0.125rem;
   }
 }
diff --git a/packages/tag/stories/Tag.stories.tsx b/packages/tag/stories/Tag.stories.tsx
index 8f265e778..fc2a14895 100644
--- a/packages/tag/stories/Tag.stories.tsx
+++ b/packages/tag/stories/Tag.stories.tsx
@@ -168,7 +168,7 @@ export const WithCustomAction: Story = {
 export const WithMaxRows: Story = {
   render: () => {
     return (
-      <div style={{ maxWidth: 290, border: '1px solid #efefef', padding: '1rem' }}>
+      <div style={{ maxWidth: 290, border: '1px solid #efefef', padding: '0.625rem' }}>
         <TagGroup maxRows={2} items={MOCK_TAGS}>
           {(item) => <TagItem>{item.name}</TagItem>}
         </TagGroup>
@@ -180,7 +180,7 @@ export const WithMaxRows: Story = {
 export const WithMaxRowsTiny: Story = {
   render: () => {
     return (
-      <div style={{ maxWidth: 290, border: '1px solid #efefef', padding: '1rem' }}>
+      <div style={{ maxWidth: 290, border: '1px solid #efefef', padding: '0.625rem' }}>
         <TagGroup maxRows={2} items={MOCK_TAGS} size="tiny">
           {(item) => <TagItem>{item.name}</TagItem>}
         </TagGroup>
diff --git a/packages/toast/src/styles/Toast.module.css b/packages/toast/src/styles/Toast.module.css
index 3dd12f4ae..30afd8658 100644
--- a/packages/toast/src/styles/Toast.module.css
+++ b/packages/toast/src/styles/Toast.module.css
@@ -37,7 +37,7 @@
   flex-grow: 1;
   margin: 0;
   line-height: 1.5;
-  font-size: 1.6rem;
+  font-size: 1rem;
 
   & a,
   & a:hover {
diff --git a/packages/toast/src/styles/ToastCenter.module.css b/packages/toast/src/styles/ToastCenter.module.css
index 9a311039b..ed3f325c7 100644
--- a/packages/toast/src/styles/ToastCenter.module.css
+++ b/packages/toast/src/styles/ToastCenter.module.css
@@ -1,6 +1,6 @@
 .ToastCenter {
   position: fixed;
-  inset: auto auto 7.25rem 50%;
+  inset: auto auto 4.53125rem 50%;
   transform: translateX(-50%);
   z-index: var(--lp-z-index-700);
 }
@@ -10,5 +10,5 @@
 }
 
 .ToastCenter-item:not(:first-child) {
-  margin-top: 2rem;
+  margin-top: 1.25rem;
 }
diff --git a/packages/toggle/src/styles/Toggle.module.css b/packages/toggle/src/styles/Toggle.module.css
index 3852aa427..e94f28a98 100644
--- a/packages/toggle/src/styles/Toggle.module.css
+++ b/packages/toggle/src/styles/Toggle.module.css
@@ -12,30 +12,30 @@
   --lp-component-toggle-color-text-disabled: var(--lp-color-gray-500);
   --lp-component-toggle-color-text-disabled-on: var(--lp-color-white-0);
   --lp-component-toggle-color-text-on: var(--lp-color-white-0);
-  --lp-component-toggle-height: 2.4rem; /* 24px */
+  --lp-component-toggle-height: 1.5rem; /* 24px */
   --lp-component-toggle-transition-timing-function: ease-in-out;
   --lp-component-toggle-transition-duration: var(--lp-duration-100);
-  --lp-component-toggle-width: 5.4rem; /* 54px */
+  --lp-component-toggle-width: 3.375rem; /* 54px */
   --lp-component-toggle-input-box-shadow-focus: 0 0 0 1px var(--lp-color-gray-300),
     0 0 0 3px var(--lp-color-shadow-interactive-primary),
     0 0 0 5px var(--lp-color-shadow-interactive-focus);
   --lp-component-toggle-input-box-shadow-focus-on: 0 0 0 1px var(--lp-color-system-green-800),
     0 0 0 3px var(--lp-color-shadow-interactive-primary),
     0 0 0 5px var(--lp-color-shadow-interactive-focus);
-  --lp-component-toggle-label-font-size: 1.4rem; /* 14px */
+  --lp-component-toggle-label-font-size: 0.875rem; /* 14px */
   --lp-component-toggle-label-text-transform: none;
-  --lp-component-toggle-labels-transform: translateX(-2.8rem); /* -28px */
+  --lp-component-toggle-labels-transform: translateX(-1.75rem); /* -28px */
   --lp-component-toggle-labels-transform-on: translateX(0);
-  --lp-component-toggle-labels-width: 8.2rem; /* 82px */
+  --lp-component-toggle-labels-width: 5.125rem; /* 82px */
   --lp-component-toggle-pin-box-shadow: 0 0 1px 0 hsl(0 0% 12.9% / 0.35),
     0 0 2px 0 hsl(0 0% 12.9% / 0.75), 0 0 1px 0 hsl(0 0% 12.9% / 0.75);
   --lp-component-toggle-pin-box-shadow-disabled: 0 0 1px hsl(0 0% 12.9% / 0.5),
     0 1px 2px hsl(0 0% 12.9% / 0.04), 0 1px 1px hsl(0 0% 12.9% / 0.14);
   --lp-component-toggle-pin-box-shadow-on: 0 0 1px 0 hsl(154 100% 23.5% / 0.35),
     0 0 2px 0 hsl(154 100% 23.5% / 0.06), 0 0 1px 0 hsl(154 100% 23.5% / 0.75);
-  --lp-component-toggle-pin-size: 1.6rem; /* 16px */
-  --lp-component-toggle-pin-transform: translateX(0.4rem) translateY(-50%); /* 4px */
-  --lp-component-toggle-pin-transform-on: translateX(3.4rem) translateY(-50%); /* 34px */
+  --lp-component-toggle-pin-size: 1rem; /* 16px */
+  --lp-component-toggle-pin-transform: translateX(0.25rem) translateY(-50%); /* 4px */
+  --lp-component-toggle-pin-transform-on: translateX(2.125rem) translateY(-50%); /* 34px */
 }
 
 .Toggle {
diff --git a/packages/toggle/stories/Toggle.stories.css b/packages/toggle/stories/Toggle.stories.css
index b0fa36429..6f50f34b4 100644
--- a/packages/toggle/stories/Toggle.stories.css
+++ b/packages/toggle/stories/Toggle.stories.css
@@ -1,8 +1,8 @@
 .Toggle-storygroup-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 8rem auto;
-  grid-gap: 1.2rem;
+  grid-template-columns: 5rem auto;
+  grid-gap: 0.75rem;
   justify-items: flex-start;
   align-items: center;
 }
@@ -16,12 +16,12 @@
 .Toggle-iggy-grid {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 8rem auto;
-  grid-gap: 1.2rem;
+  grid-template-columns: 5rem auto;
+  grid-gap: 0.75rem;
   justify-items: flex-start;
   align-items: center;
 
   & h3 {
-    font-size: 1.2rem;
+    font-size: 0.75rem;
   }
 }
diff --git a/packages/tokens/src/border.yaml b/packages/tokens/src/border.yaml
index fca71f4f4..03fe91d53 100644
--- a/packages/tokens/src/border.yaml
+++ b/packages/tokens/src/border.yaml
@@ -1,13 +1,13 @@
 border:
   radius:
     regular:
-      value: 0.3rem
+      value: 0.188rem
     medium:
-      value: 0.6rem
+      value: 0.375rem
   width:
     100:
       value: 0rem
     200:
-      value: 0.1rem
+      value: 0.063rem
     300:
-      value: 0.2rem
+      value: 0.125rem
diff --git a/packages/tokens/src/font.yaml b/packages/tokens/src/font.yaml
index d8e69f9c1..fac47aec3 100644
--- a/packages/tokens/src/font.yaml
+++ b/packages/tokens/src/font.yaml
@@ -6,21 +6,21 @@ font:
       value: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace
   size:
     100:
-      value: 1.2rem
+      value: 0.75rem
     200:
-      value: 1.4rem
+      value: 0.875rem
     300:
-      value: 1.6rem
+      value: 1rem
     400:
-      value: 1.8rem
+      value: 1.125rem
     500:
-      value: 2rem
+      value: 1.25rem
     600:
-      value: 2.5rem
+      value: 1.563rem
     700:
-      value: 3.2rem
+      value: 2rem
     800:
-      value: 4.6rem
+      value: 2.875rem
   weight:
     light:
       value: 300
diff --git a/packages/tokens/src/spacing.yaml b/packages/tokens/src/spacing.yaml
index 8fba8bafc..a2392042b 100644
--- a/packages/tokens/src/spacing.yaml
+++ b/packages/tokens/src/spacing.yaml
@@ -2,18 +2,18 @@ spacing:
   100:
     value: 0rem
   200:
-    value: 0.4rem
+    value: 0.25rem
   300:
-    value: 0.8rem
+    value: 0.5rem
   400:
-    value: 1.2rem
+    value: 0.75rem
   500:
-    value: 1.6rem
+    value: 1rem
   600:
-    value: 2rem
+    value: 1.25rem
   700:
-    value: 2.4rem
+    value: 1.5rem
   800:
-    value: 2.8rem
+    value: 1.75rem
   900:
-    value: 3.2rem
+    value: 2rem
diff --git a/packages/tooltip/src/styles/Tooltip.module.css b/packages/tooltip/src/styles/Tooltip.module.css
index 7755a2df1..fcf6759a7 100644
--- a/packages/tooltip/src/styles/Tooltip.module.css
+++ b/packages/tooltip/src/styles/Tooltip.module.css
@@ -16,8 +16,8 @@
 }
 
 [class^='_Popover-content_'].Tooltip-popover-content {
-  font-size: 1.3rem;
-  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  padding: 0.3125rem 0.625rem;
   border: 1px solid var(--lp-component-popover-color-border);
   background-color: var(--lp-component-popover-color-bg);
   color: var(--lp-component-popover-color-text);
@@ -26,6 +26,6 @@
 [class^='_Popover-content_'].Tooltip-popover-content kbd {
   color: var(--lp-color-gray-100);
   background-color: var(--lp-color-black-100);
-  border: 0.1rem solid var(--lp-color-gray-700);
-  box-shadow: inset 0 -0.1rem 0 var(--lp-color-gray-700);
+  border: 0.0625rem solid var(--lp-color-gray-700);
+  box-shadow: inset 0 -0.0625rem 0 var(--lp-color-gray-700);
 }
diff --git a/packages/vars/stories/Story.css.ts b/packages/vars/stories/Story.css.ts
index 32502ac05..ba67bc7dd 100644
--- a/packages/vars/stories/Story.css.ts
+++ b/packages/vars/stories/Story.css.ts
@@ -17,6 +17,6 @@ export const local = style({
     [accentVar]: vars.color.pink[500],
   },
   backgroundColor: accentVar,
-  height: '10rem',
-  width: '10rem',
+  height: '6.25rem',
+  width: '6.25rem',
 });
diff --git a/stylelint.config.js b/stylelint.config.js
index a060e4223..04f3a0f1e 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -42,5 +42,11 @@ module.exports = {
         ignoreProperties: ['line-clamp'],
       },
     ],
+    'number-max-precision': [
+      4,
+      {
+        ignoreUnits: ['rem'],
+      },
+    ],
   },
 };