diff --git a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
index 92383a5435..754c487557 100644
--- a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
+++ b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
         for="fake_id"
       >
         <div
-          class="VxL zI7 iyn Hsu"
+          class="u8x zI7 iyn Hsu"
         >
           <div
             class="X8m zDA IZT tBJ dyH iFc dR0 swG"
@@ -29,10 +29,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
           class="react-datepicker__input-container"
         >
           <div
-            class="Jea KS5 XiG ujU xcv L4E zI7 iyn Hsu"
+            class="Jea KS5 XiG ujU zI7 iyn Hsu "
           >
             <div
-              class="ujU xcv L4E zI7 iyn Hsu"
+              class="ujU zI7 iyn Hsu "
             >
               <span>
                 <div
@@ -54,7 +54,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
               class="calendarIcon"
             >
               <div
-                class="Jea KS5 XiG wzk zI7 iyn Hsu"
+                class="Jea KS5 NyI XiG zI7 iyn Hsu"
                 style="min-height: 48px;"
               >
                 <div
@@ -131,30 +131,30 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
             style="width: 100%;"
           >
             <div
-              class="XiG fZz qDf xuU zI7 iyn Hsu"
+              class="Kzl XiG i1W xuU zI7 iyn Hsu"
             >
               <div
                 class="hs0 mQ8 un8 C9i TB_"
               >
                 <div
-                  class="VxL zI7 iyn Hsu"
+                  class="u8x zI7 iyn Hsu"
                 >
                   <div
                     aria-disabled="false"
                     aria-label="Grabber"
-                    class="S9z v_3 iyn e8F BG7"
+                    class="S9z iyn e8F BG7"
                     role="button"
                     tabindex="0"
                   >
                     <div
-                      class="haa v_3 zI7 iyn Hsu"
+                      class="haa zI7 iyn Hsu "
                       style="height: 5px; width: 37px;"
                     />
                   </div>
                 </div>
               </div>
               <div
-                class="KS5 hs0 mQ8 un8 HOt BxF"
+                class="KS5 hs0 mQ8 un8 a1C qQp"
               >
                 <div
                   class="ujU xuA"
@@ -162,10 +162,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
               </div>
             </div>
             <div
-              class="XbT hA- lnZ ujU zI7 iyn Hsu"
+              class="XbT _co lnZ ujU zI7 iyn Hsu"
             >
               <div
-                class="KS5 jzS mQ8 un8 HOt BxF"
+                class="KS5 jzS mQ8 un8 a1C qQp"
                 style="width: 100%;"
               >
                 <div
@@ -796,10 +796,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
               class="XiG xuU zI7 iyn Hsu"
             >
               <div
-                class="fZz qDf zI7 iyn Hsu"
+                class="Kzl i1W zI7 iyn Hsu"
               >
                 <div
-                  class="KS5 jzS mQ8 un8 HOt BxF"
+                  class="KS5 jzS mQ8 un8 a1C qQp"
                   style="width: 100%;"
                 >
                   <div
@@ -812,7 +812,7 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
                       type="button"
                     >
                       <div
-                        class="RCK Hsu USg adn NTm KhY iyn S9z F10 xD4 fZz hUC a_A hNT BG7 hDj _O1 KS5 mQ8 Tbt L4E"
+                        class="RCK Hsu USg adn NTm KhY iyn S9z F10 xD4 i1W V92 a_A hNT BG7 hDj _O1 KS5 mQ8 Tbt L4E"
                       >
                         <div
                           class="X8m tg7 tBJ dyH iFc sAJ H2s"
