diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 00000000000..325cfa9665a
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1,5 @@
+<style>
+  .sb-show-main.sb-main-padded {
+    padding: 10px;
+  }
+</style>
diff --git a/config/postcss-plugins.js b/config/postcss-plugins.js
index ee89cfd09a1..b8a0ff5a297 100644
--- a/config/postcss-plugins.js
+++ b/config/postcss-plugins.js
@@ -4,7 +4,7 @@ const pxtorem = require('postcss-pxtorem');
 module.exports = [
   postcssShopify,
   pxtorem({
-    rootValue: 10,
+    rootValue: 16,
     replace: true,
     propList: ['*'],
   }),
diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
index b6d71df6c56..2d6b15597c1 100644
--- a/src/components/AppProvider/AppProvider.scss
+++ b/src/components/AppProvider/AppProvider.scss
@@ -22,7 +22,7 @@ button {
 
 html {
   position: relative;
-  font-size: ($base-font-size / $default-browser-font-size) * 100%;
+  font-size: 100%;
   -webkit-font-smoothing: antialiased;
 
   // This needs to come after -webkit-font-smoothing
diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss
index 7ee8fc5388f..971834202a7 100755
--- a/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -18,7 +18,7 @@ $slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2;
 }
 
 .small {
-  padding: 1.25rem;
+  padding: var(--p-space-3);
 }
 
 .FileUpload img {
diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss
index 43391af8672..94cdeb16e25 100644
--- a/src/components/IndexTable/IndexTable.scss
+++ b/src/components/IndexTable/IndexTable.scss
@@ -504,8 +504,8 @@ $scroll-bar-size: var(--p-space-2);
   display: flex;
   align-items: flex-start;
   width: 100%;
-  min-height: 5.6rem;
-  padding: 1rem var(--p-space-4);
+  min-height: 56px;
+  padding: 10px var(--p-space-4);
   background-color: var(--p-surface);
 
   &.unselectable {
diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md
index a0d95520bb0..1177a338b86 100644
--- a/src/components/IndexTable/README.md
+++ b/src/components/IndexTable/README.md
@@ -759,7 +759,7 @@ function IndexTableWithFilteringExample() {
             onClearAll={handleClearAll}
           />
         </div>
-        <div style={{paddingLeft: '0.4rem'}}>
+        <div style={{paddingLeft: '0.25rem'}}>
           <Select
             labelInline
             label="Sort by"
@@ -1151,7 +1151,7 @@ function IndexTableWithAllElementsExample() {
             onClearAll={handleClearAll}
           />
         </div>
-        <div style={{paddingLeft: '0.4rem'}}>
+        <div style={{paddingLeft: '0.25rem'}}>
           <Select
             labelInline
             label="Sort by"
@@ -1312,7 +1312,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
         selected={selectedResources.includes(id)}
         position={index}
       >
-        <div style={{padding: '1.2rem 1.6rem'}}>
+        <div style={{padding: '.75rem 1rem'}}>
           <p>
             <TextStyle variation="strong">{name}</TextStyle>
           </p>
@@ -1338,7 +1338,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
               onClearAll={handleClearAll}
             />
           </div>
-          <div style={{paddingLeft: '0.4rem'}}>
+          <div style={{paddingLeft: '0.25rem'}}>
             <Select
               labelInline
               label="Sort by"
diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
index 0dad1ca0e0f..520bdd15ce5 100644
--- a/src/components/Layout/Layout.scss
+++ b/src/components/Layout/Layout.scss
@@ -32,7 +32,7 @@ $relative-size: $primary-basis / $secondary-basis;
   min-width: 51%;
 
   @media print {
-    flex: 2 2 36rem;
+    flex: 2 2 360px;
   }
 }
 
diff --git a/src/components/Sheet/README.md b/src/components/Sheet/README.md
index 444bd52a4f8..d84e9739271 100644
--- a/src/components/Sheet/README.md
+++ b/src/components/Sheet/README.md
@@ -157,7 +157,7 @@ function SheetExample() {
               borderBottom: '1px solid #DFE3E8',
               display: 'flex',
               justifyContent: 'space-between',
-              padding: '1.6rem',
+              padding: '1rem',
               width: '100%',
             }}
           >
@@ -169,7 +169,7 @@ function SheetExample() {
               plain
             />
           </div>
-          <Scrollable style={{padding: '1.6rem', height: '100%'}}>
+          <Scrollable style={{padding: '1rem', height: '100%'}}>
             <ChoiceList
               title="Select a sales channel"
               name="salesChannelsList"
@@ -186,7 +186,7 @@ function SheetExample() {
               borderTop: '1px solid #DFE3E8',
               display: 'flex',
               justifyContent: 'space-between',
-              padding: '1.6rem',
+              padding: '1rem',
               width: '100%',
             }}
           >
diff --git a/src/components/Subheading/Subheading.scss b/src/components/Subheading/Subheading.scss
index 378edfec3c0..ea622a595b0 100644
--- a/src/components/Subheading/Subheading.scss
+++ b/src/components/Subheading/Subheading.scss
@@ -5,6 +5,6 @@
   margin: 0;
 
   @media print {
-    font-size: 1.1rem;
+    font-size: 11px;
   }
 }
diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts
index 45420f6639f..cabf4df8ffd 100644
--- a/src/tokens/_legacy-tokens.ts
+++ b/src/tokens/_legacy-tokens.ts
@@ -18,25 +18,25 @@ export const legacyTokens: TokenGroup = {
   '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',
+  'choice-size': '20px',
+  'icon-size': '10px',
+  'choice-margin': '1px',
+  'control-border-width': '2px',
   '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)',
+    '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 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)',
+    '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 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)',
+    '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 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)',
+    '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 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',
+    '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',
 };