diff --git a/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap b/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
index 389a5337cb..16d7ecc09c 100644
--- a/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
+++ b/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`AccordionExpandableItem renders correctly 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -36,13 +36,13 @@ exports[`AccordionExpandableItem renders correctly 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -76,10 +76,10 @@ exports[`AccordionExpandableItem renders correctly 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with badge 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -110,13 +110,13 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -158,7 +158,7 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
                       className="badge info middle"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -190,10 +190,10 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with children 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -224,13 +224,13 @@ exports[`AccordionExpandableItem renders correctly with children 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -264,10 +264,10 @@ exports[`AccordionExpandableItem renders correctly with children 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with error 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -298,13 +298,13 @@ exports[`AccordionExpandableItem renders correctly with error 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -360,10 +360,10 @@ exports[`AccordionExpandableItem renders correctly with error 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with icon 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -394,13 +394,13 @@ exports[`AccordionExpandableItem renders correctly with icon 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -456,10 +456,10 @@ exports[`AccordionExpandableItem renders correctly with icon 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -490,13 +490,13 @@ exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -584,10 +584,10 @@ exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with summary 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -618,13 +618,13 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol6"
+              className="box xsCol600"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -649,10 +649,10 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
               </div>
             </div>
             <div
-              className="box marginStart6 xsCol6"
+              className="box marginStart600 xsCol600"
             >
               <div
-                className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                className="Flex rowGap0 columnGap200 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
@@ -711,10 +711,10 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
 
 exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
 <div
-  className="box paddingX6 paddingY6"
+  className="box paddingX600 paddingY600"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -745,13 +745,13 @@ exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionRow"
         >
           <div
-            className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+            className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol12"
+              className="box xsCol1200"
             >
               <div
-                className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -777,7 +777,7 @@ exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
             </div>
           </div>
           <div
-            className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+            className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
             id="uniqueTestID"
             style={
               Object {
diff --git a/packages/gestalt/src/Box.tsx b/packages/gestalt/src/Box.tsx
index 19340d5cc5..15e94bcaeb 100644
--- a/packages/gestalt/src/Box.tsx
+++ b/packages/gestalt/src/Box.tsx
@@ -53,9 +53,15 @@ type Margin =
   | -4
   | -3
   | -2
+  | -1.5
   | -1
+  | -0.5
+  | -0.25
   | 0
+  | 0.25
+  | 0.5
   | 1
+  | 1.5
   | 2
   | 3
   | 4
@@ -73,7 +79,27 @@ type Margin =
   | 16
   | 'auto';
 
-type Padding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+type Padding =
+  | 0
+  | 0.25
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16;
 
 type BoxPassthroughProps = Omit<
   React.ComponentProps<'div'>,
diff --git a/packages/gestalt/src/Button.css b/packages/gestalt/src/Button.css
index 985c78288f..7a0580ece3 100644
--- a/packages/gestalt/src/Button.css
+++ b/packages/gestalt/src/Button.css
@@ -25,20 +25,20 @@
 
 .sm {
   composes: small from "./Layout.css";
-  composes: paddingX3 from "./boxWhitespace.css";
-  composes: paddingY1 from "./boxWhitespace.css";
+  composes: paddingX300 from "./boxWhitespace.css";
+  composes: paddingY100 from "./boxWhitespace.css";
 }
 
 .md {
   composes: medium from "./Layout.css";
-  composes: paddingX3 from "./boxWhitespace.css";
-  composes: paddingY2 from "./boxWhitespace.css";
+  composes: paddingX300 from "./boxWhitespace.css";
+  composes: paddingY200 from "./boxWhitespace.css";
 }
 
 .lg {
   composes: large from "./Layout.css";
-  composes: paddingX4 from "./boxWhitespace.css";
-  composes: paddingY3 from "./boxWhitespace.css";
+  composes: paddingX400 from "./boxWhitespace.css";
+  composes: paddingY300 from "./boxWhitespace.css";
 }
 
 .smVr {
diff --git a/packages/gestalt/src/ButtonToggle.css b/packages/gestalt/src/ButtonToggle.css
index 60f3c1a4ed..01e3c0f557 100644
--- a/packages/gestalt/src/ButtonToggle.css
+++ b/packages/gestalt/src/ButtonToggle.css
@@ -64,17 +64,17 @@
 
 .sm {
   composes: small from "./Layout.css";
-  composes: paddingX3 paddingY1 from "./boxWhitespace.css";
+  composes: paddingX300 paddingY100 from "./boxWhitespace.css";
 }
 
 .md {
   composes: medium from "./Layout.css";
-  composes: paddingX3 paddingY2 from "./boxWhitespace.css";
+  composes: paddingX300 paddingY200 from "./boxWhitespace.css";
 }
 
 .lg {
   composes: large from "./Layout.css";
-  composes: paddingX4 paddingY3 from "./boxWhitespace.css";
+  composes: paddingX400 paddingY300 from "./boxWhitespace.css";
 }
 
 .smVr {
@@ -98,19 +98,19 @@
 
 .thumbnailSm {
   composes: small from "./Layout.css";
-  composes: paddingX1 from "./boxWhitespace.css";
+  composes: paddingX100 from "./boxWhitespace.css";
   padding-bottom: 2px;
   padding-top: var(--space-200);
 }
 
 .thumbnailMd {
   composes: medium from "./Layout.css";
-  composes: paddingX2 paddingY2 from "./boxWhitespace.css";
+  composes: paddingX200 paddingY200 from "./boxWhitespace.css";
 }
 
 .thumbnailLg {
   composes: large from "./Layout.css";
-  composes: paddingX3 paddingY2 from "./boxWhitespace.css";
+  composes: paddingX300 paddingY200 from "./boxWhitespace.css";
 }
 
 .enabled {
diff --git a/packages/gestalt/src/Datapoint/__snapshots__/Trend.test.tsx.snap b/packages/gestalt/src/Datapoint/__snapshots__/Trend.test.tsx.snap
index db69edf89b..90e2dfc83e 100644
--- a/packages/gestalt/src/Datapoint/__snapshots__/Trend.test.tsx.snap
+++ b/packages/gestalt/src/Datapoint/__snapshots__/Trend.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DatapointTrend renders 1`] = `
 <div
-  className="Flex rowGap1 columnGap0 xsDirectionRow"
+  className="Flex rowGap100 columnGap0 xsDirectionRow"
 >
   <div
     className="FlexItem"
@@ -35,7 +35,7 @@ exports[`DatapointTrend renders 1`] = `
 
 exports[`DatapointTrend renders an accessibility label 1`] = `
 <div
-  className="Flex rowGap1 columnGap0 xsDirectionRow"
+  className="Flex rowGap100 columnGap0 xsDirectionRow"
 >
   <div
     className="FlexItem"
diff --git a/packages/gestalt/src/Flex.css b/packages/gestalt/src/Flex.css
index b6222746f1..d4c347df94 100644
--- a/packages/gestalt/src/Flex.css
+++ b/packages/gestalt/src/Flex.css
@@ -1,7 +1,7 @@
 /*
 This file was generated by running
 
-  $ ./scripts/flex.js > packages/gestalt/src/Flex.css
+  $ node ./scripts/flex.js > packages/gestalt/src/Flex.css
 
 */
 
@@ -14,261 +14,321 @@ This file was generated by running
 }
 
 .columnGap0 {
-  margin-bottom: var(--space-0);
-  margin-top: var(--space-0);
+  margin-bottom: 0;
+  margin-top: 0;
 }
 
 .columnGap0 > .FlexItem {
-  margin-bottom: var(--space-0);
-  margin-top: var(--space-0);
+  margin-bottom: 0;
+  margin-top: 0;
 }
 
 .rowGap0 {
-  margin-left: var(--space-0);
-  margin-right: var(--space-0);
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .rowGap0 > .FlexItem {
-  margin-left: var(--space-0);
-  margin-right: var(--space-0);
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.columnGap1 {
+.columnGap25 {
+  margin-bottom: -0.5px;
+  margin-top: -0.5px;
+}
+
+.columnGap25 > .FlexItem {
+  margin-bottom: 0.5px;
+  margin-top: 0.5px;
+}
+
+.rowGap25 {
+  margin-left: -0.5px;
+  margin-right: -0.5px;
+}
+
+.rowGap25 > .FlexItem {
+  margin-left: 0.5px;
+  margin-right: 0.5px;
+}
+
+.columnGap50 {
+  margin-bottom: -1px;
+  margin-top: -1px;
+}
+
+.columnGap50 > .FlexItem {
+  margin-bottom: 1px;
+  margin-top: 1px;
+}
+
+.rowGap50 {
+  margin-left: -1px;
+  margin-right: -1px;
+}
+
+.rowGap50 > .FlexItem {
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+.columnGap100 {
   margin-bottom: -2px;
   margin-top: -2px;
 }
 
-.columnGap1 > .FlexItem {
+.columnGap100 > .FlexItem {
   margin-bottom: 2px;
   margin-top: 2px;
 }
 
-.rowGap1 {
+.rowGap100 {
   margin-left: -2px;
   margin-right: -2px;
 }
 
-.rowGap1 > .FlexItem {
+.rowGap100 > .FlexItem {
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.columnGap2 {
-  margin-bottom: var(--space-negative-100);
-  margin-top: var(--space-negative-100);
+.columnGap150 {
+  margin-bottom: -3px;
+  margin-top: -3px;
+}
+
+.columnGap150 > .FlexItem {
+  margin-bottom: 3px;
+  margin-top: 3px;
+}
+
+.rowGap150 {
+  margin-left: -3px;
+  margin-right: -3px;
+}
+
+.rowGap150 > .FlexItem {
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.columnGap1000 {
+  margin-bottom: -20px;
+  margin-top: -20px;
+}
+
+.columnGap1000 > .FlexItem {
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.rowGap1000 {
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.rowGap1000 > .FlexItem {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.columnGap1100 {
+  margin-bottom: -22px;
+  margin-top: -22px;
+}
+
+.columnGap1100 > .FlexItem {
+  margin-bottom: 22px;
+  margin-top: 22px;
+}
+
+.rowGap1100 {
+  margin-left: -22px;
+  margin-right: -22px;
+}
+
+.rowGap1100 > .FlexItem {
+  margin-left: 22px;
+  margin-right: 22px;
+}
+
+.columnGap1200 {
+  margin-bottom: -24px;
+  margin-top: -24px;
+}
+
+.columnGap1200 > .FlexItem {
+  margin-bottom: 24px;
+  margin-top: 24px;
+}
+
+.rowGap1200 {
+  margin-left: -24px;
+  margin-right: -24px;
+}
+
+.rowGap1200 > .FlexItem {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.columnGap200 {
+  margin-bottom: -4px;
+  margin-top: -4px;
 }
 
-.columnGap2 > .FlexItem {
-  margin-bottom: var(--space-100);
-  margin-top: var(--space-100);
+.columnGap200 > .FlexItem {
+  margin-bottom: 4px;
+  margin-top: 4px;
 }
 
-.rowGap2 {
-  margin-left: var(--space-negative-100);
-  margin-right: var(--space-negative-100);
+.rowGap200 {
+  margin-left: -4px;
+  margin-right: -4px;
 }
 
-.rowGap2 > .FlexItem {
-  margin-left: var(--space-100);
-  margin-right: var(--space-100);
+.rowGap200 > .FlexItem {
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
-.columnGap3 {
+.columnGap300 {
   margin-bottom: -6px;
   margin-top: -6px;
 }
 
-.columnGap3 > .FlexItem {
+.columnGap300 > .FlexItem {
   margin-bottom: 6px;
   margin-top: 6px;
 }
 
-.rowGap3 {
+.rowGap300 {
   margin-left: -6px;
   margin-right: -6px;
 }
 
-.rowGap3 > .FlexItem {
+.rowGap300 > .FlexItem {
   margin-left: 6px;
   margin-right: 6px;
 }
 
-.columnGap4 {
-  margin-bottom: var(--space-negative-200);
-  margin-top: var(--space-negative-200);
+.columnGap400 {
+  margin-bottom: -8px;
+  margin-top: -8px;
 }
 
-.columnGap4 > .FlexItem {
-  margin-bottom: var(--space-200);
-  margin-top: var(--space-200);
+.columnGap400 > .FlexItem {
+  margin-bottom: 8px;
+  margin-top: 8px;
 }
 
-.rowGap4 {
-  margin-left: var(--space-negative-200);
-  margin-right: var(--space-negative-200);
+.rowGap400 {
+  margin-left: -8px;
+  margin-right: -8px;
 }
 
-.rowGap4 > .FlexItem {
-  margin-left: var(--space-200);
-  margin-right: var(--space-200);
+.rowGap400 > .FlexItem {
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
-.columnGap5 {
+.columnGap500 {
   margin-bottom: -10px;
   margin-top: -10px;
 }
 
-.columnGap5 > .FlexItem {
+.columnGap500 > .FlexItem {
   margin-bottom: 10px;
   margin-top: 10px;
 }
 
-.rowGap5 {
+.rowGap500 {
   margin-left: -10px;
   margin-right: -10px;
 }
 
-.rowGap5 > .FlexItem {
+.rowGap500 > .FlexItem {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-.columnGap6 {
-  margin-bottom: var(--space-negative-300);
-  margin-top: var(--space-negative-300);
+.columnGap600 {
+  margin-bottom: -12px;
+  margin-top: -12px;
 }
 
-.columnGap6 > .FlexItem {
-  margin-bottom: var(--space-300);
-  margin-top: var(--space-300);
+.columnGap600 > .FlexItem {
+  margin-bottom: 12px;
+  margin-top: 12px;
 }
 
-.rowGap6 {
-  margin-left: var(--space-negative-300);
-  margin-right: var(--space-negative-300);
+.rowGap600 {
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
-.rowGap6 > .FlexItem {
-  margin-left: var(--space-300);
-  margin-right: var(--space-300);
+.rowGap600 > .FlexItem {
+  margin-left: 12px;
+  margin-right: 12px;
 }
 
-.columnGap7 {
+.columnGap700 {
   margin-bottom: -14px;
   margin-top: -14px;
 }
 
-.columnGap7 > .FlexItem {
+.columnGap700 > .FlexItem {
   margin-bottom: 14px;
   margin-top: 14px;
 }
 
-.rowGap7 {
+.rowGap700 {
   margin-left: -14px;
   margin-right: -14px;
 }
 
-.rowGap7 > .FlexItem {
+.rowGap700 > .FlexItem {
   margin-left: 14px;
   margin-right: 14px;
 }
 
-.columnGap8 {
-  margin-bottom: var(--space-negative-400);
-  margin-top: var(--space-negative-400);
+.columnGap800 {
+  margin-bottom: -16px;
+  margin-top: -16px;
 }
 
-.columnGap8 > .FlexItem {
-  margin-bottom: var(--space-400);
-  margin-top: var(--space-400);
+.columnGap800 > .FlexItem {
+  margin-bottom: 16px;
+  margin-top: 16px;
 }
 
-.rowGap8 {
-  margin-left: var(--space-negative-400);
-  margin-right: var(--space-negative-400);
+.rowGap800 {
+  margin-left: -16px;
+  margin-right: -16px;
 }
 
-.rowGap8 > .FlexItem {
-  margin-left: var(--space-400);
-  margin-right: var(--space-400);
+.rowGap800 > .FlexItem {
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
-.columnGap9 {
+.columnGap900 {
   margin-bottom: -18px;
   margin-top: -18px;
 }
 
-.columnGap9 > .FlexItem {
+.columnGap900 > .FlexItem {
   margin-bottom: 18px;
   margin-top: 18px;
 }
 
-.rowGap9 {
+.rowGap900 {
   margin-left: -18px;
   margin-right: -18px;
 }
 
-.rowGap9 > .FlexItem {
+.rowGap900 > .FlexItem {
   margin-left: 18px;
   margin-right: 18px;
 }
-
-.columnGap10 {
-  margin-bottom: var(--space-negative-500);
-  margin-top: var(--space-negative-500);
-}
-
-.columnGap10 > .FlexItem {
-  margin-bottom: var(--space-500);
-  margin-top: var(--space-500);
-}
-
-.rowGap10 {
-  margin-left: var(--space-negative-500);
-  margin-right: var(--space-negative-500);
-}
-
-.rowGap10 > .FlexItem {
-  margin-left: var(--space-500);
-  margin-right: var(--space-500);
-}
-
-.columnGap11 {
-  margin-bottom: -22px;
-  margin-top: -22px;
-}
-
-.columnGap11 > .FlexItem {
-  margin-bottom: 22px;
-  margin-top: 22px;
-}
-
-.rowGap11 {
-  margin-left: -22px;
-  margin-right: -22px;
-}
-
-.rowGap11 > .FlexItem {
-  margin-left: 22px;
-  margin-right: 22px;
-}
-
-.columnGap12 {
-  margin-bottom: var(--space-negative-600);
-  margin-top: var(--space-negative-600);
-}
-
-.columnGap12 > .FlexItem {
-  margin-bottom: var(--space-600);
-  margin-top: var(--space-600);
-}
-
-.rowGap12 {
-  margin-left: var(--space-negative-600);
-  margin-right: var(--space-negative-600);
-}
-
-.rowGap12 > .FlexItem {
-  margin-left: var(--space-600);
-  margin-right: var(--space-600);
-}
diff --git a/packages/gestalt/src/Flex.tsx b/packages/gestalt/src/Flex.tsx
index 6b55df6d82..d7a68213e4 100644
--- a/packages/gestalt/src/Flex.tsx
+++ b/packages/gestalt/src/Flex.tsx
@@ -5,7 +5,27 @@ import FlexItem from './FlexItem';
 import wrapWithComponent from './utils/wrapWithComponent';
 
 type Dimension = number | string;
-type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+type Gap =
+  | 0
+  | 0.25
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16;
 
 type Props = {
   /**
@@ -159,8 +179,8 @@ const FlexWithForwardRef = forwardRef<HTMLDivElement, Props>(
         }).filter(Boolean)
       : childrenProp;
 
-    const gapStyles = `${styles[`rowGap${typeof gap === 'number' ? gap : gap.row}`]} ${
-      styles[`columnGap${typeof gap === 'number' ? gap : gap.column}`]
+    const gapStyles = `${styles[`rowGap${typeof gap === 'number' ? gap * 100 : gap.row * 100}`]} ${
+      styles[`columnGap${typeof gap === 'number' ? gap * 100 : gap.column * 100}`]
     }`;
 
     const { passthroughProps, propsStyles } = buildStyles<Props>({
diff --git a/packages/gestalt/src/Modal.css b/packages/gestalt/src/Modal.css
index 19d7e98cea..a3eea4e2d8 100644
--- a/packages/gestalt/src/Modal.css
+++ b/packages/gestalt/src/Modal.css
@@ -13,7 +13,7 @@
 .wrapper {
   composes: relative overflowAuto flex from "./Layout.css";
   composes: rounding4 from "./Borders.css";
-  composes: marginStart4 marginEnd4 from "./boxWhitespace.css";
+  composes: marginStart400 marginEnd400 from "./boxWhitespace.css";
   background-color: var(--color-background-overlay);
   max-height: calc(100vh - 32px);
 }
diff --git a/packages/gestalt/src/SearchField.css b/packages/gestalt/src/SearchField.css
index da13a82b27..2978ba521b 100644
--- a/packages/gestalt/src/SearchField.css
+++ b/packages/gestalt/src/SearchField.css
@@ -45,9 +45,9 @@ html[dir="rtl"] .inputActive {
 }
 
 .clear {
-  composes: marginEnd2 from "./boxWhitespace.css";
-  composes: paddingX1 from "./boxWhitespace.css";
-  composes: paddingY1 from "./boxWhitespace.css";
+  composes: marginEnd200 from "./boxWhitespace.css";
+  composes: paddingX100 from "./boxWhitespace.css";
+  composes: paddingY100 from "./boxWhitespace.css";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
diff --git a/packages/gestalt/src/SearchGuide.css b/packages/gestalt/src/SearchGuide.css
index 0946603eb0..750737bfbb 100644
--- a/packages/gestalt/src/SearchGuide.css
+++ b/packages/gestalt/src/SearchGuide.css
@@ -3,7 +3,7 @@
   composes: noBorder from "./Borders.css";
   composes: pointer from "./Cursor.css";
   composes: large from "./Layout.css";
-  composes: paddingX1 from "./boxWhitespace.css";
+  composes: paddingX100 from "./boxWhitespace.css";
   border-radius: var(--rounding-600);
   display: inherit;
 }
diff --git a/packages/gestalt/src/Table.css b/packages/gestalt/src/Table.css
index 0d198698e5..6b4bf86b36 100644
--- a/packages/gestalt/src/Table.css
+++ b/packages/gestalt/src/Table.css
@@ -11,8 +11,8 @@
 
 .th,
 .td {
-  composes: paddingY3 from "./boxWhitespace.css";
-  composes: paddingX3 from "./boxWhitespace.css";
+  composes: paddingY300 from "./boxWhitespace.css";
+  composes: paddingX300 from "./boxWhitespace.css";
 }
 
 .stickyHeader {
diff --git a/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css b/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css
index 6dd8e0f9ec..139d16fc6d 100644
--- a/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css
+++ b/packages/gestalt/src/TableOfContents/TableOfContentsAnchor.css
@@ -1,5 +1,5 @@
 .item {
-  composes: paddingY3 from "../boxWhitespace.css";
+  composes: paddingY300 from "../boxWhitespace.css";
   composes: flexGrow from "../Layout.css";
   background-color: var(--color-background-tableofcontents-item-default);
 }
diff --git a/packages/gestalt/src/Tabs.css b/packages/gestalt/src/Tabs.css
index aed999edcd..e2f64e47ed 100644
--- a/packages/gestalt/src/Tabs.css
+++ b/packages/gestalt/src/Tabs.css
@@ -1,5 +1,5 @@
 .paddingY {
-  composes: paddingY3 from "./boxWhitespace.css";
+  composes: paddingY300 from "./boxWhitespace.css";
 }
 
 .focused {
diff --git a/packages/gestalt/src/TagData.css b/packages/gestalt/src/TagData.css
index 9395ae43c6..73619d6b61 100644
--- a/packages/gestalt/src/TagData.css
+++ b/packages/gestalt/src/TagData.css
@@ -7,13 +7,13 @@
 
 .tagMedium {
   composes: borderBox from "./Layout.css";
-  composes: paddingY3 from "./boxWhitespace.css";
+  composes: paddingY300 from "./boxWhitespace.css";
   height: 40px;
 }
 
 .tagSmall {
   composes: borderBox from "./Layout.css";
-  composes: paddingY2 from "./boxWhitespace.css";
+  composes: paddingY200 from "./boxWhitespace.css";
   height: 32px;
 }
 
diff --git a/packages/gestalt/src/TileData.css b/packages/gestalt/src/TileData.css
index 68d2094f33..88b4231cd4 100644
--- a/packages/gestalt/src/TileData.css
+++ b/packages/gestalt/src/TileData.css
@@ -1,7 +1,7 @@
 .baseTile {
   composes: flex from "./Layout.css";
-  composes: paddingX4 from "./boxWhitespace.css";
-  composes: paddingY4 from "./boxWhitespace.css";
+  composes: paddingX400 from "./boxWhitespace.css";
+  composes: paddingY400 from "./boxWhitespace.css";
   composes: rounding4 from "./Borders.css";
   composes: borderBox from "./Layout.css";
   composes: sizeLg from "./Borders.css";
diff --git a/packages/gestalt/src/Video.css b/packages/gestalt/src/Video.css
index 4d93280b57..c9102f686c 100644
--- a/packages/gestalt/src/Video.css
+++ b/packages/gestalt/src/Video.css
@@ -25,8 +25,8 @@
   composes: bottom0 from "./Layout.css";
   composes: left0 from "./Layout.css";
   composes: right0 from "./Layout.css";
-  composes: paddingX2 from "./boxWhitespace.css";
-  composes: paddingY2 from "./boxWhitespace.css";
+  composes: paddingX200 from "./boxWhitespace.css";
+  composes: paddingY200 from "./boxWhitespace.css";
   background-image: linear-gradient(
     to bottom,
     rgb(181 181 181 / 0),
diff --git a/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap b/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
index 0d6ef4ca1c..2e7b26aa9f 100644
--- a/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`VideoControls for double digit minutes 1`] = `
   className="controls"
 >
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -42,7 +42,7 @@ exports[`VideoControls for double digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -56,7 +56,7 @@ exports[`VideoControls for double digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box flexGrow paddingX2 paddingY2"
+    className="box flexGrow paddingX200 paddingY200"
   >
     <div
       className="box relative"
@@ -85,7 +85,7 @@ exports[`VideoControls for double digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -93,7 +93,7 @@ exports[`VideoControls for double digit minutes 1`] = `
           }
         >
           <div
-            className="box light rounding2"
+            className="box light rounding200"
             style={
               Object {
                 "height": "100%",
@@ -102,7 +102,7 @@ exports[`VideoControls for double digit minutes 1`] = `
             }
           />
           <div
-            className="box circle light marginStartN2"
+            className="box circle light marginStartN200"
             style={
               Object {
                 "height": 16,
@@ -116,7 +116,7 @@ exports[`VideoControls for double digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -130,7 +130,7 @@ exports[`VideoControls for double digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -174,7 +174,7 @@ exports[`VideoControls for double digit seconds 1`] = `
   className="controls"
 >
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -211,7 +211,7 @@ exports[`VideoControls for double digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -225,7 +225,7 @@ exports[`VideoControls for double digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box flexGrow paddingX2 paddingY2"
+    className="box flexGrow paddingX200 paddingY200"
   >
     <div
       className="box relative"
@@ -254,7 +254,7 @@ exports[`VideoControls for double digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -262,7 +262,7 @@ exports[`VideoControls for double digit seconds 1`] = `
           }
         >
           <div
-            className="box light rounding2"
+            className="box light rounding200"
             style={
               Object {
                 "height": "100%",
@@ -271,7 +271,7 @@ exports[`VideoControls for double digit seconds 1`] = `
             }
           />
           <div
-            className="box circle light marginStartN2"
+            className="box circle light marginStartN200"
             style={
               Object {
                 "height": 16,
@@ -285,7 +285,7 @@ exports[`VideoControls for double digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -299,7 +299,7 @@ exports[`VideoControls for double digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -343,7 +343,7 @@ exports[`VideoControls for single digit minutes 1`] = `
   className="controls"
 >
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -380,7 +380,7 @@ exports[`VideoControls for single digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -394,7 +394,7 @@ exports[`VideoControls for single digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box flexGrow paddingX2 paddingY2"
+    className="box flexGrow paddingX200 paddingY200"
   >
     <div
       className="box relative"
@@ -423,7 +423,7 @@ exports[`VideoControls for single digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -431,7 +431,7 @@ exports[`VideoControls for single digit minutes 1`] = `
           }
         >
           <div
-            className="box light rounding2"
+            className="box light rounding200"
             style={
               Object {
                 "height": "100%",
@@ -440,7 +440,7 @@ exports[`VideoControls for single digit minutes 1`] = `
             }
           />
           <div
-            className="box circle light marginStartN2"
+            className="box circle light marginStartN200"
             style={
               Object {
                 "height": 16,
@@ -454,7 +454,7 @@ exports[`VideoControls for single digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -468,7 +468,7 @@ exports[`VideoControls for single digit minutes 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -512,7 +512,7 @@ exports[`VideoControls for single digit seconds 1`] = `
   className="controls"
 >
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -549,7 +549,7 @@ exports[`VideoControls for single digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -563,7 +563,7 @@ exports[`VideoControls for single digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box flexGrow paddingX2 paddingY2"
+    className="box flexGrow paddingX200 paddingY200"
   >
     <div
       className="box relative"
@@ -592,7 +592,7 @@ exports[`VideoControls for single digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -600,7 +600,7 @@ exports[`VideoControls for single digit seconds 1`] = `
           }
         >
           <div
-            className="box light rounding2"
+            className="box light rounding200"
             style={
               Object {
                 "height": "100%",
@@ -609,7 +609,7 @@ exports[`VideoControls for single digit seconds 1`] = `
             }
           />
           <div
-            className="box circle light marginStartN2"
+            className="box circle light marginStartN200"
             style={
               Object {
                 "height": 16,
@@ -623,7 +623,7 @@ exports[`VideoControls for single digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -637,7 +637,7 @@ exports[`VideoControls for single digit seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -681,7 +681,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
   className="controls"
 >
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
@@ -718,7 +718,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -732,7 +732,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
     </div>
   </div>
   <div
-    className="box flexGrow paddingX2 paddingY2"
+    className="box flexGrow paddingX200 paddingY200"
   >
     <div
       className="box relative"
@@ -761,7 +761,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -769,7 +769,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
           }
         >
           <div
-            className="box light rounding2"
+            className="box light rounding200"
             style={
               Object {
                 "height": "100%",
@@ -778,7 +778,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
             }
           />
           <div
-            className="box circle light marginStartN2"
+            className="box circle light marginStartN200"
             style={
               Object {
                 "height": 16,
@@ -792,7 +792,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
     style={
       Object {
         "width": 50,
@@ -806,7 +806,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
     </div>
   </div>
   <div
-    className="box paddingX2 paddingY2"
+    className="box paddingX200 paddingY200"
   >
     <div
       aria-disabled={false}
diff --git a/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap b/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
index d6791a1046..0be38ef3fd 100644
--- a/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`VideoPlayhead 1`] = `
     tabIndex="-1"
   >
     <div
-      className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+      className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
       style={
         Object {
           "height": 4,
@@ -36,7 +36,7 @@ exports[`VideoPlayhead 1`] = `
       }
     >
       <div
-        className="box light rounding2"
+        className="box light rounding200"
         style={
           Object {
             "height": "100%",
@@ -45,7 +45,7 @@ exports[`VideoPlayhead 1`] = `
         }
       />
       <div
-        className="box circle light marginStartN2"
+        className="box circle light marginStartN200"
         style={
           Object {
             "height": 16,
diff --git a/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap b/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
index a9cc21a4eb..db8cf39778 100644
--- a/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
@@ -2,17 +2,17 @@
 
 exports[`Accordion renders a badge correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -54,7 +54,7 @@ exports[`Accordion renders a badge correctly 1`] = `
               className="badge info middle"
             >
               <div
-                className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
@@ -91,17 +91,17 @@ exports[`Accordion renders a badge correctly 1`] = `
 
 exports[`Accordion renders a title correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -134,17 +134,17 @@ exports[`Accordion renders a title correctly 1`] = `
 
 exports[`Accordion renders an error correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -205,17 +205,17 @@ exports[`Accordion renders an error correctly 1`] = `
 
 exports[`Accordion renders an icon button correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -308,17 +308,17 @@ exports[`Accordion renders an icon button correctly 1`] = `
 
 exports[`Accordion renders an icon correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -379,11 +379,11 @@ exports[`Accordion renders an icon correctly 1`] = `
 
 exports[`Accordion renders content correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
@@ -400,11 +400,11 @@ exports[`Accordion renders content correctly 1`] = `
 
 exports[`Accordion renders the base correctly 1`] = `
 <div
-  className="box default paddingX6 paddingY6 rounding4 shadow"
+  className="box default paddingX600 paddingY600 rounding400 shadow"
   id="accordion-test"
 >
   <div
-    className="Flex rowGap0 columnGap6 xsDirectionColumn"
+    className="Flex rowGap0 columnGap600 xsDirectionColumn"
   >
     <div
       className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap b/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
index 1d624b415e..f1ae93d175 100644
--- a/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`Module Expandable renders correctly with multiple items 1`] = `
 <div
-  className="box default rounding4 shadow"
+  className="box default rounding400 shadow"
 >
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -39,13 +39,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -70,10 +70,10 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -94,7 +94,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
               style={
                 Object {
@@ -125,10 +125,10 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
     className="divider"
   />
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -159,13 +159,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -190,10 +190,10 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -214,7 +214,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-1"
               style={
                 Object {
@@ -245,10 +245,10 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
     className="divider"
   />
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -279,13 +279,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -332,10 +332,10 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -356,7 +356,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-2"
               style={
                 Object {
@@ -388,13 +388,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
 
 exports[`Module Expandable renders correctly with one item 1`] = `
 <div
-  className="box default rounding4 shadow"
+  className="box default rounding400 shadow"
 >
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -425,13 +425,13 @@ exports[`Module Expandable renders correctly with one item 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -456,10 +456,10 @@ exports[`Module Expandable renders correctly with one item 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -510,7 +510,7 @@ exports[`Module Expandable renders correctly with one item 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
               style={
                 Object {
@@ -542,13 +542,13 @@ exports[`Module Expandable renders correctly with one item 1`] = `
 
 exports[`renders correctly with multiple items with expandedId 1`] = `
 <div
-  className="box default rounding4 shadow"
+  className="box default rounding400 shadow"
 >
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -579,13 +579,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol12"
+                className="box xsCol1200"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -611,7 +611,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
               style={
                 Object {
@@ -647,10 +647,10 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     className="divider"
   />
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -681,13 +681,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -712,10 +712,10 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -736,7 +736,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-1"
               style={
                 Object {
@@ -767,10 +767,10 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     className="divider"
   />
   <div
-    className="box paddingX6 paddingY6"
+    className="box paddingX600 paddingY600"
   >
     <div
-      className="Flex rowGap0 columnGap6 xsDirectionColumn"
+      className="Flex rowGap0 columnGap600 xsDirectionColumn"
     >
       <div
         className="FlexItem"
@@ -801,13 +801,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
             className="Flex rowGap0 columnGap0 xsDirectionRow"
           >
             <div
-              className="box flexGrow marginEnd6 xsDisplayFlex xsItemsBaseline"
+              className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol6"
+                className="box xsCol600"
               >
                 <div
-                  className="Flex rowGap3 columnGap0 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -854,10 +854,10 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart6 xsCol6"
+                className="box marginStart600 xsCol600"
               >
                 <div
-                  className="Flex rowGap0 columnGap2 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap200 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -878,7 +878,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
+              className="box paddingX100 paddingY100 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-2"
               style={
                 Object {
diff --git a/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap b/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
index 4df52d84f4..e8315ba342 100644
--- a/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -20,7 +20,7 @@ exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
     }
   >
     <div
-      className="box marginEnd2"
+      className="box marginEnd200"
     >
       <svg
         aria-hidden={null}
@@ -47,7 +47,7 @@ exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -56,7 +56,7 @@ exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -69,7 +69,7 @@ exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
 
 exports[`<ActivationCard /> Not started ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -87,7 +87,7 @@ exports[`<ActivationCard /> Not started ActivationCard 1`] = `
     }
   >
     <div
-      className="box marginTop1 selfCenter"
+      className="box marginTop100 selfCenter"
     >
       <div
         className="subtle alignStart breakWord Text fontSize200 fontWeightSemiBold"
@@ -97,7 +97,7 @@ exports[`<ActivationCard /> Not started ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -106,7 +106,7 @@ exports[`<ActivationCard /> Not started ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -119,7 +119,7 @@ exports[`<ActivationCard /> Not started ActivationCard 1`] = `
 
 exports[`<ActivationCard /> Pending ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -137,7 +137,7 @@ exports[`<ActivationCard /> Pending ActivationCard 1`] = `
     }
   >
     <div
-      className="box marginEnd2"
+      className="box marginEnd200"
     >
       <svg
         aria-hidden={null}
@@ -164,7 +164,7 @@ exports[`<ActivationCard /> Pending ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -173,7 +173,7 @@ exports[`<ActivationCard /> Pending ActivationCard 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -186,7 +186,7 @@ exports[`<ActivationCard /> Pending ActivationCard 1`] = `
 
 exports[`<ActivationCard /> complete ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -202,7 +202,7 @@ exports[`<ActivationCard /> complete ActivationCard 1`] = `
       className="box contentCenter xsDisplayFlex"
     >
       <div
-        className="box marginEnd4"
+        className="box marginEnd400"
       >
         <svg
           aria-hidden={null}
@@ -232,7 +232,7 @@ exports[`<ActivationCard /> complete ActivationCard 1`] = `
         </div>
       </div>
       <div
-        className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+        className="box contentStart flexGrow marginTop200 xsDirectionColumn"
       >
         <div
           className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -247,7 +247,7 @@ exports[`<ActivationCard /> complete ActivationCard 1`] = `
 
 exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -265,7 +265,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
     }
   >
     <div
-      className="box marginEnd2"
+      className="box marginEnd200"
     >
       <svg
         aria-hidden={null}
@@ -292,7 +292,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -301,7 +301,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -313,7 +313,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
     className="box"
   >
     <div
-      className="box marginEndAuto marginStartAuto marginTop8 paddingX1 pill xsItemsCenter"
+      className="box marginEndAuto marginStartAuto marginTop800 paddingX100 pill xsItemsCenter"
     >
       <a
         aria-label="Learn more about tags"
@@ -336,7 +336,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
         tabIndex={0}
       >
         <div
-          className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+          className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
         >
           <div
             className="FlexItem"
@@ -405,7 +405,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
 
 exports[`<ActivationCard /> message + title + link 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -423,7 +423,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
     }
   >
     <div
-      className="box marginEnd2"
+      className="box marginEnd200"
     >
       <svg
         aria-hidden={null}
@@ -450,7 +450,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -459,7 +459,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -471,7 +471,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
     className="box"
   >
     <div
-      className="box marginEndAuto marginStartAuto marginTop8 paddingX1 pill xsItemsCenter"
+      className="box marginEndAuto marginStartAuto marginTop800 paddingX100 pill xsItemsCenter"
     >
       <a
         aria-label="Learn more about tags"
@@ -494,7 +494,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
         tabIndex={0}
       >
         <div
-          className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+          className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
         >
           <div
             className="FlexItem"
@@ -514,7 +514,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
 
 exports[`<ActivationCard /> message + title 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX6 paddingY6 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -532,7 +532,7 @@ exports[`<ActivationCard /> message + title 1`] = `
     }
   >
     <div
-      className="box marginEnd2"
+      className="box marginEnd200"
     >
       <svg
         aria-hidden={null}
@@ -559,7 +559,7 @@ exports[`<ActivationCard /> message + title 1`] = `
     </div>
   </div>
   <div
-    className="box marginTop6"
+    className="box marginTop600"
   >
     <div
       className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -568,7 +568,7 @@ exports[`<ActivationCard /> message + title 1`] = `
     </div>
   </div>
   <div
-    className="box contentStart flexGrow marginTop2 xsDirectionColumn"
+    className="box contentStart flexGrow marginTop200 xsDirectionColumn"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
diff --git a/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap b/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap
index cbca8240ce..a67caa7b38 100644
--- a/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Badge.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Badge renders 1`] = `
   className="badge info middle"
 >
   <div
-    className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+    className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
index 2bef8ee3ce..0dc63ed9ed 100644
--- a/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`<BannerCallout /> Error BannerCallout 1`] = `
 <div
-  className="box errorWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box errorWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -13,10 +13,10 @@ exports[`<BannerCallout /> Error BannerCallout 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -33,7 +33,7 @@ exports[`<BannerCallout /> Error BannerCallout 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -57,10 +57,10 @@ exports[`<BannerCallout /> Error BannerCallout 1`] = `
 
 exports[`<BannerCallout /> Info BannerCallout 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -68,10 +68,10 @@ exports[`<BannerCallout /> Info BannerCallout 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -88,7 +88,7 @@ exports[`<BannerCallout /> Info BannerCallout 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -112,10 +112,10 @@ exports[`<BannerCallout /> Info BannerCallout 1`] = `
 
 exports[`<BannerCallout /> Warning BannerCallout 1`] = `
 <div
-  className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 warningWeak xsDirectionColumn xsDisplayFlex"
+  className="box paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 warningWeak xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -123,10 +123,10 @@ exports[`<BannerCallout /> Warning BannerCallout 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -143,7 +143,7 @@ exports[`<BannerCallout /> Warning BannerCallout 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -167,10 +167,10 @@ exports[`<BannerCallout /> Warning BannerCallout 1`] = `
 
 exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -178,10 +178,10 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -198,7 +198,7 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -209,7 +209,7 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -234,10 +234,10 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <button
           aria-label="Cancel invite"
@@ -266,7 +266,7 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
         </button>
       </div>
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <button
           aria-label="Resend invite"
@@ -350,10 +350,10 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
 
 exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -361,10 +361,10 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -381,7 +381,7 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -392,7 +392,7 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -409,10 +409,10 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -435,7 +435,7 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -505,10 +505,10 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
 
 exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -516,10 +516,10 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -536,7 +536,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -547,7 +547,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -564,10 +564,10 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label="Learn more: bannercallout messages"
@@ -590,7 +590,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -605,7 +605,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
         </a>
       </div>
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -628,7 +628,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -649,10 +649,10 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
 
 exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -660,10 +660,10 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -680,7 +680,7 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -691,7 +691,7 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -708,10 +708,10 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -734,7 +734,7 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -755,10 +755,10 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
 
 exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -766,10 +766,10 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -786,7 +786,7 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -797,7 +797,7 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -814,10 +814,10 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <button
           aria-label=""
@@ -852,10 +852,10 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
 
 exports[`<BannerCallout /> message + title 1`] = `
 <div
-  className="box infoWeak paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -863,10 +863,10 @@ exports[`<BannerCallout /> message + title 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+        className="box marginBottom400 marginTop0 smMarginBottomAuto smMarginTopAuto"
       >
         <svg
           aria-hidden={null}
@@ -883,7 +883,7 @@ exports[`<BannerCallout /> message + title 1`] = `
         </svg>
       </div>
       <div
-        className="box marginBottomAuto marginTopAuto paddingX6"
+        className="box marginBottomAuto marginTopAuto paddingX600"
         style={
           Object {
             "maxWidth": 648,
@@ -894,7 +894,7 @@ exports[`<BannerCallout /> message + title 1`] = `
           className="box marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex xsItemsCenter"
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
diff --git a/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
index 7c079c00d0..9dbeedbea8 100644
--- a/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
@@ -6,7 +6,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -20,7 +20,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem selfCenter"
@@ -30,7 +30,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding2 willChangeTransform"
+              className="Mask rounding200 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -102,13 +102,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -118,7 +118,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -132,7 +132,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem selfBaseline"
@@ -142,7 +142,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding2 willChangeTransform"
+              className="Mask rounding200 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -185,7 +185,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="textColorOverrideLight"
@@ -218,13 +218,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -239,7 +239,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -253,7 +253,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem selfCenter"
@@ -263,7 +263,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding2 willChangeTransform"
+              className="Mask rounding200 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -335,13 +335,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -351,7 +351,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -365,7 +365,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem selfBaseline"
@@ -375,7 +375,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding2 willChangeTransform"
+              className="Mask rounding200 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -418,7 +418,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="textColorOverrideLight"
@@ -451,13 +451,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -472,7 +472,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -486,7 +486,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -513,13 +513,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -529,7 +529,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -543,7 +543,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -558,7 +558,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="default alignStart breakWord lineClamp Text fontSize300 fontWeightNormal"
@@ -574,13 +574,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -595,7 +595,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -609,7 +609,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -636,13 +636,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -652,7 +652,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -666,7 +666,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -681,7 +681,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="default alignStart breakWord lineClamp Text fontSize300 fontWeightNormal"
@@ -697,13 +697,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -718,7 +718,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": 10,
@@ -732,7 +732,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -759,13 +759,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -775,7 +775,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": 10,
@@ -789,7 +789,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -804,7 +804,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="default alignStart breakWord lineClamp Text fontSize300 fontWeightNormal"
@@ -820,13 +820,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -841,7 +841,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -855,7 +855,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -882,13 +882,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfCenter xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfCenter xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
@@ -898,7 +898,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX4 paddingY3 rounding4 shadow smPaddingY4 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -912,7 +912,7 @@ Array [
       }
     >
       <div
-        className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem flexGrow"
@@ -927,7 +927,7 @@ Array [
             </div>
           </div>
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <span
               className="default alignStart breakWord lineClamp Text fontSize300 fontWeightNormal"
@@ -943,13 +943,13 @@ Array [
         </div>
       </div>
       <div
-        className="Flex rowGap4 columnGap4 selfEnd xsDirectionRow"
+        className="Flex rowGap400 columnGap400 selfEnd xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+            className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
           />
         </div>
       </div>
diff --git a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
index 3b6025f911..6cc562d99e 100644
--- a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BannerSlim renders an icon with accessibility label 1`] = `
 <div
-  className="box errorWeak mdDirectionRow paddingX4 paddingY0 paddingY4 rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box errorWeak mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -10,7 +10,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
   }
 >
   <div
-    className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
@@ -58,7 +58,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
 
 exports[`BannerSlim renders complex message 1`] = `
 <div
-  className="box mdDirectionRow paddingX4 paddingY0 paddingY4 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -66,7 +66,7 @@ exports[`BannerSlim renders complex message 1`] = `
   }
 >
   <div
-    className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
@@ -119,7 +119,7 @@ exports[`BannerSlim renders complex message 1`] = `
 
 exports[`BannerSlim renders neutral type with message 1`] = `
 <div
-  className="box mdDirectionRow paddingX4 paddingY0 paddingY4 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -127,7 +127,7 @@ exports[`BannerSlim renders neutral type with message 1`] = `
   }
 >
   <div
-    className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
@@ -153,7 +153,7 @@ exports[`BannerSlim renders neutral type with message 1`] = `
 
 exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 <div
-  className="box mdDirectionRow paddingX0 paddingY0 paddingY1 rounding4 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX0 paddingY0 paddingY100 rounding400 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -161,7 +161,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
   }
 >
   <div
-    className="Flex rowGap2 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap200 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
@@ -209,7 +209,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 
 exports[`BannerSlim renders primary action and dismiss button 1`] = `
 <div
-  className="box mdDirectionRow paddingX4 paddingY0 paddingY4 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -217,7 +217,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
   }
 >
   <div
-    className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
@@ -241,7 +241,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
       className="FlexItem flexNone"
     >
       <div
-        className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+        className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
       >
         <div
           className="FlexItem"
@@ -329,7 +329,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
     </div>
   </div>
   <div
-    className="box flexNone marginTop4 mdDisplayNone selfEnd xsDisplayFlex"
+    className="box flexNone marginTop400 mdDisplayNone selfEnd xsDisplayFlex"
   >
     <button
       aria-label="test"
@@ -362,7 +362,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
 
 exports[`BannerSlim renders simple message with helper link 1`] = `
 <div
-  className="box mdDirectionRow paddingX4 paddingY0 paddingY4 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -370,7 +370,7 @@ exports[`BannerSlim renders simple message with helper link 1`] = `
   }
 >
   <div
-    className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+    className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
     style={
       Object {
         "width": "100%",
diff --git a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
index 20932682a9..3ce96957b4 100644
--- a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -13,10 +13,10 @@ exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -40,10 +40,10 @@ exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
 
 exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -51,10 +51,10 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
     }
   >
     <div
-      className="box flexGrow justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box flexGrow justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box flexNone marginBottom4 smMarginBottom0"
+        className="box flexNone marginBottom400 smMarginBottom0"
         style={
           Object {
             "width": undefined,
@@ -86,7 +86,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
         </div>
       </div>
       <div
-        className="box flexGrow marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart6 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box flexGrow marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -97,7 +97,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -112,7 +112,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
           </div>
         </div>
         <div
-          className="box flexGrow justifyEnd smDisplayFlex smMarginEnd4 smPaddingY3"
+          className="box flexGrow justifyEnd smDisplayFlex smMarginEnd400 smPaddingY300"
           style={
             Object {
               "width": "100%",
@@ -128,13 +128,13 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 flexWrap justifyEnd xsDirectionRow"
+              className="Flex rowGap200 columnGap0 flexWrap justifyEnd xsDirectionRow"
             >
               <div
                 className="FlexItem flexGrow"
               >
                 <div
-                  className="box marginBottom0 smMarginBottom2"
+                  className="box marginBottom0 smMarginBottom200"
                 >
                   <span>
                     <div
@@ -177,7 +177,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
                   type="submit"
                 >
                   <div
-                    className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
                   >
                     <div
                       className="FlexItem"
@@ -251,10 +251,10 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
 
 exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + image 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -262,10 +262,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box flexNone marginBottom4 smMarginBottom0"
+        className="box flexNone marginBottom400 smMarginBottom0"
         style={
           Object {
             "width": undefined,
@@ -297,7 +297,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
         </div>
       </div>
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart6 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -308,7 +308,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -325,10 +325,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -351,7 +351,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -421,10 +421,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
 
 exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -432,10 +432,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -446,7 +446,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -463,10 +463,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -489,7 +489,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -559,10 +559,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
 
 exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -570,10 +570,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -584,7 +584,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -601,10 +601,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label="Learn more: upsell messages"
@@ -627,7 +627,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -642,7 +642,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
         </a>
       </div>
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -665,7 +665,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -686,10 +686,10 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
 
 exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -697,10 +697,10 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -711,7 +711,7 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -728,10 +728,10 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <a
           aria-label=""
@@ -754,7 +754,7 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
           tabIndex={0}
         >
           <div
-            className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -775,10 +775,10 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
 
 exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -786,10 +786,10 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
     }
   >
     <div
-      className="box justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter marginBottom400 smDirectionRow smMarginBottom0 smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -800,7 +800,7 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
@@ -817,10 +817,10 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
       </div>
     </div>
     <div
-      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+      className="box marginStartAuto smDisplayFlex smMarginEnd400 smPaddingY300"
     >
       <div
-        className="box justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
+        className="box justifyCenter paddingX100 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock xsItemsCenter"
       >
         <button
           aria-label=""
@@ -855,10 +855,10 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
 
 exports[`<BannerUpsell /> message + title 1`] = `
 <div
-  className="box default paddingX12 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
-    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
     style={
       Object {
         "width": "100%",
@@ -866,10 +866,10 @@ exports[`<BannerUpsell /> message + title 1`] = `
     }
   >
     <div
-      className="box justifyCenter smDirectionRow smPaddingY3 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+      className="box justifyCenter smDirectionRow smPaddingY300 xsDirectionColumn xsDisplayFlex xsItemsCenter"
     >
       <div
-        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+        className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
           className="box"
@@ -880,7 +880,7 @@ exports[`<BannerUpsell /> message + title 1`] = `
           }
         >
           <div
-            className="box marginBottom2"
+            className="box marginBottom200"
           >
             <div
               className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
diff --git a/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap
index a9e9882962..b156a5d266 100644
--- a/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap
@@ -10,13 +10,13 @@ exports[`BannerUpsellForm renders 1`] = `
   }
 >
   <div
-    className="Flex rowGap2 columnGap0 flexWrap justifyEnd xsDirectionRow"
+    className="Flex rowGap200 columnGap0 flexWrap justifyEnd xsDirectionRow"
   >
     <div
       className="FlexItem flexGrow"
     >
       <div
-        className="box marginBottom0 smMarginBottom2"
+        className="box marginBottom0 smMarginBottom200"
       >
         <span>
           <div
@@ -59,7 +59,7 @@ exports[`BannerUpsellForm renders 1`] = `
         type="submit"
       >
         <div
-          className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+          className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
         >
           <div
             className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Box.test.tsx.snap b/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
index 14ae5844df..c605d4a5e9 100644
--- a/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
@@ -55,13 +55,13 @@ exports[`Box has correct class when opacity is 0.5 1`] = `
 
 exports[`Box has correct class when opacity is 1 1`] = `
 <div
-  className="box opacity1"
+  className="box opacity100"
 />
 `;
 
 exports[`Box has correct class when rounding is 1 1`] = `
 <div
-  className="box rounding1"
+  className="box rounding100"
 />
 `;
 
@@ -97,13 +97,13 @@ exports[`Box has correct classes when display is flex 1`] = `
 
 exports[`Box has correct marginStart and marginEnd when marginStart and marginEnd are negative 1`] = `
 <div
-  className="box marginEndN3 marginStartN1"
+  className="box marginEndN300 marginStartN100"
 />
 `;
 
 exports[`Box has correct marginStart and marginEnd when marginStart equals 1 and marginEnd equals 2 1`] = `
 <div
-  className="box marginEnd2 marginStart1"
+  className="box marginEnd200 marginStart100"
 />
 `;
 
diff --git a/packages/gestalt/src/__snapshots__/ButtonGroup.test.tsx.snap b/packages/gestalt/src/__snapshots__/ButtonGroup.test.tsx.snap
index 3346c756fd..ab07f3492a 100644
--- a/packages/gestalt/src/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ButtonGroup.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`ButtonGroup Renders container with children when multiple children are passed in 1`] = `
 <div
-  className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+  className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
 >
   <div
-    className="box paddingX1 paddingY1"
+    className="box paddingX100 paddingY100"
   >
     <button
       className="button inline accessibilityOutline parentButton"
@@ -33,7 +33,7 @@ exports[`ButtonGroup Renders container with children when multiple children are
     </button>
   </div>
   <div
-    className="box paddingX1 paddingY1"
+    className="box paddingX100 paddingY100"
   >
     <button
       className="button inline accessibilityOutline parentButton"
@@ -67,10 +67,10 @@ exports[`ButtonGroup Renders nothing when no children are passed in 1`] = `null`
 
 exports[`ButtonGroup Renders the child without container when 1 child is passed in 1`] = `
 <div
-  className="box flexWrap marginBottomN1 marginEndN1 marginStartN1 marginTopN1 xsDisplayFlex"
+  className="box flexWrap marginBottomN100 marginEndN100 marginStartN100 marginTopN100 xsDisplayFlex"
 >
   <div
-    className="box paddingX1 paddingY1"
+    className="box paddingX100 paddingY100"
   >
     <button
       className="button inline accessibilityOutline parentButton"
diff --git a/packages/gestalt/src/__snapshots__/ButtonLink.test.tsx.snap b/packages/gestalt/src/__snapshots__/ButtonLink.test.tsx.snap
index cf8a3fc8ab..9d9abe7a75 100644
--- a/packages/gestalt/src/__snapshots__/ButtonLink.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ButtonLink.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ButtonLink renders 1`] = `
   target="_blank"
 >
   <div
-    className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -71,7 +71,7 @@ exports[`ButtonLink renders disabled 1`] = `
   target="_blank"
 >
   <div
-    className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -122,7 +122,7 @@ exports[`ButtonLink renders with icon on the right 1`] = `
   target="_blank"
 >
   <div
-    className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Checkbox.test.tsx.snap b/packages/gestalt/src/__snapshots__/Checkbox.test.tsx.snap
index 3263cec1cb..878fa69a51 100644
--- a/packages/gestalt/src/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Checkbox.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`Checkbox 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -43,7 +43,7 @@ exports[`Checkbox 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -53,7 +53,7 @@ exports[`Checkbox 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -65,10 +65,10 @@ exports[`Checkbox checked 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="checked borderSelected borderRadiusMd sizeMd check thickBorder"
@@ -117,7 +117,7 @@ exports[`Checkbox checked 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -127,7 +127,7 @@ exports[`Checkbox checked 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -139,10 +139,10 @@ exports[`Checkbox disabled & checked 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="disabled borderDisabled borderRadiusSm sizeSm check thickBorder"
@@ -191,7 +191,7 @@ exports[`Checkbox disabled & checked 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -201,7 +201,7 @@ exports[`Checkbox disabled & checked 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -213,10 +213,10 @@ exports[`Checkbox disabled 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="disabled borderDisabled borderRadiusSm sizeSm check thickBorder"
@@ -251,7 +251,7 @@ exports[`Checkbox disabled 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -261,7 +261,7 @@ exports[`Checkbox disabled 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -273,10 +273,10 @@ exports[`Checkbox indeterminate 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="checked borderSelected borderRadiusMd sizeMd check thickBorder"
@@ -325,7 +325,7 @@ exports[`Checkbox indeterminate 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -335,7 +335,7 @@ exports[`Checkbox indeterminate 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -347,10 +347,10 @@ exports[`Checkbox small 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled border borderRadiusSm sizeSm check thickBorder"
@@ -385,7 +385,7 @@ exports[`Checkbox small 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -395,7 +395,7 @@ exports[`Checkbox small 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -407,10 +407,10 @@ exports[`Checkbox with an image 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled border borderRadiusSm sizeSm check thickBorder"
@@ -433,7 +433,7 @@ exports[`Checkbox with an image 1`] = `
       />
     </div>
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="box"
@@ -472,7 +472,7 @@ exports[`Checkbox with an image 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -482,7 +482,7 @@ exports[`Checkbox with an image 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       />
     </div>
   </div>
@@ -494,10 +494,10 @@ exports[`Checkbox with error 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled borderErrorUnchecked borderRadiusSm sizeSm check thickBorder"
@@ -532,7 +532,7 @@ exports[`Checkbox with error 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -542,7 +542,7 @@ exports[`Checkbox with error 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       >
         <div
           className="noStartPadding sm_topPadding"
@@ -560,7 +560,7 @@ exports[`Checkbox with error 1`] = `
                 role="alert"
               >
                 <div
-                  className="Flex rowGap1 columnGap1 xsDirectionRow xsItemsCenter"
+                  className="Flex rowGap100 columnGap100 xsDirectionRow xsItemsCenter"
                 >
                   <div
                     className="FlexItem"
@@ -604,10 +604,10 @@ exports[`Checkbox with helperText 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled border borderRadiusSm sizeSm check thickBorder"
@@ -642,7 +642,7 @@ exports[`Checkbox with helperText 1`] = `
         htmlFor="id"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="default alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -652,14 +652,14 @@ exports[`Checkbox with helperText 1`] = `
         </div>
       </label>
       <div
-        className="box paddingX1"
+        className="box paddingX100"
       >
         <div
           className="noStartPadding sm_topPadding"
           id="id-helperText"
         >
           <div
-            className="Flex rowGap4 columnGap4 xsDirectionRow"
+            className="Flex rowGap400 columnGap400 xsDirectionRow"
           >
             <div
               className="FlexItem flexGrow"
@@ -683,10 +683,10 @@ exports[`Checkbox without label 1`] = `
   className="box"
 >
   <div
-    className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+    className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
   >
     <div
-      className="box paddingX1 relative"
+      className="box paddingX100 relative"
     >
       <div
         className="enabled border borderRadiusMd sizeMd check thickBorder"
diff --git a/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
index 319bd652ce..14e8073cce 100644
--- a/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`ComboBox Controlled ComboBox renders basic controlled components 1`] =
           >
             <div
               aria-hidden="true"
-              class="box circle marginEnd2 xsDisplayFlex xsItemsCenter"
+              class="box circle marginEnd200 xsDisplayFlex xsItemsCenter"
               style="height: 100%;"
             >
               <div
@@ -113,16 +113,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             class="textField base enabled normal md medium actionButton md textFieldWrapper"
           >
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -161,16 +161,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -209,16 +209,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -257,16 +257,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -305,16 +305,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -353,16 +353,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -401,16 +401,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -449,16 +449,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -497,16 +497,16 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box marginEnd1"
+              class="box marginEnd100"
               style="margin-bottom: 2px;"
             >
               <div
                 aria-disabled="false"
-                class="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
-                  class="box marginEnd5 xsDisplayFlex xsItemsCenter"
+                  class="box marginEnd500 xsDisplayFlex xsItemsCenter"
                   style="height: 100%;"
                 >
                   <span
@@ -545,7 +545,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow marginEnd2 relative"
+              class="box flexGrow marginEnd200 relative"
               style="max-width: 100%;"
             >
               <div
@@ -567,7 +567,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             class="actionButtonContainer"
           >
             <div
-              class="box circle marginEnd2 xsDisplayFlex xsItemsCenter"
+              class="box circle marginEnd200 xsDisplayFlex xsItemsCenter"
               style="height: 100%;"
             >
               <div
@@ -648,7 +648,7 @@ exports[`ComboBox Uncontrolled ComboBox renders default 1`] = `
           >
             <div
               aria-hidden="true"
-              class="box circle marginEnd2 xsDisplayFlex xsItemsCenter"
+              class="box circle marginEnd200 xsDisplayFlex xsItemsCenter"
               style="height: 100%;"
             >
               <div
diff --git a/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap b/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap
index f773324c55..4a22056e03 100644
--- a/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`Datapoint renders 1`] = `
 <div
-  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+  className="Flex rowGap0 columnGap100 xsDirectionColumn"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
       style={
         Object {
           "minHeight": 24,
@@ -44,7 +44,7 @@ exports[`Datapoint renders 1`] = `
     className="FlexItem"
   >
     <div
-      className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem"
@@ -73,7 +73,7 @@ exports[`Datapoint renders 1`] = `
         className="FlexItem"
       >
         <div
-          className="Flex rowGap1 columnGap0 xsDirectionRow"
+          className="Flex rowGap100 columnGap0 xsDirectionRow"
         >
           <div
             className="FlexItem"
@@ -110,13 +110,13 @@ exports[`Datapoint renders 1`] = `
 
 exports[`Datapoint renders a badge 1`] = `
 <div
-  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+  className="Flex rowGap0 columnGap100 xsDirectionColumn"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
       style={
         Object {
           "minHeight": 24,
@@ -153,7 +153,7 @@ exports[`Datapoint renders a badge 1`] = `
           className="badge info middle"
         >
           <div
-            className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -178,7 +178,7 @@ exports[`Datapoint renders a badge 1`] = `
     className="FlexItem"
   >
     <div
-      className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem"
@@ -207,7 +207,7 @@ exports[`Datapoint renders a badge 1`] = `
         className="FlexItem"
       >
         <div
-          className="Flex rowGap1 columnGap0 xsDirectionRow"
+          className="Flex rowGap100 columnGap0 xsDirectionRow"
         >
           <div
             className="FlexItem"
@@ -244,13 +244,13 @@ exports[`Datapoint renders a badge 1`] = `
 
 exports[`Datapoint renders a tooltip 1`] = `
 <div
-  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+  className="Flex rowGap0 columnGap100 xsDirectionColumn"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
       style={
         Object {
           "minHeight": 24,
@@ -337,7 +337,7 @@ exports[`Datapoint renders a tooltip 1`] = `
     className="FlexItem"
   >
     <div
-      className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem"
@@ -366,7 +366,7 @@ exports[`Datapoint renders a tooltip 1`] = `
         className="FlexItem"
       >
         <div
-          className="Flex rowGap1 columnGap0 xsDirectionRow"
+          className="Flex rowGap100 columnGap0 xsDirectionRow"
         >
           <div
             className="FlexItem"
@@ -403,13 +403,13 @@ exports[`Datapoint renders a tooltip 1`] = `
 
 exports[`Datapoint renders an accessibility label 1`] = `
 <div
-  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+  className="Flex rowGap0 columnGap100 xsDirectionColumn"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
       style={
         Object {
           "minHeight": 24,
@@ -445,7 +445,7 @@ exports[`Datapoint renders an accessibility label 1`] = `
     className="FlexItem"
   >
     <div
-      className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem"
@@ -474,7 +474,7 @@ exports[`Datapoint renders an accessibility label 1`] = `
         className="FlexItem"
       >
         <div
-          className="Flex rowGap1 columnGap0 xsDirectionRow"
+          className="Flex rowGap100 columnGap0 xsDirectionRow"
         >
           <div
             className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
index d900b57eda..489d9bd0d9 100644
--- a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -32,23 +32,23 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
           style="max-width: 360px; overflow: auto;"
         >
           <div
-            class="box flexGrow marginBottom2 marginEnd2 marginStart2 marginTop2 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+            class="box flexGrow marginBottom200 marginEnd200 marginStart200 marginTop200 xsDirectionColumn xsDisplayFlex xsItemsCenter"
           >
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-0"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 secondary xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 secondary xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -77,20 +77,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-1"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -119,20 +119,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-2"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -161,20 +161,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-3"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -203,20 +203,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-4"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -245,20 +245,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-5"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -287,20 +287,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-6"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -329,20 +329,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-7"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -371,20 +371,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-8"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -413,20 +413,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-9"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -455,20 +455,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-10"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -497,20 +497,20 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-11"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -587,23 +587,23 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
           style="max-width: 360px; overflow: auto;"
         >
           <div
-            class="box flexGrow marginBottom2 marginEnd2 marginStart2 marginTop2 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+            class="box flexGrow marginBottom200 marginEnd200 marginStart200 marginTop200 xsDirectionColumn xsDisplayFlex xsItemsCenter"
           >
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-0"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 secondary xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 secondary xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -632,20 +632,20 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-1"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -674,14 +674,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-2"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
@@ -693,7 +693,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                     class="Flex rowGap0 columnGap0 xsDirectionRow"
                   >
                     <div
-                      class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                      class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                     >
                       <div
                         class="FlexItem"
@@ -719,7 +719,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
+                      class="box justifyCenter marginStart200 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
                         class="rtlSupport default icon"
@@ -742,20 +742,20 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-3"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
                 >
                   <div
-                    class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                    class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                   >
                     <div
                       class="FlexItem"
@@ -770,7 +770,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                           Item 4
                         </span>
                         <div
-                          class="box marginStart2 marginTop1"
+                          class="box marginStart200 marginTop100"
                         >
                           <div
                             class="box xsDisplayVisuallyHidden"
@@ -781,7 +781,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                             class="badge info middle"
                           >
                             <div
-                              class="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                              class="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                             >
                               <div
                                 class="FlexItem"
@@ -815,14 +815,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-4"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
@@ -834,7 +834,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                     class="Flex rowGap0 columnGap0 xsDirectionRow"
                   >
                     <div
-                      class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                      class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                     >
                       <div
                         class="FlexItem"
@@ -849,7 +849,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                             Item 5 with a really long, detailed name
                           </span>
                           <div
-                            class="box marginStart2 marginTop1"
+                            class="box marginStart200 marginTop100"
                           >
                             <div
                               class="box xsDisplayVisuallyHidden"
@@ -860,7 +860,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                               class="badge info middle"
                             >
                               <div
-                                class="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                                class="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                               >
                                 <div
                                   class="FlexItem"
@@ -891,7 +891,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
+                      class="box justifyCenter marginStart200 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
                         class="rtlSupport default icon"
@@ -914,14 +914,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-5"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX2 paddingY2 rounding2 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
@@ -933,7 +933,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                     class="Flex rowGap0 columnGap0 xsDirectionRow"
                   >
                     <div
-                      class="Flex rowGap0 columnGap1 flexGrow xsDirectionColumn"
+                      class="Flex rowGap0 columnGap100 flexGrow xsDirectionColumn"
                     >
                       <div
                         class="FlexItem"
@@ -959,7 +959,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
                       />
                     </div>
                     <div
-                      class="box justifyCenter marginStart2 transparent xsDisplayFlex xsItemsCenter"
+                      class="box justifyCenter marginStart200 transparent xsDisplayFlex xsItemsCenter"
                     >
                       <svg
                         class="rtlSupport default icon"
diff --git a/packages/gestalt/src/__snapshots__/Fieldset.test.tsx.snap b/packages/gestalt/src/__snapshots__/Fieldset.test.tsx.snap
index e24f056c2b..a7911c10f9 100644
--- a/packages/gestalt/src/__snapshots__/Fieldset.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Fieldset.test.tsx.snap
@@ -17,10 +17,10 @@ exports[`Fieldset renders 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -55,7 +55,7 @@ exports[`Fieldset renders 1`] = `
           htmlFor="Schnauzer"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -65,7 +65,7 @@ exports[`Fieldset renders 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -74,10 +74,10 @@ exports[`Fieldset renders 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -112,7 +112,7 @@ exports[`Fieldset renders 1`] = `
           htmlFor="Aussie"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -122,7 +122,7 @@ exports[`Fieldset renders 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -147,10 +147,10 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -185,7 +185,7 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
           htmlFor="Schnauzer"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -195,7 +195,7 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -204,10 +204,10 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -242,7 +242,7 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
           htmlFor="Aussie"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -252,7 +252,7 @@ exports[`Fieldset renders a visually hidden legend 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -278,10 +278,10 @@ exports[`Fieldset renders with errorMessage 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -316,7 +316,7 @@ exports[`Fieldset renders with errorMessage 1`] = `
           htmlFor="Schnauzer"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -326,7 +326,7 @@ exports[`Fieldset renders with errorMessage 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -335,10 +335,10 @@ exports[`Fieldset renders with errorMessage 1`] = `
     className="box"
   >
     <div
-      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
     >
       <div
-        className="box paddingX1 relative"
+        className="box paddingX100 relative"
       >
         <div
           className="enabled border borderRadiusMd sizeMd check thickBorder"
@@ -373,7 +373,7 @@ exports[`Fieldset renders with errorMessage 1`] = `
           htmlFor="Aussie"
         >
           <div
-            className="box paddingX1"
+            className="box paddingX100"
           >
             <div
               className="default alignStart breakWord Text fontSize300 fontWeightNormal"
@@ -383,7 +383,7 @@ exports[`Fieldset renders with errorMessage 1`] = `
           </div>
         </label>
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         />
       </div>
     </div>
@@ -404,7 +404,7 @@ exports[`Fieldset renders with errorMessage 1`] = `
           role="alert"
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Flex.test.tsx.snap b/packages/gestalt/src/__snapshots__/Flex.test.tsx.snap
index 621820d5a5..4a242e6e76 100644
--- a/packages/gestalt/src/__snapshots__/Flex.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Flex.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`Flex renders with direction: column 1`] = `
 
 exports[`Flex renders with specified gap 1`] = `
 <div
-  className="Flex rowGap8 columnGap8 xsDirectionRow"
+  className="Flex rowGap800 columnGap800 xsDirectionRow"
 >
   <div
     className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Link.test.tsx.snap b/packages/gestalt/src/__snapshots__/Link.test.tsx.snap
index ff1374d2b0..074946e3fe 100644
--- a/packages/gestalt/src/__snapshots__/Link.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Link.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`external link with nofollow 1`] = `
 >
   Link
   <div
-    className="box marginStart1 xsDisplayInlineBlock"
+    className="box marginStart100 xsDisplayInlineBlock"
   >
     <svg
       className="rtlSupport inherit icon"
diff --git a/packages/gestalt/src/__snapshots__/List.test.tsx.snap b/packages/gestalt/src/__snapshots__/List.test.tsx.snap
index 565f9adbdd..b6a4e61502 100644
--- a/packages/gestalt/src/__snapshots__/List.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/List.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`List renders a bare unordered list 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":r0:"
   >
     <div
@@ -140,7 +140,7 @@ exports[`List renders an condensed list 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":ro:"
   >
     <div
@@ -180,7 +180,7 @@ exports[`List renders an list item with custom text 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":rp:"
   >
     <div
@@ -224,7 +224,7 @@ exports[`List renders an list with a custom label 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":rm:"
   >
     <span
@@ -308,7 +308,7 @@ exports[`List renders an mixed list 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":ri:"
   >
     <div
@@ -489,7 +489,7 @@ exports[`List renders an ordered list 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":rc:"
   >
     <div
@@ -624,7 +624,7 @@ exports[`List renders an unordered list 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="box marginBottom4 xsDisplayBlock"
+    className="box marginBottom400 xsDisplayBlock"
     id=":r6:"
   >
     <div
diff --git a/packages/gestalt/src/__snapshots__/Modal.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Modal.jsdom.test.tsx.snap
index b0aa9e8d5b..672c955b5a 100644
--- a/packages/gestalt/src/__snapshots__/Modal.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Modal.jsdom.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Modal Desktop Modal renders 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box justifyCenter paddingX6 paddingY6"
+                class="box justifyCenter paddingX600 paddingY600"
               >
                 <h1
                   class="Heading fontSize500 default alignCenter breakWord"
@@ -38,7 +38,7 @@ exports[`Modal Desktop Modal renders 1`] = `
                   Heading
                 </h1>
                 <div
-                  class="box marginTop1"
+                  class="box marginTop100"
                 >
                   <div
                     class="default alignCenter breakWord Text fontSize300 fontWeightNormal"
@@ -49,7 +49,7 @@ exports[`Modal Desktop Modal renders 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               Modal content
@@ -59,10 +59,10 @@ exports[`Modal Desktop Modal renders 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
@@ -140,10 +140,10 @@ exports[`Modal Mobile Modal renders 1`] = `
             style="width: 100%;"
           >
             <div
-              class="box fit paddingX4 paddingY4 relative"
+              class="box fit paddingX400 paddingY400 relative"
             >
               <div
-                class="Flex rowGap4 columnGap4 justifyCenter xsDirectionRow xsItemsCenter"
+                class="Flex rowGap400 columnGap400 justifyCenter xsDirectionRow xsItemsCenter"
               >
                 <div
                   class="FlexItem flexNone"
@@ -200,7 +200,7 @@ exports[`Modal Mobile Modal renders 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX4 paddingY2"
+              class="box flexGrow overflowAuto paddingX400 paddingY200"
             >
               Modal content
             </div>
@@ -208,10 +208,10 @@ exports[`Modal Mobile Modal renders 1`] = `
               class="box fit relative"
             >
               <div
-                class="box paddingX4 paddingY4"
+                class="box paddingX400 paddingY400"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/ModalAlert.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/ModalAlert.jsdom.test.tsx.snap
index bbba88b854..3937a36a08 100644
--- a/packages/gestalt/src/__snapshots__/ModalAlert.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ModalAlert.jsdom.test.tsx.snap
@@ -30,10 +30,10 @@ exports[`ModalAlert Desktop ModalAlert renders (default) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap4 columnGap4 flexGrow xsDirectionRow xsItemsCenter"
+                  class="Flex rowGap400 columnGap400 flexGrow xsDirectionRow xsItemsCenter"
                 >
                   <div
                     class="FlexItem flexGrow"
@@ -48,7 +48,7 @@ exports[`ModalAlert Desktop ModalAlert renders (default) 1`] = `
                     class="FlexItem"
                   >
                     <div
-                      class="box marginStart2"
+                      class="box marginStart200"
                     >
                       <button
                         aria-label="Dismiss modal"
@@ -85,7 +85,7 @@ exports[`ModalAlert Desktop ModalAlert renders (default) 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               Modal content
@@ -95,10 +95,10 @@ exports[`ModalAlert Desktop ModalAlert renders (default) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
@@ -161,10 +161,10 @@ exports[`ModalAlert Desktop ModalAlert renders (error) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap4 columnGap4 flexGrow xsDirectionRow xsItemsCenter"
+                  class="Flex rowGap400 columnGap400 flexGrow xsDirectionRow xsItemsCenter"
                 >
                   <div
                     class="FlexItem"
@@ -199,7 +199,7 @@ exports[`ModalAlert Desktop ModalAlert renders (error) 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               Modal content
@@ -209,10 +209,10 @@ exports[`ModalAlert Desktop ModalAlert renders (error) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
@@ -275,10 +275,10 @@ exports[`ModalAlert Desktop ModalAlert renders (warning) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap4 columnGap4 flexGrow xsDirectionRow xsItemsCenter"
+                  class="Flex rowGap400 columnGap400 flexGrow xsDirectionRow xsItemsCenter"
                 >
                   <div
                     class="FlexItem"
@@ -313,7 +313,7 @@ exports[`ModalAlert Desktop ModalAlert renders (warning) 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               Modal content
@@ -323,10 +323,10 @@ exports[`ModalAlert Desktop ModalAlert renders (warning) 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
@@ -389,10 +389,10 @@ exports[`ModalAlert Mobile Desktop ModalAlert renders 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap4 columnGap4 flexGrow xsDirectionRow xsItemsCenter"
+                  class="Flex rowGap400 columnGap400 flexGrow xsDirectionRow xsItemsCenter"
                 >
                   <div
                     class="FlexItem flexGrow"
@@ -407,7 +407,7 @@ exports[`ModalAlert Mobile Desktop ModalAlert renders 1`] = `
                     class="FlexItem"
                   >
                     <div
-                      class="box marginStart2"
+                      class="box marginStart200"
                     >
                       <button
                         aria-label="Dismiss modal"
@@ -444,7 +444,7 @@ exports[`ModalAlert Mobile Desktop ModalAlert renders 1`] = `
               </div>
             </div>
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               Modal content
@@ -454,10 +454,10 @@ exports[`ModalAlert Mobile Desktop ModalAlert renders 1`] = `
               style="z-index: 1;"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <div
-                  class="Flex rowGap2 columnGap2 justifyEnd xsDirectionRow"
+                  class="Flex rowGap200 columnGap200 justifyEnd xsDirectionRow"
                 >
                   <div
                     class="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/NumberField.test.tsx.snap b/packages/gestalt/src/__snapshots__/NumberField.test.tsx.snap
index a2ac8230ff..92c542d9ad 100644
--- a/packages/gestalt/src/__snapshots__/NumberField.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/NumberField.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`NumberField NumberField with error 1`] = `
           role="alert"
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.tsx.snap
index e31b3d7796..b74f39bad4 100644
--- a/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.tsx.snap
@@ -27,11 +27,11 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
         >
           <div
             aria-hidden="true"
-            class="box flexGrow justifyEnd marginBottom8 xsDisplayFlex"
+            class="box flexGrow justifyEnd marginBottom800 xsDisplayFlex"
             data-floating-ui-inert=""
           >
             <div
-              class="absolute box flexNone paddingX6 paddingY7"
+              class="absolute box flexNone paddingX600 paddingY700"
               style="z-index: 1;"
             >
               <button
@@ -72,7 +72,7 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
             style="height: 100%; width: 100%;"
           >
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               <section />
@@ -103,11 +103,11 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
                   name="trap-focus"
                 >
                   <div
-                    class="box paddingX3 paddingY3"
+                    class="box paddingX300 paddingY300"
                     style="width: 100%;"
                   >
                     <div
-                      class="Flex rowGap4 columnGap4 xsDirectionColumn"
+                      class="Flex rowGap400 columnGap400 xsDirectionColumn"
                     >
                       <div
                         class="FlexItem"
@@ -117,7 +117,7 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
                           role="alert"
                         >
                           <div
-                            class="Flex rowGap2 columnGap2 xsDirectionColumn xsItemsCenter"
+                            class="Flex rowGap200 columnGap200 xsDirectionColumn xsItemsCenter"
                             style="width: 100%;"
                           >
                             <div
@@ -145,7 +145,7 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
                         class="FlexItem"
                       >
                         <div
-                          class="Flex rowGap2 columnGap2 justifyCenter xsDirectionRow"
+                          class="Flex rowGap200 columnGap200 justifyCenter xsDirectionRow"
                         >
                           <div
                             class="FlexItem"
@@ -242,7 +242,7 @@ exports[`OverlayPanel should render all props with nodes 1`] = `
               class="Flex rowGap0 columnGap0 flexGrow justifyBetween xsDirectionRow xsItemsCenter"
             >
               <div
-                class="box flexGrow paddingX6 paddingY6 xsDisplayFlex"
+                class="box flexGrow paddingX600 paddingY600 xsDisplayFlex"
               >
                 <h1
                   class="Heading fontSize500 default alignStart breakWord"
@@ -251,7 +251,7 @@ exports[`OverlayPanel should render all props with nodes 1`] = `
                 </h1>
               </div>
               <div
-                class="box flexNone paddingX6 paddingY7"
+                class="box flexNone paddingX600 paddingY700"
               >
                 <button
                   aria-controls=":r0:"
@@ -291,7 +291,7 @@ exports[`OverlayPanel should render all props with nodes 1`] = `
             style="height: 100%; width: 100%;"
           >
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               <section />
@@ -300,7 +300,7 @@ exports[`OverlayPanel should render all props with nodes 1`] = `
               class="box fit relative"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <footer />
               </div>
@@ -344,7 +344,7 @@ exports[`OverlayPanel should render all props with render props 1`] = `
               class="Flex rowGap0 columnGap0 flexGrow justifyBetween xsDirectionRow xsItemsCenter"
             >
               <div
-                class="box flexGrow paddingX6 paddingY6 xsDisplayFlex"
+                class="box flexGrow paddingX600 paddingY600 xsDisplayFlex"
               >
                 <h1
                   class="Heading fontSize500 default alignStart breakWord"
@@ -353,7 +353,7 @@ exports[`OverlayPanel should render all props with render props 1`] = `
                 </h1>
               </div>
               <div
-                class="box flexNone paddingX6 paddingY7"
+                class="box flexNone paddingX600 paddingY700"
               >
                 <button
                   aria-controls=":r1:"
@@ -395,7 +395,7 @@ exports[`OverlayPanel should render all props with render props 1`] = `
             style="height: 100%; width: 100%;"
           >
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               <button
@@ -406,7 +406,7 @@ exports[`OverlayPanel should render all props with render props 1`] = `
               class="box fit relative"
             >
               <div
-                class="box paddingX6 paddingY6"
+                class="box paddingX600 paddingY600"
               >
                 <button
                   type="submit"
@@ -446,10 +446,10 @@ exports[`OverlayPanel should render animation in 1`] = `
           style="width: 100%;"
         >
           <div
-            class="box flexGrow justifyEnd marginBottom8 xsDisplayFlex"
+            class="box flexGrow justifyEnd marginBottom800 xsDisplayFlex"
           >
             <div
-              class="absolute box flexNone paddingX6 paddingY7"
+              class="absolute box flexNone paddingX600 paddingY700"
               style="z-index: 1;"
             >
               <button
@@ -488,7 +488,7 @@ exports[`OverlayPanel should render animation in 1`] = `
             style="height: 100%; width: 100%;"
           >
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               <section />
@@ -526,10 +526,10 @@ exports[`OverlayPanel should render animation out 1`] = `
           style="width: 100%;"
         >
           <div
-            class="box flexGrow justifyEnd marginBottom8 xsDisplayFlex"
+            class="box flexGrow justifyEnd marginBottom800 xsDisplayFlex"
           >
             <div
-              class="absolute box flexNone paddingX6 paddingY7"
+              class="absolute box flexNone paddingX600 paddingY700"
               style="z-index: 1;"
             >
               <button
@@ -568,7 +568,7 @@ exports[`OverlayPanel should render animation out 1`] = `
             style="height: 100%; width: 100%;"
           >
             <div
-              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              class="box flexGrow overflowAuto paddingX600 paddingY600 relative"
               style="height: 100%;"
             >
               <section />
diff --git a/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap b/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
index 68ccddb8f4..9d5b50df06 100644
--- a/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`PageHeader renders 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -37,16 +37,16 @@ exports[`PageHeader renders 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -85,10 +85,10 @@ exports[`PageHeader renders 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart3 smDisplayBlock xsDisplayNone"
+                        className="box marginStart300 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         />
                       </div>
                     </div>
@@ -107,7 +107,7 @@ exports[`PageHeader renders 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -126,7 +126,7 @@ exports[`PageHeader renders badge with type 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -158,16 +158,16 @@ exports[`PageHeader renders badge with type 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -206,10 +206,10 @@ exports[`PageHeader renders badge with type 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart1 smDisplayBlock xsDisplayNone"
+                        className="box marginStart100 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         >
                           <div
                             className="FlexItem"
@@ -218,7 +218,7 @@ exports[`PageHeader renders badge with type 1`] = `
                               className="badge warning middle"
                             >
                               <div
-                                className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                                className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                               >
                                 <div
                                   className="FlexItem"
@@ -255,7 +255,7 @@ exports[`PageHeader renders badge with type 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -274,7 +274,7 @@ exports[`PageHeader renders primary action 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -306,16 +306,16 @@ exports[`PageHeader renders primary action 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -354,10 +354,10 @@ exports[`PageHeader renders primary action 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart3 smDisplayBlock xsDisplayNone"
+                        className="box marginStart300 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         />
                       </div>
                     </div>
@@ -376,7 +376,7 @@ exports[`PageHeader renders primary action 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -390,7 +390,7 @@ exports[`PageHeader renders primary action 1`] = `
                 className="box mdDisplayBlock xsDisplayNone"
               >
                 <div
-                  className="Flex rowGap2 columnGap0 xsDirectionRow"
+                  className="Flex rowGap200 columnGap0 xsDirectionRow"
                 >
                   <div
                     className="FlexItem"
@@ -497,7 +497,7 @@ exports[`PageHeader renders secondary action 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -529,16 +529,16 @@ exports[`PageHeader renders secondary action 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -577,10 +577,10 @@ exports[`PageHeader renders secondary action 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart3 smDisplayBlock xsDisplayNone"
+                        className="box marginStart300 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         />
                       </div>
                     </div>
@@ -599,7 +599,7 @@ exports[`PageHeader renders secondary action 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -613,7 +613,7 @@ exports[`PageHeader renders secondary action 1`] = `
                 className="box mdDisplayBlock xsDisplayNone"
               >
                 <div
-                  className="Flex rowGap2 columnGap0 xsDirectionRow"
+                  className="Flex rowGap200 columnGap0 xsDirectionRow"
                 >
                   <div
                     className="FlexItem"
@@ -750,7 +750,7 @@ exports[`PageHeader renders subtext 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -782,16 +782,16 @@ exports[`PageHeader renders subtext 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -830,10 +830,10 @@ exports[`PageHeader renders subtext 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart3 smDisplayBlock xsDisplayNone"
+                        className="box marginStart300 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         />
                       </div>
                     </div>
@@ -865,7 +865,7 @@ exports[`PageHeader renders subtext 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -884,7 +884,7 @@ exports[`PageHeader renders within a max width 1`] = `
   className="pageHeader"
 >
   <div
-    className="box default paddingX8 paddingY4"
+    className="box default paddingX800 paddingY400"
     style={
       Object {
         "width": "100%",
@@ -916,16 +916,16 @@ exports[`PageHeader renders within a max width 1`] = `
           }
         >
           <div
-            className="box marginEnd6"
+            className="box marginEnd600"
           >
             <div
-              className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+              className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
             >
               <div
                 className="FlexItem"
               >
                 <div
-                  className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                  className="Flex rowGap0 columnGap100 xsDirectionColumn"
                 >
                   <div
                     className="FlexItem"
@@ -964,10 +964,10 @@ exports[`PageHeader renders within a max width 1`] = `
                         </h1>
                       </div>
                       <div
-                        className="box marginStart3 smDisplayBlock xsDisplayNone"
+                        className="box marginStart300 smDisplayBlock xsDisplayNone"
                       >
                         <div
-                          className="Flex rowGap3 columnGap0 xsDirectionRow"
+                          className="Flex rowGap300 columnGap0 xsDirectionRow"
                         />
                       </div>
                     </div>
@@ -999,7 +999,7 @@ exports[`PageHeader renders within a max width 1`] = `
           }
         >
           <div
-            className="Flex rowGap8 columnGap0 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap800 columnGap0 xsDirectionRow xsItemsCenter"
             style={
               Object {
                 "height": "100%",
diff --git a/packages/gestalt/src/__snapshots__/PopoverEducational.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/PopoverEducational.jsdom.test.tsx.snap
index 68ab0a6071..217bad26d2 100644
--- a/packages/gestalt/src/__snapshots__/PopoverEducational.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/PopoverEducational.jsdom.test.tsx.snap
@@ -32,11 +32,11 @@ exports[`PopoverEducational renders 1`] = `
           style="max-width: 230px; overflow: auto;"
         >
           <div
-            class="box paddingX4 paddingY4"
+            class="box paddingX400 paddingY400"
             tabindex="0"
           >
             <div
-              class="Flex rowGap3 columnGap3 xsDirectionColumn"
+              class="Flex rowGap300 columnGap300 xsDirectionColumn"
             >
               <div
                 class="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/RadioButton.test.tsx.snap b/packages/gestalt/src/__snapshots__/RadioButton.test.tsx.snap
index 548c8b8f62..d9795d89da 100644
--- a/packages/gestalt/src/__snapshots__/RadioButton.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/RadioButton.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`RadioButton 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
@@ -38,7 +38,7 @@ exports[`RadioButton 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "2px",
@@ -58,14 +58,14 @@ exports[`RadioButton 1`] = `
 
 exports[`RadioButton checked 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled BorderSelected BorderCheckedMd sizeMd RadioButton"
@@ -94,14 +94,14 @@ exports[`RadioButton checked 1`] = `
 
 exports[`RadioButton disabled 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgDisabled Border BorderDisabled sizeMd RadioButton"
@@ -130,7 +130,7 @@ exports[`RadioButton disabled 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "2px",
@@ -150,14 +150,14 @@ exports[`RadioButton disabled 1`] = `
 
 exports[`RadioButton disabled small 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgDisabled Border BorderDisabled sizeSm RadioButton"
@@ -186,7 +186,7 @@ exports[`RadioButton disabled small 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "-1px",
@@ -206,14 +206,14 @@ exports[`RadioButton disabled small 1`] = `
 
 exports[`RadioButton small 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled Border BorderUnchecked sizeSm RadioButton"
@@ -242,7 +242,7 @@ exports[`RadioButton small 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "-1px",
@@ -262,14 +262,14 @@ exports[`RadioButton small 1`] = `
 
 exports[`RadioButton with image 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled Border BorderUnchecked sizeSm RadioButton"
@@ -291,7 +291,7 @@ exports[`RadioButton with image 1`] = `
     </div>
   </label>
   <div
-    className="box paddingX1"
+    className="box paddingX100"
   >
     <div
       className="box"
@@ -325,7 +325,7 @@ exports[`RadioButton with image 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "-1px",
@@ -345,14 +345,14 @@ exports[`RadioButton with image 1`] = `
 
 exports[`RadioButton with subtext 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled Border BorderUnchecked sizeSm RadioButton"
@@ -381,7 +381,7 @@ exports[`RadioButton with subtext 1`] = `
       htmlFor="id"
     >
       <div
-        className="box paddingX1"
+        className="box paddingX100"
         style={
           Object {
             "marginTop": "-1px",
@@ -396,7 +396,7 @@ exports[`RadioButton with subtext 1`] = `
       </div>
     </label>
     <div
-      className="box paddingX1 paddingY1"
+      className="box paddingX100 paddingY100"
     >
       <div
         className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
@@ -410,14 +410,14 @@ exports[`RadioButton with subtext 1`] = `
 
 exports[`RadioButton without label 1`] = `
 <div
-  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
 >
   <label
     className="label"
     htmlFor="id"
   >
     <div
-      className="box paddingX1"
+      className="box paddingX100"
     >
       <div
         className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
diff --git a/packages/gestalt/src/__snapshots__/RadioGroup.test.tsx.snap b/packages/gestalt/src/__snapshots__/RadioGroup.test.tsx.snap
index 5c131e45be..7faf68f0ff 100644
--- a/packages/gestalt/src/__snapshots__/RadioGroup.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/RadioGroup.test.tsx.snap
@@ -14,16 +14,16 @@ exports[`RadioGroup renders 1`] = `
     </div>
   </legend>
   <div
-    className="Flex rowGap0 columnGap2 xsDirectionColumn"
+    className="Flex rowGap0 columnGap200 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+        className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
@@ -73,16 +73,16 @@ exports[`RadioGroup renders a hidden legend 1`] = `
     </div>
   </legend>
   <div
-    className="Flex rowGap0 columnGap2 xsDirectionColumn"
+    className="Flex rowGap0 columnGap200 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+        className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
@@ -133,16 +133,16 @@ exports[`RadioGroup renders an error 1`] = `
     </div>
   </legend>
   <div
-    className="Flex rowGap0 columnGap2 xsDirectionColumn"
+    className="Flex rowGap0 columnGap200 xsDirectionColumn"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+        className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
@@ -191,7 +191,7 @@ exports[`RadioGroup renders an error 1`] = `
           role="alert"
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -241,16 +241,16 @@ exports[`RadioGroup renders in different direction 1`] = `
     </div>
   </legend>
   <div
-    className="Flex rowGap4 columnGap0 xsDirectionRow"
+    className="Flex rowGap400 columnGap0 xsDirectionRow"
   >
     <div
       className="FlexItem"
     >
       <div
-        className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+        className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
       >
         <div
-          className="box paddingX1"
+          className="box paddingX100"
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
diff --git a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
index 1a771f5b73..7deb727f0a 100644
--- a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`SelectList renders an option group 1`] = `
     </div>
   </label>
   <div
-    className="box relative rounding4 xsDisplayFlex"
+    className="box relative rounding400 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
@@ -112,7 +112,7 @@ exports[`SelectList renders with a hidden label 1`] = `
     </div>
   </label>
   <div
-    className="box relative rounding4 xsDisplayFlex"
+    className="box relative rounding400 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
@@ -177,7 +177,7 @@ exports[`SelectList renders with typical props 1`] = `
   className="box"
 >
   <div
-    className="box relative rounding4 xsDisplayFlex"
+    className="box relative rounding400 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
diff --git a/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
index 59cc887f29..1da857b45d 100644
--- a/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
@@ -33,18 +33,18 @@ exports[`SheetMobile renders correctly auto size 1`] = `
         }
       >
         <div
-          className="box fit paddingX4 paddingY4 relative"
+          className="box fit paddingX400 paddingY400 relative"
         >
           <div
             className="Flex rowGap0 columnGap0 justifyCenter xsDirectionRow"
           >
             <div
-              className="box marginBottom2"
+              className="box marginBottom200"
             >
               <div
                 aria-disabled={false}
                 aria-label="Grabber"
-                className="tapTransition rounding7 accessibilityOutline pointer"
+                className="tapTransition rounding700 accessibilityOutline pointer"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -62,7 +62,7 @@ exports[`SheetMobile renders correctly auto size 1`] = `
                 tabIndex={0}
               >
                 <div
-                  className="box rounding7 secondary"
+                  className="box rounding700 secondary"
                   style={
                     Object {
                       "height": 5,
@@ -74,7 +74,7 @@ exports[`SheetMobile renders correctly auto size 1`] = `
             </div>
           </div>
           <div
-            className="Flex rowGap4 columnGap4 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap400 columnGap400 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem flexNone"
@@ -152,7 +152,7 @@ exports[`SheetMobile renders correctly auto size 1`] = `
           </div>
         </div>
         <div
-          className="box flexGrow overflowAuto paddingX4 paddingY2"
+          className="box flexGrow overflowAuto paddingX400 paddingY200"
           onScroll={[Function]}
         />
       </div>
@@ -194,18 +194,18 @@ exports[`SheetMobile renders correctly default size 1`] = `
         }
       >
         <div
-          className="box fit paddingX4 paddingY4 relative"
+          className="box fit paddingX400 paddingY400 relative"
         >
           <div
             className="Flex rowGap0 columnGap0 justifyCenter xsDirectionRow"
           >
             <div
-              className="box marginBottom2"
+              className="box marginBottom200"
             >
               <div
                 aria-disabled={false}
                 aria-label="Grabber"
-                className="tapTransition rounding7 accessibilityOutline pointer"
+                className="tapTransition rounding700 accessibilityOutline pointer"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -223,7 +223,7 @@ exports[`SheetMobile renders correctly default size 1`] = `
                 tabIndex={0}
               >
                 <div
-                  className="box rounding7 secondary"
+                  className="box rounding700 secondary"
                   style={
                     Object {
                       "height": 5,
@@ -235,7 +235,7 @@ exports[`SheetMobile renders correctly default size 1`] = `
             </div>
           </div>
           <div
-            className="Flex rowGap4 columnGap4 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap400 columnGap400 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem flexNone"
@@ -313,7 +313,7 @@ exports[`SheetMobile renders correctly default size 1`] = `
           </div>
         </div>
         <div
-          className="box flexGrow overflowAuto paddingX4 paddingY2"
+          className="box flexGrow overflowAuto paddingX400 paddingY200"
           onScroll={[Function]}
         />
       </div>
@@ -354,10 +354,10 @@ exports[`SheetMobile renders correctly full size 1`] = `
         }
       >
         <div
-          className="box fit paddingX4 paddingY4 relative"
+          className="box fit paddingX400 paddingY400 relative"
         >
           <div
-            className="Flex rowGap4 columnGap4 justifyCenter xsDirectionRow xsItemsCenter"
+            className="Flex rowGap400 columnGap400 justifyCenter xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem flexNone"
@@ -435,7 +435,7 @@ exports[`SheetMobile renders correctly full size 1`] = `
           </div>
         </div>
         <div
-          className="box flexGrow overflowAuto paddingX4 paddingY2"
+          className="box flexGrow overflowAuto paddingX400 paddingY200"
           onScroll={[Function]}
         />
       </div>
diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
index ac20cf8ba3..5e9fed7484 100644
--- a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -47,13 +47,13 @@ exports[`SideNavigation renders Header + Footer 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
             >
               <div
-                className="Flex rowGap0 columnGap4 xsDirectionColumn"
+                className="Flex rowGap0 columnGap400 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
@@ -96,7 +96,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -115,7 +115,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -128,7 +128,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                       }
                     >
                       <div
-                        className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "height": "100%",
@@ -154,7 +154,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
               className="FlexItem"
             >
               <div
-                className="Flex rowGap0 columnGap4 xsDirectionColumn"
+                className="Flex rowGap0 columnGap400 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
@@ -233,7 +233,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -242,7 +242,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -254,7 +254,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                   className="liItem section"
                 >
                   <div
-                    className="box marginBottom2 paddingX4"
+                    className="box marginBottom200 paddingX400"
                     role="presentation"
                   >
                     <div
@@ -276,7 +276,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -295,7 +295,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -308,7 +308,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -345,7 +345,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                               >
                                 test
                                 <div
-                                  className="box marginStart1 xsDisplayInlineBlock"
+                                  className="box marginStart100 xsDisplayInlineBlock"
                                   style={
                                     Object {
                                       "height": "100%",
@@ -361,7 +361,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                                     className="badge info middle"
                                   >
                                     <div
-                                      className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                                      className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                                     >
                                       <div
                                         className="FlexItem"
@@ -409,7 +409,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -428,7 +428,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -441,7 +441,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -478,7 +478,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                               >
                                 test
                                 <div
-                                  className="box marginStart1 xsDisplayInlineBlock"
+                                  className="box marginStart100 xsDisplayInlineBlock"
                                   style={
                                     Object {
                                       "height": "100%",
@@ -577,7 +577,7 @@ exports[`SideNavigation renders Sections 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -586,7 +586,7 @@ exports[`SideNavigation renders Sections 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -598,7 +598,7 @@ exports[`SideNavigation renders Sections 1`] = `
                   className="liItem section"
                 >
                   <div
-                    className="box marginBottom2 paddingX4"
+                    className="box marginBottom200 paddingX400"
                     role="presentation"
                   >
                     <div
@@ -620,7 +620,7 @@ exports[`SideNavigation renders Sections 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -639,7 +639,7 @@ exports[`SideNavigation renders Sections 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -652,7 +652,7 @@ exports[`SideNavigation renders Sections 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -722,7 +722,7 @@ exports[`SideNavigation renders basic Item 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -731,7 +731,7 @@ exports[`SideNavigation renders basic Item 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -743,7 +743,7 @@ exports[`SideNavigation renders basic Item 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -762,7 +762,7 @@ exports[`SideNavigation renders basic Item 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -775,7 +775,7 @@ exports[`SideNavigation renders basic Item 1`] = `
                       }
                     >
                       <div
-                        className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "height": "100%",
@@ -843,7 +843,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -852,7 +852,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -864,7 +864,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -883,7 +883,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -896,7 +896,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                       }
                     >
                       <div
-                        className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "height": "100%",
@@ -942,7 +942,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -961,7 +961,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -974,7 +974,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                       }
                     >
                       <div
-                        className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "height": "100%",
@@ -1020,7 +1020,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                   className="liItem section"
                 >
                   <div
-                    className="box marginBottom2 paddingX4"
+                    className="box marginBottom200 paddingX400"
                     role="presentation"
                   >
                     <div
@@ -1042,7 +1042,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1061,7 +1061,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1074,7 +1074,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1123,7 +1123,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         aria-controls=":rd:"
                         aria-disabled={false}
                         aria-expanded={false}
-                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1141,7 +1141,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1154,7 +1154,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1196,7 +1196,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                               className="FlexItem flexNone"
                             >
                               <div
-                                className="box circle marginEndN2"
+                                className="box circle marginEndN200"
                                 style={
                                   Object {
                                     "width": 24,
@@ -1205,7 +1205,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                               >
                                 <div
                                   aria-hidden={true}
-                                  className="box circle justifyCenter marginEndN2 xsDisplayFlex xsItemsCenter"
+                                  className="box circle justifyCenter marginEndN200 xsDisplayFlex xsItemsCenter"
                                   style={
                                     Object {
                                       "height": 24,
@@ -1241,7 +1241,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         aria-controls=":re:"
                         aria-disabled={false}
                         aria-expanded={false}
-                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1259,7 +1259,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1272,7 +1272,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1314,7 +1314,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                               className="FlexItem flexNone"
                             >
                               <div
-                                className="box circle marginEndN2"
+                                className="box circle marginEndN200"
                                 style={
                                   Object {
                                     "width": 24,
@@ -1323,7 +1323,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                               >
                                 <div
                                   aria-hidden={true}
-                                  className="box circle justifyCenter marginEndN2 xsDisplayFlex xsItemsCenter"
+                                  className="box circle justifyCenter marginEndN200 xsDisplayFlex xsItemsCenter"
                                   style={
                                     Object {
                                       "height": 24,
@@ -1402,7 +1402,7 @@ exports[`SideNavigation renders expanded group 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -1411,7 +1411,7 @@ exports[`SideNavigation renders expanded group 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -1426,7 +1426,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                     aria-controls=":rm:"
                     aria-disabled={false}
                     aria-expanded={true}
-                    className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
+                    className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1444,7 +1444,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -1457,7 +1457,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                       }
                     >
                       <div
-                        className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "height": "100%",
@@ -1499,7 +1499,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           className="FlexItem flexNone"
                         >
                           <div
-                            className="box circle marginEndN2"
+                            className="box circle marginEndN200"
                             style={
                               Object {
                                 "width": 24,
@@ -1508,7 +1508,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           >
                             <div
                               aria-hidden={true}
-                              className="box circle justifyCenter marginEndN2 xsDisplayFlex xsItemsCenter"
+                              className="box circle justifyCenter marginEndN200 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": 24,
@@ -1544,7 +1544,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1563,7 +1563,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1576,7 +1576,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1603,7 +1603,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         aria-controls=":ro:"
                         aria-disabled={false}
                         aria-expanded={true}
-                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1621,7 +1621,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1634,7 +1634,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1654,7 +1654,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                               className="FlexItem flexNone"
                             >
                               <div
-                                className="box circle marginEndN2"
+                                className="box circle marginEndN200"
                                 style={
                                   Object {
                                     "width": 24,
@@ -1663,7 +1663,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                               >
                                 <div
                                   aria-hidden={true}
-                                  className="box circle justifyCenter marginEndN2 xsDisplayFlex xsItemsCenter"
+                                  className="box circle justifyCenter marginEndN200 xsDisplayFlex xsItemsCenter"
                                   style={
                                     Object {
                                       "height": 24,
@@ -1699,7 +1699,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1718,7 +1718,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -1731,7 +1731,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                               }
                             >
                               <div
-                                className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                                className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                                 style={
                                   Object {
                                     "height": "100%",
@@ -1755,7 +1755,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1774,7 +1774,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -1787,7 +1787,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                               }
                             >
                               <div
-                                className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                                className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                                 style={
                                   Object {
                                     "height": "100%",
@@ -1859,7 +1859,7 @@ exports[`SideNavigation renders static group 1`] = `
         }
       >
         <div
-          className="box paddingX2 paddingY2"
+          className="box paddingX200 paddingY200"
           style={
             Object {
               "paddingBottom": 24,
@@ -1868,7 +1868,7 @@ exports[`SideNavigation renders static group 1`] = `
           }
         >
           <div
-            className="Flex rowGap0 columnGap4 xsDirectionColumn"
+            className="Flex rowGap0 columnGap400 xsDirectionColumn"
           >
             <div
               className="FlexItem"
@@ -1880,7 +1880,7 @@ exports[`SideNavigation renders static group 1`] = `
                   className="liItem"
                 >
                   <div
-                    className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                    className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                     style={
                       Object {
                         "height": undefined,
@@ -1893,7 +1893,7 @@ exports[`SideNavigation renders static group 1`] = `
                     }
                   >
                     <div
-                      className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                      className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                       style={
                         Object {
                           "height": "100%",
@@ -1941,7 +1941,7 @@ exports[`SideNavigation renders static group 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1960,7 +1960,7 @@ exports[`SideNavigation renders static group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1973,7 +1973,7 @@ exports[`SideNavigation renders static group 1`] = `
                           }
                         >
                           <div
-                            className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                            className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                             style={
                               Object {
                                 "height": "100%",
@@ -1997,7 +1997,7 @@ exports[`SideNavigation renders static group 1`] = `
                       className="liItem"
                     >
                       <div
-                        className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                        className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                         style={
                           Object {
                             "height": undefined,
@@ -2010,7 +2010,7 @@ exports[`SideNavigation renders static group 1`] = `
                         }
                       >
                         <div
-                          className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                          className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                           style={
                             Object {
                               "height": "100%",
@@ -2036,7 +2036,7 @@ exports[`SideNavigation renders static group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -2055,7 +2055,7 @@ exports[`SideNavigation renders static group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -2068,7 +2068,7 @@ exports[`SideNavigation renders static group 1`] = `
                               }
                             >
                               <div
-                                className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                                className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                                 style={
                                   Object {
                                     "height": "100%",
@@ -2092,7 +2092,7 @@ exports[`SideNavigation renders static group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -2111,7 +2111,7 @@ exports[`SideNavigation renders static group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXundefined paddingY2 paddingYundefined relative rounding2 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -2124,7 +2124,7 @@ exports[`SideNavigation renders static group 1`] = `
                               }
                             >
                               <div
-                                className="Flex rowGap2 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
+                                className="Flex rowGap200 columnGap0 flexGrow xsDirectionRow xsItemsCenter"
                                 style={
                                   Object {
                                     "height": "100%",
diff --git a/packages/gestalt/src/__snapshots__/Status.test.tsx.snap b/packages/gestalt/src/__snapshots__/Status.test.tsx.snap
index c95509cb9b..a4c0755b1f 100644
--- a/packages/gestalt/src/__snapshots__/Status.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Status.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Status renders with accessibilityLabel 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="Flex rowGap2 columnGap0 xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -33,7 +33,7 @@ exports[`Status renders with basic title 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="Flex rowGap2 columnGap0 xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -70,7 +70,7 @@ exports[`Status renders with rich title 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="Flex rowGap2 columnGap0 xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -128,7 +128,7 @@ exports[`Status renders with title and subtext 1`] = `
   className="Flex rowGap0 columnGap0 xsDirectionColumn"
 >
   <div
-    className="Flex rowGap2 columnGap0 xsDirectionRow xsItemsCenter"
+    className="Flex rowGap200 columnGap0 xsDirectionRow xsItemsCenter"
   >
     <div
       className="FlexItem"
@@ -158,7 +158,7 @@ exports[`Status renders with title and subtext 1`] = `
     </div>
   </div>
   <div
-    className="box marginStart6"
+    className="box marginStart600"
   >
     <div
       className="subtle alignStart breakWord Text fontSize200 fontWeightNormal"
diff --git a/packages/gestalt/src/__snapshots__/Table.test.tsx.snap b/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
index 530c6e60b5..544712952b 100644
--- a/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders correctly with border 1`] = `
 <div
-  className="borderColorLightGray box overflowAuto rounding1 sizeSm solid"
+  className="borderColorLightGray box overflowAuto rounding100 sizeSm solid"
   style={
     Object {
       "maxHeight": undefined,
diff --git a/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
index 4216c228cd..1813099b86 100644
--- a/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`TableOfContents renders 1`] = `
   role="navigation"
 >
   <div
-    className="box marginBottom3 paddingX3"
+    className="box marginBottom300 paddingX300"
   >
     <h3
       className="Heading fontSize400 default alignStart breakWord"
@@ -22,7 +22,7 @@ exports[`TableOfContents renders 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -74,7 +74,7 @@ exports[`TableOfContents renders an accessibility label 1`] = `
   role="navigation"
 >
   <div
-    className="box marginBottom3 paddingX3"
+    className="box marginBottom300 paddingX300"
   >
     <h3
       className="Heading fontSize400 default alignStart breakWord"
@@ -89,7 +89,7 @@ exports[`TableOfContents renders an accessibility label 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -147,7 +147,7 @@ exports[`TableOfContents renders nested items 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -194,7 +194,7 @@ exports[`TableOfContents renders nested items 1`] = `
           className="noStyle marginTop1"
         >
           <a
-            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
             href="#"
             onBlur={[Function]}
             onClick={[Function]}
@@ -239,7 +239,7 @@ exports[`TableOfContents renders nested items 1`] = `
           className="noStyle marginTop1"
         >
           <a
-            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
             href="#"
             onBlur={[Function]}
             onClick={[Function]}
@@ -299,7 +299,7 @@ exports[`TableOfContents renders without title 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -344,7 +344,7 @@ exports[`TableOfContents renders without title 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
diff --git a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
index a30a2b70f8..7669b22032 100644
--- a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
@@ -174,10 +174,10 @@ exports[`renders correctly with drawer 1`] = `
           colSpan={4}
         >
           <div
-            className="box paddingX2 paddingY2"
+            className="box paddingX200 paddingY200"
           >
             <div
-              className="box mdDirectionRow paddingX4 paddingY0 paddingY4 recommendationWeak rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+              className="box mdDirectionRow paddingX400 paddingY0 paddingY400 recommendationWeak rounding400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
               style={
                 Object {
                   "width": "100%",
@@ -185,7 +185,7 @@ exports[`renders correctly with drawer 1`] = `
               }
             >
               <div
-                className="Flex rowGap4 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
+                className="Flex rowGap400 columnGap0 flexGrow mdItemsCenter xsDirectionRow xsItemsStart"
                 style={
                   Object {
                     "width": "100%",
diff --git a/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.tsx.snap
index 13e98ac2d7..90192c6f2f 100644
--- a/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TableSortableHeaderCell.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`renders correctly when active 1`] = `
       >
         column name
         <div
-          className="box marginStart2"
+          className="box marginStart200"
           style={
             Object {
               "visibility": "visible",
@@ -113,7 +113,7 @@ exports[`renders correctly when inactive 1`] = `
       >
         column name
         <div
-          className="box marginStart2"
+          className="box marginStart200"
           style={
             Object {
               "visibility": "hidden",
@@ -182,7 +182,7 @@ exports[`sortable cell has end align 1`] = `
         className="box justifyEnd xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box marginEnd2"
+          className="box marginEnd200"
           style={
             Object {
               "visibility": "visible",
diff --git a/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap b/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
index d6951c72f1..3a804dc16f 100644
--- a/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Tabs /> matches snapshot with default props 1`] = `
 <div
-  className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+  className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
 >
   <div
     className="FlexItem"
@@ -12,7 +12,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -34,7 +34,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -43,7 +43,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
@@ -94,7 +94,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -116,7 +116,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -125,7 +125,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
@@ -152,7 +152,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
 
 exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
 <div
-  className="Flex rowGap4 columnGap0 xsDirectionRow xsItemsCenter"
+  className="Flex rowGap400 columnGap0 xsDirectionRow xsItemsCenter"
 >
   <div
     className="FlexItem"
@@ -162,7 +162,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -184,7 +184,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -193,7 +193,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
@@ -258,7 +258,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -280,7 +280,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -289,7 +289,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
@@ -330,7 +330,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
 
 exports[`<Tabs /> matches snapshot with wrap 1`] = `
 <div
-  className="Flex rowGap4 columnGap0 flexWrap xsDirectionRow xsItemsCenter"
+  className="Flex rowGap400 columnGap0 flexWrap xsDirectionRow xsItemsCenter"
 >
   <div
     className="FlexItem"
@@ -340,7 +340,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -362,7 +362,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -371,7 +371,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
@@ -422,7 +422,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -444,7 +444,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX2 paddingY2 relative rounding2 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -453,7 +453,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
             }
           >
             <div
-              className="Flex rowGap2 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+              className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
               style={
                 Object {
                   "height": undefined,
diff --git a/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap b/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
index d85c7767f7..fccda3785f 100644
--- a/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tag clips long strings 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -12,7 +12,7 @@ exports[`Tag clips long strings 1`] = `
   }
 >
   <div
-    className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+    className="box marginEnd500 xsDisplayFlex xsItemsCenter"
     style={
       Object {
         "height": "100%",
@@ -70,7 +70,7 @@ exports[`Tag clips long strings 1`] = `
 exports[`Tag renders 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -79,7 +79,7 @@ exports[`Tag renders 1`] = `
   }
 >
   <div
-    className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+    className="box marginEnd500 xsDisplayFlex xsItemsCenter"
     style={
       Object {
         "height": "100%",
@@ -137,7 +137,7 @@ exports[`Tag renders 1`] = `
 exports[`Tag renders a disabled tag 1`] = `
 <div
   aria-disabled={true}
-  className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
   style={
     Object {
       "border": "solid 1px var(--color-border-tag-disabled)",
@@ -175,7 +175,7 @@ exports[`Tag renders a disabled tag 1`] = `
 exports[`Tag renders a tag with a warning state 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX2 paddingY1 relative rounding2 warningBase xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding200 warningBase xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -184,7 +184,7 @@ exports[`Tag renders a tag with a warning state 1`] = `
   }
 >
   <div
-    className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+    className="box marginEnd500 xsDisplayFlex xsItemsCenter"
     style={
       Object {
         "height": "100%",
@@ -192,7 +192,7 @@ exports[`Tag renders a tag with a warning state 1`] = `
     }
   >
     <div
-      className="box marginEnd1 marginStart1"
+      className="box marginEnd100 marginStart100"
     >
       <svg
         aria-hidden={null}
@@ -259,7 +259,7 @@ exports[`Tag renders a tag with a warning state 1`] = `
 exports[`Tag renders a tag with an error state 1`] = `
 <div
   aria-disabled={false}
-  className="box errorBase paddingX2 paddingY1 relative rounding2 xsDisplayInlineBlock"
+  className="box errorBase paddingX200 paddingY100 relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -268,7 +268,7 @@ exports[`Tag renders a tag with an error state 1`] = `
   }
 >
   <div
-    className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+    className="box marginEnd500 xsDisplayFlex xsItemsCenter"
     style={
       Object {
         "height": "100%",
@@ -276,7 +276,7 @@ exports[`Tag renders a tag with an error state 1`] = `
     }
   >
     <div
-      className="box marginEnd1 marginStart1"
+      className="box marginEnd100 marginStart100"
     >
       <svg
         aria-hidden={null}
diff --git a/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap b/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
index 49b2cdd77c..088793a2b4 100644
--- a/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TagData TagData has a tooltip 1`] = `
 <div
-  className="box relative rounding2 xsDisplayInlineBlock"
+  className="box relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -22,7 +22,7 @@ exports[`TagData TagData has a tooltip 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -49,7 +49,7 @@ exports[`TagData TagData has a tooltip 1`] = `
           }
         >
           <div
-            className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -77,13 +77,13 @@ exports[`TagData TagData has a tooltip 1`] = `
 
 exports[`TagData renders all colors as expected 1`] = `
 <div
-  className="Flex rowGap2 columnGap2 xsDirectionRow"
+  className="Flex rowGap200 columnGap200 xsDirectionRow"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -103,7 +103,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -130,7 +130,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -159,7 +159,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -179,7 +179,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -206,7 +206,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -235,7 +235,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -255,7 +255,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -282,7 +282,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -311,7 +311,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -331,7 +331,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -358,7 +358,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -387,7 +387,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -407,7 +407,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -434,7 +434,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -463,7 +463,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -483,7 +483,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -510,7 +510,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -539,7 +539,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -559,7 +559,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -586,7 +586,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -615,7 +615,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -635,7 +635,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -662,7 +662,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -691,7 +691,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -711,7 +711,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -738,7 +738,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -767,7 +767,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -787,7 +787,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -814,7 +814,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -843,7 +843,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -863,7 +863,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -890,7 +890,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -919,7 +919,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -939,7 +939,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -966,7 +966,7 @@ exports[`TagData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -996,13 +996,13 @@ exports[`TagData renders all colors as expected 1`] = `
 
 exports[`TagData renders base color as expected 1`] = `
 <div
-  className="Flex rowGap2 columnGap2 xsDirectionRow"
+  className="Flex rowGap200 columnGap200 xsDirectionRow"
 >
   <div
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -1022,7 +1022,7 @@ exports[`TagData renders base color as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1049,7 +1049,7 @@ exports[`TagData renders base color as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -1057,16 +1057,16 @@ exports[`TagData renders base color as expected 1`] = `
                 }
               >
                 <div
-                  className="box marginEnd1"
+                  className="box marginEnd100"
                 >
                   <div
                     className="box"
                   >
                     <div
-                      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                     >
                       <div
-                        className="box paddingX1 relative"
+                        className="box paddingX100 relative"
                       >
                         <div
                           className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -1134,7 +1134,7 @@ exports[`TagData renders base color as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding2 xsDisplayInlineBlock"
+      className="box relative rounding200 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -1154,7 +1154,7 @@ exports[`TagData renders base color as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1181,7 +1181,7 @@ exports[`TagData renders base color as expected 1`] = `
               }
             >
               <div
-                className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+                className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
                 style={
                   Object {
                     "height": "100%",
@@ -1189,16 +1189,16 @@ exports[`TagData renders base color as expected 1`] = `
                 }
               >
                 <div
-                  className="box marginEnd1"
+                  className="box marginEnd100"
                 >
                   <div
                     className="box"
                   >
                     <div
-                      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                     >
                       <div
-                        className="box paddingX1 relative"
+                        className="box paddingX100 relative"
                       >
                         <div
                           className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -1267,7 +1267,7 @@ exports[`TagData renders base color as expected 1`] = `
 
 exports[`TagData renders disabled selected state 1`] = `
 <div
-  className="box relative rounding2 xsDisplayInlineBlock"
+  className="box relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1287,7 +1287,7 @@ exports[`TagData renders disabled selected state 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding2 fullHeight fullWidth"
+        className="tapTransition rounding200 fullHeight fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1309,7 +1309,7 @@ exports[`TagData renders disabled selected state 1`] = `
           style={Object {}}
         >
           <div
-            className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -1317,16 +1317,16 @@ exports[`TagData renders disabled selected state 1`] = `
             }
           >
             <div
-              className="box marginEnd1"
+              className="box marginEnd100"
             >
               <div
                 className="box"
               >
                 <div
-                  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                 >
                   <div
-                    className="box paddingX1 relative"
+                    className="box paddingX100 relative"
                   >
                     <div
                       className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -1393,7 +1393,7 @@ exports[`TagData renders disabled selected state 1`] = `
 
 exports[`TagData renders disabled unselected state 1`] = `
 <div
-  className="box relative rounding2 xsDisplayInlineBlock"
+  className="box relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1413,7 +1413,7 @@ exports[`TagData renders disabled unselected state 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding2 fullHeight fullWidth"
+        className="tapTransition rounding200 fullHeight fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1435,7 +1435,7 @@ exports[`TagData renders disabled unselected state 1`] = `
           style={Object {}}
         >
           <div
-            className="box marginEnd0 paddingX2 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd0 paddingX200 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -1443,16 +1443,16 @@ exports[`TagData renders disabled unselected state 1`] = `
             }
           >
             <div
-              className="box marginEnd1"
+              className="box marginEnd100"
             >
               <div
                 className="box"
               >
                 <div
-                  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                 >
                   <div
-                    className="box paddingX1 relative"
+                    className="box paddingX100 relative"
                   >
                     <div
                       className="enabled border borderRadiusSm sizeSm check thickBorder"
@@ -1505,7 +1505,7 @@ exports[`TagData renders disabled unselected state 1`] = `
 
 exports[`TagData renders dismisible button with color background 1`] = `
 <div
-  className="box relative rounding2 xsDisplayInlineBlock"
+  className="box relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1525,7 +1525,7 @@ exports[`TagData renders dismisible button with color background 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1552,7 +1552,7 @@ exports[`TagData renders dismisible button with color background 1`] = `
           }
         >
           <div
-            className="box marginEnd4 paddingX2 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd400 paddingX200 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -1560,16 +1560,16 @@ exports[`TagData renders dismisible button with color background 1`] = `
             }
           >
             <div
-              className="box marginEnd1"
+              className="box marginEnd100"
             >
               <div
                 className="box"
               >
                 <div
-                  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                 >
                   <div
-                    className="box paddingX1 relative"
+                    className="box paddingX100 relative"
                   >
                     <div
                       className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -1673,7 +1673,7 @@ exports[`TagData renders dismisible button with color background 1`] = `
 
 exports[`TagData renders dismissable button 1`] = `
 <div
-  className="box relative rounding2 xsDisplayInlineBlock"
+  className="box relative rounding200 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1693,7 +1693,7 @@ exports[`TagData renders dismissable button 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1720,7 +1720,7 @@ exports[`TagData renders dismissable button 1`] = `
           }
         >
           <div
-            className="box marginEnd4 paddingX2 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd400 paddingX200 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -1728,16 +1728,16 @@ exports[`TagData renders dismissable button 1`] = `
             }
           >
             <div
-              className="box marginEnd1"
+              className="box marginEnd100"
             >
               <div
                 className="box"
               >
                 <div
-                  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                 >
                   <div
-                    className="box paddingX1 relative"
+                    className="box paddingX100 relative"
                   >
                     <div
                       className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -1845,7 +1845,7 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
   lang="en"
 >
   <div
-    className="box relative rounding2 xsDisplayInlineBlock"
+    className="box relative rounding200 xsDisplayInlineBlock"
     style={
       Object {
         "maxWidth": 300,
@@ -1854,7 +1854,7 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
   >
     <div
       aria-disabled={false}
-      className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
+      className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -1876,7 +1876,7 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
         style={Object {}}
       >
         <div
-          className="box marginEnd4 paddingX2 xsDisplayFlex xsItemsCenter"
+          className="box marginEnd400 paddingX200 xsDisplayFlex xsItemsCenter"
           style={
             Object {
               "height": "100%",
@@ -1884,16 +1884,16 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
           }
         >
           <div
-            className="box marginEnd1"
+            className="box marginEnd100"
           >
             <div
               className="box"
             >
               <div
-                className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
               >
                 <div
-                  className="box paddingX1 relative"
+                  className="box paddingX100 relative"
                 >
                   <div
                     className="enabled border borderRadiusSm sizeSm check thickBorder"
diff --git a/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap b/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
index 1e9526e14e..4df6b2d37f 100644
--- a/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`TextArea TextArea with error 1`] = `
           role="alert"
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -172,7 +172,7 @@ exports[`TextArea TextField with maxLength character counter 1`] = `
     id="test-helperText"
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow"
+      className="Flex rowGap400 columnGap400 xsDirectionRow"
     >
       <div
         className="FlexItem flexGrow"
@@ -195,7 +195,7 @@ exports[`TextArea TextField with maxLength character counter 1`] = `
           </div>
         </div>
         <div
-          className="Flex rowGap1 columnGap1 justifyCenter xsDirectionRow"
+          className="Flex rowGap100 columnGap100 justifyCenter xsDirectionRow"
         >
           <div
             className="FlexItem"
@@ -251,11 +251,11 @@ exports[`TextArea renders tags when supplied 1`] = `
     }
   >
     <div
-      className="box marginBottom1 marginEnd1"
+      className="box marginBottom100 marginEnd100"
     >
       <div
         aria-disabled={false}
-        className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
@@ -264,7 +264,7 @@ exports[`TextArea renders tags when supplied 1`] = `
         }
       >
         <div
-          className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+          className="box marginEnd500 xsDisplayFlex xsItemsCenter"
           style={
             Object {
               "height": "100%",
@@ -319,11 +319,11 @@ exports[`TextArea renders tags when supplied 1`] = `
       </div>
     </div>
     <div
-      className="box marginBottom1 marginEnd1"
+      className="box marginBottom100 marginEnd100"
     >
       <div
         aria-disabled={false}
-        className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
@@ -332,7 +332,7 @@ exports[`TextArea renders tags when supplied 1`] = `
         }
       >
         <div
-          className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+          className="box marginEnd500 xsDisplayFlex xsItemsCenter"
           style={
             Object {
               "height": "100%",
@@ -387,11 +387,11 @@ exports[`TextArea renders tags when supplied 1`] = `
       </div>
     </div>
     <div
-      className="box marginBottom1 marginEnd1"
+      className="box marginBottom100 marginEnd100"
     >
       <div
         aria-disabled={false}
-        className="box paddingX2 paddingY1 relative rounding2 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
@@ -400,7 +400,7 @@ exports[`TextArea renders tags when supplied 1`] = `
         }
       >
         <div
-          className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+          className="box marginEnd500 xsDisplayFlex xsItemsCenter"
           style={
             Object {
               "height": "100%",
diff --git a/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap b/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
index 0f40f932ac..7c9e42c263 100644
--- a/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
@@ -126,7 +126,7 @@ exports[`TextField TextField with error 1`] = `
           role="alert"
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+            className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
           >
             <div
               className="FlexItem"
@@ -210,7 +210,7 @@ exports[`TextField TextField with maxLength character counter 1`] = `
     id="test-helperText"
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow"
+      className="Flex rowGap400 columnGap400 xsDirectionRow"
     >
       <div
         className="FlexItem flexGrow"
@@ -233,7 +233,7 @@ exports[`TextField TextField with maxLength character counter 1`] = `
           </div>
         </div>
         <div
-          className="Flex rowGap1 columnGap1 justifyCenter xsDirectionRow"
+          className="Flex rowGap100 columnGap100 justifyCenter xsDirectionRow"
         >
           <div
             className="FlexItem"
@@ -331,7 +331,7 @@ exports[`TextField TextField with tags 1`] = `
       className="textField base enabled normal md medium md textFieldWrapper"
     >
       <div
-        className="box marginEnd1"
+        className="box marginEnd100"
         style={
           Object {
             "marginBottom": "2px",
@@ -340,7 +340,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
@@ -349,7 +349,7 @@ exports[`TextField TextField with tags 1`] = `
           }
         >
           <div
-            className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd500 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -404,7 +404,7 @@ exports[`TextField TextField with tags 1`] = `
         </div>
       </div>
       <div
-        className="box marginEnd1"
+        className="box marginEnd100"
         style={
           Object {
             "marginBottom": "2px",
@@ -413,7 +413,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
@@ -422,7 +422,7 @@ exports[`TextField TextField with tags 1`] = `
           }
         >
           <div
-            className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd500 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -477,7 +477,7 @@ exports[`TextField TextField with tags 1`] = `
         </div>
       </div>
       <div
-        className="box marginEnd1"
+        className="box marginEnd100"
         style={
           Object {
             "marginBottom": "2px",
@@ -486,7 +486,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX1 paddingYundefined relative rounding1 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
@@ -495,7 +495,7 @@ exports[`TextField TextField with tags 1`] = `
           }
         >
           <div
-            className="box marginEnd5 xsDisplayFlex xsItemsCenter"
+            className="box marginEnd500 xsDisplayFlex xsItemsCenter"
             style={
               Object {
                 "height": "100%",
@@ -550,7 +550,7 @@ exports[`TextField TextField with tags 1`] = `
         </div>
       </div>
       <div
-        className="box flexGrow marginEnd2 relative"
+        className="box flexGrow marginEnd200 relative"
         style={
           Object {
             "maxWidth": "100%",
diff --git a/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap b/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
index 682bf83341..5def2a9d0a 100644
--- a/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TileData TileData renders all colors as expected 1`] = `
 <div
-  className="Flex rowGap2 columnGap2 xsDirectionRow"
+  className="Flex rowGap200 columnGap200 xsDirectionRow"
 >
   <div
     className="FlexItem"
@@ -23,7 +23,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -49,19 +49,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -113,7 +113,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -168,7 +168,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -194,19 +194,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -258,7 +258,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -313,7 +313,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -339,19 +339,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -403,7 +403,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -458,7 +458,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -484,19 +484,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -548,7 +548,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -603,7 +603,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -629,19 +629,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -693,7 +693,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -748,7 +748,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -774,19 +774,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -838,7 +838,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -893,7 +893,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -919,19 +919,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -983,7 +983,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1038,7 +1038,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1064,19 +1064,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -1128,7 +1128,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1183,7 +1183,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1209,19 +1209,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -1273,7 +1273,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1328,7 +1328,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1354,19 +1354,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -1418,7 +1418,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1473,7 +1473,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1499,19 +1499,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -1563,7 +1563,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1618,7 +1618,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1644,19 +1644,19 @@ exports[`TileData TileData renders all colors as expected 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -1708,7 +1708,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -1764,7 +1764,7 @@ exports[`TileData TileData renders with tooltip 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+        className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1790,19 +1790,19 @@ exports[`TileData TileData renders with tooltip 1`] = `
           }
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow"
+            className="Flex rowGap200 columnGap200 xsDirectionRow"
           >
             <div
               className="FlexItem"
             >
               <div
-                className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                className="Flex rowGap0 columnGap100 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                     style={
                       Object {
                         "minHeight": 24,
@@ -1854,7 +1854,7 @@ exports[`TileData TileData renders with tooltip 1`] = `
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                   >
                     <div
                       className="FlexItem"
@@ -1893,7 +1893,7 @@ exports[`TileData TileData renders with tooltip 1`] = `
 
 exports[`TileData TileData shows readonly checkboxes 1`] = `
 <div
-  className="Flex rowGap2 columnGap2 xsDirectionRow"
+  className="Flex rowGap200 columnGap200 xsDirectionRow"
 >
   <div
     className="FlexItem"
@@ -1914,7 +1914,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1940,19 +1940,19 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -2003,7 +2003,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -2039,10 +2039,10 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                     className="box"
                   >
                     <div
-                      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                     >
                       <div
-                        className="box paddingX1 relative"
+                        className="box paddingX100 relative"
                       >
                         <div
                           className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -2114,7 +2114,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2140,19 +2140,19 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -2203,7 +2203,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -2239,10 +2239,10 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                     className="box"
                   >
                     <div
-                      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                     >
                       <div
-                        className="box paddingX1 relative"
+                        className="box paddingX100 relative"
                       >
                         <div
                           className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -2314,7 +2314,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2340,19 +2340,19 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
               }
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow"
+                className="Flex rowGap200 columnGap200 xsDirectionRow"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                    className="Flex rowGap0 columnGap100 xsDirectionColumn"
                   >
                     <div
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                         style={
                           Object {
                             "minHeight": 24,
@@ -2403,7 +2403,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                       className="FlexItem"
                     >
                       <div
-                        className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                        className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                       >
                         <div
                           className="FlexItem"
@@ -2439,10 +2439,10 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
                     className="box"
                   >
                     <div
-                      className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                      className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                     >
                       <div
-                        className="box paddingX1 relative"
+                        className="box paddingX100 relative"
                       >
                         <div
                           className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -2515,7 +2515,7 @@ exports[`TileData TileData title truncates when really long 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+        className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -2541,19 +2541,19 @@ exports[`TileData TileData title truncates when really long 1`] = `
           }
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow"
+            className="Flex rowGap200 columnGap200 xsDirectionRow"
           >
             <div
               className="FlexItem"
             >
               <div
-                className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                className="Flex rowGap0 columnGap100 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                     style={
                       Object {
                         "minHeight": 24,
@@ -2605,7 +2605,7 @@ exports[`TileData TileData title truncates when really long 1`] = `
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                   >
                     <div
                       className="FlexItem"
@@ -2659,7 +2659,7 @@ exports[`TileData Tiledata is disabled 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding4 fullWidth"
+        className="tapTransition rounding400 fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -2681,19 +2681,19 @@ exports[`TileData Tiledata is disabled 1`] = `
           style={Object {}}
         >
           <div
-            className="Flex rowGap2 columnGap2 xsDirectionRow"
+            className="Flex rowGap200 columnGap200 xsDirectionRow"
           >
             <div
               className="FlexItem"
             >
               <div
-                className="Flex rowGap0 columnGap1 xsDirectionColumn"
+                className="Flex rowGap0 columnGap100 xsDirectionColumn"
               >
                 <div
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                     style={
                       Object {
                         "minHeight": 24,
@@ -2745,7 +2745,7 @@ exports[`TileData Tiledata is disabled 1`] = `
                   className="FlexItem"
                 >
                   <div
-                    className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                    className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
                   >
                     <div
                       className="FlexItem"
@@ -2781,10 +2781,10 @@ exports[`TileData Tiledata is disabled 1`] = `
                 className="box"
               >
                 <div
-                  className="box marginEndN1 marginStartN1 xsDisplayFlex xsItemsStart"
+                  className="box marginEndN100 marginStartN100 xsDisplayFlex xsItemsStart"
                 >
                   <div
-                    className="box paddingX1 relative"
+                    className="box paddingX100 relative"
                   >
                     <div
                       className="checked borderSelected borderRadiusSm sizeSm check thickBorder"
@@ -2844,7 +2844,7 @@ exports[`TileData renders 1`] = `
 >
   <div
     aria-disabled={false}
-    className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
+    className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -2870,19 +2870,19 @@ exports[`TileData renders 1`] = `
       }
     >
       <div
-        className="Flex rowGap2 columnGap2 xsDirectionRow"
+        className="Flex rowGap200 columnGap200 xsDirectionRow"
       >
         <div
           className="FlexItem"
         >
           <div
-            className="Flex rowGap0 columnGap1 xsDirectionColumn"
+            className="Flex rowGap0 columnGap100 xsDirectionColumn"
           >
             <div
               className="FlexItem"
             >
               <div
-                className="Flex rowGap1 columnGap0 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
                 style={
                   Object {
                     "minHeight": 24,
@@ -2934,7 +2934,7 @@ exports[`TileData renders 1`] = `
               className="FlexItem"
             >
               <div
-                className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+                className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
               >
                 <div
                   className="FlexItem"
diff --git a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
index df59f1cf6f..57c703f162 100644
--- a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<Toast /> Error Toast 1`] = `
   role="status"
 >
   <div
-    className="box errorBase paddingY3 rounding4"
+    className="box errorBase paddingY300 rounding400"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -16,7 +16,7 @@ exports[`<Toast /> Error Toast 1`] = `
     }
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem flexNone"
@@ -60,7 +60,7 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY3 rounding4"
+    className="box inverse paddingY300 rounding400"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -70,7 +70,7 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
     }
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem flexGrow"
@@ -143,7 +143,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY3 rounding4"
+    className="box inverse paddingY300 rounding400"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -153,7 +153,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
     }
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem flexNone"
@@ -163,7 +163,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
           className="box"
         >
           <div
-            className="Mask rounding2 willChangeTransform"
+            className="Mask rounding200 willChangeTransform"
             style={
               Object {
                 "height": 32,
@@ -264,7 +264,7 @@ exports[`<Toast /> Text + Image 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY3 rounding4"
+    className="box inverse paddingY300 rounding400"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -274,7 +274,7 @@ exports[`<Toast /> Text + Image 1`] = `
     }
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem flexNone"
@@ -284,7 +284,7 @@ exports[`<Toast /> Text + Image 1`] = `
           className="box"
         >
           <div
-            className="Mask rounding2 willChangeTransform"
+            className="Mask rounding200 willChangeTransform"
             style={
               Object {
                 "height": 32,
@@ -356,7 +356,7 @@ exports[`<Toast /> Text Only 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY3 rounding4"
+    className="box inverse paddingY300 rounding400"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -366,7 +366,7 @@ exports[`<Toast /> Text Only 1`] = `
     }
   >
     <div
-      className="Flex rowGap4 columnGap4 xsDirectionRow xsItemsCenter"
+      className="Flex rowGap400 columnGap400 xsDirectionRow xsItemsCenter"
     >
       <div
         className="FlexItem flexGrow"
diff --git a/packages/gestalt/src/__snapshots__/Video.test.tsx.snap b/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
index 3b908aca68..ff3c9dd656 100644
--- a/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`Video with children 1`] = `
     className="controls"
   >
     <div
-      className="box paddingX2 paddingY2"
+      className="box paddingX200 paddingY200"
     >
       <div
         aria-disabled={false}
@@ -125,7 +125,7 @@ exports[`Video with children 1`] = `
       </div>
     </div>
     <div
-      className="box paddingX2 paddingY2"
+      className="box paddingX200 paddingY200"
     >
       <div
         aria-disabled={false}
@@ -160,7 +160,7 @@ exports[`Video with children 1`] = `
           />
         </svg>
         <div
-          className="absolute box light marginTop1 rounding4"
+          className="absolute box light marginTop100 rounding400"
           style={
             Object {
               "height": 2,
@@ -171,7 +171,7 @@ exports[`Video with children 1`] = `
       </div>
     </div>
     <div
-      className="box paddingX2 paddingY2"
+      className="box paddingX200 paddingY200"
       style={
         Object {
           "width": 50,
@@ -185,7 +185,7 @@ exports[`Video with children 1`] = `
       </div>
     </div>
     <div
-      className="box flexGrow paddingX2 paddingY2"
+      className="box flexGrow paddingX200 paddingY200"
     >
       <div
         className="box relative"
@@ -214,7 +214,7 @@ exports[`Video with children 1`] = `
           tabIndex="-1"
         >
           <div
-            className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
+            className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
             style={
               Object {
                 "height": 4,
@@ -222,7 +222,7 @@ exports[`Video with children 1`] = `
             }
           >
             <div
-              className="box light rounding2"
+              className="box light rounding200"
               style={
                 Object {
                   "height": "100%",
@@ -231,7 +231,7 @@ exports[`Video with children 1`] = `
               }
             />
             <div
-              className="box circle light marginStartN2"
+              className="box circle light marginStartN200"
               style={
                 Object {
                   "height": 16,
@@ -245,7 +245,7 @@ exports[`Video with children 1`] = `
       </div>
     </div>
     <div
-      className="box paddingX2 paddingY2"
+      className="box paddingX200 paddingY200"
       style={
         Object {
           "width": 50,
@@ -259,7 +259,7 @@ exports[`Video with children 1`] = `
       </div>
     </div>
     <div
-      className="box paddingX2 paddingY2"
+      className="box paddingX200 paddingY200"
     >
       <div
         aria-disabled={false}
diff --git a/packages/gestalt/src/__snapshots__/WashAnimated.test.tsx.snap b/packages/gestalt/src/__snapshots__/WashAnimated.test.tsx.snap
index 8c5ba7a8ad..4b4bf384f1 100644
--- a/packages/gestalt/src/__snapshots__/WashAnimated.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/WashAnimated.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders a WashAnimated with an image 1`] = `
   onMouseLeave={[Function]}
 >
   <div
-    className="box marginBottom1"
+    className="box marginBottom100"
   >
     Avatar
   </div>
diff --git a/packages/gestalt/src/boxTransforms.ts b/packages/gestalt/src/boxTransforms.ts
index cb7cc275c4..1560352cff 100644
--- a/packages/gestalt/src/boxTransforms.ts
+++ b/packages/gestalt/src/boxTransforms.ts
@@ -266,7 +266,7 @@ const minWidth: Functor<Dimension> = (d) => fromInlineStyle({ minWidth: d });
 const opacityMap = mapClassName((name) => styles[name]);
 const opacity: Functor<Opacity> = (val) => {
   if (val > 0 && val < 1) {
-    return opacityMap(range('opacity0')(val * 10));
+    return opacityMap(range('opacity0')(val * 0.1));
   }
   return opacityMap(range('opacity')(val));
 };
diff --git a/packages/gestalt/src/boxWhitespace.css b/packages/gestalt/src/boxWhitespace.css
index 278f23cc24..d4c6b538d9 100644
--- a/packages/gestalt/src/boxWhitespace.css
+++ b/packages/gestalt/src/boxWhitespace.css
@@ -1,7 +1,7 @@
 /*
 This file was generated by running
 
-  $ ./scripts/whitespace.js > packages/gestalt/src/boxWhitespace.css
+  $ node ./scripts/whitespace.js > packages/gestalt/src/boxWhitespace.css
 
 */
 
@@ -63,932 +63,1106 @@ html[dir="rtl"] .marginEnd0 {
   padding-right: var(--space-0);
 }
 
-html:not([dir="rtl"]) .marginStart1 {
-  margin-left: var(--space-100);
+html:not([dir="rtl"]) .marginStart25 {
+  margin-left: 1px;
 }
 
-html:not([dir="rtl"]) .marginEnd1 {
-  margin-right: var(--space-100);
+html:not([dir="rtl"]) .marginEnd25 {
+  margin-right: 1px;
 }
 
-html[dir="rtl"] .marginStart1 {
-  margin-right: var(--space-100);
+html[dir="rtl"] .marginStart25 {
+  margin-right: 1px;
 }
 
-html[dir="rtl"] .marginEnd1 {
-  margin-left: var(--space-100);
+html[dir="rtl"] .marginEnd25 {
+  margin-left: 1px;
 }
 
-html:not([dir="rtl"]) .marginStartN1 {
-  margin-left: var(--space-negative-100);
+html:not([dir="rtl"]) .marginStartN25 {
+  margin-left: -1px;
 }
 
-html:not([dir="rtl"]) .marginEndN1 {
-  margin-right: var(--space-negative-100);
+html:not([dir="rtl"]) .marginEndN25 {
+  margin-right: -1px;
 }
 
-html[dir="rtl"] .marginStartN1 {
-  margin-right: var(--space-negative-100);
+html[dir="rtl"] .marginStartN25 {
+  margin-right: -1px;
 }
 
-html[dir="rtl"] .marginEndN1 {
-  margin-left: var(--space-negative-100);
+html[dir="rtl"] .marginEndN25 {
+  margin-left: -1px;
 }
 
-.marginTop1 {
-  margin-top: var(--space-100);
+.marginTop25 {
+  margin-top: 1px;
 }
 
-.marginBottom1 {
-  margin-bottom: var(--space-100);
+.marginBottom25 {
+  margin-bottom: 1px;
 }
 
-.marginTopN1 {
-  margin-top: var(--space-negative-100);
+.marginTopN25 {
+  margin-top: -1px;
 }
 
-.marginBottomN1 {
-  margin-bottom: var(--space-negative-100);
+.marginBottomN25 {
+  margin-bottom: -1px;
 }
 
-.paddingY1 {
-  padding-bottom: var(--space-100);
-  padding-top: var(--space-100);
+.paddingY25 {
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 
-.paddingX1 {
-  padding-left: var(--space-100);
-  padding-right: var(--space-100);
+.paddingX25 {
+  padding-left: 1px;
+  padding-right: 1px;
 }
 
-html:not([dir="rtl"]) .marginStart2 {
-  margin-left: var(--space-200);
+html:not([dir="rtl"]) .marginStart50 {
+  margin-left: 2px;
 }
 
-html:not([dir="rtl"]) .marginEnd2 {
-  margin-right: var(--space-200);
+html:not([dir="rtl"]) .marginEnd50 {
+  margin-right: 2px;
 }
 
-html[dir="rtl"] .marginStart2 {
-  margin-right: var(--space-200);
+html[dir="rtl"] .marginStart50 {
+  margin-right: 2px;
 }
 
-html[dir="rtl"] .marginEnd2 {
-  margin-left: var(--space-200);
+html[dir="rtl"] .marginEnd50 {
+  margin-left: 2px;
 }
 
-html:not([dir="rtl"]) .marginStartN2 {
-  margin-left: var(--space-negative-200);
+html:not([dir="rtl"]) .marginStartN50 {
+  margin-left: -2px;
 }
 
-html:not([dir="rtl"]) .marginEndN2 {
-  margin-right: var(--space-negative-200);
+html:not([dir="rtl"]) .marginEndN50 {
+  margin-right: -2px;
 }
 
-html[dir="rtl"] .marginStartN2 {
-  margin-right: var(--space-negative-200);
+html[dir="rtl"] .marginStartN50 {
+  margin-right: -2px;
 }
 
-html[dir="rtl"] .marginEndN2 {
-  margin-left: var(--space-negative-200);
+html[dir="rtl"] .marginEndN50 {
+  margin-left: -2px;
 }
 
-.marginTop2 {
-  margin-top: var(--space-200);
+.marginTop50 {
+  margin-top: 2px;
 }
 
-.marginBottom2 {
-  margin-bottom: var(--space-200);
+.marginBottom50 {
+  margin-bottom: 2px;
 }
 
-.marginTopN2 {
-  margin-top: var(--space-negative-200);
+.marginTopN50 {
+  margin-top: -2px;
 }
 
-.marginBottomN2 {
-  margin-bottom: var(--space-negative-200);
+.marginBottomN50 {
+  margin-bottom: -2px;
 }
 
-.paddingY2 {
-  padding-bottom: var(--space-200);
-  padding-top: var(--space-200);
+.paddingY50 {
+  padding-bottom: 2px;
+  padding-top: 2px;
 }
 
-.paddingX2 {
-  padding-left: var(--space-200);
-  padding-right: var(--space-200);
+.paddingX50 {
+  padding-left: 2px;
+  padding-right: 2px;
 }
 
-html:not([dir="rtl"]) .marginStart3 {
-  margin-left: var(--space-300);
+html:not([dir="rtl"]) .marginStart100 {
+  margin-left: var(--space-100);
 }
 
-html:not([dir="rtl"]) .marginEnd3 {
-  margin-right: var(--space-300);
+html:not([dir="rtl"]) .marginEnd100 {
+  margin-right: var(--space-100);
 }
 
-html[dir="rtl"] .marginStart3 {
-  margin-right: var(--space-300);
+html[dir="rtl"] .marginStart100 {
+  margin-right: var(--space-100);
 }
 
-html[dir="rtl"] .marginEnd3 {
-  margin-left: var(--space-300);
+html[dir="rtl"] .marginEnd100 {
+  margin-left: var(--space-100);
 }
 
-html:not([dir="rtl"]) .marginStartN3 {
-  margin-left: var(--space-negative-300);
+html:not([dir="rtl"]) .marginStartN100 {
+  margin-left: var(--space-negative-100);
 }
 
-html:not([dir="rtl"]) .marginEndN3 {
-  margin-right: var(--space-negative-300);
+html:not([dir="rtl"]) .marginEndN100 {
+  margin-right: var(--space-negative-100);
 }
 
-html[dir="rtl"] .marginStartN3 {
-  margin-right: var(--space-negative-300);
+html[dir="rtl"] .marginStartN100 {
+  margin-right: var(--space-negative-100);
 }
 
-html[dir="rtl"] .marginEndN3 {
-  margin-left: var(--space-negative-300);
+html[dir="rtl"] .marginEndN100 {
+  margin-left: var(--space-negative-100);
 }
 
-.marginTop3 {
-  margin-top: var(--space-300);
+.marginTop100 {
+  margin-top: var(--space-100);
 }
 
-.marginBottom3 {
-  margin-bottom: var(--space-300);
+.marginBottom100 {
+  margin-bottom: var(--space-100);
 }
 
-.marginTopN3 {
-  margin-top: var(--space-negative-300);
+.marginTopN100 {
+  margin-top: var(--space-negative-100);
 }
 
-.marginBottomN3 {
-  margin-bottom: var(--space-negative-300);
+.marginBottomN100 {
+  margin-bottom: var(--space-negative-100);
 }
 
-.paddingY3 {
-  padding-bottom: var(--space-300);
-  padding-top: var(--space-300);
+.paddingY100 {
+  padding-bottom: var(--space-100);
+  padding-top: var(--space-100);
 }
 
-.paddingX3 {
-  padding-left: var(--space-300);
-  padding-right: var(--space-300);
+.paddingX100 {
+  padding-left: var(--space-100);
+  padding-right: var(--space-100);
 }
 
-html:not([dir="rtl"]) .marginStart4 {
-  margin-left: var(--space-400);
+html:not([dir="rtl"]) .marginStart150 {
+  margin-left: 6px;
 }
 
-html:not([dir="rtl"]) .marginEnd4 {
-  margin-right: var(--space-400);
+html:not([dir="rtl"]) .marginEnd150 {
+  margin-right: 6px;
 }
 
-html[dir="rtl"] .marginStart4 {
-  margin-right: var(--space-400);
+html[dir="rtl"] .marginStart150 {
+  margin-right: 6px;
 }
 
-html[dir="rtl"] .marginEnd4 {
-  margin-left: var(--space-400);
+html[dir="rtl"] .marginEnd150 {
+  margin-left: 6px;
 }
 
-html:not([dir="rtl"]) .marginStartN4 {
-  margin-left: var(--space-negative-400);
+html:not([dir="rtl"]) .marginStartN150 {
+  margin-left: -6px;
 }
 
-html:not([dir="rtl"]) .marginEndN4 {
-  margin-right: var(--space-negative-400);
+html:not([dir="rtl"]) .marginEndN150 {
+  margin-right: -6px;
 }
 
-html[dir="rtl"] .marginStartN4 {
-  margin-right: var(--space-negative-400);
+html[dir="rtl"] .marginStartN150 {
+  margin-right: -6px;
 }
 
-html[dir="rtl"] .marginEndN4 {
-  margin-left: var(--space-negative-400);
+html[dir="rtl"] .marginEndN150 {
+  margin-left: -6px;
 }
 
-.marginTop4 {
-  margin-top: var(--space-400);
+.marginTop150 {
+  margin-top: 6px;
 }
 
-.marginBottom4 {
-  margin-bottom: var(--space-400);
+.marginBottom150 {
+  margin-bottom: 6px;
 }
 
-.marginTopN4 {
-  margin-top: var(--space-negative-400);
+.marginTopN150 {
+  margin-top: -6px;
 }
 
-.marginBottomN4 {
-  margin-bottom: var(--space-negative-400);
+.marginBottomN150 {
+  margin-bottom: -6px;
 }
 
-.paddingY4 {
-  padding-bottom: var(--space-400);
-  padding-top: var(--space-400);
+.paddingY150 {
+  padding-bottom: 6px;
+  padding-top: 6px;
 }
 
-.paddingX4 {
-  padding-left: var(--space-400);
-  padding-right: var(--space-400);
+.paddingX150 {
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-html:not([dir="rtl"]) .marginStart5 {
-  margin-left: var(--space-500);
+html:not([dir="rtl"]) .marginStart1000 {
+  margin-left: var(--space-1000);
 }
 
-html:not([dir="rtl"]) .marginEnd5 {
-  margin-right: var(--space-500);
+html:not([dir="rtl"]) .marginEnd1000 {
+  margin-right: var(--space-1000);
 }
 
-html[dir="rtl"] .marginStart5 {
-  margin-right: var(--space-500);
+html[dir="rtl"] .marginStart1000 {
+  margin-right: var(--space-1000);
 }
 
-html[dir="rtl"] .marginEnd5 {
-  margin-left: var(--space-500);
+html[dir="rtl"] .marginEnd1000 {
+  margin-left: var(--space-1000);
 }
 
-html:not([dir="rtl"]) .marginStartN5 {
-  margin-left: var(--space-negative-500);
+html:not([dir="rtl"]) .marginStartN1000 {
+  margin-left: var(--space-negative-1000);
 }
 
-html:not([dir="rtl"]) .marginEndN5 {
-  margin-right: var(--space-negative-500);
+html:not([dir="rtl"]) .marginEndN1000 {
+  margin-right: var(--space-negative-1000);
 }
 
-html[dir="rtl"] .marginStartN5 {
-  margin-right: var(--space-negative-500);
+html[dir="rtl"] .marginStartN1000 {
+  margin-right: var(--space-negative-1000);
 }
 
-html[dir="rtl"] .marginEndN5 {
-  margin-left: var(--space-negative-500);
+html[dir="rtl"] .marginEndN1000 {
+  margin-left: var(--space-negative-1000);
 }
 
-.marginTop5 {
-  margin-top: var(--space-500);
+.marginTop1000 {
+  margin-top: var(--space-1000);
 }
 
-.marginBottom5 {
-  margin-bottom: var(--space-500);
+.marginBottom1000 {
+  margin-bottom: var(--space-1000);
 }
 
-.marginTopN5 {
-  margin-top: var(--space-negative-500);
+.marginTopN1000 {
+  margin-top: var(--space-negative-1000);
 }
 
-.marginBottomN5 {
-  margin-bottom: var(--space-negative-500);
+.marginBottomN1000 {
+  margin-bottom: var(--space-negative-1000);
 }
 
-.paddingY5 {
-  padding-bottom: var(--space-500);
-  padding-top: var(--space-500);
+.paddingY1000 {
+  padding-bottom: var(--space-1000);
+  padding-top: var(--space-1000);
 }
 
-.paddingX5 {
-  padding-left: var(--space-500);
-  padding-right: var(--space-500);
+.paddingX1000 {
+  padding-left: var(--space-1000);
+  padding-right: var(--space-1000);
 }
 
-html:not([dir="rtl"]) .marginStart6 {
-  margin-left: var(--space-600);
+html:not([dir="rtl"]) .marginStart1100 {
+  margin-left: var(--space-1100);
 }
 
-html:not([dir="rtl"]) .marginEnd6 {
-  margin-right: var(--space-600);
+html:not([dir="rtl"]) .marginEnd1100 {
+  margin-right: var(--space-1100);
 }
 
-html[dir="rtl"] .marginStart6 {
-  margin-right: var(--space-600);
+html[dir="rtl"] .marginStart1100 {
+  margin-right: var(--space-1100);
 }
 
-html[dir="rtl"] .marginEnd6 {
-  margin-left: var(--space-600);
+html[dir="rtl"] .marginEnd1100 {
+  margin-left: var(--space-1100);
 }
 
-html:not([dir="rtl"]) .marginStartN6 {
-  margin-left: var(--space-negative-600);
+html:not([dir="rtl"]) .marginStartN1100 {
+  margin-left: var(--space-negative-1100);
 }
 
-html:not([dir="rtl"]) .marginEndN6 {
-  margin-right: var(--space-negative-600);
+html:not([dir="rtl"]) .marginEndN1100 {
+  margin-right: var(--space-negative-1100);
 }
 
-html[dir="rtl"] .marginStartN6 {
-  margin-right: var(--space-negative-600);
+html[dir="rtl"] .marginStartN1100 {
+  margin-right: var(--space-negative-1100);
 }
 
-html[dir="rtl"] .marginEndN6 {
-  margin-left: var(--space-negative-600);
+html[dir="rtl"] .marginEndN1100 {
+  margin-left: var(--space-negative-1100);
 }
 
-.marginTop6 {
-  margin-top: var(--space-600);
+.marginTop1100 {
+  margin-top: var(--space-1100);
 }
 
-.marginBottom6 {
-  margin-bottom: var(--space-600);
+.marginBottom1100 {
+  margin-bottom: var(--space-1100);
 }
 
-.marginTopN6 {
-  margin-top: var(--space-negative-600);
+.marginTopN1100 {
+  margin-top: var(--space-negative-1100);
 }
 
-.marginBottomN6 {
-  margin-bottom: var(--space-negative-600);
+.marginBottomN1100 {
+  margin-bottom: var(--space-negative-1100);
 }
 
-.paddingY6 {
-  padding-bottom: var(--space-600);
-  padding-top: var(--space-600);
+.paddingY1100 {
+  padding-bottom: var(--space-1100);
+  padding-top: var(--space-1100);
 }
 
-.paddingX6 {
-  padding-left: var(--space-600);
-  padding-right: var(--space-600);
+.paddingX1100 {
+  padding-left: var(--space-1100);
+  padding-right: var(--space-1100);
 }
 
-html:not([dir="rtl"]) .marginStart7 {
-  margin-left: var(--space-700);
+html:not([dir="rtl"]) .marginStart1200 {
+  margin-left: var(--space-1200);
 }
 
-html:not([dir="rtl"]) .marginEnd7 {
-  margin-right: var(--space-700);
+html:not([dir="rtl"]) .marginEnd1200 {
+  margin-right: var(--space-1200);
 }
 
-html[dir="rtl"] .marginStart7 {
-  margin-right: var(--space-700);
+html[dir="rtl"] .marginStart1200 {
+  margin-right: var(--space-1200);
 }
 
-html[dir="rtl"] .marginEnd7 {
-  margin-left: var(--space-700);
+html[dir="rtl"] .marginEnd1200 {
+  margin-left: var(--space-1200);
 }
 
-html:not([dir="rtl"]) .marginStartN7 {
-  margin-left: var(--space-negative-700);
+html:not([dir="rtl"]) .marginStartN1200 {
+  margin-left: var(--space-negative-1200);
 }
 
-html:not([dir="rtl"]) .marginEndN7 {
-  margin-right: var(--space-negative-700);
+html:not([dir="rtl"]) .marginEndN1200 {
+  margin-right: var(--space-negative-1200);
 }
 
-html[dir="rtl"] .marginStartN7 {
-  margin-right: var(--space-negative-700);
+html[dir="rtl"] .marginStartN1200 {
+  margin-right: var(--space-negative-1200);
 }
 
-html[dir="rtl"] .marginEndN7 {
-  margin-left: var(--space-negative-700);
+html[dir="rtl"] .marginEndN1200 {
+  margin-left: var(--space-negative-1200);
 }
 
-.marginTop7 {
-  margin-top: var(--space-700);
+.marginTop1200 {
+  margin-top: var(--space-1200);
 }
 
-.marginBottom7 {
-  margin-bottom: var(--space-700);
+.marginBottom1200 {
+  margin-bottom: var(--space-1200);
 }
 
-.marginTopN7 {
-  margin-top: var(--space-negative-700);
+.marginTopN1200 {
+  margin-top: var(--space-negative-1200);
 }
 
-.marginBottomN7 {
-  margin-bottom: var(--space-negative-700);
+.marginBottomN1200 {
+  margin-bottom: var(--space-negative-1200);
 }
 
-.paddingY7 {
-  padding-bottom: var(--space-700);
-  padding-top: var(--space-700);
+.paddingY1200 {
+  padding-bottom: var(--space-1200);
+  padding-top: var(--space-1200);
 }
 
-.paddingX7 {
-  padding-left: var(--space-700);
-  padding-right: var(--space-700);
+.paddingX1200 {
+  padding-left: var(--space-1200);
+  padding-right: var(--space-1200);
 }
 
-html:not([dir="rtl"]) .marginStart8 {
-  margin-left: var(--space-800);
+html:not([dir="rtl"]) .marginStart1300 {
+  margin-left: var(--space-1300);
 }
 
-html:not([dir="rtl"]) .marginEnd8 {
-  margin-right: var(--space-800);
+html:not([dir="rtl"]) .marginEnd1300 {
+  margin-right: var(--space-1300);
 }
 
-html[dir="rtl"] .marginStart8 {
-  margin-right: var(--space-800);
+html[dir="rtl"] .marginStart1300 {
+  margin-right: var(--space-1300);
 }
 
-html[dir="rtl"] .marginEnd8 {
-  margin-left: var(--space-800);
+html[dir="rtl"] .marginEnd1300 {
+  margin-left: var(--space-1300);
 }
 
-html:not([dir="rtl"]) .marginStartN8 {
-  margin-left: var(--space-negative-800);
+html:not([dir="rtl"]) .marginStartN1300 {
+  margin-left: var(--space-negative-1300);
 }
 
-html:not([dir="rtl"]) .marginEndN8 {
-  margin-right: var(--space-negative-800);
+html:not([dir="rtl"]) .marginEndN1300 {
+  margin-right: var(--space-negative-1300);
 }
 
-html[dir="rtl"] .marginStartN8 {
-  margin-right: var(--space-negative-800);
+html[dir="rtl"] .marginStartN1300 {
+  margin-right: var(--space-negative-1300);
 }
 
-html[dir="rtl"] .marginEndN8 {
-  margin-left: var(--space-negative-800);
+html[dir="rtl"] .marginEndN1300 {
+  margin-left: var(--space-negative-1300);
 }
 
-.marginTop8 {
-  margin-top: var(--space-800);
+.marginTop1300 {
+  margin-top: var(--space-1300);
 }
 
-.marginBottom8 {
-  margin-bottom: var(--space-800);
+.marginBottom1300 {
+  margin-bottom: var(--space-1300);
 }
 
-.marginTopN8 {
-  margin-top: var(--space-negative-800);
+.marginTopN1300 {
+  margin-top: var(--space-negative-1300);
 }
 
-.marginBottomN8 {
-  margin-bottom: var(--space-negative-800);
+.marginBottomN1300 {
+  margin-bottom: var(--space-negative-1300);
 }
 
-.paddingY8 {
-  padding-bottom: var(--space-800);
-  padding-top: var(--space-800);
+.paddingY1300 {
+  padding-bottom: var(--space-1300);
+  padding-top: var(--space-1300);
 }
 
-.paddingX8 {
-  padding-left: var(--space-800);
-  padding-right: var(--space-800);
+.paddingX1300 {
+  padding-left: var(--space-1300);
+  padding-right: var(--space-1300);
 }
 
-html:not([dir="rtl"]) .marginStart9 {
-  margin-left: var(--space-900);
+html:not([dir="rtl"]) .marginStart1400 {
+  margin-left: var(--space-1400);
 }
 
-html:not([dir="rtl"]) .marginEnd9 {
-  margin-right: var(--space-900);
+html:not([dir="rtl"]) .marginEnd1400 {
+  margin-right: var(--space-1400);
 }
 
-html[dir="rtl"] .marginStart9 {
-  margin-right: var(--space-900);
+html[dir="rtl"] .marginStart1400 {
+  margin-right: var(--space-1400);
 }
 
-html[dir="rtl"] .marginEnd9 {
-  margin-left: var(--space-900);
+html[dir="rtl"] .marginEnd1400 {
+  margin-left: var(--space-1400);
 }
 
-html:not([dir="rtl"]) .marginStartN9 {
-  margin-left: var(--space-negative-900);
+html:not([dir="rtl"]) .marginStartN1400 {
+  margin-left: var(--space-negative-1400);
 }
 
-html:not([dir="rtl"]) .marginEndN9 {
-  margin-right: var(--space-negative-900);
+html:not([dir="rtl"]) .marginEndN1400 {
+  margin-right: var(--space-negative-1400);
 }
 
-html[dir="rtl"] .marginStartN9 {
-  margin-right: var(--space-negative-900);
+html[dir="rtl"] .marginStartN1400 {
+  margin-right: var(--space-negative-1400);
 }
 
-html[dir="rtl"] .marginEndN9 {
-  margin-left: var(--space-negative-900);
+html[dir="rtl"] .marginEndN1400 {
+  margin-left: var(--space-negative-1400);
 }
 
-.marginTop9 {
-  margin-top: var(--space-900);
+.marginTop1400 {
+  margin-top: var(--space-1400);
 }
 
-.marginBottom9 {
-  margin-bottom: var(--space-900);
+.marginBottom1400 {
+  margin-bottom: var(--space-1400);
 }
 
-.marginTopN9 {
-  margin-top: var(--space-negative-900);
+.marginTopN1400 {
+  margin-top: var(--space-negative-1400);
 }
 
-.marginBottomN9 {
-  margin-bottom: var(--space-negative-900);
+.marginBottomN1400 {
+  margin-bottom: var(--space-negative-1400);
 }
 
-.paddingY9 {
-  padding-bottom: var(--space-900);
-  padding-top: var(--space-900);
+.paddingY1400 {
+  padding-bottom: var(--space-1400);
+  padding-top: var(--space-1400);
 }
 
-.paddingX9 {
-  padding-left: var(--space-900);
-  padding-right: var(--space-900);
+.paddingX1400 {
+  padding-left: var(--space-1400);
+  padding-right: var(--space-1400);
 }
 
-html:not([dir="rtl"]) .marginStart10 {
-  margin-left: var(--space-1000);
+html:not([dir="rtl"]) .marginStart1500 {
+  margin-left: var(--space-1500);
 }
 
-html:not([dir="rtl"]) .marginEnd10 {
-  margin-right: var(--space-1000);
+html:not([dir="rtl"]) .marginEnd1500 {
+  margin-right: var(--space-1500);
 }
 
-html[dir="rtl"] .marginStart10 {
-  margin-right: var(--space-1000);
+html[dir="rtl"] .marginStart1500 {
+  margin-right: var(--space-1500);
 }
 
-html[dir="rtl"] .marginEnd10 {
-  margin-left: var(--space-1000);
+html[dir="rtl"] .marginEnd1500 {
+  margin-left: var(--space-1500);
 }
 
-html:not([dir="rtl"]) .marginStartN10 {
-  margin-left: var(--space-negative-1000);
+html:not([dir="rtl"]) .marginStartN1500 {
+  margin-left: var(--space-negative-1500);
 }
 
-html:not([dir="rtl"]) .marginEndN10 {
-  margin-right: var(--space-negative-1000);
+html:not([dir="rtl"]) .marginEndN1500 {
+  margin-right: var(--space-negative-1500);
 }
 
-html[dir="rtl"] .marginStartN10 {
-  margin-right: var(--space-negative-1000);
+html[dir="rtl"] .marginStartN1500 {
+  margin-right: var(--space-negative-1500);
 }
 
-html[dir="rtl"] .marginEndN10 {
-  margin-left: var(--space-negative-1000);
+html[dir="rtl"] .marginEndN1500 {
+  margin-left: var(--space-negative-1500);
 }
 
-.marginTop10 {
-  margin-top: var(--space-1000);
+.marginTop1500 {
+  margin-top: var(--space-1500);
 }
 
-.marginBottom10 {
-  margin-bottom: var(--space-1000);
+.marginBottom1500 {
+  margin-bottom: var(--space-1500);
 }
 
-.marginTopN10 {
-  margin-top: var(--space-negative-1000);
+.marginTopN1500 {
+  margin-top: var(--space-negative-1500);
 }
 
-.marginBottomN10 {
-  margin-bottom: var(--space-negative-1000);
+.marginBottomN1500 {
+  margin-bottom: var(--space-negative-1500);
 }
 
-.paddingY10 {
-  padding-bottom: var(--space-1000);
-  padding-top: var(--space-1000);
+.paddingY1500 {
+  padding-bottom: var(--space-1500);
+  padding-top: var(--space-1500);
 }
 
-.paddingX10 {
-  padding-left: var(--space-1000);
-  padding-right: var(--space-1000);
+.paddingX1500 {
+  padding-left: var(--space-1500);
+  padding-right: var(--space-1500);
 }
 
-html:not([dir="rtl"]) .marginStart11 {
-  margin-left: var(--space-1100);
+html:not([dir="rtl"]) .marginStart1600 {
+  margin-left: var(--space-1600);
 }
 
-html:not([dir="rtl"]) .marginEnd11 {
-  margin-right: var(--space-1100);
+html:not([dir="rtl"]) .marginEnd1600 {
+  margin-right: var(--space-1600);
 }
 
-html[dir="rtl"] .marginStart11 {
-  margin-right: var(--space-1100);
+html[dir="rtl"] .marginStart1600 {
+  margin-right: var(--space-1600);
 }
 
-html[dir="rtl"] .marginEnd11 {
-  margin-left: var(--space-1100);
+html[dir="rtl"] .marginEnd1600 {
+  margin-left: var(--space-1600);
 }
 
-html:not([dir="rtl"]) .marginStartN11 {
-  margin-left: var(--space-negative-1100);
+html:not([dir="rtl"]) .marginStartN1600 {
+  margin-left: var(--space-negative-1600);
 }
 
-html:not([dir="rtl"]) .marginEndN11 {
-  margin-right: var(--space-negative-1100);
+html:not([dir="rtl"]) .marginEndN1600 {
+  margin-right: var(--space-negative-1600);
 }
 
-html[dir="rtl"] .marginStartN11 {
-  margin-right: var(--space-negative-1100);
+html[dir="rtl"] .marginStartN1600 {
+  margin-right: var(--space-negative-1600);
 }
 
-html[dir="rtl"] .marginEndN11 {
-  margin-left: var(--space-negative-1100);
+html[dir="rtl"] .marginEndN1600 {
+  margin-left: var(--space-negative-1600);
 }
 
-.marginTop11 {
-  margin-top: var(--space-1100);
+.marginTop1600 {
+  margin-top: var(--space-1600);
 }
 
-.marginBottom11 {
-  margin-bottom: var(--space-1100);
+.marginBottom1600 {
+  margin-bottom: var(--space-1600);
 }
 
-.marginTopN11 {
-  margin-top: var(--space-negative-1100);
+.marginTopN1600 {
+  margin-top: var(--space-negative-1600);
 }
 
-.marginBottomN11 {
-  margin-bottom: var(--space-negative-1100);
+.marginBottomN1600 {
+  margin-bottom: var(--space-negative-1600);
 }
 
-.paddingY11 {
-  padding-bottom: var(--space-1100);
-  padding-top: var(--space-1100);
+.paddingY1600 {
+  padding-bottom: var(--space-1600);
+  padding-top: var(--space-1600);
 }
 
-.paddingX11 {
-  padding-left: var(--space-1100);
-  padding-right: var(--space-1100);
+.paddingX1600 {
+  padding-left: var(--space-1600);
+  padding-right: var(--space-1600);
 }
 
-html:not([dir="rtl"]) .marginStart12 {
-  margin-left: var(--space-1200);
+html:not([dir="rtl"]) .marginStart200 {
+  margin-left: var(--space-200);
 }
 
-html:not([dir="rtl"]) .marginEnd12 {
-  margin-right: var(--space-1200);
+html:not([dir="rtl"]) .marginEnd200 {
+  margin-right: var(--space-200);
 }
 
-html[dir="rtl"] .marginStart12 {
-  margin-right: var(--space-1200);
+html[dir="rtl"] .marginStart200 {
+  margin-right: var(--space-200);
 }
 
-html[dir="rtl"] .marginEnd12 {
-  margin-left: var(--space-1200);
+html[dir="rtl"] .marginEnd200 {
+  margin-left: var(--space-200);
 }
 
-html:not([dir="rtl"]) .marginStartN12 {
-  margin-left: var(--space-negative-1200);
+html:not([dir="rtl"]) .marginStartN200 {
+  margin-left: var(--space-negative-200);
 }
 
-html:not([dir="rtl"]) .marginEndN12 {
-  margin-right: var(--space-negative-1200);
+html:not([dir="rtl"]) .marginEndN200 {
+  margin-right: var(--space-negative-200);
 }
 
-html[dir="rtl"] .marginStartN12 {
-  margin-right: var(--space-negative-1200);
+html[dir="rtl"] .marginStartN200 {
+  margin-right: var(--space-negative-200);
 }
 
-html[dir="rtl"] .marginEndN12 {
-  margin-left: var(--space-negative-1200);
+html[dir="rtl"] .marginEndN200 {
+  margin-left: var(--space-negative-200);
 }
 
-.marginTop12 {
-  margin-top: var(--space-1200);
+.marginTop200 {
+  margin-top: var(--space-200);
 }
 
-.marginBottom12 {
-  margin-bottom: var(--space-1200);
+.marginBottom200 {
+  margin-bottom: var(--space-200);
 }
 
-.marginTopN12 {
-  margin-top: var(--space-negative-1200);
+.marginTopN200 {
+  margin-top: var(--space-negative-200);
 }
 
-.marginBottomN12 {
-  margin-bottom: var(--space-negative-1200);
+.marginBottomN200 {
+  margin-bottom: var(--space-negative-200);
 }
 
-.paddingY12 {
-  padding-bottom: var(--space-1200);
-  padding-top: var(--space-1200);
+.paddingY200 {
+  padding-bottom: var(--space-200);
+  padding-top: var(--space-200);
 }
 
-.paddingX12 {
-  padding-left: var(--space-1200);
-  padding-right: var(--space-1200);
+.paddingX200 {
+  padding-left: var(--space-200);
+  padding-right: var(--space-200);
 }
 
-html:not([dir="rtl"]) .marginStart13 {
-  margin-left: var(--space-1300);
+html:not([dir="rtl"]) .marginStart300 {
+  margin-left: var(--space-300);
 }
 
-html:not([dir="rtl"]) .marginEnd13 {
-  margin-right: var(--space-1300);
+html:not([dir="rtl"]) .marginEnd300 {
+  margin-right: var(--space-300);
 }
 
-html[dir="rtl"] .marginStart13 {
-  margin-right: var(--space-1300);
+html[dir="rtl"] .marginStart300 {
+  margin-right: var(--space-300);
 }
 
-html[dir="rtl"] .marginEnd13 {
-  margin-left: var(--space-1300);
+html[dir="rtl"] .marginEnd300 {
+  margin-left: var(--space-300);
 }
 
-html:not([dir="rtl"]) .marginStartN13 {
-  margin-left: var(--space-negative-1300);
+html:not([dir="rtl"]) .marginStartN300 {
+  margin-left: var(--space-negative-300);
 }
 
-html:not([dir="rtl"]) .marginEndN13 {
-  margin-right: var(--space-negative-1300);
+html:not([dir="rtl"]) .marginEndN300 {
+  margin-right: var(--space-negative-300);
 }
 
-html[dir="rtl"] .marginStartN13 {
-  margin-right: var(--space-negative-1300);
+html[dir="rtl"] .marginStartN300 {
+  margin-right: var(--space-negative-300);
 }
 
-html[dir="rtl"] .marginEndN13 {
-  margin-left: var(--space-negative-1300);
+html[dir="rtl"] .marginEndN300 {
+  margin-left: var(--space-negative-300);
 }
 
-.marginTop13 {
-  margin-top: var(--space-1300);
+.marginTop300 {
+  margin-top: var(--space-300);
 }
 
-.marginBottom13 {
-  margin-bottom: var(--space-1300);
+.marginBottom300 {
+  margin-bottom: var(--space-300);
 }
 
-.marginTopN13 {
-  margin-top: var(--space-negative-1300);
+.marginTopN300 {
+  margin-top: var(--space-negative-300);
 }
 
-.marginBottomN13 {
-  margin-bottom: var(--space-negative-1300);
+.marginBottomN300 {
+  margin-bottom: var(--space-negative-300);
 }
 
-.paddingY13 {
-  padding-bottom: var(--space-1300);
-  padding-top: var(--space-1300);
+.paddingY300 {
+  padding-bottom: var(--space-300);
+  padding-top: var(--space-300);
 }
 
-.paddingX13 {
-  padding-left: var(--space-1300);
-  padding-right: var(--space-1300);
+.paddingX300 {
+  padding-left: var(--space-300);
+  padding-right: var(--space-300);
 }
 
-html:not([dir="rtl"]) .marginStart14 {
-  margin-left: var(--space-1400);
+html:not([dir="rtl"]) .marginStart400 {
+  margin-left: var(--space-400);
 }
 
-html:not([dir="rtl"]) .marginEnd14 {
-  margin-right: var(--space-1400);
+html:not([dir="rtl"]) .marginEnd400 {
+  margin-right: var(--space-400);
 }
 
-html[dir="rtl"] .marginStart14 {
-  margin-right: var(--space-1400);
+html[dir="rtl"] .marginStart400 {
+  margin-right: var(--space-400);
 }
 
-html[dir="rtl"] .marginEnd14 {
-  margin-left: var(--space-1400);
+html[dir="rtl"] .marginEnd400 {
+  margin-left: var(--space-400);
 }
 
-html:not([dir="rtl"]) .marginStartN14 {
-  margin-left: var(--space-negative-1400);
+html:not([dir="rtl"]) .marginStartN400 {
+  margin-left: var(--space-negative-400);
 }
 
-html:not([dir="rtl"]) .marginEndN14 {
-  margin-right: var(--space-negative-1400);
+html:not([dir="rtl"]) .marginEndN400 {
+  margin-right: var(--space-negative-400);
 }
 
-html[dir="rtl"] .marginStartN14 {
-  margin-right: var(--space-negative-1400);
+html[dir="rtl"] .marginStartN400 {
+  margin-right: var(--space-negative-400);
 }
 
-html[dir="rtl"] .marginEndN14 {
-  margin-left: var(--space-negative-1400);
+html[dir="rtl"] .marginEndN400 {
+  margin-left: var(--space-negative-400);
 }
 
-.marginTop14 {
-  margin-top: var(--space-1400);
+.marginTop400 {
+  margin-top: var(--space-400);
 }
 
-.marginBottom14 {
-  margin-bottom: var(--space-1400);
+.marginBottom400 {
+  margin-bottom: var(--space-400);
 }
 
-.marginTopN14 {
-  margin-top: var(--space-negative-1400);
+.marginTopN400 {
+  margin-top: var(--space-negative-400);
 }
 
-.marginBottomN14 {
-  margin-bottom: var(--space-negative-1400);
+.marginBottomN400 {
+  margin-bottom: var(--space-negative-400);
 }
 
-.paddingY14 {
-  padding-bottom: var(--space-1400);
-  padding-top: var(--space-1400);
+.paddingY400 {
+  padding-bottom: var(--space-400);
+  padding-top: var(--space-400);
 }
 
-.paddingX14 {
-  padding-left: var(--space-1400);
-  padding-right: var(--space-1400);
+.paddingX400 {
+  padding-left: var(--space-400);
+  padding-right: var(--space-400);
 }
 
-html:not([dir="rtl"]) .marginStart15 {
-  margin-left: var(--space-1500);
+html:not([dir="rtl"]) .marginStart500 {
+  margin-left: var(--space-500);
 }
 
-html:not([dir="rtl"]) .marginEnd15 {
-  margin-right: var(--space-1500);
+html:not([dir="rtl"]) .marginEnd500 {
+  margin-right: var(--space-500);
 }
 
-html[dir="rtl"] .marginStart15 {
-  margin-right: var(--space-1500);
+html[dir="rtl"] .marginStart500 {
+  margin-right: var(--space-500);
 }
 
-html[dir="rtl"] .marginEnd15 {
-  margin-left: var(--space-1500);
+html[dir="rtl"] .marginEnd500 {
+  margin-left: var(--space-500);
 }
 
-html:not([dir="rtl"]) .marginStartN15 {
-  margin-left: var(--space-negative-1500);
+html:not([dir="rtl"]) .marginStartN500 {
+  margin-left: var(--space-negative-500);
 }
 
-html:not([dir="rtl"]) .marginEndN15 {
-  margin-right: var(--space-negative-1500);
+html:not([dir="rtl"]) .marginEndN500 {
+  margin-right: var(--space-negative-500);
 }
 
-html[dir="rtl"] .marginStartN15 {
-  margin-right: var(--space-negative-1500);
+html[dir="rtl"] .marginStartN500 {
+  margin-right: var(--space-negative-500);
 }
 
-html[dir="rtl"] .marginEndN15 {
-  margin-left: var(--space-negative-1500);
+html[dir="rtl"] .marginEndN500 {
+  margin-left: var(--space-negative-500);
 }
 
-.marginTop15 {
-  margin-top: var(--space-1500);
+.marginTop500 {
+  margin-top: var(--space-500);
 }
 
-.marginBottom15 {
-  margin-bottom: var(--space-1500);
+.marginBottom500 {
+  margin-bottom: var(--space-500);
 }
 
-.marginTopN15 {
-  margin-top: var(--space-negative-1500);
+.marginTopN500 {
+  margin-top: var(--space-negative-500);
 }
 
-.marginBottomN15 {
-  margin-bottom: var(--space-negative-1500);
+.marginBottomN500 {
+  margin-bottom: var(--space-negative-500);
 }
 
-.paddingY15 {
-  padding-bottom: var(--space-1500);
-  padding-top: var(--space-1500);
+.paddingY500 {
+  padding-bottom: var(--space-500);
+  padding-top: var(--space-500);
 }
 
-.paddingX15 {
-  padding-left: var(--space-1500);
-  padding-right: var(--space-1500);
+.paddingX500 {
+  padding-left: var(--space-500);
+  padding-right: var(--space-500);
 }
 
-html:not([dir="rtl"]) .marginStart16 {
-  margin-left: var(--space-1600);
+html:not([dir="rtl"]) .marginStart600 {
+  margin-left: var(--space-600);
 }
 
-html:not([dir="rtl"]) .marginEnd16 {
-  margin-right: var(--space-1600);
+html:not([dir="rtl"]) .marginEnd600 {
+  margin-right: var(--space-600);
 }
 
-html[dir="rtl"] .marginStart16 {
-  margin-right: var(--space-1600);
+html[dir="rtl"] .marginStart600 {
+  margin-right: var(--space-600);
 }
 
-html[dir="rtl"] .marginEnd16 {
-  margin-left: var(--space-1600);
+html[dir="rtl"] .marginEnd600 {
+  margin-left: var(--space-600);
 }
 
-html:not([dir="rtl"]) .marginStartN16 {
-  margin-left: var(--space-negative-1600);
+html:not([dir="rtl"]) .marginStartN600 {
+  margin-left: var(--space-negative-600);
 }
 
-html:not([dir="rtl"]) .marginEndN16 {
-  margin-right: var(--space-negative-1600);
+html:not([dir="rtl"]) .marginEndN600 {
+  margin-right: var(--space-negative-600);
 }
 
-html[dir="rtl"] .marginStartN16 {
-  margin-right: var(--space-negative-1600);
+html[dir="rtl"] .marginStartN600 {
+  margin-right: var(--space-negative-600);
 }
 
-html[dir="rtl"] .marginEndN16 {
-  margin-left: var(--space-negative-1600);
+html[dir="rtl"] .marginEndN600 {
+  margin-left: var(--space-negative-600);
 }
 
-.marginTop16 {
-  margin-top: var(--space-1600);
+.marginTop600 {
+  margin-top: var(--space-600);
 }
 
-.marginBottom16 {
-  margin-bottom: var(--space-1600);
+.marginBottom600 {
+  margin-bottom: var(--space-600);
 }
 
-.marginTopN16 {
-  margin-top: var(--space-negative-1600);
+.marginTopN600 {
+  margin-top: var(--space-negative-600);
 }
 
-.marginBottomN16 {
-  margin-bottom: var(--space-negative-1600);
+.marginBottomN600 {
+  margin-bottom: var(--space-negative-600);
 }
 
-.paddingY16 {
-  padding-bottom: var(--space-1600);
-  padding-top: var(--space-1600);
+.paddingY600 {
+  padding-bottom: var(--space-600);
+  padding-top: var(--space-600);
 }
 
-.paddingX16 {
-  padding-left: var(--space-1600);
-  padding-right: var(--space-1600);
+.paddingX600 {
+  padding-left: var(--space-600);
+  padding-right: var(--space-600);
+}
+
+html:not([dir="rtl"]) .marginStart700 {
+  margin-left: var(--space-700);
+}
+
+html:not([dir="rtl"]) .marginEnd700 {
+  margin-right: var(--space-700);
+}
+
+html[dir="rtl"] .marginStart700 {
+  margin-right: var(--space-700);
+}
+
+html[dir="rtl"] .marginEnd700 {
+  margin-left: var(--space-700);
+}
+
+html:not([dir="rtl"]) .marginStartN700 {
+  margin-left: var(--space-negative-700);
+}
+
+html:not([dir="rtl"]) .marginEndN700 {
+  margin-right: var(--space-negative-700);
+}
+
+html[dir="rtl"] .marginStartN700 {
+  margin-right: var(--space-negative-700);
+}
+
+html[dir="rtl"] .marginEndN700 {
+  margin-left: var(--space-negative-700);
+}
+
+.marginTop700 {
+  margin-top: var(--space-700);
+}
+
+.marginBottom700 {
+  margin-bottom: var(--space-700);
+}
+
+.marginTopN700 {
+  margin-top: var(--space-negative-700);
+}
+
+.marginBottomN700 {
+  margin-bottom: var(--space-negative-700);
+}
+
+.paddingY700 {
+  padding-bottom: var(--space-700);
+  padding-top: var(--space-700);
+}
+
+.paddingX700 {
+  padding-left: var(--space-700);
+  padding-right: var(--space-700);
+}
+
+html:not([dir="rtl"]) .marginStart800 {
+  margin-left: var(--space-800);
+}
+
+html:not([dir="rtl"]) .marginEnd800 {
+  margin-right: var(--space-800);
+}
+
+html[dir="rtl"] .marginStart800 {
+  margin-right: var(--space-800);
+}
+
+html[dir="rtl"] .marginEnd800 {
+  margin-left: var(--space-800);
+}
+
+html:not([dir="rtl"]) .marginStartN800 {
+  margin-left: var(--space-negative-800);
+}
+
+html:not([dir="rtl"]) .marginEndN800 {
+  margin-right: var(--space-negative-800);
+}
+
+html[dir="rtl"] .marginStartN800 {
+  margin-right: var(--space-negative-800);
+}
+
+html[dir="rtl"] .marginEndN800 {
+  margin-left: var(--space-negative-800);
+}
+
+.marginTop800 {
+  margin-top: var(--space-800);
+}
+
+.marginBottom800 {
+  margin-bottom: var(--space-800);
+}
+
+.marginTopN800 {
+  margin-top: var(--space-negative-800);
+}
+
+.marginBottomN800 {
+  margin-bottom: var(--space-negative-800);
+}
+
+.paddingY800 {
+  padding-bottom: var(--space-800);
+  padding-top: var(--space-800);
+}
+
+.paddingX800 {
+  padding-left: var(--space-800);
+  padding-right: var(--space-800);
+}
+
+html:not([dir="rtl"]) .marginStart900 {
+  margin-left: var(--space-900);
+}
+
+html:not([dir="rtl"]) .marginEnd900 {
+  margin-right: var(--space-900);
+}
+
+html[dir="rtl"] .marginStart900 {
+  margin-right: var(--space-900);
+}
+
+html[dir="rtl"] .marginEnd900 {
+  margin-left: var(--space-900);
+}
+
+html:not([dir="rtl"]) .marginStartN900 {
+  margin-left: var(--space-negative-900);
+}
+
+html:not([dir="rtl"]) .marginEndN900 {
+  margin-right: var(--space-negative-900);
+}
+
+html[dir="rtl"] .marginStartN900 {
+  margin-right: var(--space-negative-900);
+}
+
+html[dir="rtl"] .marginEndN900 {
+  margin-left: var(--space-negative-900);
+}
+
+.marginTop900 {
+  margin-top: var(--space-900);
+}
+
+.marginBottom900 {
+  margin-bottom: var(--space-900);
+}
+
+.marginTopN900 {
+  margin-top: var(--space-negative-900);
+}
+
+.marginBottomN900 {
+  margin-bottom: var(--space-negative-900);
+}
+
+.paddingY900 {
+  padding-bottom: var(--space-900);
+  padding-top: var(--space-900);
+}
+
+.paddingX900 {
+  padding-left: var(--space-900);
+  padding-right: var(--space-900);
 }
 
 @media (--g-sm) {
@@ -1052,932 +1226,1106 @@ html[dir="rtl"] .marginEndN16 {
     padding-right: var(--space-0);
   }
 
-  html:not([dir="rtl"]) .smMarginStart1 {
+  html:not([dir="rtl"]) .smMarginStart25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .smMarginEnd25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .smMarginStart25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .smMarginEnd25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .smMarginStartN25 {
+    margin-left: -1px;
+  }
+
+  html:not([dir="rtl"]) .smMarginEndN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .smMarginStartN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .smMarginEndN25 {
+    margin-left: -1px;
+  }
+
+  .smMarginTop25 {
+    margin-top: 1px;
+  }
+
+  .smMarginBottom25 {
+    margin-bottom: 1px;
+  }
+
+  .smMarginTopN25 {
+    margin-top: -1px;
+  }
+
+  .smMarginBottomN25 {
+    margin-bottom: -1px;
+  }
+
+  .smPaddingY25 {
+    padding-bottom: 1px;
+    padding-top: 1px;
+  }
+
+  .smPaddingX25 {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  html:not([dir="rtl"]) .smMarginStart50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .smMarginEnd50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .smMarginStart50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .smMarginEnd50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .smMarginStartN50 {
+    margin-left: -2px;
+  }
+
+  html:not([dir="rtl"]) .smMarginEndN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .smMarginStartN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .smMarginEndN50 {
+    margin-left: -2px;
+  }
+
+  .smMarginTop50 {
+    margin-top: 2px;
+  }
+
+  .smMarginBottom50 {
+    margin-bottom: 2px;
+  }
+
+  .smMarginTopN50 {
+    margin-top: -2px;
+  }
+
+  .smMarginBottomN50 {
+    margin-bottom: -2px;
+  }
+
+  .smPaddingY50 {
+    padding-bottom: 2px;
+    padding-top: 2px;
+  }
+
+  .smPaddingX50 {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  html:not([dir="rtl"]) .smMarginStart100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd1 {
+  html:not([dir="rtl"]) .smMarginEnd100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .smMarginStart1 {
+  html[dir="rtl"] .smMarginStart100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .smMarginEnd1 {
+  html[dir="rtl"] .smMarginEnd100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN1 {
+  html:not([dir="rtl"]) .smMarginStartN100 {
     margin-left: var(--space-negative-100);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN1 {
+  html:not([dir="rtl"]) .smMarginEndN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .smMarginStartN1 {
+  html[dir="rtl"] .smMarginStartN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .smMarginEndN1 {
+  html[dir="rtl"] .smMarginEndN100 {
     margin-left: var(--space-negative-100);
   }
 
-  .smMarginTop1 {
+  .smMarginTop100 {
     margin-top: var(--space-100);
   }
 
-  .smMarginBottom1 {
+  .smMarginBottom100 {
     margin-bottom: var(--space-100);
   }
 
-  .smMarginTopN1 {
+  .smMarginTopN100 {
     margin-top: var(--space-negative-100);
   }
 
-  .smMarginBottomN1 {
+  .smMarginBottomN100 {
     margin-bottom: var(--space-negative-100);
   }
 
-  .smPaddingY1 {
+  .smPaddingY100 {
     padding-bottom: var(--space-100);
     padding-top: var(--space-100);
   }
 
-  .smPaddingX1 {
+  .smPaddingX100 {
     padding-left: var(--space-100);
     padding-right: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .smMarginStart2 {
-    margin-left: var(--space-200);
+  html:not([dir="rtl"]) .smMarginStart150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .smMarginEnd2 {
-    margin-right: var(--space-200);
+  html:not([dir="rtl"]) .smMarginEnd150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .smMarginStart2 {
-    margin-right: var(--space-200);
+  html[dir="rtl"] .smMarginStart150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .smMarginEnd2 {
-    margin-left: var(--space-200);
+  html[dir="rtl"] .smMarginEnd150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .smMarginStartN2 {
-    margin-left: var(--space-negative-200);
+  html:not([dir="rtl"]) .smMarginStartN150 {
+    margin-left: -6px;
   }
 
-  html:not([dir="rtl"]) .smMarginEndN2 {
-    margin-right: var(--space-negative-200);
+  html:not([dir="rtl"]) .smMarginEndN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .smMarginStartN2 {
-    margin-right: var(--space-negative-200);
+  html[dir="rtl"] .smMarginStartN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .smMarginEndN2 {
-    margin-left: var(--space-negative-200);
+  html[dir="rtl"] .smMarginEndN150 {
+    margin-left: -6px;
   }
 
-  .smMarginTop2 {
-    margin-top: var(--space-200);
+  .smMarginTop150 {
+    margin-top: 6px;
   }
 
-  .smMarginBottom2 {
-    margin-bottom: var(--space-200);
+  .smMarginBottom150 {
+    margin-bottom: 6px;
   }
 
-  .smMarginTopN2 {
-    margin-top: var(--space-negative-200);
+  .smMarginTopN150 {
+    margin-top: -6px;
   }
 
-  .smMarginBottomN2 {
-    margin-bottom: var(--space-negative-200);
+  .smMarginBottomN150 {
+    margin-bottom: -6px;
   }
 
-  .smPaddingY2 {
-    padding-bottom: var(--space-200);
-    padding-top: var(--space-200);
+  .smPaddingY150 {
+    padding-bottom: 6px;
+    padding-top: 6px;
   }
 
-  .smPaddingX2 {
-    padding-left: var(--space-200);
-    padding-right: var(--space-200);
+  .smPaddingX150 {
+    padding-left: 6px;
+    padding-right: 6px;
   }
 
-  html:not([dir="rtl"]) .smMarginStart3 {
-    margin-left: var(--space-300);
+  html:not([dir="rtl"]) .smMarginStart1000 {
+    margin-left: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd3 {
-    margin-right: var(--space-300);
+  html:not([dir="rtl"]) .smMarginEnd1000 {
+    margin-right: var(--space-1000);
   }
 
-  html[dir="rtl"] .smMarginStart3 {
-    margin-right: var(--space-300);
+  html[dir="rtl"] .smMarginStart1000 {
+    margin-right: var(--space-1000);
   }
 
-  html[dir="rtl"] .smMarginEnd3 {
-    margin-left: var(--space-300);
+  html[dir="rtl"] .smMarginEnd1000 {
+    margin-left: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN3 {
-    margin-left: var(--space-negative-300);
+  html:not([dir="rtl"]) .smMarginStartN1000 {
+    margin-left: var(--space-negative-1000);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN3 {
-    margin-right: var(--space-negative-300);
+  html:not([dir="rtl"]) .smMarginEndN1000 {
+    margin-right: var(--space-negative-1000);
   }
 
-  html[dir="rtl"] .smMarginStartN3 {
-    margin-right: var(--space-negative-300);
+  html[dir="rtl"] .smMarginStartN1000 {
+    margin-right: var(--space-negative-1000);
   }
 
-  html[dir="rtl"] .smMarginEndN3 {
-    margin-left: var(--space-negative-300);
+  html[dir="rtl"] .smMarginEndN1000 {
+    margin-left: var(--space-negative-1000);
   }
 
-  .smMarginTop3 {
-    margin-top: var(--space-300);
+  .smMarginTop1000 {
+    margin-top: var(--space-1000);
   }
 
-  .smMarginBottom3 {
-    margin-bottom: var(--space-300);
+  .smMarginBottom1000 {
+    margin-bottom: var(--space-1000);
   }
 
-  .smMarginTopN3 {
-    margin-top: var(--space-negative-300);
+  .smMarginTopN1000 {
+    margin-top: var(--space-negative-1000);
   }
 
-  .smMarginBottomN3 {
-    margin-bottom: var(--space-negative-300);
+  .smMarginBottomN1000 {
+    margin-bottom: var(--space-negative-1000);
   }
 
-  .smPaddingY3 {
-    padding-bottom: var(--space-300);
-    padding-top: var(--space-300);
+  .smPaddingY1000 {
+    padding-bottom: var(--space-1000);
+    padding-top: var(--space-1000);
   }
 
-  .smPaddingX3 {
-    padding-left: var(--space-300);
-    padding-right: var(--space-300);
+  .smPaddingX1000 {
+    padding-left: var(--space-1000);
+    padding-right: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .smMarginStart4 {
-    margin-left: var(--space-400);
+  html:not([dir="rtl"]) .smMarginStart1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd4 {
-    margin-right: var(--space-400);
+  html:not([dir="rtl"]) .smMarginEnd1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .smMarginStart4 {
-    margin-right: var(--space-400);
+  html[dir="rtl"] .smMarginStart1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .smMarginEnd4 {
-    margin-left: var(--space-400);
+  html[dir="rtl"] .smMarginEnd1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN4 {
-    margin-left: var(--space-negative-400);
+  html:not([dir="rtl"]) .smMarginStartN1100 {
+    margin-left: var(--space-negative-1100);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN4 {
-    margin-right: var(--space-negative-400);
+  html:not([dir="rtl"]) .smMarginEndN1100 {
+    margin-right: var(--space-negative-1100);
   }
 
-  html[dir="rtl"] .smMarginStartN4 {
-    margin-right: var(--space-negative-400);
+  html[dir="rtl"] .smMarginStartN1100 {
+    margin-right: var(--space-negative-1100);
+  }
+
+  html[dir="rtl"] .smMarginEndN1100 {
+    margin-left: var(--space-negative-1100);
+  }
+
+  .smMarginTop1100 {
+    margin-top: var(--space-1100);
+  }
+
+  .smMarginBottom1100 {
+    margin-bottom: var(--space-1100);
+  }
+
+  .smMarginTopN1100 {
+    margin-top: var(--space-negative-1100);
+  }
+
+  .smMarginBottomN1100 {
+    margin-bottom: var(--space-negative-1100);
+  }
+
+  .smPaddingY1100 {
+    padding-bottom: var(--space-1100);
+    padding-top: var(--space-1100);
+  }
+
+  .smPaddingX1100 {
+    padding-left: var(--space-1100);
+    padding-right: var(--space-1100);
+  }
+
+  html:not([dir="rtl"]) .smMarginStart1200 {
+    margin-left: var(--space-1200);
+  }
+
+  html:not([dir="rtl"]) .smMarginEnd1200 {
+    margin-right: var(--space-1200);
+  }
+
+  html[dir="rtl"] .smMarginStart1200 {
+    margin-right: var(--space-1200);
+  }
+
+  html[dir="rtl"] .smMarginEnd1200 {
+    margin-left: var(--space-1200);
+  }
+
+  html:not([dir="rtl"]) .smMarginStartN1200 {
+    margin-left: var(--space-negative-1200);
+  }
+
+  html:not([dir="rtl"]) .smMarginEndN1200 {
+    margin-right: var(--space-negative-1200);
+  }
+
+  html[dir="rtl"] .smMarginStartN1200 {
+    margin-right: var(--space-negative-1200);
   }
 
-  html[dir="rtl"] .smMarginEndN4 {
-    margin-left: var(--space-negative-400);
+  html[dir="rtl"] .smMarginEndN1200 {
+    margin-left: var(--space-negative-1200);
   }
 
-  .smMarginTop4 {
-    margin-top: var(--space-400);
+  .smMarginTop1200 {
+    margin-top: var(--space-1200);
   }
 
-  .smMarginBottom4 {
-    margin-bottom: var(--space-400);
+  .smMarginBottom1200 {
+    margin-bottom: var(--space-1200);
   }
 
-  .smMarginTopN4 {
-    margin-top: var(--space-negative-400);
+  .smMarginTopN1200 {
+    margin-top: var(--space-negative-1200);
   }
 
-  .smMarginBottomN4 {
-    margin-bottom: var(--space-negative-400);
+  .smMarginBottomN1200 {
+    margin-bottom: var(--space-negative-1200);
   }
 
-  .smPaddingY4 {
-    padding-bottom: var(--space-400);
-    padding-top: var(--space-400);
+  .smPaddingY1200 {
+    padding-bottom: var(--space-1200);
+    padding-top: var(--space-1200);
   }
 
-  .smPaddingX4 {
-    padding-left: var(--space-400);
-    padding-right: var(--space-400);
+  .smPaddingX1200 {
+    padding-left: var(--space-1200);
+    padding-right: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .smMarginStart5 {
-    margin-left: var(--space-500);
+  html:not([dir="rtl"]) .smMarginStart1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd5 {
-    margin-right: var(--space-500);
+  html:not([dir="rtl"]) .smMarginEnd1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .smMarginStart5 {
-    margin-right: var(--space-500);
+  html[dir="rtl"] .smMarginStart1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .smMarginEnd5 {
-    margin-left: var(--space-500);
+  html[dir="rtl"] .smMarginEnd1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN5 {
-    margin-left: var(--space-negative-500);
+  html:not([dir="rtl"]) .smMarginStartN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN5 {
-    margin-right: var(--space-negative-500);
+  html:not([dir="rtl"]) .smMarginEndN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .smMarginStartN5 {
-    margin-right: var(--space-negative-500);
+  html[dir="rtl"] .smMarginStartN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .smMarginEndN5 {
-    margin-left: var(--space-negative-500);
+  html[dir="rtl"] .smMarginEndN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  .smMarginTop5 {
-    margin-top: var(--space-500);
+  .smMarginTop1300 {
+    margin-top: var(--space-1300);
   }
 
-  .smMarginBottom5 {
-    margin-bottom: var(--space-500);
+  .smMarginBottom1300 {
+    margin-bottom: var(--space-1300);
   }
 
-  .smMarginTopN5 {
-    margin-top: var(--space-negative-500);
+  .smMarginTopN1300 {
+    margin-top: var(--space-negative-1300);
   }
 
-  .smMarginBottomN5 {
-    margin-bottom: var(--space-negative-500);
+  .smMarginBottomN1300 {
+    margin-bottom: var(--space-negative-1300);
   }
 
-  .smPaddingY5 {
-    padding-bottom: var(--space-500);
-    padding-top: var(--space-500);
+  .smPaddingY1300 {
+    padding-bottom: var(--space-1300);
+    padding-top: var(--space-1300);
   }
 
-  .smPaddingX5 {
-    padding-left: var(--space-500);
-    padding-right: var(--space-500);
+  .smPaddingX1300 {
+    padding-left: var(--space-1300);
+    padding-right: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .smMarginStart6 {
-    margin-left: var(--space-600);
+  html:not([dir="rtl"]) .smMarginStart1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd6 {
-    margin-right: var(--space-600);
+  html:not([dir="rtl"]) .smMarginEnd1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .smMarginStart6 {
-    margin-right: var(--space-600);
+  html[dir="rtl"] .smMarginStart1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .smMarginEnd6 {
-    margin-left: var(--space-600);
+  html[dir="rtl"] .smMarginEnd1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN6 {
-    margin-left: var(--space-negative-600);
+  html:not([dir="rtl"]) .smMarginStartN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN6 {
-    margin-right: var(--space-negative-600);
+  html:not([dir="rtl"]) .smMarginEndN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .smMarginStartN6 {
-    margin-right: var(--space-negative-600);
+  html[dir="rtl"] .smMarginStartN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .smMarginEndN6 {
-    margin-left: var(--space-negative-600);
+  html[dir="rtl"] .smMarginEndN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  .smMarginTop6 {
-    margin-top: var(--space-600);
+  .smMarginTop1400 {
+    margin-top: var(--space-1400);
   }
 
-  .smMarginBottom6 {
-    margin-bottom: var(--space-600);
+  .smMarginBottom1400 {
+    margin-bottom: var(--space-1400);
   }
 
-  .smMarginTopN6 {
-    margin-top: var(--space-negative-600);
+  .smMarginTopN1400 {
+    margin-top: var(--space-negative-1400);
   }
 
-  .smMarginBottomN6 {
-    margin-bottom: var(--space-negative-600);
+  .smMarginBottomN1400 {
+    margin-bottom: var(--space-negative-1400);
   }
 
-  .smPaddingY6 {
-    padding-bottom: var(--space-600);
-    padding-top: var(--space-600);
+  .smPaddingY1400 {
+    padding-bottom: var(--space-1400);
+    padding-top: var(--space-1400);
   }
 
-  .smPaddingX6 {
-    padding-left: var(--space-600);
-    padding-right: var(--space-600);
+  .smPaddingX1400 {
+    padding-left: var(--space-1400);
+    padding-right: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .smMarginStart7 {
-    margin-left: var(--space-700);
+  html:not([dir="rtl"]) .smMarginStart1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd7 {
-    margin-right: var(--space-700);
+  html:not([dir="rtl"]) .smMarginEnd1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .smMarginStart7 {
-    margin-right: var(--space-700);
+  html[dir="rtl"] .smMarginStart1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .smMarginEnd7 {
-    margin-left: var(--space-700);
+  html[dir="rtl"] .smMarginEnd1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN7 {
-    margin-left: var(--space-negative-700);
+  html:not([dir="rtl"]) .smMarginStartN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN7 {
-    margin-right: var(--space-negative-700);
+  html:not([dir="rtl"]) .smMarginEndN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .smMarginStartN7 {
-    margin-right: var(--space-negative-700);
+  html[dir="rtl"] .smMarginStartN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .smMarginEndN7 {
-    margin-left: var(--space-negative-700);
+  html[dir="rtl"] .smMarginEndN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  .smMarginTop7 {
-    margin-top: var(--space-700);
+  .smMarginTop1500 {
+    margin-top: var(--space-1500);
   }
 
-  .smMarginBottom7 {
-    margin-bottom: var(--space-700);
+  .smMarginBottom1500 {
+    margin-bottom: var(--space-1500);
   }
 
-  .smMarginTopN7 {
-    margin-top: var(--space-negative-700);
+  .smMarginTopN1500 {
+    margin-top: var(--space-negative-1500);
   }
 
-  .smMarginBottomN7 {
-    margin-bottom: var(--space-negative-700);
+  .smMarginBottomN1500 {
+    margin-bottom: var(--space-negative-1500);
   }
 
-  .smPaddingY7 {
-    padding-bottom: var(--space-700);
-    padding-top: var(--space-700);
+  .smPaddingY1500 {
+    padding-bottom: var(--space-1500);
+    padding-top: var(--space-1500);
   }
 
-  .smPaddingX7 {
-    padding-left: var(--space-700);
-    padding-right: var(--space-700);
+  .smPaddingX1500 {
+    padding-left: var(--space-1500);
+    padding-right: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .smMarginStart8 {
-    margin-left: var(--space-800);
+  html:not([dir="rtl"]) .smMarginStart1600 {
+    margin-left: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd8 {
-    margin-right: var(--space-800);
+  html:not([dir="rtl"]) .smMarginEnd1600 {
+    margin-right: var(--space-1600);
   }
 
-  html[dir="rtl"] .smMarginStart8 {
-    margin-right: var(--space-800);
+  html[dir="rtl"] .smMarginStart1600 {
+    margin-right: var(--space-1600);
   }
 
-  html[dir="rtl"] .smMarginEnd8 {
-    margin-left: var(--space-800);
+  html[dir="rtl"] .smMarginEnd1600 {
+    margin-left: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN8 {
-    margin-left: var(--space-negative-800);
+  html:not([dir="rtl"]) .smMarginStartN1600 {
+    margin-left: var(--space-negative-1600);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN8 {
-    margin-right: var(--space-negative-800);
+  html:not([dir="rtl"]) .smMarginEndN1600 {
+    margin-right: var(--space-negative-1600);
   }
 
-  html[dir="rtl"] .smMarginStartN8 {
-    margin-right: var(--space-negative-800);
+  html[dir="rtl"] .smMarginStartN1600 {
+    margin-right: var(--space-negative-1600);
   }
 
-  html[dir="rtl"] .smMarginEndN8 {
-    margin-left: var(--space-negative-800);
+  html[dir="rtl"] .smMarginEndN1600 {
+    margin-left: var(--space-negative-1600);
   }
 
-  .smMarginTop8 {
-    margin-top: var(--space-800);
+  .smMarginTop1600 {
+    margin-top: var(--space-1600);
   }
 
-  .smMarginBottom8 {
-    margin-bottom: var(--space-800);
+  .smMarginBottom1600 {
+    margin-bottom: var(--space-1600);
   }
 
-  .smMarginTopN8 {
-    margin-top: var(--space-negative-800);
+  .smMarginTopN1600 {
+    margin-top: var(--space-negative-1600);
   }
 
-  .smMarginBottomN8 {
-    margin-bottom: var(--space-negative-800);
+  .smMarginBottomN1600 {
+    margin-bottom: var(--space-negative-1600);
   }
 
-  .smPaddingY8 {
-    padding-bottom: var(--space-800);
-    padding-top: var(--space-800);
+  .smPaddingY1600 {
+    padding-bottom: var(--space-1600);
+    padding-top: var(--space-1600);
   }
 
-  .smPaddingX8 {
-    padding-left: var(--space-800);
-    padding-right: var(--space-800);
+  .smPaddingX1600 {
+    padding-left: var(--space-1600);
+    padding-right: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .smMarginStart9 {
-    margin-left: var(--space-900);
+  html:not([dir="rtl"]) .smMarginStart200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd9 {
-    margin-right: var(--space-900);
+  html:not([dir="rtl"]) .smMarginEnd200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .smMarginStart9 {
-    margin-right: var(--space-900);
+  html[dir="rtl"] .smMarginStart200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .smMarginEnd9 {
-    margin-left: var(--space-900);
+  html[dir="rtl"] .smMarginEnd200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN9 {
-    margin-left: var(--space-negative-900);
+  html:not([dir="rtl"]) .smMarginStartN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN9 {
-    margin-right: var(--space-negative-900);
+  html:not([dir="rtl"]) .smMarginEndN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .smMarginStartN9 {
-    margin-right: var(--space-negative-900);
+  html[dir="rtl"] .smMarginStartN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .smMarginEndN9 {
-    margin-left: var(--space-negative-900);
+  html[dir="rtl"] .smMarginEndN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  .smMarginTop9 {
-    margin-top: var(--space-900);
+  .smMarginTop200 {
+    margin-top: var(--space-200);
   }
 
-  .smMarginBottom9 {
-    margin-bottom: var(--space-900);
+  .smMarginBottom200 {
+    margin-bottom: var(--space-200);
   }
 
-  .smMarginTopN9 {
-    margin-top: var(--space-negative-900);
+  .smMarginTopN200 {
+    margin-top: var(--space-negative-200);
   }
 
-  .smMarginBottomN9 {
-    margin-bottom: var(--space-negative-900);
+  .smMarginBottomN200 {
+    margin-bottom: var(--space-negative-200);
   }
 
-  .smPaddingY9 {
-    padding-bottom: var(--space-900);
-    padding-top: var(--space-900);
+  .smPaddingY200 {
+    padding-bottom: var(--space-200);
+    padding-top: var(--space-200);
   }
 
-  .smPaddingX9 {
-    padding-left: var(--space-900);
-    padding-right: var(--space-900);
+  .smPaddingX200 {
+    padding-left: var(--space-200);
+    padding-right: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .smMarginStart10 {
-    margin-left: var(--space-1000);
+  html:not([dir="rtl"]) .smMarginStart300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd10 {
-    margin-right: var(--space-1000);
+  html:not([dir="rtl"]) .smMarginEnd300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .smMarginStart10 {
-    margin-right: var(--space-1000);
+  html[dir="rtl"] .smMarginStart300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .smMarginEnd10 {
-    margin-left: var(--space-1000);
+  html[dir="rtl"] .smMarginEnd300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN10 {
-    margin-left: var(--space-negative-1000);
+  html:not([dir="rtl"]) .smMarginStartN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN10 {
-    margin-right: var(--space-negative-1000);
+  html:not([dir="rtl"]) .smMarginEndN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .smMarginStartN10 {
-    margin-right: var(--space-negative-1000);
+  html[dir="rtl"] .smMarginStartN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .smMarginEndN10 {
-    margin-left: var(--space-negative-1000);
+  html[dir="rtl"] .smMarginEndN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  .smMarginTop10 {
-    margin-top: var(--space-1000);
+  .smMarginTop300 {
+    margin-top: var(--space-300);
   }
 
-  .smMarginBottom10 {
-    margin-bottom: var(--space-1000);
+  .smMarginBottom300 {
+    margin-bottom: var(--space-300);
   }
 
-  .smMarginTopN10 {
-    margin-top: var(--space-negative-1000);
+  .smMarginTopN300 {
+    margin-top: var(--space-negative-300);
   }
 
-  .smMarginBottomN10 {
-    margin-bottom: var(--space-negative-1000);
+  .smMarginBottomN300 {
+    margin-bottom: var(--space-negative-300);
   }
 
-  .smPaddingY10 {
-    padding-bottom: var(--space-1000);
-    padding-top: var(--space-1000);
+  .smPaddingY300 {
+    padding-bottom: var(--space-300);
+    padding-top: var(--space-300);
   }
 
-  .smPaddingX10 {
-    padding-left: var(--space-1000);
-    padding-right: var(--space-1000);
+  .smPaddingX300 {
+    padding-left: var(--space-300);
+    padding-right: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .smMarginStart11 {
-    margin-left: var(--space-1100);
+  html:not([dir="rtl"]) .smMarginStart400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd11 {
-    margin-right: var(--space-1100);
+  html:not([dir="rtl"]) .smMarginEnd400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .smMarginStart11 {
-    margin-right: var(--space-1100);
+  html[dir="rtl"] .smMarginStart400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .smMarginEnd11 {
-    margin-left: var(--space-1100);
+  html[dir="rtl"] .smMarginEnd400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN11 {
-    margin-left: var(--space-negative-1100);
+  html:not([dir="rtl"]) .smMarginStartN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN11 {
-    margin-right: var(--space-negative-1100);
+  html:not([dir="rtl"]) .smMarginEndN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .smMarginStartN11 {
-    margin-right: var(--space-negative-1100);
+  html[dir="rtl"] .smMarginStartN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .smMarginEndN11 {
-    margin-left: var(--space-negative-1100);
+  html[dir="rtl"] .smMarginEndN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  .smMarginTop11 {
-    margin-top: var(--space-1100);
+  .smMarginTop400 {
+    margin-top: var(--space-400);
   }
 
-  .smMarginBottom11 {
-    margin-bottom: var(--space-1100);
+  .smMarginBottom400 {
+    margin-bottom: var(--space-400);
   }
 
-  .smMarginTopN11 {
-    margin-top: var(--space-negative-1100);
+  .smMarginTopN400 {
+    margin-top: var(--space-negative-400);
   }
 
-  .smMarginBottomN11 {
-    margin-bottom: var(--space-negative-1100);
+  .smMarginBottomN400 {
+    margin-bottom: var(--space-negative-400);
   }
 
-  .smPaddingY11 {
-    padding-bottom: var(--space-1100);
-    padding-top: var(--space-1100);
+  .smPaddingY400 {
+    padding-bottom: var(--space-400);
+    padding-top: var(--space-400);
   }
 
-  .smPaddingX11 {
-    padding-left: var(--space-1100);
-    padding-right: var(--space-1100);
+  .smPaddingX400 {
+    padding-left: var(--space-400);
+    padding-right: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .smMarginStart12 {
-    margin-left: var(--space-1200);
+  html:not([dir="rtl"]) .smMarginStart500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd12 {
-    margin-right: var(--space-1200);
+  html:not([dir="rtl"]) .smMarginEnd500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .smMarginStart12 {
-    margin-right: var(--space-1200);
+  html[dir="rtl"] .smMarginStart500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .smMarginEnd12 {
-    margin-left: var(--space-1200);
+  html[dir="rtl"] .smMarginEnd500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN12 {
-    margin-left: var(--space-negative-1200);
+  html:not([dir="rtl"]) .smMarginStartN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN12 {
-    margin-right: var(--space-negative-1200);
+  html:not([dir="rtl"]) .smMarginEndN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .smMarginStartN12 {
-    margin-right: var(--space-negative-1200);
+  html[dir="rtl"] .smMarginStartN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .smMarginEndN12 {
-    margin-left: var(--space-negative-1200);
+  html[dir="rtl"] .smMarginEndN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  .smMarginTop12 {
-    margin-top: var(--space-1200);
+  .smMarginTop500 {
+    margin-top: var(--space-500);
   }
 
-  .smMarginBottom12 {
-    margin-bottom: var(--space-1200);
+  .smMarginBottom500 {
+    margin-bottom: var(--space-500);
   }
 
-  .smMarginTopN12 {
-    margin-top: var(--space-negative-1200);
+  .smMarginTopN500 {
+    margin-top: var(--space-negative-500);
   }
 
-  .smMarginBottomN12 {
-    margin-bottom: var(--space-negative-1200);
+  .smMarginBottomN500 {
+    margin-bottom: var(--space-negative-500);
   }
 
-  .smPaddingY12 {
-    padding-bottom: var(--space-1200);
-    padding-top: var(--space-1200);
+  .smPaddingY500 {
+    padding-bottom: var(--space-500);
+    padding-top: var(--space-500);
   }
 
-  .smPaddingX12 {
-    padding-left: var(--space-1200);
-    padding-right: var(--space-1200);
+  .smPaddingX500 {
+    padding-left: var(--space-500);
+    padding-right: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .smMarginStart13 {
-    margin-left: var(--space-1300);
+  html:not([dir="rtl"]) .smMarginStart600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd13 {
-    margin-right: var(--space-1300);
+  html:not([dir="rtl"]) .smMarginEnd600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .smMarginStart13 {
-    margin-right: var(--space-1300);
+  html[dir="rtl"] .smMarginStart600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .smMarginEnd13 {
-    margin-left: var(--space-1300);
+  html[dir="rtl"] .smMarginEnd600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN13 {
-    margin-left: var(--space-negative-1300);
+  html:not([dir="rtl"]) .smMarginStartN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN13 {
-    margin-right: var(--space-negative-1300);
+  html:not([dir="rtl"]) .smMarginEndN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .smMarginStartN13 {
-    margin-right: var(--space-negative-1300);
+  html[dir="rtl"] .smMarginStartN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .smMarginEndN13 {
-    margin-left: var(--space-negative-1300);
+  html[dir="rtl"] .smMarginEndN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  .smMarginTop13 {
-    margin-top: var(--space-1300);
+  .smMarginTop600 {
+    margin-top: var(--space-600);
   }
 
-  .smMarginBottom13 {
-    margin-bottom: var(--space-1300);
+  .smMarginBottom600 {
+    margin-bottom: var(--space-600);
   }
 
-  .smMarginTopN13 {
-    margin-top: var(--space-negative-1300);
+  .smMarginTopN600 {
+    margin-top: var(--space-negative-600);
   }
 
-  .smMarginBottomN13 {
-    margin-bottom: var(--space-negative-1300);
+  .smMarginBottomN600 {
+    margin-bottom: var(--space-negative-600);
   }
 
-  .smPaddingY13 {
-    padding-bottom: var(--space-1300);
-    padding-top: var(--space-1300);
+  .smPaddingY600 {
+    padding-bottom: var(--space-600);
+    padding-top: var(--space-600);
   }
 
-  .smPaddingX13 {
-    padding-left: var(--space-1300);
-    padding-right: var(--space-1300);
+  .smPaddingX600 {
+    padding-left: var(--space-600);
+    padding-right: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .smMarginStart14 {
-    margin-left: var(--space-1400);
+  html:not([dir="rtl"]) .smMarginStart700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd14 {
-    margin-right: var(--space-1400);
+  html:not([dir="rtl"]) .smMarginEnd700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .smMarginStart14 {
-    margin-right: var(--space-1400);
+  html[dir="rtl"] .smMarginStart700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .smMarginEnd14 {
-    margin-left: var(--space-1400);
+  html[dir="rtl"] .smMarginEnd700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN14 {
-    margin-left: var(--space-negative-1400);
+  html:not([dir="rtl"]) .smMarginStartN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN14 {
-    margin-right: var(--space-negative-1400);
+  html:not([dir="rtl"]) .smMarginEndN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .smMarginStartN14 {
-    margin-right: var(--space-negative-1400);
+  html[dir="rtl"] .smMarginStartN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .smMarginEndN14 {
-    margin-left: var(--space-negative-1400);
+  html[dir="rtl"] .smMarginEndN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  .smMarginTop14 {
-    margin-top: var(--space-1400);
+  .smMarginTop700 {
+    margin-top: var(--space-700);
   }
 
-  .smMarginBottom14 {
-    margin-bottom: var(--space-1400);
+  .smMarginBottom700 {
+    margin-bottom: var(--space-700);
   }
 
-  .smMarginTopN14 {
-    margin-top: var(--space-negative-1400);
+  .smMarginTopN700 {
+    margin-top: var(--space-negative-700);
   }
 
-  .smMarginBottomN14 {
-    margin-bottom: var(--space-negative-1400);
+  .smMarginBottomN700 {
+    margin-bottom: var(--space-negative-700);
   }
 
-  .smPaddingY14 {
-    padding-bottom: var(--space-1400);
-    padding-top: var(--space-1400);
+  .smPaddingY700 {
+    padding-bottom: var(--space-700);
+    padding-top: var(--space-700);
   }
 
-  .smPaddingX14 {
-    padding-left: var(--space-1400);
-    padding-right: var(--space-1400);
+  .smPaddingX700 {
+    padding-left: var(--space-700);
+    padding-right: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .smMarginStart15 {
-    margin-left: var(--space-1500);
+  html:not([dir="rtl"]) .smMarginStart800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd15 {
-    margin-right: var(--space-1500);
+  html:not([dir="rtl"]) .smMarginEnd800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .smMarginStart15 {
-    margin-right: var(--space-1500);
+  html[dir="rtl"] .smMarginStart800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .smMarginEnd15 {
-    margin-left: var(--space-1500);
+  html[dir="rtl"] .smMarginEnd800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN15 {
-    margin-left: var(--space-negative-1500);
+  html:not([dir="rtl"]) .smMarginStartN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN15 {
-    margin-right: var(--space-negative-1500);
+  html:not([dir="rtl"]) .smMarginEndN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .smMarginStartN15 {
-    margin-right: var(--space-negative-1500);
+  html[dir="rtl"] .smMarginStartN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .smMarginEndN15 {
-    margin-left: var(--space-negative-1500);
+  html[dir="rtl"] .smMarginEndN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  .smMarginTop15 {
-    margin-top: var(--space-1500);
+  .smMarginTop800 {
+    margin-top: var(--space-800);
   }
 
-  .smMarginBottom15 {
-    margin-bottom: var(--space-1500);
+  .smMarginBottom800 {
+    margin-bottom: var(--space-800);
   }
 
-  .smMarginTopN15 {
-    margin-top: var(--space-negative-1500);
+  .smMarginTopN800 {
+    margin-top: var(--space-negative-800);
   }
 
-  .smMarginBottomN15 {
-    margin-bottom: var(--space-negative-1500);
+  .smMarginBottomN800 {
+    margin-bottom: var(--space-negative-800);
   }
 
-  .smPaddingY15 {
-    padding-bottom: var(--space-1500);
-    padding-top: var(--space-1500);
+  .smPaddingY800 {
+    padding-bottom: var(--space-800);
+    padding-top: var(--space-800);
   }
 
-  .smPaddingX15 {
-    padding-left: var(--space-1500);
-    padding-right: var(--space-1500);
+  .smPaddingX800 {
+    padding-left: var(--space-800);
+    padding-right: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .smMarginStart16 {
-    margin-left: var(--space-1600);
+  html:not([dir="rtl"]) .smMarginStart900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .smMarginEnd16 {
-    margin-right: var(--space-1600);
+  html:not([dir="rtl"]) .smMarginEnd900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .smMarginStart16 {
-    margin-right: var(--space-1600);
+  html[dir="rtl"] .smMarginStart900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .smMarginEnd16 {
-    margin-left: var(--space-1600);
+  html[dir="rtl"] .smMarginEnd900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .smMarginStartN16 {
-    margin-left: var(--space-negative-1600);
+  html:not([dir="rtl"]) .smMarginStartN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  html:not([dir="rtl"]) .smMarginEndN16 {
-    margin-right: var(--space-negative-1600);
+  html:not([dir="rtl"]) .smMarginEndN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .smMarginStartN16 {
-    margin-right: var(--space-negative-1600);
+  html[dir="rtl"] .smMarginStartN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .smMarginEndN16 {
-    margin-left: var(--space-negative-1600);
+  html[dir="rtl"] .smMarginEndN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  .smMarginTop16 {
-    margin-top: var(--space-1600);
+  .smMarginTop900 {
+    margin-top: var(--space-900);
   }
 
-  .smMarginBottom16 {
-    margin-bottom: var(--space-1600);
+  .smMarginBottom900 {
+    margin-bottom: var(--space-900);
   }
 
-  .smMarginTopN16 {
-    margin-top: var(--space-negative-1600);
+  .smMarginTopN900 {
+    margin-top: var(--space-negative-900);
   }
 
-  .smMarginBottomN16 {
-    margin-bottom: var(--space-negative-1600);
+  .smMarginBottomN900 {
+    margin-bottom: var(--space-negative-900);
   }
 
-  .smPaddingY16 {
-    padding-bottom: var(--space-1600);
-    padding-top: var(--space-1600);
+  .smPaddingY900 {
+    padding-bottom: var(--space-900);
+    padding-top: var(--space-900);
   }
 
-  .smPaddingX16 {
-    padding-left: var(--space-1600);
-    padding-right: var(--space-1600);
+  .smPaddingX900 {
+    padding-left: var(--space-900);
+    padding-right: var(--space-900);
   }
 }
 
@@ -2042,932 +2390,1106 @@ html[dir="rtl"] .marginEndN16 {
     padding-right: var(--space-0);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart1 {
+  html:not([dir="rtl"]) .mdMarginStart25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginEnd25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .mdMarginStart25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .mdMarginEnd25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginStartN25 {
+    margin-left: -1px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginEndN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .mdMarginStartN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .mdMarginEndN25 {
+    margin-left: -1px;
+  }
+
+  .mdMarginTop25 {
+    margin-top: 1px;
+  }
+
+  .mdMarginBottom25 {
+    margin-bottom: 1px;
+  }
+
+  .mdMarginTopN25 {
+    margin-top: -1px;
+  }
+
+  .mdMarginBottomN25 {
+    margin-bottom: -1px;
+  }
+
+  .mdPaddingY25 {
+    padding-bottom: 1px;
+    padding-top: 1px;
+  }
+
+  .mdPaddingX25 {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginStart50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginEnd50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .mdMarginStart50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .mdMarginEnd50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginStartN50 {
+    margin-left: -2px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginEndN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .mdMarginStartN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .mdMarginEndN50 {
+    margin-left: -2px;
+  }
+
+  .mdMarginTop50 {
+    margin-top: 2px;
+  }
+
+  .mdMarginBottom50 {
+    margin-bottom: 2px;
+  }
+
+  .mdMarginTopN50 {
+    margin-top: -2px;
+  }
+
+  .mdMarginBottomN50 {
+    margin-bottom: -2px;
+  }
+
+  .mdPaddingY50 {
+    padding-bottom: 2px;
+    padding-top: 2px;
+  }
+
+  .mdPaddingX50 {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginStart100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd1 {
+  html:not([dir="rtl"]) .mdMarginEnd100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .mdMarginStart1 {
+  html[dir="rtl"] .mdMarginStart100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .mdMarginEnd1 {
+  html[dir="rtl"] .mdMarginEnd100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN1 {
+  html:not([dir="rtl"]) .mdMarginStartN100 {
     margin-left: var(--space-negative-100);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN1 {
+  html:not([dir="rtl"]) .mdMarginEndN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .mdMarginStartN1 {
+  html[dir="rtl"] .mdMarginStartN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .mdMarginEndN1 {
+  html[dir="rtl"] .mdMarginEndN100 {
     margin-left: var(--space-negative-100);
   }
 
-  .mdMarginTop1 {
+  .mdMarginTop100 {
     margin-top: var(--space-100);
   }
 
-  .mdMarginBottom1 {
+  .mdMarginBottom100 {
     margin-bottom: var(--space-100);
   }
 
-  .mdMarginTopN1 {
+  .mdMarginTopN100 {
     margin-top: var(--space-negative-100);
   }
 
-  .mdMarginBottomN1 {
+  .mdMarginBottomN100 {
     margin-bottom: var(--space-negative-100);
   }
 
-  .mdPaddingY1 {
+  .mdPaddingY100 {
     padding-bottom: var(--space-100);
     padding-top: var(--space-100);
   }
 
-  .mdPaddingX1 {
+  .mdPaddingX100 {
     padding-left: var(--space-100);
     padding-right: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart2 {
-    margin-left: var(--space-200);
+  html:not([dir="rtl"]) .mdMarginStart150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd2 {
-    margin-right: var(--space-200);
+  html:not([dir="rtl"]) .mdMarginEnd150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .mdMarginStart2 {
-    margin-right: var(--space-200);
+  html[dir="rtl"] .mdMarginStart150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .mdMarginEnd2 {
-    margin-left: var(--space-200);
+  html[dir="rtl"] .mdMarginEnd150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN2 {
-    margin-left: var(--space-negative-200);
+  html:not([dir="rtl"]) .mdMarginStartN150 {
+    margin-left: -6px;
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN2 {
-    margin-right: var(--space-negative-200);
+  html:not([dir="rtl"]) .mdMarginEndN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .mdMarginStartN2 {
-    margin-right: var(--space-negative-200);
+  html[dir="rtl"] .mdMarginStartN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .mdMarginEndN2 {
-    margin-left: var(--space-negative-200);
+  html[dir="rtl"] .mdMarginEndN150 {
+    margin-left: -6px;
   }
 
-  .mdMarginTop2 {
-    margin-top: var(--space-200);
+  .mdMarginTop150 {
+    margin-top: 6px;
   }
 
-  .mdMarginBottom2 {
-    margin-bottom: var(--space-200);
+  .mdMarginBottom150 {
+    margin-bottom: 6px;
   }
 
-  .mdMarginTopN2 {
-    margin-top: var(--space-negative-200);
+  .mdMarginTopN150 {
+    margin-top: -6px;
   }
 
-  .mdMarginBottomN2 {
-    margin-bottom: var(--space-negative-200);
+  .mdMarginBottomN150 {
+    margin-bottom: -6px;
   }
 
-  .mdPaddingY2 {
-    padding-bottom: var(--space-200);
-    padding-top: var(--space-200);
+  .mdPaddingY150 {
+    padding-bottom: 6px;
+    padding-top: 6px;
+  }
+
+  .mdPaddingX150 {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  html:not([dir="rtl"]) .mdMarginStart1000 {
+    margin-left: var(--space-1000);
+  }
+
+  html:not([dir="rtl"]) .mdMarginEnd1000 {
+    margin-right: var(--space-1000);
+  }
+
+  html[dir="rtl"] .mdMarginStart1000 {
+    margin-right: var(--space-1000);
+  }
+
+  html[dir="rtl"] .mdMarginEnd1000 {
+    margin-left: var(--space-1000);
+  }
+
+  html:not([dir="rtl"]) .mdMarginStartN1000 {
+    margin-left: var(--space-negative-1000);
+  }
+
+  html:not([dir="rtl"]) .mdMarginEndN1000 {
+    margin-right: var(--space-negative-1000);
+  }
+
+  html[dir="rtl"] .mdMarginStartN1000 {
+    margin-right: var(--space-negative-1000);
+  }
+
+  html[dir="rtl"] .mdMarginEndN1000 {
+    margin-left: var(--space-negative-1000);
+  }
+
+  .mdMarginTop1000 {
+    margin-top: var(--space-1000);
+  }
+
+  .mdMarginBottom1000 {
+    margin-bottom: var(--space-1000);
+  }
+
+  .mdMarginTopN1000 {
+    margin-top: var(--space-negative-1000);
+  }
+
+  .mdMarginBottomN1000 {
+    margin-bottom: var(--space-negative-1000);
+  }
+
+  .mdPaddingY1000 {
+    padding-bottom: var(--space-1000);
+    padding-top: var(--space-1000);
   }
 
-  .mdPaddingX2 {
-    padding-left: var(--space-200);
-    padding-right: var(--space-200);
+  .mdPaddingX1000 {
+    padding-left: var(--space-1000);
+    padding-right: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart3 {
-    margin-left: var(--space-300);
+  html:not([dir="rtl"]) .mdMarginStart1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd3 {
-    margin-right: var(--space-300);
+  html:not([dir="rtl"]) .mdMarginEnd1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .mdMarginStart3 {
-    margin-right: var(--space-300);
+  html[dir="rtl"] .mdMarginStart1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .mdMarginEnd3 {
-    margin-left: var(--space-300);
+  html[dir="rtl"] .mdMarginEnd1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN3 {
-    margin-left: var(--space-negative-300);
+  html:not([dir="rtl"]) .mdMarginStartN1100 {
+    margin-left: var(--space-negative-1100);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN3 {
-    margin-right: var(--space-negative-300);
+  html:not([dir="rtl"]) .mdMarginEndN1100 {
+    margin-right: var(--space-negative-1100);
   }
 
-  html[dir="rtl"] .mdMarginStartN3 {
-    margin-right: var(--space-negative-300);
+  html[dir="rtl"] .mdMarginStartN1100 {
+    margin-right: var(--space-negative-1100);
   }
 
-  html[dir="rtl"] .mdMarginEndN3 {
-    margin-left: var(--space-negative-300);
+  html[dir="rtl"] .mdMarginEndN1100 {
+    margin-left: var(--space-negative-1100);
   }
 
-  .mdMarginTop3 {
-    margin-top: var(--space-300);
+  .mdMarginTop1100 {
+    margin-top: var(--space-1100);
   }
 
-  .mdMarginBottom3 {
-    margin-bottom: var(--space-300);
+  .mdMarginBottom1100 {
+    margin-bottom: var(--space-1100);
   }
 
-  .mdMarginTopN3 {
-    margin-top: var(--space-negative-300);
+  .mdMarginTopN1100 {
+    margin-top: var(--space-negative-1100);
   }
 
-  .mdMarginBottomN3 {
-    margin-bottom: var(--space-negative-300);
+  .mdMarginBottomN1100 {
+    margin-bottom: var(--space-negative-1100);
   }
 
-  .mdPaddingY3 {
-    padding-bottom: var(--space-300);
-    padding-top: var(--space-300);
+  .mdPaddingY1100 {
+    padding-bottom: var(--space-1100);
+    padding-top: var(--space-1100);
   }
 
-  .mdPaddingX3 {
-    padding-left: var(--space-300);
-    padding-right: var(--space-300);
+  .mdPaddingX1100 {
+    padding-left: var(--space-1100);
+    padding-right: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart4 {
-    margin-left: var(--space-400);
+  html:not([dir="rtl"]) .mdMarginStart1200 {
+    margin-left: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd4 {
-    margin-right: var(--space-400);
+  html:not([dir="rtl"]) .mdMarginEnd1200 {
+    margin-right: var(--space-1200);
   }
 
-  html[dir="rtl"] .mdMarginStart4 {
-    margin-right: var(--space-400);
+  html[dir="rtl"] .mdMarginStart1200 {
+    margin-right: var(--space-1200);
   }
 
-  html[dir="rtl"] .mdMarginEnd4 {
-    margin-left: var(--space-400);
+  html[dir="rtl"] .mdMarginEnd1200 {
+    margin-left: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN4 {
-    margin-left: var(--space-negative-400);
+  html:not([dir="rtl"]) .mdMarginStartN1200 {
+    margin-left: var(--space-negative-1200);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN4 {
-    margin-right: var(--space-negative-400);
+  html:not([dir="rtl"]) .mdMarginEndN1200 {
+    margin-right: var(--space-negative-1200);
   }
 
-  html[dir="rtl"] .mdMarginStartN4 {
-    margin-right: var(--space-negative-400);
+  html[dir="rtl"] .mdMarginStartN1200 {
+    margin-right: var(--space-negative-1200);
   }
 
-  html[dir="rtl"] .mdMarginEndN4 {
-    margin-left: var(--space-negative-400);
+  html[dir="rtl"] .mdMarginEndN1200 {
+    margin-left: var(--space-negative-1200);
   }
 
-  .mdMarginTop4 {
-    margin-top: var(--space-400);
+  .mdMarginTop1200 {
+    margin-top: var(--space-1200);
   }
 
-  .mdMarginBottom4 {
-    margin-bottom: var(--space-400);
+  .mdMarginBottom1200 {
+    margin-bottom: var(--space-1200);
   }
 
-  .mdMarginTopN4 {
-    margin-top: var(--space-negative-400);
+  .mdMarginTopN1200 {
+    margin-top: var(--space-negative-1200);
   }
 
-  .mdMarginBottomN4 {
-    margin-bottom: var(--space-negative-400);
+  .mdMarginBottomN1200 {
+    margin-bottom: var(--space-negative-1200);
   }
 
-  .mdPaddingY4 {
-    padding-bottom: var(--space-400);
-    padding-top: var(--space-400);
+  .mdPaddingY1200 {
+    padding-bottom: var(--space-1200);
+    padding-top: var(--space-1200);
   }
 
-  .mdPaddingX4 {
-    padding-left: var(--space-400);
-    padding-right: var(--space-400);
+  .mdPaddingX1200 {
+    padding-left: var(--space-1200);
+    padding-right: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart5 {
-    margin-left: var(--space-500);
+  html:not([dir="rtl"]) .mdMarginStart1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd5 {
-    margin-right: var(--space-500);
+  html:not([dir="rtl"]) .mdMarginEnd1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .mdMarginStart5 {
-    margin-right: var(--space-500);
+  html[dir="rtl"] .mdMarginStart1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .mdMarginEnd5 {
-    margin-left: var(--space-500);
+  html[dir="rtl"] .mdMarginEnd1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN5 {
-    margin-left: var(--space-negative-500);
+  html:not([dir="rtl"]) .mdMarginStartN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN5 {
-    margin-right: var(--space-negative-500);
+  html:not([dir="rtl"]) .mdMarginEndN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .mdMarginStartN5 {
-    margin-right: var(--space-negative-500);
+  html[dir="rtl"] .mdMarginStartN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .mdMarginEndN5 {
-    margin-left: var(--space-negative-500);
+  html[dir="rtl"] .mdMarginEndN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  .mdMarginTop5 {
-    margin-top: var(--space-500);
+  .mdMarginTop1300 {
+    margin-top: var(--space-1300);
   }
 
-  .mdMarginBottom5 {
-    margin-bottom: var(--space-500);
+  .mdMarginBottom1300 {
+    margin-bottom: var(--space-1300);
   }
 
-  .mdMarginTopN5 {
-    margin-top: var(--space-negative-500);
+  .mdMarginTopN1300 {
+    margin-top: var(--space-negative-1300);
   }
 
-  .mdMarginBottomN5 {
-    margin-bottom: var(--space-negative-500);
+  .mdMarginBottomN1300 {
+    margin-bottom: var(--space-negative-1300);
   }
 
-  .mdPaddingY5 {
-    padding-bottom: var(--space-500);
-    padding-top: var(--space-500);
+  .mdPaddingY1300 {
+    padding-bottom: var(--space-1300);
+    padding-top: var(--space-1300);
   }
 
-  .mdPaddingX5 {
-    padding-left: var(--space-500);
-    padding-right: var(--space-500);
+  .mdPaddingX1300 {
+    padding-left: var(--space-1300);
+    padding-right: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart6 {
-    margin-left: var(--space-600);
+  html:not([dir="rtl"]) .mdMarginStart1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd6 {
-    margin-right: var(--space-600);
+  html:not([dir="rtl"]) .mdMarginEnd1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .mdMarginStart6 {
-    margin-right: var(--space-600);
+  html[dir="rtl"] .mdMarginStart1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .mdMarginEnd6 {
-    margin-left: var(--space-600);
+  html[dir="rtl"] .mdMarginEnd1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN6 {
-    margin-left: var(--space-negative-600);
+  html:not([dir="rtl"]) .mdMarginStartN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN6 {
-    margin-right: var(--space-negative-600);
+  html:not([dir="rtl"]) .mdMarginEndN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .mdMarginStartN6 {
-    margin-right: var(--space-negative-600);
+  html[dir="rtl"] .mdMarginStartN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .mdMarginEndN6 {
-    margin-left: var(--space-negative-600);
+  html[dir="rtl"] .mdMarginEndN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  .mdMarginTop6 {
-    margin-top: var(--space-600);
+  .mdMarginTop1400 {
+    margin-top: var(--space-1400);
   }
 
-  .mdMarginBottom6 {
-    margin-bottom: var(--space-600);
+  .mdMarginBottom1400 {
+    margin-bottom: var(--space-1400);
   }
 
-  .mdMarginTopN6 {
-    margin-top: var(--space-negative-600);
+  .mdMarginTopN1400 {
+    margin-top: var(--space-negative-1400);
   }
 
-  .mdMarginBottomN6 {
-    margin-bottom: var(--space-negative-600);
+  .mdMarginBottomN1400 {
+    margin-bottom: var(--space-negative-1400);
   }
 
-  .mdPaddingY6 {
-    padding-bottom: var(--space-600);
-    padding-top: var(--space-600);
+  .mdPaddingY1400 {
+    padding-bottom: var(--space-1400);
+    padding-top: var(--space-1400);
   }
 
-  .mdPaddingX6 {
-    padding-left: var(--space-600);
-    padding-right: var(--space-600);
+  .mdPaddingX1400 {
+    padding-left: var(--space-1400);
+    padding-right: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart7 {
-    margin-left: var(--space-700);
+  html:not([dir="rtl"]) .mdMarginStart1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd7 {
-    margin-right: var(--space-700);
+  html:not([dir="rtl"]) .mdMarginEnd1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .mdMarginStart7 {
-    margin-right: var(--space-700);
+  html[dir="rtl"] .mdMarginStart1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .mdMarginEnd7 {
-    margin-left: var(--space-700);
+  html[dir="rtl"] .mdMarginEnd1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN7 {
-    margin-left: var(--space-negative-700);
+  html:not([dir="rtl"]) .mdMarginStartN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN7 {
-    margin-right: var(--space-negative-700);
+  html:not([dir="rtl"]) .mdMarginEndN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .mdMarginStartN7 {
-    margin-right: var(--space-negative-700);
+  html[dir="rtl"] .mdMarginStartN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .mdMarginEndN7 {
-    margin-left: var(--space-negative-700);
+  html[dir="rtl"] .mdMarginEndN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  .mdMarginTop7 {
-    margin-top: var(--space-700);
+  .mdMarginTop1500 {
+    margin-top: var(--space-1500);
   }
 
-  .mdMarginBottom7 {
-    margin-bottom: var(--space-700);
+  .mdMarginBottom1500 {
+    margin-bottom: var(--space-1500);
   }
 
-  .mdMarginTopN7 {
-    margin-top: var(--space-negative-700);
+  .mdMarginTopN1500 {
+    margin-top: var(--space-negative-1500);
   }
 
-  .mdMarginBottomN7 {
-    margin-bottom: var(--space-negative-700);
+  .mdMarginBottomN1500 {
+    margin-bottom: var(--space-negative-1500);
   }
 
-  .mdPaddingY7 {
-    padding-bottom: var(--space-700);
-    padding-top: var(--space-700);
+  .mdPaddingY1500 {
+    padding-bottom: var(--space-1500);
+    padding-top: var(--space-1500);
   }
 
-  .mdPaddingX7 {
-    padding-left: var(--space-700);
-    padding-right: var(--space-700);
+  .mdPaddingX1500 {
+    padding-left: var(--space-1500);
+    padding-right: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart8 {
-    margin-left: var(--space-800);
+  html:not([dir="rtl"]) .mdMarginStart1600 {
+    margin-left: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd8 {
-    margin-right: var(--space-800);
+  html:not([dir="rtl"]) .mdMarginEnd1600 {
+    margin-right: var(--space-1600);
   }
 
-  html[dir="rtl"] .mdMarginStart8 {
-    margin-right: var(--space-800);
+  html[dir="rtl"] .mdMarginStart1600 {
+    margin-right: var(--space-1600);
   }
 
-  html[dir="rtl"] .mdMarginEnd8 {
-    margin-left: var(--space-800);
+  html[dir="rtl"] .mdMarginEnd1600 {
+    margin-left: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN8 {
-    margin-left: var(--space-negative-800);
+  html:not([dir="rtl"]) .mdMarginStartN1600 {
+    margin-left: var(--space-negative-1600);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN8 {
-    margin-right: var(--space-negative-800);
+  html:not([dir="rtl"]) .mdMarginEndN1600 {
+    margin-right: var(--space-negative-1600);
   }
 
-  html[dir="rtl"] .mdMarginStartN8 {
-    margin-right: var(--space-negative-800);
+  html[dir="rtl"] .mdMarginStartN1600 {
+    margin-right: var(--space-negative-1600);
   }
 
-  html[dir="rtl"] .mdMarginEndN8 {
-    margin-left: var(--space-negative-800);
+  html[dir="rtl"] .mdMarginEndN1600 {
+    margin-left: var(--space-negative-1600);
   }
 
-  .mdMarginTop8 {
-    margin-top: var(--space-800);
+  .mdMarginTop1600 {
+    margin-top: var(--space-1600);
   }
 
-  .mdMarginBottom8 {
-    margin-bottom: var(--space-800);
+  .mdMarginBottom1600 {
+    margin-bottom: var(--space-1600);
   }
 
-  .mdMarginTopN8 {
-    margin-top: var(--space-negative-800);
+  .mdMarginTopN1600 {
+    margin-top: var(--space-negative-1600);
   }
 
-  .mdMarginBottomN8 {
-    margin-bottom: var(--space-negative-800);
+  .mdMarginBottomN1600 {
+    margin-bottom: var(--space-negative-1600);
   }
 
-  .mdPaddingY8 {
-    padding-bottom: var(--space-800);
-    padding-top: var(--space-800);
+  .mdPaddingY1600 {
+    padding-bottom: var(--space-1600);
+    padding-top: var(--space-1600);
   }
 
-  .mdPaddingX8 {
-    padding-left: var(--space-800);
-    padding-right: var(--space-800);
+  .mdPaddingX1600 {
+    padding-left: var(--space-1600);
+    padding-right: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart9 {
-    margin-left: var(--space-900);
+  html:not([dir="rtl"]) .mdMarginStart200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd9 {
-    margin-right: var(--space-900);
+  html:not([dir="rtl"]) .mdMarginEnd200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .mdMarginStart9 {
-    margin-right: var(--space-900);
+  html[dir="rtl"] .mdMarginStart200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .mdMarginEnd9 {
-    margin-left: var(--space-900);
+  html[dir="rtl"] .mdMarginEnd200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN9 {
-    margin-left: var(--space-negative-900);
+  html:not([dir="rtl"]) .mdMarginStartN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN9 {
-    margin-right: var(--space-negative-900);
+  html:not([dir="rtl"]) .mdMarginEndN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .mdMarginStartN9 {
-    margin-right: var(--space-negative-900);
+  html[dir="rtl"] .mdMarginStartN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .mdMarginEndN9 {
-    margin-left: var(--space-negative-900);
+  html[dir="rtl"] .mdMarginEndN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  .mdMarginTop9 {
-    margin-top: var(--space-900);
+  .mdMarginTop200 {
+    margin-top: var(--space-200);
   }
 
-  .mdMarginBottom9 {
-    margin-bottom: var(--space-900);
+  .mdMarginBottom200 {
+    margin-bottom: var(--space-200);
   }
 
-  .mdMarginTopN9 {
-    margin-top: var(--space-negative-900);
+  .mdMarginTopN200 {
+    margin-top: var(--space-negative-200);
   }
 
-  .mdMarginBottomN9 {
-    margin-bottom: var(--space-negative-900);
+  .mdMarginBottomN200 {
+    margin-bottom: var(--space-negative-200);
   }
 
-  .mdPaddingY9 {
-    padding-bottom: var(--space-900);
-    padding-top: var(--space-900);
+  .mdPaddingY200 {
+    padding-bottom: var(--space-200);
+    padding-top: var(--space-200);
   }
 
-  .mdPaddingX9 {
-    padding-left: var(--space-900);
-    padding-right: var(--space-900);
+  .mdPaddingX200 {
+    padding-left: var(--space-200);
+    padding-right: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart10 {
-    margin-left: var(--space-1000);
+  html:not([dir="rtl"]) .mdMarginStart300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd10 {
-    margin-right: var(--space-1000);
+  html:not([dir="rtl"]) .mdMarginEnd300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .mdMarginStart10 {
-    margin-right: var(--space-1000);
+  html[dir="rtl"] .mdMarginStart300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .mdMarginEnd10 {
-    margin-left: var(--space-1000);
+  html[dir="rtl"] .mdMarginEnd300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN10 {
-    margin-left: var(--space-negative-1000);
+  html:not([dir="rtl"]) .mdMarginStartN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN10 {
-    margin-right: var(--space-negative-1000);
+  html:not([dir="rtl"]) .mdMarginEndN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .mdMarginStartN10 {
-    margin-right: var(--space-negative-1000);
+  html[dir="rtl"] .mdMarginStartN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .mdMarginEndN10 {
-    margin-left: var(--space-negative-1000);
+  html[dir="rtl"] .mdMarginEndN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  .mdMarginTop10 {
-    margin-top: var(--space-1000);
+  .mdMarginTop300 {
+    margin-top: var(--space-300);
   }
 
-  .mdMarginBottom10 {
-    margin-bottom: var(--space-1000);
+  .mdMarginBottom300 {
+    margin-bottom: var(--space-300);
   }
 
-  .mdMarginTopN10 {
-    margin-top: var(--space-negative-1000);
+  .mdMarginTopN300 {
+    margin-top: var(--space-negative-300);
   }
 
-  .mdMarginBottomN10 {
-    margin-bottom: var(--space-negative-1000);
+  .mdMarginBottomN300 {
+    margin-bottom: var(--space-negative-300);
   }
 
-  .mdPaddingY10 {
-    padding-bottom: var(--space-1000);
-    padding-top: var(--space-1000);
+  .mdPaddingY300 {
+    padding-bottom: var(--space-300);
+    padding-top: var(--space-300);
   }
 
-  .mdPaddingX10 {
-    padding-left: var(--space-1000);
-    padding-right: var(--space-1000);
+  .mdPaddingX300 {
+    padding-left: var(--space-300);
+    padding-right: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart11 {
-    margin-left: var(--space-1100);
+  html:not([dir="rtl"]) .mdMarginStart400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd11 {
-    margin-right: var(--space-1100);
+  html:not([dir="rtl"]) .mdMarginEnd400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .mdMarginStart11 {
-    margin-right: var(--space-1100);
+  html[dir="rtl"] .mdMarginStart400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .mdMarginEnd11 {
-    margin-left: var(--space-1100);
+  html[dir="rtl"] .mdMarginEnd400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN11 {
-    margin-left: var(--space-negative-1100);
+  html:not([dir="rtl"]) .mdMarginStartN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN11 {
-    margin-right: var(--space-negative-1100);
+  html:not([dir="rtl"]) .mdMarginEndN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .mdMarginStartN11 {
-    margin-right: var(--space-negative-1100);
+  html[dir="rtl"] .mdMarginStartN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .mdMarginEndN11 {
-    margin-left: var(--space-negative-1100);
+  html[dir="rtl"] .mdMarginEndN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  .mdMarginTop11 {
-    margin-top: var(--space-1100);
+  .mdMarginTop400 {
+    margin-top: var(--space-400);
   }
 
-  .mdMarginBottom11 {
-    margin-bottom: var(--space-1100);
+  .mdMarginBottom400 {
+    margin-bottom: var(--space-400);
   }
 
-  .mdMarginTopN11 {
-    margin-top: var(--space-negative-1100);
+  .mdMarginTopN400 {
+    margin-top: var(--space-negative-400);
   }
 
-  .mdMarginBottomN11 {
-    margin-bottom: var(--space-negative-1100);
+  .mdMarginBottomN400 {
+    margin-bottom: var(--space-negative-400);
   }
 
-  .mdPaddingY11 {
-    padding-bottom: var(--space-1100);
-    padding-top: var(--space-1100);
+  .mdPaddingY400 {
+    padding-bottom: var(--space-400);
+    padding-top: var(--space-400);
   }
 
-  .mdPaddingX11 {
-    padding-left: var(--space-1100);
-    padding-right: var(--space-1100);
+  .mdPaddingX400 {
+    padding-left: var(--space-400);
+    padding-right: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart12 {
-    margin-left: var(--space-1200);
+  html:not([dir="rtl"]) .mdMarginStart500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd12 {
-    margin-right: var(--space-1200);
+  html:not([dir="rtl"]) .mdMarginEnd500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .mdMarginStart12 {
-    margin-right: var(--space-1200);
+  html[dir="rtl"] .mdMarginStart500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .mdMarginEnd12 {
-    margin-left: var(--space-1200);
+  html[dir="rtl"] .mdMarginEnd500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN12 {
-    margin-left: var(--space-negative-1200);
+  html:not([dir="rtl"]) .mdMarginStartN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN12 {
-    margin-right: var(--space-negative-1200);
+  html:not([dir="rtl"]) .mdMarginEndN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .mdMarginStartN12 {
-    margin-right: var(--space-negative-1200);
+  html[dir="rtl"] .mdMarginStartN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .mdMarginEndN12 {
-    margin-left: var(--space-negative-1200);
+  html[dir="rtl"] .mdMarginEndN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  .mdMarginTop12 {
-    margin-top: var(--space-1200);
+  .mdMarginTop500 {
+    margin-top: var(--space-500);
   }
 
-  .mdMarginBottom12 {
-    margin-bottom: var(--space-1200);
+  .mdMarginBottom500 {
+    margin-bottom: var(--space-500);
   }
 
-  .mdMarginTopN12 {
-    margin-top: var(--space-negative-1200);
+  .mdMarginTopN500 {
+    margin-top: var(--space-negative-500);
   }
 
-  .mdMarginBottomN12 {
-    margin-bottom: var(--space-negative-1200);
+  .mdMarginBottomN500 {
+    margin-bottom: var(--space-negative-500);
   }
 
-  .mdPaddingY12 {
-    padding-bottom: var(--space-1200);
-    padding-top: var(--space-1200);
+  .mdPaddingY500 {
+    padding-bottom: var(--space-500);
+    padding-top: var(--space-500);
   }
 
-  .mdPaddingX12 {
-    padding-left: var(--space-1200);
-    padding-right: var(--space-1200);
+  .mdPaddingX500 {
+    padding-left: var(--space-500);
+    padding-right: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart13 {
-    margin-left: var(--space-1300);
+  html:not([dir="rtl"]) .mdMarginStart600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd13 {
-    margin-right: var(--space-1300);
+  html:not([dir="rtl"]) .mdMarginEnd600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .mdMarginStart13 {
-    margin-right: var(--space-1300);
+  html[dir="rtl"] .mdMarginStart600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .mdMarginEnd13 {
-    margin-left: var(--space-1300);
+  html[dir="rtl"] .mdMarginEnd600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN13 {
-    margin-left: var(--space-negative-1300);
+  html:not([dir="rtl"]) .mdMarginStartN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN13 {
-    margin-right: var(--space-negative-1300);
+  html:not([dir="rtl"]) .mdMarginEndN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .mdMarginStartN13 {
-    margin-right: var(--space-negative-1300);
+  html[dir="rtl"] .mdMarginStartN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .mdMarginEndN13 {
-    margin-left: var(--space-negative-1300);
+  html[dir="rtl"] .mdMarginEndN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  .mdMarginTop13 {
-    margin-top: var(--space-1300);
+  .mdMarginTop600 {
+    margin-top: var(--space-600);
   }
 
-  .mdMarginBottom13 {
-    margin-bottom: var(--space-1300);
+  .mdMarginBottom600 {
+    margin-bottom: var(--space-600);
   }
 
-  .mdMarginTopN13 {
-    margin-top: var(--space-negative-1300);
+  .mdMarginTopN600 {
+    margin-top: var(--space-negative-600);
   }
 
-  .mdMarginBottomN13 {
-    margin-bottom: var(--space-negative-1300);
+  .mdMarginBottomN600 {
+    margin-bottom: var(--space-negative-600);
   }
 
-  .mdPaddingY13 {
-    padding-bottom: var(--space-1300);
-    padding-top: var(--space-1300);
+  .mdPaddingY600 {
+    padding-bottom: var(--space-600);
+    padding-top: var(--space-600);
   }
 
-  .mdPaddingX13 {
-    padding-left: var(--space-1300);
-    padding-right: var(--space-1300);
+  .mdPaddingX600 {
+    padding-left: var(--space-600);
+    padding-right: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart14 {
-    margin-left: var(--space-1400);
+  html:not([dir="rtl"]) .mdMarginStart700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd14 {
-    margin-right: var(--space-1400);
+  html:not([dir="rtl"]) .mdMarginEnd700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .mdMarginStart14 {
-    margin-right: var(--space-1400);
+  html[dir="rtl"] .mdMarginStart700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .mdMarginEnd14 {
-    margin-left: var(--space-1400);
+  html[dir="rtl"] .mdMarginEnd700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN14 {
-    margin-left: var(--space-negative-1400);
+  html:not([dir="rtl"]) .mdMarginStartN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN14 {
-    margin-right: var(--space-negative-1400);
+  html:not([dir="rtl"]) .mdMarginEndN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .mdMarginStartN14 {
-    margin-right: var(--space-negative-1400);
+  html[dir="rtl"] .mdMarginStartN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .mdMarginEndN14 {
-    margin-left: var(--space-negative-1400);
+  html[dir="rtl"] .mdMarginEndN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  .mdMarginTop14 {
-    margin-top: var(--space-1400);
+  .mdMarginTop700 {
+    margin-top: var(--space-700);
   }
 
-  .mdMarginBottom14 {
-    margin-bottom: var(--space-1400);
+  .mdMarginBottom700 {
+    margin-bottom: var(--space-700);
   }
 
-  .mdMarginTopN14 {
-    margin-top: var(--space-negative-1400);
+  .mdMarginTopN700 {
+    margin-top: var(--space-negative-700);
   }
 
-  .mdMarginBottomN14 {
-    margin-bottom: var(--space-negative-1400);
+  .mdMarginBottomN700 {
+    margin-bottom: var(--space-negative-700);
   }
 
-  .mdPaddingY14 {
-    padding-bottom: var(--space-1400);
-    padding-top: var(--space-1400);
+  .mdPaddingY700 {
+    padding-bottom: var(--space-700);
+    padding-top: var(--space-700);
   }
 
-  .mdPaddingX14 {
-    padding-left: var(--space-1400);
-    padding-right: var(--space-1400);
+  .mdPaddingX700 {
+    padding-left: var(--space-700);
+    padding-right: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart15 {
-    margin-left: var(--space-1500);
+  html:not([dir="rtl"]) .mdMarginStart800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd15 {
-    margin-right: var(--space-1500);
+  html:not([dir="rtl"]) .mdMarginEnd800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .mdMarginStart15 {
-    margin-right: var(--space-1500);
+  html[dir="rtl"] .mdMarginStart800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .mdMarginEnd15 {
-    margin-left: var(--space-1500);
+  html[dir="rtl"] .mdMarginEnd800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN15 {
-    margin-left: var(--space-negative-1500);
+  html:not([dir="rtl"]) .mdMarginStartN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN15 {
-    margin-right: var(--space-negative-1500);
+  html:not([dir="rtl"]) .mdMarginEndN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .mdMarginStartN15 {
-    margin-right: var(--space-negative-1500);
+  html[dir="rtl"] .mdMarginStartN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .mdMarginEndN15 {
-    margin-left: var(--space-negative-1500);
+  html[dir="rtl"] .mdMarginEndN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  .mdMarginTop15 {
-    margin-top: var(--space-1500);
+  .mdMarginTop800 {
+    margin-top: var(--space-800);
   }
 
-  .mdMarginBottom15 {
-    margin-bottom: var(--space-1500);
+  .mdMarginBottom800 {
+    margin-bottom: var(--space-800);
   }
 
-  .mdMarginTopN15 {
-    margin-top: var(--space-negative-1500);
+  .mdMarginTopN800 {
+    margin-top: var(--space-negative-800);
   }
 
-  .mdMarginBottomN15 {
-    margin-bottom: var(--space-negative-1500);
+  .mdMarginBottomN800 {
+    margin-bottom: var(--space-negative-800);
   }
 
-  .mdPaddingY15 {
-    padding-bottom: var(--space-1500);
-    padding-top: var(--space-1500);
+  .mdPaddingY800 {
+    padding-bottom: var(--space-800);
+    padding-top: var(--space-800);
   }
 
-  .mdPaddingX15 {
-    padding-left: var(--space-1500);
-    padding-right: var(--space-1500);
+  .mdPaddingX800 {
+    padding-left: var(--space-800);
+    padding-right: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .mdMarginStart16 {
-    margin-left: var(--space-1600);
+  html:not([dir="rtl"]) .mdMarginStart900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .mdMarginEnd16 {
-    margin-right: var(--space-1600);
+  html:not([dir="rtl"]) .mdMarginEnd900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .mdMarginStart16 {
-    margin-right: var(--space-1600);
+  html[dir="rtl"] .mdMarginStart900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .mdMarginEnd16 {
-    margin-left: var(--space-1600);
+  html[dir="rtl"] .mdMarginEnd900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .mdMarginStartN16 {
-    margin-left: var(--space-negative-1600);
+  html:not([dir="rtl"]) .mdMarginStartN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  html:not([dir="rtl"]) .mdMarginEndN16 {
-    margin-right: var(--space-negative-1600);
+  html:not([dir="rtl"]) .mdMarginEndN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .mdMarginStartN16 {
-    margin-right: var(--space-negative-1600);
+  html[dir="rtl"] .mdMarginStartN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .mdMarginEndN16 {
-    margin-left: var(--space-negative-1600);
+  html[dir="rtl"] .mdMarginEndN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  .mdMarginTop16 {
-    margin-top: var(--space-1600);
+  .mdMarginTop900 {
+    margin-top: var(--space-900);
   }
 
-  .mdMarginBottom16 {
-    margin-bottom: var(--space-1600);
+  .mdMarginBottom900 {
+    margin-bottom: var(--space-900);
   }
 
-  .mdMarginTopN16 {
-    margin-top: var(--space-negative-1600);
+  .mdMarginTopN900 {
+    margin-top: var(--space-negative-900);
   }
 
-  .mdMarginBottomN16 {
-    margin-bottom: var(--space-negative-1600);
+  .mdMarginBottomN900 {
+    margin-bottom: var(--space-negative-900);
   }
 
-  .mdPaddingY16 {
-    padding-bottom: var(--space-1600);
-    padding-top: var(--space-1600);
+  .mdPaddingY900 {
+    padding-bottom: var(--space-900);
+    padding-top: var(--space-900);
   }
 
-  .mdPaddingX16 {
-    padding-left: var(--space-1600);
-    padding-right: var(--space-1600);
+  .mdPaddingX900 {
+    padding-left: var(--space-900);
+    padding-right: var(--space-900);
   }
 }
 
@@ -3027,936 +3549,1110 @@ html[dir="rtl"] .marginEndN16 {
     padding-top: var(--space-0);
   }
 
-  .lgPaddingX0 {
-    padding-left: var(--space-0);
-    padding-right: var(--space-0);
+  .lgPaddingX0 {
+    padding-left: var(--space-0);
+    padding-right: var(--space-0);
+  }
+
+  html:not([dir="rtl"]) .lgMarginStart25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginEnd25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .lgMarginStart25 {
+    margin-right: 1px;
+  }
+
+  html[dir="rtl"] .lgMarginEnd25 {
+    margin-left: 1px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginStartN25 {
+    margin-left: -1px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginEndN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .lgMarginStartN25 {
+    margin-right: -1px;
+  }
+
+  html[dir="rtl"] .lgMarginEndN25 {
+    margin-left: -1px;
+  }
+
+  .lgMarginTop25 {
+    margin-top: 1px;
+  }
+
+  .lgMarginBottom25 {
+    margin-bottom: 1px;
+  }
+
+  .lgMarginTopN25 {
+    margin-top: -1px;
+  }
+
+  .lgMarginBottomN25 {
+    margin-bottom: -1px;
+  }
+
+  .lgPaddingY25 {
+    padding-bottom: 1px;
+    padding-top: 1px;
+  }
+
+  .lgPaddingX25 {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginStart50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginEnd50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .lgMarginStart50 {
+    margin-right: 2px;
+  }
+
+  html[dir="rtl"] .lgMarginEnd50 {
+    margin-left: 2px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginStartN50 {
+    margin-left: -2px;
+  }
+
+  html:not([dir="rtl"]) .lgMarginEndN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .lgMarginStartN50 {
+    margin-right: -2px;
+  }
+
+  html[dir="rtl"] .lgMarginEndN50 {
+    margin-left: -2px;
+  }
+
+  .lgMarginTop50 {
+    margin-top: 2px;
+  }
+
+  .lgMarginBottom50 {
+    margin-bottom: 2px;
+  }
+
+  .lgMarginTopN50 {
+    margin-top: -2px;
+  }
+
+  .lgMarginBottomN50 {
+    margin-bottom: -2px;
+  }
+
+  .lgPaddingY50 {
+    padding-bottom: 2px;
+    padding-top: 2px;
+  }
+
+  .lgPaddingX50 {
+    padding-left: 2px;
+    padding-right: 2px;
   }
 
-  html:not([dir="rtl"]) .lgMarginStart1 {
+  html:not([dir="rtl"]) .lgMarginStart100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd1 {
+  html:not([dir="rtl"]) .lgMarginEnd100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .lgMarginStart1 {
+  html[dir="rtl"] .lgMarginStart100 {
     margin-right: var(--space-100);
   }
 
-  html[dir="rtl"] .lgMarginEnd1 {
+  html[dir="rtl"] .lgMarginEnd100 {
     margin-left: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN1 {
+  html:not([dir="rtl"]) .lgMarginStartN100 {
     margin-left: var(--space-negative-100);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN1 {
+  html:not([dir="rtl"]) .lgMarginEndN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .lgMarginStartN1 {
+  html[dir="rtl"] .lgMarginStartN100 {
     margin-right: var(--space-negative-100);
   }
 
-  html[dir="rtl"] .lgMarginEndN1 {
+  html[dir="rtl"] .lgMarginEndN100 {
     margin-left: var(--space-negative-100);
   }
 
-  .lgMarginTop1 {
+  .lgMarginTop100 {
     margin-top: var(--space-100);
   }
 
-  .lgMarginBottom1 {
+  .lgMarginBottom100 {
     margin-bottom: var(--space-100);
   }
 
-  .lgMarginTopN1 {
+  .lgMarginTopN100 {
     margin-top: var(--space-negative-100);
   }
 
-  .lgMarginBottomN1 {
+  .lgMarginBottomN100 {
     margin-bottom: var(--space-negative-100);
   }
 
-  .lgPaddingY1 {
+  .lgPaddingY100 {
     padding-bottom: var(--space-100);
     padding-top: var(--space-100);
   }
 
-  .lgPaddingX1 {
+  .lgPaddingX100 {
     padding-left: var(--space-100);
     padding-right: var(--space-100);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart2 {
-    margin-left: var(--space-200);
+  html:not([dir="rtl"]) .lgMarginStart150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd2 {
-    margin-right: var(--space-200);
+  html:not([dir="rtl"]) .lgMarginEnd150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .lgMarginStart2 {
-    margin-right: var(--space-200);
+  html[dir="rtl"] .lgMarginStart150 {
+    margin-right: 6px;
   }
 
-  html[dir="rtl"] .lgMarginEnd2 {
-    margin-left: var(--space-200);
+  html[dir="rtl"] .lgMarginEnd150 {
+    margin-left: 6px;
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN2 {
-    margin-left: var(--space-negative-200);
+  html:not([dir="rtl"]) .lgMarginStartN150 {
+    margin-left: -6px;
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN2 {
-    margin-right: var(--space-negative-200);
+  html:not([dir="rtl"]) .lgMarginEndN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .lgMarginStartN2 {
-    margin-right: var(--space-negative-200);
+  html[dir="rtl"] .lgMarginStartN150 {
+    margin-right: -6px;
   }
 
-  html[dir="rtl"] .lgMarginEndN2 {
-    margin-left: var(--space-negative-200);
+  html[dir="rtl"] .lgMarginEndN150 {
+    margin-left: -6px;
   }
 
-  .lgMarginTop2 {
-    margin-top: var(--space-200);
+  .lgMarginTop150 {
+    margin-top: 6px;
   }
 
-  .lgMarginBottom2 {
-    margin-bottom: var(--space-200);
+  .lgMarginBottom150 {
+    margin-bottom: 6px;
   }
 
-  .lgMarginTopN2 {
-    margin-top: var(--space-negative-200);
+  .lgMarginTopN150 {
+    margin-top: -6px;
   }
 
-  .lgMarginBottomN2 {
-    margin-bottom: var(--space-negative-200);
+  .lgMarginBottomN150 {
+    margin-bottom: -6px;
   }
 
-  .lgPaddingY2 {
-    padding-bottom: var(--space-200);
-    padding-top: var(--space-200);
+  .lgPaddingY150 {
+    padding-bottom: 6px;
+    padding-top: 6px;
   }
 
-  .lgPaddingX2 {
-    padding-left: var(--space-200);
-    padding-right: var(--space-200);
+  .lgPaddingX150 {
+    padding-left: 6px;
+    padding-right: 6px;
   }
 
-  html:not([dir="rtl"]) .lgMarginStart3 {
-    margin-left: var(--space-300);
+  html:not([dir="rtl"]) .lgMarginStart1000 {
+    margin-left: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd3 {
-    margin-right: var(--space-300);
+  html:not([dir="rtl"]) .lgMarginEnd1000 {
+    margin-right: var(--space-1000);
   }
 
-  html[dir="rtl"] .lgMarginStart3 {
-    margin-right: var(--space-300);
+  html[dir="rtl"] .lgMarginStart1000 {
+    margin-right: var(--space-1000);
   }
 
-  html[dir="rtl"] .lgMarginEnd3 {
-    margin-left: var(--space-300);
+  html[dir="rtl"] .lgMarginEnd1000 {
+    margin-left: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN3 {
-    margin-left: var(--space-negative-300);
+  html:not([dir="rtl"]) .lgMarginStartN1000 {
+    margin-left: var(--space-negative-1000);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN3 {
-    margin-right: var(--space-negative-300);
+  html:not([dir="rtl"]) .lgMarginEndN1000 {
+    margin-right: var(--space-negative-1000);
   }
 
-  html[dir="rtl"] .lgMarginStartN3 {
-    margin-right: var(--space-negative-300);
+  html[dir="rtl"] .lgMarginStartN1000 {
+    margin-right: var(--space-negative-1000);
   }
 
-  html[dir="rtl"] .lgMarginEndN3 {
-    margin-left: var(--space-negative-300);
+  html[dir="rtl"] .lgMarginEndN1000 {
+    margin-left: var(--space-negative-1000);
   }
 
-  .lgMarginTop3 {
-    margin-top: var(--space-300);
+  .lgMarginTop1000 {
+    margin-top: var(--space-1000);
   }
 
-  .lgMarginBottom3 {
-    margin-bottom: var(--space-300);
+  .lgMarginBottom1000 {
+    margin-bottom: var(--space-1000);
   }
 
-  .lgMarginTopN3 {
-    margin-top: var(--space-negative-300);
+  .lgMarginTopN1000 {
+    margin-top: var(--space-negative-1000);
   }
 
-  .lgMarginBottomN3 {
-    margin-bottom: var(--space-negative-300);
+  .lgMarginBottomN1000 {
+    margin-bottom: var(--space-negative-1000);
   }
 
-  .lgPaddingY3 {
-    padding-bottom: var(--space-300);
-    padding-top: var(--space-300);
+  .lgPaddingY1000 {
+    padding-bottom: var(--space-1000);
+    padding-top: var(--space-1000);
   }
 
-  .lgPaddingX3 {
-    padding-left: var(--space-300);
-    padding-right: var(--space-300);
+  .lgPaddingX1000 {
+    padding-left: var(--space-1000);
+    padding-right: var(--space-1000);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart4 {
-    margin-left: var(--space-400);
+  html:not([dir="rtl"]) .lgMarginStart1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd4 {
-    margin-right: var(--space-400);
+  html:not([dir="rtl"]) .lgMarginEnd1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .lgMarginStart4 {
-    margin-right: var(--space-400);
+  html[dir="rtl"] .lgMarginStart1100 {
+    margin-right: var(--space-1100);
   }
 
-  html[dir="rtl"] .lgMarginEnd4 {
-    margin-left: var(--space-400);
+  html[dir="rtl"] .lgMarginEnd1100 {
+    margin-left: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN4 {
-    margin-left: var(--space-negative-400);
+  html:not([dir="rtl"]) .lgMarginStartN1100 {
+    margin-left: var(--space-negative-1100);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN4 {
-    margin-right: var(--space-negative-400);
+  html:not([dir="rtl"]) .lgMarginEndN1100 {
+    margin-right: var(--space-negative-1100);
   }
 
-  html[dir="rtl"] .lgMarginStartN4 {
-    margin-right: var(--space-negative-400);
+  html[dir="rtl"] .lgMarginStartN1100 {
+    margin-right: var(--space-negative-1100);
   }
 
-  html[dir="rtl"] .lgMarginEndN4 {
-    margin-left: var(--space-negative-400);
+  html[dir="rtl"] .lgMarginEndN1100 {
+    margin-left: var(--space-negative-1100);
   }
 
-  .lgMarginTop4 {
-    margin-top: var(--space-400);
+  .lgMarginTop1100 {
+    margin-top: var(--space-1100);
   }
 
-  .lgMarginBottom4 {
-    margin-bottom: var(--space-400);
+  .lgMarginBottom1100 {
+    margin-bottom: var(--space-1100);
   }
 
-  .lgMarginTopN4 {
-    margin-top: var(--space-negative-400);
+  .lgMarginTopN1100 {
+    margin-top: var(--space-negative-1100);
   }
 
-  .lgMarginBottomN4 {
-    margin-bottom: var(--space-negative-400);
+  .lgMarginBottomN1100 {
+    margin-bottom: var(--space-negative-1100);
   }
 
-  .lgPaddingY4 {
-    padding-bottom: var(--space-400);
-    padding-top: var(--space-400);
+  .lgPaddingY1100 {
+    padding-bottom: var(--space-1100);
+    padding-top: var(--space-1100);
   }
 
-  .lgPaddingX4 {
-    padding-left: var(--space-400);
-    padding-right: var(--space-400);
+  .lgPaddingX1100 {
+    padding-left: var(--space-1100);
+    padding-right: var(--space-1100);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart5 {
-    margin-left: var(--space-500);
+  html:not([dir="rtl"]) .lgMarginStart1200 {
+    margin-left: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd5 {
-    margin-right: var(--space-500);
+  html:not([dir="rtl"]) .lgMarginEnd1200 {
+    margin-right: var(--space-1200);
   }
 
-  html[dir="rtl"] .lgMarginStart5 {
-    margin-right: var(--space-500);
+  html[dir="rtl"] .lgMarginStart1200 {
+    margin-right: var(--space-1200);
   }
 
-  html[dir="rtl"] .lgMarginEnd5 {
-    margin-left: var(--space-500);
+  html[dir="rtl"] .lgMarginEnd1200 {
+    margin-left: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN5 {
-    margin-left: var(--space-negative-500);
+  html:not([dir="rtl"]) .lgMarginStartN1200 {
+    margin-left: var(--space-negative-1200);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN5 {
-    margin-right: var(--space-negative-500);
+  html:not([dir="rtl"]) .lgMarginEndN1200 {
+    margin-right: var(--space-negative-1200);
   }
 
-  html[dir="rtl"] .lgMarginStartN5 {
-    margin-right: var(--space-negative-500);
+  html[dir="rtl"] .lgMarginStartN1200 {
+    margin-right: var(--space-negative-1200);
   }
 
-  html[dir="rtl"] .lgMarginEndN5 {
-    margin-left: var(--space-negative-500);
+  html[dir="rtl"] .lgMarginEndN1200 {
+    margin-left: var(--space-negative-1200);
   }
 
-  .lgMarginTop5 {
-    margin-top: var(--space-500);
+  .lgMarginTop1200 {
+    margin-top: var(--space-1200);
   }
 
-  .lgMarginBottom5 {
-    margin-bottom: var(--space-500);
+  .lgMarginBottom1200 {
+    margin-bottom: var(--space-1200);
   }
 
-  .lgMarginTopN5 {
-    margin-top: var(--space-negative-500);
+  .lgMarginTopN1200 {
+    margin-top: var(--space-negative-1200);
   }
 
-  .lgMarginBottomN5 {
-    margin-bottom: var(--space-negative-500);
+  .lgMarginBottomN1200 {
+    margin-bottom: var(--space-negative-1200);
   }
 
-  .lgPaddingY5 {
-    padding-bottom: var(--space-500);
-    padding-top: var(--space-500);
+  .lgPaddingY1200 {
+    padding-bottom: var(--space-1200);
+    padding-top: var(--space-1200);
   }
 
-  .lgPaddingX5 {
-    padding-left: var(--space-500);
-    padding-right: var(--space-500);
+  .lgPaddingX1200 {
+    padding-left: var(--space-1200);
+    padding-right: var(--space-1200);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart6 {
-    margin-left: var(--space-600);
+  html:not([dir="rtl"]) .lgMarginStart1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd6 {
-    margin-right: var(--space-600);
+  html:not([dir="rtl"]) .lgMarginEnd1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .lgMarginStart6 {
-    margin-right: var(--space-600);
+  html[dir="rtl"] .lgMarginStart1300 {
+    margin-right: var(--space-1300);
   }
 
-  html[dir="rtl"] .lgMarginEnd6 {
-    margin-left: var(--space-600);
+  html[dir="rtl"] .lgMarginEnd1300 {
+    margin-left: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN6 {
-    margin-left: var(--space-negative-600);
+  html:not([dir="rtl"]) .lgMarginStartN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN6 {
-    margin-right: var(--space-negative-600);
+  html:not([dir="rtl"]) .lgMarginEndN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .lgMarginStartN6 {
-    margin-right: var(--space-negative-600);
+  html[dir="rtl"] .lgMarginStartN1300 {
+    margin-right: var(--space-negative-1300);
   }
 
-  html[dir="rtl"] .lgMarginEndN6 {
-    margin-left: var(--space-negative-600);
+  html[dir="rtl"] .lgMarginEndN1300 {
+    margin-left: var(--space-negative-1300);
   }
 
-  .lgMarginTop6 {
-    margin-top: var(--space-600);
+  .lgMarginTop1300 {
+    margin-top: var(--space-1300);
   }
 
-  .lgMarginBottom6 {
-    margin-bottom: var(--space-600);
+  .lgMarginBottom1300 {
+    margin-bottom: var(--space-1300);
   }
 
-  .lgMarginTopN6 {
-    margin-top: var(--space-negative-600);
+  .lgMarginTopN1300 {
+    margin-top: var(--space-negative-1300);
   }
 
-  .lgMarginBottomN6 {
-    margin-bottom: var(--space-negative-600);
+  .lgMarginBottomN1300 {
+    margin-bottom: var(--space-negative-1300);
   }
 
-  .lgPaddingY6 {
-    padding-bottom: var(--space-600);
-    padding-top: var(--space-600);
+  .lgPaddingY1300 {
+    padding-bottom: var(--space-1300);
+    padding-top: var(--space-1300);
   }
 
-  .lgPaddingX6 {
-    padding-left: var(--space-600);
-    padding-right: var(--space-600);
+  .lgPaddingX1300 {
+    padding-left: var(--space-1300);
+    padding-right: var(--space-1300);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart7 {
-    margin-left: var(--space-700);
+  html:not([dir="rtl"]) .lgMarginStart1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd7 {
-    margin-right: var(--space-700);
+  html:not([dir="rtl"]) .lgMarginEnd1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .lgMarginStart7 {
-    margin-right: var(--space-700);
+  html[dir="rtl"] .lgMarginStart1400 {
+    margin-right: var(--space-1400);
   }
 
-  html[dir="rtl"] .lgMarginEnd7 {
-    margin-left: var(--space-700);
+  html[dir="rtl"] .lgMarginEnd1400 {
+    margin-left: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN7 {
-    margin-left: var(--space-negative-700);
+  html:not([dir="rtl"]) .lgMarginStartN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN7 {
-    margin-right: var(--space-negative-700);
+  html:not([dir="rtl"]) .lgMarginEndN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .lgMarginStartN7 {
-    margin-right: var(--space-negative-700);
+  html[dir="rtl"] .lgMarginStartN1400 {
+    margin-right: var(--space-negative-1400);
   }
 
-  html[dir="rtl"] .lgMarginEndN7 {
-    margin-left: var(--space-negative-700);
+  html[dir="rtl"] .lgMarginEndN1400 {
+    margin-left: var(--space-negative-1400);
   }
 
-  .lgMarginTop7 {
-    margin-top: var(--space-700);
+  .lgMarginTop1400 {
+    margin-top: var(--space-1400);
   }
 
-  .lgMarginBottom7 {
-    margin-bottom: var(--space-700);
+  .lgMarginBottom1400 {
+    margin-bottom: var(--space-1400);
   }
 
-  .lgMarginTopN7 {
-    margin-top: var(--space-negative-700);
+  .lgMarginTopN1400 {
+    margin-top: var(--space-negative-1400);
   }
 
-  .lgMarginBottomN7 {
-    margin-bottom: var(--space-negative-700);
+  .lgMarginBottomN1400 {
+    margin-bottom: var(--space-negative-1400);
   }
 
-  .lgPaddingY7 {
-    padding-bottom: var(--space-700);
-    padding-top: var(--space-700);
+  .lgPaddingY1400 {
+    padding-bottom: var(--space-1400);
+    padding-top: var(--space-1400);
   }
 
-  .lgPaddingX7 {
-    padding-left: var(--space-700);
-    padding-right: var(--space-700);
+  .lgPaddingX1400 {
+    padding-left: var(--space-1400);
+    padding-right: var(--space-1400);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart8 {
-    margin-left: var(--space-800);
+  html:not([dir="rtl"]) .lgMarginStart1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd8 {
-    margin-right: var(--space-800);
+  html:not([dir="rtl"]) .lgMarginEnd1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .lgMarginStart8 {
-    margin-right: var(--space-800);
+  html[dir="rtl"] .lgMarginStart1500 {
+    margin-right: var(--space-1500);
   }
 
-  html[dir="rtl"] .lgMarginEnd8 {
-    margin-left: var(--space-800);
+  html[dir="rtl"] .lgMarginEnd1500 {
+    margin-left: var(--space-1500);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN8 {
-    margin-left: var(--space-negative-800);
+  html:not([dir="rtl"]) .lgMarginStartN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN8 {
-    margin-right: var(--space-negative-800);
+  html:not([dir="rtl"]) .lgMarginEndN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .lgMarginStartN8 {
-    margin-right: var(--space-negative-800);
+  html[dir="rtl"] .lgMarginStartN1500 {
+    margin-right: var(--space-negative-1500);
   }
 
-  html[dir="rtl"] .lgMarginEndN8 {
-    margin-left: var(--space-negative-800);
+  html[dir="rtl"] .lgMarginEndN1500 {
+    margin-left: var(--space-negative-1500);
   }
 
-  .lgMarginTop8 {
-    margin-top: var(--space-800);
+  .lgMarginTop1500 {
+    margin-top: var(--space-1500);
   }
 
-  .lgMarginBottom8 {
-    margin-bottom: var(--space-800);
+  .lgMarginBottom1500 {
+    margin-bottom: var(--space-1500);
   }
 
-  .lgMarginTopN8 {
-    margin-top: var(--space-negative-800);
+  .lgMarginTopN1500 {
+    margin-top: var(--space-negative-1500);
   }
 
-  .lgMarginBottomN8 {
-    margin-bottom: var(--space-negative-800);
+  .lgMarginBottomN1500 {
+    margin-bottom: var(--space-negative-1500);
   }
 
-  .lgPaddingY8 {
-    padding-bottom: var(--space-800);
-    padding-top: var(--space-800);
+  .lgPaddingY1500 {
+    padding-bottom: var(--space-1500);
+    padding-top: var(--space-1500);
   }
 
-  .lgPaddingX8 {
-    padding-left: var(--space-800);
-    padding-right: var(--space-800);
+  .lgPaddingX1500 {
+    padding-left: var(--space-1500);
+    padding-right: var(--space-1500);
+  }
+
+  html:not([dir="rtl"]) .lgMarginStart1600 {
+    margin-left: var(--space-1600);
+  }
+
+  html:not([dir="rtl"]) .lgMarginEnd1600 {
+    margin-right: var(--space-1600);
+  }
+
+  html[dir="rtl"] .lgMarginStart1600 {
+    margin-right: var(--space-1600);
+  }
+
+  html[dir="rtl"] .lgMarginEnd1600 {
+    margin-left: var(--space-1600);
+  }
+
+  html:not([dir="rtl"]) .lgMarginStartN1600 {
+    margin-left: var(--space-negative-1600);
+  }
+
+  html:not([dir="rtl"]) .lgMarginEndN1600 {
+    margin-right: var(--space-negative-1600);
+  }
+
+  html[dir="rtl"] .lgMarginStartN1600 {
+    margin-right: var(--space-negative-1600);
+  }
+
+  html[dir="rtl"] .lgMarginEndN1600 {
+    margin-left: var(--space-negative-1600);
+  }
+
+  .lgMarginTop1600 {
+    margin-top: var(--space-1600);
+  }
+
+  .lgMarginBottom1600 {
+    margin-bottom: var(--space-1600);
+  }
+
+  .lgMarginTopN1600 {
+    margin-top: var(--space-negative-1600);
+  }
+
+  .lgMarginBottomN1600 {
+    margin-bottom: var(--space-negative-1600);
+  }
+
+  .lgPaddingY1600 {
+    padding-bottom: var(--space-1600);
+    padding-top: var(--space-1600);
+  }
+
+  .lgPaddingX1600 {
+    padding-left: var(--space-1600);
+    padding-right: var(--space-1600);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart9 {
-    margin-left: var(--space-900);
+  html:not([dir="rtl"]) .lgMarginStart200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd9 {
-    margin-right: var(--space-900);
+  html:not([dir="rtl"]) .lgMarginEnd200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .lgMarginStart9 {
-    margin-right: var(--space-900);
+  html[dir="rtl"] .lgMarginStart200 {
+    margin-right: var(--space-200);
   }
 
-  html[dir="rtl"] .lgMarginEnd9 {
-    margin-left: var(--space-900);
+  html[dir="rtl"] .lgMarginEnd200 {
+    margin-left: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN9 {
-    margin-left: var(--space-negative-900);
+  html:not([dir="rtl"]) .lgMarginStartN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN9 {
-    margin-right: var(--space-negative-900);
+  html:not([dir="rtl"]) .lgMarginEndN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .lgMarginStartN9 {
-    margin-right: var(--space-negative-900);
+  html[dir="rtl"] .lgMarginStartN200 {
+    margin-right: var(--space-negative-200);
   }
 
-  html[dir="rtl"] .lgMarginEndN9 {
-    margin-left: var(--space-negative-900);
+  html[dir="rtl"] .lgMarginEndN200 {
+    margin-left: var(--space-negative-200);
   }
 
-  .lgMarginTop9 {
-    margin-top: var(--space-900);
+  .lgMarginTop200 {
+    margin-top: var(--space-200);
   }
 
-  .lgMarginBottom9 {
-    margin-bottom: var(--space-900);
+  .lgMarginBottom200 {
+    margin-bottom: var(--space-200);
   }
 
-  .lgMarginTopN9 {
-    margin-top: var(--space-negative-900);
+  .lgMarginTopN200 {
+    margin-top: var(--space-negative-200);
   }
 
-  .lgMarginBottomN9 {
-    margin-bottom: var(--space-negative-900);
+  .lgMarginBottomN200 {
+    margin-bottom: var(--space-negative-200);
   }
 
-  .lgPaddingY9 {
-    padding-bottom: var(--space-900);
-    padding-top: var(--space-900);
+  .lgPaddingY200 {
+    padding-bottom: var(--space-200);
+    padding-top: var(--space-200);
   }
 
-  .lgPaddingX9 {
-    padding-left: var(--space-900);
-    padding-right: var(--space-900);
+  .lgPaddingX200 {
+    padding-left: var(--space-200);
+    padding-right: var(--space-200);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart10 {
-    margin-left: var(--space-1000);
+  html:not([dir="rtl"]) .lgMarginStart300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd10 {
-    margin-right: var(--space-1000);
+  html:not([dir="rtl"]) .lgMarginEnd300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .lgMarginStart10 {
-    margin-right: var(--space-1000);
+  html[dir="rtl"] .lgMarginStart300 {
+    margin-right: var(--space-300);
   }
 
-  html[dir="rtl"] .lgMarginEnd10 {
-    margin-left: var(--space-1000);
+  html[dir="rtl"] .lgMarginEnd300 {
+    margin-left: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN10 {
-    margin-left: var(--space-negative-1000);
+  html:not([dir="rtl"]) .lgMarginStartN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN10 {
-    margin-right: var(--space-negative-1000);
+  html:not([dir="rtl"]) .lgMarginEndN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .lgMarginStartN10 {
-    margin-right: var(--space-negative-1000);
+  html[dir="rtl"] .lgMarginStartN300 {
+    margin-right: var(--space-negative-300);
   }
 
-  html[dir="rtl"] .lgMarginEndN10 {
-    margin-left: var(--space-negative-1000);
+  html[dir="rtl"] .lgMarginEndN300 {
+    margin-left: var(--space-negative-300);
   }
 
-  .lgMarginTop10 {
-    margin-top: var(--space-1000);
+  .lgMarginTop300 {
+    margin-top: var(--space-300);
   }
 
-  .lgMarginBottom10 {
-    margin-bottom: var(--space-1000);
+  .lgMarginBottom300 {
+    margin-bottom: var(--space-300);
   }
 
-  .lgMarginTopN10 {
-    margin-top: var(--space-negative-1000);
+  .lgMarginTopN300 {
+    margin-top: var(--space-negative-300);
   }
 
-  .lgMarginBottomN10 {
-    margin-bottom: var(--space-negative-1000);
+  .lgMarginBottomN300 {
+    margin-bottom: var(--space-negative-300);
   }
 
-  .lgPaddingY10 {
-    padding-bottom: var(--space-1000);
-    padding-top: var(--space-1000);
+  .lgPaddingY300 {
+    padding-bottom: var(--space-300);
+    padding-top: var(--space-300);
   }
 
-  .lgPaddingX10 {
-    padding-left: var(--space-1000);
-    padding-right: var(--space-1000);
+  .lgPaddingX300 {
+    padding-left: var(--space-300);
+    padding-right: var(--space-300);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart11 {
-    margin-left: var(--space-1100);
+  html:not([dir="rtl"]) .lgMarginStart400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd11 {
-    margin-right: var(--space-1100);
+  html:not([dir="rtl"]) .lgMarginEnd400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .lgMarginStart11 {
-    margin-right: var(--space-1100);
+  html[dir="rtl"] .lgMarginStart400 {
+    margin-right: var(--space-400);
   }
 
-  html[dir="rtl"] .lgMarginEnd11 {
-    margin-left: var(--space-1100);
+  html[dir="rtl"] .lgMarginEnd400 {
+    margin-left: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN11 {
-    margin-left: var(--space-negative-1100);
+  html:not([dir="rtl"]) .lgMarginStartN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN11 {
-    margin-right: var(--space-negative-1100);
+  html:not([dir="rtl"]) .lgMarginEndN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .lgMarginStartN11 {
-    margin-right: var(--space-negative-1100);
+  html[dir="rtl"] .lgMarginStartN400 {
+    margin-right: var(--space-negative-400);
   }
 
-  html[dir="rtl"] .lgMarginEndN11 {
-    margin-left: var(--space-negative-1100);
+  html[dir="rtl"] .lgMarginEndN400 {
+    margin-left: var(--space-negative-400);
   }
 
-  .lgMarginTop11 {
-    margin-top: var(--space-1100);
+  .lgMarginTop400 {
+    margin-top: var(--space-400);
   }
 
-  .lgMarginBottom11 {
-    margin-bottom: var(--space-1100);
+  .lgMarginBottom400 {
+    margin-bottom: var(--space-400);
   }
 
-  .lgMarginTopN11 {
-    margin-top: var(--space-negative-1100);
+  .lgMarginTopN400 {
+    margin-top: var(--space-negative-400);
   }
 
-  .lgMarginBottomN11 {
-    margin-bottom: var(--space-negative-1100);
+  .lgMarginBottomN400 {
+    margin-bottom: var(--space-negative-400);
   }
 
-  .lgPaddingY11 {
-    padding-bottom: var(--space-1100);
-    padding-top: var(--space-1100);
+  .lgPaddingY400 {
+    padding-bottom: var(--space-400);
+    padding-top: var(--space-400);
   }
 
-  .lgPaddingX11 {
-    padding-left: var(--space-1100);
-    padding-right: var(--space-1100);
+  .lgPaddingX400 {
+    padding-left: var(--space-400);
+    padding-right: var(--space-400);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart12 {
-    margin-left: var(--space-1200);
+  html:not([dir="rtl"]) .lgMarginStart500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd12 {
-    margin-right: var(--space-1200);
+  html:not([dir="rtl"]) .lgMarginEnd500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .lgMarginStart12 {
-    margin-right: var(--space-1200);
+  html[dir="rtl"] .lgMarginStart500 {
+    margin-right: var(--space-500);
   }
 
-  html[dir="rtl"] .lgMarginEnd12 {
-    margin-left: var(--space-1200);
+  html[dir="rtl"] .lgMarginEnd500 {
+    margin-left: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN12 {
-    margin-left: var(--space-negative-1200);
+  html:not([dir="rtl"]) .lgMarginStartN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN12 {
-    margin-right: var(--space-negative-1200);
+  html:not([dir="rtl"]) .lgMarginEndN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .lgMarginStartN12 {
-    margin-right: var(--space-negative-1200);
+  html[dir="rtl"] .lgMarginStartN500 {
+    margin-right: var(--space-negative-500);
   }
 
-  html[dir="rtl"] .lgMarginEndN12 {
-    margin-left: var(--space-negative-1200);
+  html[dir="rtl"] .lgMarginEndN500 {
+    margin-left: var(--space-negative-500);
   }
 
-  .lgMarginTop12 {
-    margin-top: var(--space-1200);
+  .lgMarginTop500 {
+    margin-top: var(--space-500);
   }
 
-  .lgMarginBottom12 {
-    margin-bottom: var(--space-1200);
+  .lgMarginBottom500 {
+    margin-bottom: var(--space-500);
   }
 
-  .lgMarginTopN12 {
-    margin-top: var(--space-negative-1200);
+  .lgMarginTopN500 {
+    margin-top: var(--space-negative-500);
   }
 
-  .lgMarginBottomN12 {
-    margin-bottom: var(--space-negative-1200);
+  .lgMarginBottomN500 {
+    margin-bottom: var(--space-negative-500);
   }
 
-  .lgPaddingY12 {
-    padding-bottom: var(--space-1200);
-    padding-top: var(--space-1200);
+  .lgPaddingY500 {
+    padding-bottom: var(--space-500);
+    padding-top: var(--space-500);
   }
 
-  .lgPaddingX12 {
-    padding-left: var(--space-1200);
-    padding-right: var(--space-1200);
+  .lgPaddingX500 {
+    padding-left: var(--space-500);
+    padding-right: var(--space-500);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart13 {
-    margin-left: var(--space-1300);
+  html:not([dir="rtl"]) .lgMarginStart600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd13 {
-    margin-right: var(--space-1300);
+  html:not([dir="rtl"]) .lgMarginEnd600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .lgMarginStart13 {
-    margin-right: var(--space-1300);
+  html[dir="rtl"] .lgMarginStart600 {
+    margin-right: var(--space-600);
   }
 
-  html[dir="rtl"] .lgMarginEnd13 {
-    margin-left: var(--space-1300);
+  html[dir="rtl"] .lgMarginEnd600 {
+    margin-left: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN13 {
-    margin-left: var(--space-negative-1300);
+  html:not([dir="rtl"]) .lgMarginStartN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN13 {
-    margin-right: var(--space-negative-1300);
+  html:not([dir="rtl"]) .lgMarginEndN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .lgMarginStartN13 {
-    margin-right: var(--space-negative-1300);
+  html[dir="rtl"] .lgMarginStartN600 {
+    margin-right: var(--space-negative-600);
   }
 
-  html[dir="rtl"] .lgMarginEndN13 {
-    margin-left: var(--space-negative-1300);
+  html[dir="rtl"] .lgMarginEndN600 {
+    margin-left: var(--space-negative-600);
   }
 
-  .lgMarginTop13 {
-    margin-top: var(--space-1300);
+  .lgMarginTop600 {
+    margin-top: var(--space-600);
   }
 
-  .lgMarginBottom13 {
-    margin-bottom: var(--space-1300);
+  .lgMarginBottom600 {
+    margin-bottom: var(--space-600);
   }
 
-  .lgMarginTopN13 {
-    margin-top: var(--space-negative-1300);
+  .lgMarginTopN600 {
+    margin-top: var(--space-negative-600);
   }
 
-  .lgMarginBottomN13 {
-    margin-bottom: var(--space-negative-1300);
+  .lgMarginBottomN600 {
+    margin-bottom: var(--space-negative-600);
   }
 
-  .lgPaddingY13 {
-    padding-bottom: var(--space-1300);
-    padding-top: var(--space-1300);
+  .lgPaddingY600 {
+    padding-bottom: var(--space-600);
+    padding-top: var(--space-600);
   }
 
-  .lgPaddingX13 {
-    padding-left: var(--space-1300);
-    padding-right: var(--space-1300);
+  .lgPaddingX600 {
+    padding-left: var(--space-600);
+    padding-right: var(--space-600);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart14 {
-    margin-left: var(--space-1400);
+  html:not([dir="rtl"]) .lgMarginStart700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd14 {
-    margin-right: var(--space-1400);
+  html:not([dir="rtl"]) .lgMarginEnd700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .lgMarginStart14 {
-    margin-right: var(--space-1400);
+  html[dir="rtl"] .lgMarginStart700 {
+    margin-right: var(--space-700);
   }
 
-  html[dir="rtl"] .lgMarginEnd14 {
-    margin-left: var(--space-1400);
+  html[dir="rtl"] .lgMarginEnd700 {
+    margin-left: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN14 {
-    margin-left: var(--space-negative-1400);
+  html:not([dir="rtl"]) .lgMarginStartN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN14 {
-    margin-right: var(--space-negative-1400);
+  html:not([dir="rtl"]) .lgMarginEndN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .lgMarginStartN14 {
-    margin-right: var(--space-negative-1400);
+  html[dir="rtl"] .lgMarginStartN700 {
+    margin-right: var(--space-negative-700);
   }
 
-  html[dir="rtl"] .lgMarginEndN14 {
-    margin-left: var(--space-negative-1400);
+  html[dir="rtl"] .lgMarginEndN700 {
+    margin-left: var(--space-negative-700);
   }
 
-  .lgMarginTop14 {
-    margin-top: var(--space-1400);
+  .lgMarginTop700 {
+    margin-top: var(--space-700);
   }
 
-  .lgMarginBottom14 {
-    margin-bottom: var(--space-1400);
+  .lgMarginBottom700 {
+    margin-bottom: var(--space-700);
   }
 
-  .lgMarginTopN14 {
-    margin-top: var(--space-negative-1400);
+  .lgMarginTopN700 {
+    margin-top: var(--space-negative-700);
   }
 
-  .lgMarginBottomN14 {
-    margin-bottom: var(--space-negative-1400);
+  .lgMarginBottomN700 {
+    margin-bottom: var(--space-negative-700);
   }
 
-  .lgPaddingY14 {
-    padding-bottom: var(--space-1400);
-    padding-top: var(--space-1400);
+  .lgPaddingY700 {
+    padding-bottom: var(--space-700);
+    padding-top: var(--space-700);
   }
 
-  .lgPaddingX14 {
-    padding-left: var(--space-1400);
-    padding-right: var(--space-1400);
+  .lgPaddingX700 {
+    padding-left: var(--space-700);
+    padding-right: var(--space-700);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart15 {
-    margin-left: var(--space-1500);
+  html:not([dir="rtl"]) .lgMarginStart800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd15 {
-    margin-right: var(--space-1500);
+  html:not([dir="rtl"]) .lgMarginEnd800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .lgMarginStart15 {
-    margin-right: var(--space-1500);
+  html[dir="rtl"] .lgMarginStart800 {
+    margin-right: var(--space-800);
   }
 
-  html[dir="rtl"] .lgMarginEnd15 {
-    margin-left: var(--space-1500);
+  html[dir="rtl"] .lgMarginEnd800 {
+    margin-left: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN15 {
-    margin-left: var(--space-negative-1500);
+  html:not([dir="rtl"]) .lgMarginStartN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN15 {
-    margin-right: var(--space-negative-1500);
+  html:not([dir="rtl"]) .lgMarginEndN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .lgMarginStartN15 {
-    margin-right: var(--space-negative-1500);
+  html[dir="rtl"] .lgMarginStartN800 {
+    margin-right: var(--space-negative-800);
   }
 
-  html[dir="rtl"] .lgMarginEndN15 {
-    margin-left: var(--space-negative-1500);
+  html[dir="rtl"] .lgMarginEndN800 {
+    margin-left: var(--space-negative-800);
   }
 
-  .lgMarginTop15 {
-    margin-top: var(--space-1500);
+  .lgMarginTop800 {
+    margin-top: var(--space-800);
   }
 
-  .lgMarginBottom15 {
-    margin-bottom: var(--space-1500);
+  .lgMarginBottom800 {
+    margin-bottom: var(--space-800);
   }
 
-  .lgMarginTopN15 {
-    margin-top: var(--space-negative-1500);
+  .lgMarginTopN800 {
+    margin-top: var(--space-negative-800);
   }
 
-  .lgMarginBottomN15 {
-    margin-bottom: var(--space-negative-1500);
+  .lgMarginBottomN800 {
+    margin-bottom: var(--space-negative-800);
   }
 
-  .lgPaddingY15 {
-    padding-bottom: var(--space-1500);
-    padding-top: var(--space-1500);
+  .lgPaddingY800 {
+    padding-bottom: var(--space-800);
+    padding-top: var(--space-800);
   }
 
-  .lgPaddingX15 {
-    padding-left: var(--space-1500);
-    padding-right: var(--space-1500);
+  .lgPaddingX800 {
+    padding-left: var(--space-800);
+    padding-right: var(--space-800);
   }
 
-  html:not([dir="rtl"]) .lgMarginStart16 {
-    margin-left: var(--space-1600);
+  html:not([dir="rtl"]) .lgMarginStart900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .lgMarginEnd16 {
-    margin-right: var(--space-1600);
+  html:not([dir="rtl"]) .lgMarginEnd900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .lgMarginStart16 {
-    margin-right: var(--space-1600);
+  html[dir="rtl"] .lgMarginStart900 {
+    margin-right: var(--space-900);
   }
 
-  html[dir="rtl"] .lgMarginEnd16 {
-    margin-left: var(--space-1600);
+  html[dir="rtl"] .lgMarginEnd900 {
+    margin-left: var(--space-900);
   }
 
-  html:not([dir="rtl"]) .lgMarginStartN16 {
-    margin-left: var(--space-negative-1600);
+  html:not([dir="rtl"]) .lgMarginStartN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  html:not([dir="rtl"]) .lgMarginEndN16 {
-    margin-right: var(--space-negative-1600);
+  html:not([dir="rtl"]) .lgMarginEndN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .lgMarginStartN16 {
-    margin-right: var(--space-negative-1600);
+  html[dir="rtl"] .lgMarginStartN900 {
+    margin-right: var(--space-negative-900);
   }
 
-  html[dir="rtl"] .lgMarginEndN16 {
-    margin-left: var(--space-negative-1600);
+  html[dir="rtl"] .lgMarginEndN900 {
+    margin-left: var(--space-negative-900);
   }
 
-  .lgMarginTop16 {
-    margin-top: var(--space-1600);
+  .lgMarginTop900 {
+    margin-top: var(--space-900);
   }
 
-  .lgMarginBottom16 {
-    margin-bottom: var(--space-1600);
+  .lgMarginBottom900 {
+    margin-bottom: var(--space-900);
   }
 
-  .lgMarginTopN16 {
-    margin-top: var(--space-negative-1600);
+  .lgMarginTopN900 {
+    margin-top: var(--space-negative-900);
   }
 
-  .lgMarginBottomN16 {
-    margin-bottom: var(--space-negative-1600);
+  .lgMarginBottomN900 {
+    margin-bottom: var(--space-negative-900);
   }
 
-  .lgPaddingY16 {
-    padding-bottom: var(--space-1600);
-    padding-top: var(--space-1600);
+  .lgPaddingY900 {
+    padding-bottom: var(--space-900);
+    padding-top: var(--space-900);
   }
 
-  .lgPaddingX16 {
-    padding-left: var(--space-1600);
-    padding-right: var(--space-1600);
+  .lgPaddingX900 {
+    padding-left: var(--space-900);
+    padding-right: var(--space-900);
   }
 }
diff --git a/packages/gestalt/src/sharedSubcomponents/__snapshots__/FormErrorMessage.test.tsx.snap b/packages/gestalt/src/sharedSubcomponents/__snapshots__/FormErrorMessage.test.tsx.snap
index 08925f1966..4c20c9d877 100644
--- a/packages/gestalt/src/sharedSubcomponents/__snapshots__/FormErrorMessage.test.tsx.snap
+++ b/packages/gestalt/src/sharedSubcomponents/__snapshots__/FormErrorMessage.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`FormErrorMessage with errorMessage 1`] = `
         role="alert"
       >
         <div
-          className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+          className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
         >
           <div
             className="FlexItem"
@@ -69,7 +69,7 @@ exports[`FormErrorMessage with no errorMessage 1`] = `
         role="alert"
       >
         <div
-          className="Flex rowGap2 columnGap2 xsDirectionRow xsItemsCenter"
+          className="Flex rowGap200 columnGap200 xsDirectionRow xsItemsCenter"
         >
           <div
             className="FlexItem"
diff --git a/packages/gestalt/src/transforms.ts b/packages/gestalt/src/transforms.ts
index c3f0f58bbf..b89530f992 100644
--- a/packages/gestalt/src/transforms.ts
+++ b/packages/gestalt/src/transforms.ts
@@ -31,7 +31,7 @@ export const mapping =
 export const range =
   (scale: string): ((n: number) => Style) =>
   (n): Style =>
-    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n}`);
+    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n * 100)}` : n * 100}`);
 
 export const rangeWithZero =
   (scale: string): ((n: number) => Style) =>
diff --git a/scripts/flex.js b/scripts/flex.js
index 8459e332d5..9b29c61bab 100755
--- a/scripts/flex.js
+++ b/scripts/flex.js
@@ -6,13 +6,13 @@
 const PRELUDE = `/*
 This file was generated by running
 
-  $ ./scripts/flex.js > packages/gestalt/src/Flex.css
+  $ node ./scripts/flex.js > packages/gestalt/src/Flex.css
 
 */`;
 
 const SPACING_PX = 4;
 const SCALE_LENGTH = 12;
-const SCALE = new Array(SCALE_LENGTH).fill().map((_, i) => i + 1);
+const SCALE = [...new Array(SCALE_LENGTH).fill().map((_, i) => i + 1), 0.25, 0.5, 1.5].sort();
 
 // --
 
@@ -48,23 +48,23 @@ const ruleset = (selector, declarations) => ({
 
 const rules = (i) => [
   // Negative margins on parents
-  ruleset(`.columnGap${i}`, {
+  ruleset(`.columnGap${i * 100}`, {
     'margin-bottom': `${space(-i)}`,
     'margin-top': `${space(-i)}`,
   }),
   // Gap margins on children
-  ruleset(`.columnGap${i} > .FlexItem`, {
+  ruleset(`.columnGap${i * 100} > .FlexItem`, {
     'margin-bottom': space(i),
     'margin-top': space(i),
   }),
 
   // Negative margins on parents
-  ruleset(`.rowGap${i}`, {
+  ruleset(`.rowGap${i * 100}`, {
     'margin-left': `${space(-i)}`,
     'margin-right': `${space(-i)}`,
   }),
   // Gap margins on children
-  ruleset(`.rowGap${i} > .FlexItem`, {
+  ruleset(`.rowGap${i * 100} > .FlexItem`, {
     'margin-left': space(i),
     'margin-right': space(i),
   }),
diff --git a/scripts/whitespace.js b/scripts/whitespace.js
index f9aeb841ec..3eeba82fb1 100755
--- a/scripts/whitespace.js
+++ b/scripts/whitespace.js
@@ -8,17 +8,26 @@
 const PRELUDE = `/*
 This file was generated by running
 
-  $ ./scripts/whitespace.js > packages/gestalt/src/boxWhitespace.css
+  $ node ./scripts/whitespace.js > packages/gestalt/src/boxWhitespace.css
 
 */`;
 
 const SCALE_LENGTH = 16;
-const SCALE = new Array(SCALE_LENGTH).fill().map((_, i) => i + 1);
+const SCALE = [...new Array(SCALE_LENGTH).fill().map((_, i) => i + 1), 0.25, 0.5, 1.5].sort();
 
 // --
 
-const space = (n) =>
-  n === 0 ? 'var(--space-0)' : `var(--space-${n < 0 ? `negative${n}` : `${n}`}00)`;
+const space = (n) => {
+  if (n === 0) return 'var(--space-0)';
+  if (n === 0.25) return '1px';
+  if (n === 0.5) return '2px';
+  if (n === 1.5) return '6px';
+  if (n === -0.25) return '-1px';
+  if (n === -0.5) return '-2px';
+  if (n === -1.5) return '-6px';
+  return `var(--space-${n < 0 ? `negative${n}` : `${n}`}00)`;
+};
+
 const block = (str) =>
   [
     '{',
@@ -73,56 +82,56 @@ const classname = (namespace, className) =>
   namespace ? `.${namespace}${capitalize(className)}` : `.${className}`;
 
 const rules = (i, prefix) => [
-  ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginStart${i}`)}`, {
+  ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginStart${i * 100}`)}`, {
     'margin-left': space(i),
   }),
-  ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginEnd${i}`)}`, {
+  ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginEnd${i * 100}`)}`, {
     'margin-right': space(i),
   }),
-  ruleset(`html[dir="rtl"] ${classname(prefix, `marginStart${i}`)}`, {
+  ruleset(`html[dir="rtl"] ${classname(prefix, `marginStart${i * 100}`)}`, {
     'margin-right': space(i),
   }),
-  ruleset(`html[dir="rtl"] ${classname(prefix, `marginEnd${i}`)}`, {
+  ruleset(`html[dir="rtl"] ${classname(prefix, `marginEnd${i * 100}`)}`, {
     'margin-left': space(i),
   }),
   ...(i !== 0
     ? [
-        ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginStartN${i}`)}`, {
+        ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginStartN${i * 100}`)}`, {
           'margin-left': space(-i),
         }),
-        ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginEndN${i}`)}`, {
+        ruleset(`html:not([dir="rtl"]) ${classname(prefix, `marginEndN${i * 100}`)}`, {
           'margin-right': space(-i),
         }),
-        ruleset(`html[dir="rtl"] ${classname(prefix, `marginStartN${i}`)}`, {
+        ruleset(`html[dir="rtl"] ${classname(prefix, `marginStartN${i * 100}`)}`, {
           'margin-right': space(-i),
         }),
-        ruleset(`html[dir="rtl"] ${classname(prefix, `marginEndN${i}`)}`, {
+        ruleset(`html[dir="rtl"] ${classname(prefix, `marginEndN${i * 100}`)}`, {
           'margin-left': space(-i),
         }),
       ]
     : []),
-  ruleset(classname(prefix, `marginTop${i}`), {
+  ruleset(classname(prefix, `marginTop${i * 100}`), {
     'margin-top': space(i),
   }),
-  ruleset(classname(prefix, `marginBottom${i}`), {
+  ruleset(classname(prefix, `marginBottom${i * 100}`), {
     'margin-bottom': space(i),
   }),
   ...(i !== 0
     ? [
-        ruleset(classname(prefix, `marginTopN${i}`), {
+        ruleset(classname(prefix, `marginTopN${i * 100}`), {
           'margin-top': space(-i),
         }),
-        ruleset(classname(prefix, `marginBottomN${i}`), {
+        ruleset(classname(prefix, `marginBottomN${i * 100}`), {
           'margin-bottom': space(-i),
         }),
       ]
     : []),
-  ruleset(classname(prefix, `paddingY${i}`), {
+  ruleset(classname(prefix, `paddingY${i * 100}`), {
     'padding-bottom': space(i),
     'padding-top': space(i),
   }),
 
-  ruleset(classname(prefix, `paddingX${i}`), {
+  ruleset(classname(prefix, `paddingX${i * 100}`), {
     'padding-left': space(i),
     'padding-right': space(i),
   }),