diff --git a/polaris.shopify.com/content/design/colors/index.md b/polaris.shopify.com/content/design/colors/index.md
index 1527b4fb1f8..863a7cc1e8f 100644
--- a/polaris.shopify.com/content/design/colors/index.md
+++ b/polaris.shopify.com/content/design/colors/index.md
@@ -28,7 +28,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color has purpose
 
@@ -46,7 +46,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
         Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.
 
@@ -85,7 +85,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color has impact
 
@@ -103,7 +103,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.
 
@@ -145,7 +145,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color is accessible
 
@@ -165,7 +165,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify and interact with.
 
diff --git a/polaris.shopify.com/content/design/depth/creating-depth.md b/polaris.shopify.com/content/design/depth/creating-depth.md
index 77435e2020d..ea2e2eca90e 100644
--- a/polaris.shopify.com/content/design/depth/creating-depth.md
+++ b/polaris.shopify.com/content/design/depth/creating-depth.md
@@ -1,6 +1,6 @@
 ---
 title: Creating Depth
-icon: ColorsMajor
+icon: VariantMajor
 showTOC: true
 keywords:
   - depth
@@ -9,7 +9,7 @@ keywords:
   - bevel use
 ---
 
-# {frontmatter.title}
+# Depth &rarr; {frontmatter.title}
 
 <Subnav />
 
@@ -37,10 +37,10 @@ keywords:
 
   </Card>
   <Card>
-    <Grid gap="400" 
+    <Grid gap="400"
       areas={{
-        xs: ['a a a a a a ', 'b b b b b b'], 
-        lg: ['a a a a b b b b b b b b'] 
+        xs: ['a a a a a a ', 'b b b b b b'],
+        lg: ['a a a a b b b b b b b b']
       }}
     >
     <Grid.Cell area="a">
@@ -86,10 +86,10 @@ keywords:
   </Card>
 
   <Card>
-    <Grid gap="400" 
+    <Grid gap="400"
       areas={{
-        xs: ['a a a a a a ', 'b b b b b b', 'c c c c c c'], 
-        lg: ['a a a a b b b b c c c c'] 
+        xs: ['a a a a a a ', 'b b b b b b', 'c c c c c c'],
+        lg: ['a a a a b b b b c c c c']
       }}
     >
       <Grid.Cell area="a">
@@ -123,8 +123,8 @@ keywords:
   </Card>
   <Card>
     <Grid gap="400" areas={{
-        xs: ['a a a a a a ', 'b b b b b b'], 
-        lg: ['a a a a b b b b b b b b'] 
+        xs: ['a a a a a a ', 'b b b b b b'],
+        lg: ['a a a a b b b b b b b b']
     }}>
       <Grid.Cell area="a">
 
diff --git a/polaris.shopify.com/content/design/icons/creating-icons.md b/polaris.shopify.com/content/design/icons/creating-icons.md
index 1f29cb604e3..6e9016bd3eb 100644
--- a/polaris.shopify.com/content/design/icons/creating-icons.md
+++ b/polaris.shopify.com/content/design/icons/creating-icons.md
@@ -30,7 +30,7 @@ keywords:
   - icon visual harmony.
 ---
 
-# {frontmatter.title}
+# Icons &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
diff --git a/polaris.shopify.com/content/design/icons/using-icons.md b/polaris.shopify.com/content/design/icons/using-icons.md
index 35949688121..a8db0b7ce85 100644
--- a/polaris.shopify.com/content/design/icons/using-icons.md
+++ b/polaris.shopify.com/content/design/icons/using-icons.md
@@ -21,7 +21,7 @@ keywords:
   - icon colors
 ---
 
-# {frontmatter.title}
+# Icons &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
diff --git a/polaris.shopify.com/content/design/layout/density.md b/polaris.shopify.com/content/design/layout/density.md
index 27ee380c925..a7f9894ebfb 100644
--- a/polaris.shopify.com/content/design/layout/density.md
+++ b/polaris.shopify.com/content/design/layout/density.md
@@ -29,10 +29,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## High density
 
                 Information-rich interfaces like index pages or data tables require high-density layouts for efficiency. By presenting information in a denser format, merchants can quickly access and compare data, enhancing the effectiveness of the Shopify admin.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -42,8 +44,9 @@ description: The admin is high density by default, but the level of density can
                 </Do>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+            <Box padding="400">
                 Another way to create visual zones in high density layouts is to use different surface colors. Secondary colors can be used to create visual hierarchy within a high density component to increase visual hierarchy and to guide merchants to the data that matters most.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -58,10 +61,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Grid and vertical divisions
 
                 Dividing surfaces vertically and in a grid pattern also offers a way to increase density. This type of visual pattern is better suited for selections or data visualization and should be used accordingly. These divisions are made by using different surface background colors instead of using line dividers.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -85,10 +90,12 @@ description: The admin is high density by default, but the level of density can
      <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Action components use high density
 
                 Smaller components, like option lists or popovers, are built with high density in mind. Because their main purpose is to offer a set of actions to the merchant, they need to feel small and efficient. Effectively designed action components give the feeling of a pro tool in the Shopify admin and increase efficiency when using different features.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -112,6 +119,7 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Low density
 
@@ -120,6 +128,7 @@ description: The admin is high density by default, but the level of density can
                 Because low density interfaces offer more space, there is more for the merchant to analyze before taking action. Low density interfaces can also contain high density components, like a complex text editor within a card that serves to edit a product title and description.
 
                 Top-to-bottom visual rhythm is often used to create a linear and predictable layout that is easy for merchants to understand.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -144,10 +153,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Switching contexts
 
                 Cards are the best way to switch context in low density layouts. Each card can be specialized in a set of features that requires the merchant to recenter their focus.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
diff --git a/polaris.shopify.com/content/design/layout/index.md b/polaris.shopify.com/content/design/layout/index.md
index e8c41c825a0..8dce091e3bc 100644
--- a/polaris.shopify.com/content/design/layout/index.md
+++ b/polaris.shopify.com/content/design/layout/index.md
@@ -28,23 +28,24 @@ status: New
 
 <Subnav />
 
-## Overview
-
 <Stack gap="800">
 <Card>
 <Grid gap="400" >
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
-### Space defines proximity
+<Box padding="400">
+## Space defines proximity
 
 Space plays a vital role in establishing connections between items. The principle of proximity states that the closer objects are, the stronger their perceived relationship.
 
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
     ![An order card with an inset table followed by an apps card with a grid pattern made of different surfaces](/images/design/layout/layout-overview-01-space@2x.png)
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+<Box padding="400">
 Grouping similar items together helps merchants understand which elements are related and make faster decisions.
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>
@@ -68,13 +69,14 @@ Grouping similar items together helps merchants understand which elements are re
 <Card>
 <Grid gap="400">
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
 ## Emphasis creates hierarchy
 
 In the Shopify admin, larger, heavier, and contrasting elements attract attention and create visual rhythm.
 
 Smaller, lighter, and subtler elements are work-oriented and provide detailed information.
 
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
 
@@ -82,9 +84,9 @@ Smaller, lighter, and subtler elements are work-oriented and provide detailed in
 
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
     Use size, weight, and contrast to establish hierarchy in the admin. Divider lines are used to delimit rows of information in data and index tables, and rarely for dividing information elsewhere.
-
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>
@@ -108,11 +110,12 @@ Smaller, lighter, and subtler elements are work-oriented and provide detailed in
 <Card>
 <Grid gap="400">
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
 ## Software, not website
 
 Since the admin is more like software than a website, elements need to be sized appropriately based on their job.
 
+</Box>
 </Grid.Cell>
 
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -122,7 +125,9 @@ Since the admin is more like software than a website, elements need to be sized
 </Grid.Cell>
 
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+<Box padding="400">
     Compact elements add detail, and larger elements command more attention. Surfaces adapt to these components and offer an optimized view of the admin.
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>
diff --git a/polaris.shopify.com/content/design/layout/layout-tokens.md b/polaris.shopify.com/content/design/layout/layout-tokens.md
index 447568d627c..3987a926184 100644
--- a/polaris.shopify.com/content/design/layout/layout-tokens.md
+++ b/polaris.shopify.com/content/design/layout/layout-tokens.md
@@ -27,15 +27,15 @@ description: Apply consistent and harmonious space within and between ui element
 
 <Stack gap="800">
 
-## Overview
-
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
-                ### Using space tokens
+                ## Using space tokens
 
                 Space tokens should be used whenever you need to apply space around or between elements within. You should apply space tokens to all space related css properties such as padding, margin and gap. They should not be used for non-space declarations such as height, width, outline-offset, etc. Always use the proper token group when using Polaris tokens. If a token doesn’t seem to fit your need feel free to reach out in the #polaris channel or create an issue in Github.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -48,12 +48,14 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Primitive tokens
 
                 Primitive tokens refer to generic tokens that can be applied to provide spacing around or between components. They give access to the full scale of values offered by Polaris for managing space within the interface.
 
                 Each is simply named by declaring the token group and then the percentage multiplier of our base value of 4px. Therefore, space-100 is equal to 4px while space-400 equals 16px.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -66,12 +68,14 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Semantic tokens
 
                 Similar to color tokens, semantic space tokens provide spacing for specific and defined contexts within the admin. These tokens should only be used for that explicit purpose. When no semantic token seems to fit your need, use a primitive token instead.
 
                 Semantic tokens explicitly declare what css selector they should be applied to. For example, space-card-padding should only be used to set the padding within the Card component.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: example use of card-padding token](/images/design/layout/tokens/layout-tokens-semantic@2x.png)
@@ -91,15 +95,18 @@ description: Apply consistent and harmonious space within and between ui element
         </Grid>
     </Card>
 
-    ## How to apply them
+
 
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
+                ## How to apply tokens
 
                 ### Figma
 
                 Semantic and primitive space tokens can be accessed via the auto layout padding and gap inputs in the right panel.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: Dropdown of variables in Figma](/images/design/layout/tokens/layout-tokens-figma@2x.png)
@@ -110,10 +117,12 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Polaris React
 
                 Space tokens can be applied in two main ways in Polaris Reach. First, all of the layout components such as Box have access to the tokens via their prop api. Second, when writing your own css you can use the token directly via the css variables that come with the Polaris token package.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: Dropdown of variables in Figma](/images/design/layout/tokens/layout-tokens-polaris-react@2x.png)
diff --git a/polaris.shopify.com/content/design/layout/spacial-organization.md b/polaris.shopify.com/content/design/layout/spacial-organization.md
index 6afac8ee1c8..349f6e6e340 100644
--- a/polaris.shopify.com/content/design/layout/spacial-organization.md
+++ b/polaris.shopify.com/content/design/layout/spacial-organization.md
@@ -29,10 +29,12 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400" >
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Building layouts
 
                 The Shopify admin is built by using a combination of components like cards, popovers, modals, tables and so on. These components define the elevation of different surfaces in the admin and how they can interact with each other.
+            </Box>
 
             </Grid.Cell>
 
@@ -46,10 +48,12 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Surfaces
 
                 Surfaces in the admin contain other elements, like badges and text. Cards, popovers, modals and other such components are surfaces that are used to build the admin.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -62,6 +66,7 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Dividing surfaces
 
@@ -70,6 +75,7 @@ description: Components, elements and surfaces are organized to create compositi
                 Nested surfaces can be grouped together within another surface to achieve visual separation between different parts of a component.
 
                 Divider lines are reserved for data and index tables.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
 
@@ -126,10 +132,12 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400" >
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Nesting
 
                 Nesting surfaces and other elements is crucial to the pro feel of the Shopify admin. Careful consideration should be taken when using elements of varying border radiuses in order to create the feeling that the interface is purpose-built.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -160,10 +168,12 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Nesting tables
 
                 Tables and lists that exist within another container follow slightly different spacing guidelines. Horizontal padding is adjusted to give more space for data, and to avoid having too much empty space overall.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -193,12 +203,14 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Shaped elements
 
                 Shaped elements contain other design elements within a container that has a certain shape. These elements can live on surfaces or on backgrounds and are often smaller and serve a single purpose, like badges.
 
                 Shaped elements often do not have an elevation and their shapes are considered to either be target zones if they’re interactive, or serve as a visual indicator to make them easier to scan.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -224,10 +236,12 @@ description: Components, elements and surfaces are organized to create compositi
      <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Buttons
 
                 Buttons are shaped elements, as their contents can vary their sizing to adjust for visual balance. Sizing of buttons depends on context. Standalone or grouped, buttons have a default size that is widely used in the admin. Because buttons often pull the most attention to a primary action, their size has been adjusted so as to not overwhelm the visual balance of the admin.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -239,10 +253,12 @@ description: Components, elements and surfaces are organized to create compositi
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Breaking alignment
 
                 Breaking alignment or spacing may be required in some rare instances. Depending on the layout of the page, alignments may be mathematically inconsistent, but will be visually aligned. Make sure to use imaginary keylines to create neatly aligned containers in the UI if spacing is inconsistent within each container.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
diff --git a/polaris.shopify.com/content/design/motion/creating-motion.md b/polaris.shopify.com/content/design/motion/creating-motion.md
index 0a11c0e9b03..33ec34e6c43 100644
--- a/polaris.shopify.com/content/design/motion/creating-motion.md
+++ b/polaris.shopify.com/content/design/motion/creating-motion.md
@@ -5,9 +5,10 @@ keywords:
   - motion
   - animation
   - design
+icon: TransactionMajor
 ---
 
-# {frontmatter.title}
+# Motion &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
@@ -92,24 +93,18 @@ Animations should be simple and purposeful, used to enhance understanding or pro
 
 #### Do
 
-  <video
-    width="100%"
-    height="auto"
-    controls
-    autoPlay
-    muted
-    loop
-  >
-    <source
-      src="/images/design/motion/creating/02-animation-do.mp4"
-      type="video/mp4"
-    />
-    Checkbox animation mimicking the real world.
-  </video>
-  Use simple, meaningful animations that are consistent with the overall style
-  and tone of the interface. 
-  
-  #### Dont
+<video width="100%" height="auto" controls autoPlay muted loop>
+  <source
+    src="/images/design/motion/creating/02-animation-do.mp4"
+    type="video/mp4"
+  />
+  Checkbox animation mimicking the real world.
+</video>
+Use simple, meaningful animations that are consistent with the overall style and
+tone of the interface.
+
+#### Dont
+
   <video
     width="100%"
     height="auto"
@@ -135,23 +130,18 @@ Timing is crucial in motion design. Motion is fast enough to not cause delay, bu
 
 #### Do
 
-  <video
-    width="100%"
-    height="auto"
-    controls
-    autoPlay
-    muted
-    loop
-  >
-    <source
-      src="/images/design/motion/creating/03-timing-do.mp4"
-      type="video/mp4"
-    />
-    Tooltip moving to place with a quick animation.
-  </video>
-Use appropriate timing for your animations and transitions. Matching the timing of the motion to merchant expectations.
-  
-  #### Dont
+<video width="100%" height="auto" controls autoPlay muted loop>
+  <source
+    src="/images/design/motion/creating/03-timing-do.mp4"
+    type="video/mp4"
+  />
+  Tooltip moving to place with a quick animation.
+</video>
+Use appropriate timing for your animations and transitions. Matching the timing of
+the motion to merchant expectations.
+
+#### Dont
+
   <video
     width="100%"
     height="auto"
diff --git a/polaris.shopify.com/content/design/motion/using-motion.md b/polaris.shopify.com/content/design/motion/using-motion.md
index 81ace71985d..59131b56df9 100644
--- a/polaris.shopify.com/content/design/motion/using-motion.md
+++ b/polaris.shopify.com/content/design/motion/using-motion.md
@@ -5,9 +5,10 @@ keywords:
   - motion
   - animation
   - design
+icon: PlayMinor
 ---
 
-# {frontmatter.title}
+# Motion &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
@@ -44,7 +45,7 @@ Motion can be used to provide feedback, helping merchants understand the results
     <Dont>
       <video
         width="100%"
-        
+
         height="auto"
         controls
         autoPlay
@@ -59,12 +60,13 @@ Motion can be used to provide feedback, helping merchants understand the results
       </video>
       Use motion that doesn't correspond to the action taken. Inconsistent feedback will lead to misunderstandings.
     </Dont>
+
   </Grid.Cell>
   <Grid.Cell area="b">
     <Dont>
       <video
         width="100%"
-        
+
         height="auto"
         controls
         autoPlay
@@ -79,6 +81,7 @@ Motion can be used to provide feedback, helping merchants understand the results
       </video>
       Use overly elaborate or lengthy animations for simple feedback.
     </Dont>
+
   </Grid.Cell>
 </Grid>
 </Stack>
@@ -91,7 +94,7 @@ Motion can guide merchant attention during navigation, helping to maintain conte
   <Do>
     <video
       width="100%"
-      
+
       height="auto"
       controls
       autoPlay
@@ -105,6 +108,7 @@ Motion can guide merchant attention during navigation, helping to maintain conte
        A transition between two pages with a nest relationship, where elements are animated in a single horizontal motion, right to left when going deeper, left to right when going back.
     </video>
     Use motion to subtly guide attention during navigation. So merchants understand where to focus and what action to take next.
+
   </Do>
 
 <Grid
@@ -115,7 +119,7 @@ Motion can guide merchant attention during navigation, helping to maintain conte
     <Dont>
       <video
         width="100%"
-        
+
         height="auto"
         controls
         autoPlay
@@ -130,12 +134,13 @@ Motion can guide merchant attention during navigation, helping to maintain conte
       </video>
       Use motion that distracts from the navigation process. Excessive or irrelevant motion can confuse merchants and detract from the main content or action.
     </Dont>
+
   </Grid.Cell>
   <Grid.Cell area="b">
     <Dont>
       <video
         width="100%"
-        
+
         height="auto"
         controls
         autoPlay
@@ -150,6 +155,7 @@ Motion can guide merchant attention during navigation, helping to maintain conte
       </video>
       Use motion that could potentially mislead merchant's navigation path. The direction and behavior of the motion should align with the navigation flow.
     </Dont>
+
   </Grid.Cell>
 </Grid>
 </Stack>
@@ -162,7 +168,7 @@ Motion can be used to indicate loading states, keeping merchants informed and en
   <Do>
     <video
       width="100%"
-      
+
       height="auto"
       controls
       autoPlay
@@ -176,6 +182,7 @@ Motion can be used to indicate loading states, keeping merchants informed and en
       An outlined three quarters of a circle spinning.
     </video>
     Use loading animations that give a sense of progress or activity. A clear visual cue that the system is processing helps to manage merchant expectations, and helps to reduce perceived wait times.
+
   </Do>
 
 <Grid
@@ -185,15 +192,16 @@ Motion can be used to indicate loading states, keeping merchants informed and en
   <Grid.Cell area="a">
     <Dont>
       ![An icon representing an hourglass.](/images/design/motion/using/03-loading-dont1@2x.png)
-      
+
       Use static loading indicators, as they make the system seem unresponsive or slow.
     </Dont>
+
   </Grid.Cell>
   <Grid.Cell area="b">
     <Dont>
       <video
         width="100%"
-        
+
         height="auto"
         controls
         autoPlay
@@ -208,6 +216,7 @@ Motion can be used to indicate loading states, keeping merchants informed and en
       </video>
       Use overly complex or distracting loading animations. The animation should be subtle and not detract from the rest of the interface.
     </Dont>
+
   </Grid.Cell>
 </Grid>
 </Stack>
diff --git a/polaris.shopify.com/content/design/typography/font-and-typescale.md b/polaris.shopify.com/content/design/typography/font-and-typescale.md
index 7c666ce690a..a5d5bbaaea4 100644
--- a/polaris.shopify.com/content/design/typography/font-and-typescale.md
+++ b/polaris.shopify.com/content/design/typography/font-and-typescale.md
@@ -8,9 +8,10 @@ keywords:
   - fonts
 icon: TextAlignmentLeftMajor
 hideChildren: true
+order: 1
 ---
 
-# {frontmatter.title}
+# Typography &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
diff --git a/polaris.shopify.com/content/design/typography/typography-tokens.md b/polaris.shopify.com/content/design/typography/typography-tokens.md
index c0ac74422d5..8b9ef454629 100644
--- a/polaris.shopify.com/content/design/typography/typography-tokens.md
+++ b/polaris.shopify.com/content/design/typography/typography-tokens.md
@@ -1,5 +1,5 @@
 ---
-title: Typography tokens
+title: Tokens
 description: Typography is the art of arranging type in ways that provides innate hierarchy to UI.
 showTOC: true
 keywords:
@@ -8,9 +8,10 @@ keywords:
   - fonts
 icon: Hexagon
 hideChildren: true
+order: 3
 ---
 
-# {frontmatter.title}
+# Typography &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
diff --git a/polaris.shopify.com/content/design/typography/using-type.md b/polaris.shopify.com/content/design/typography/using-type.md
index 30027c6ca15..569f3bff8a1 100644
--- a/polaris.shopify.com/content/design/typography/using-type.md
+++ b/polaris.shopify.com/content/design/typography/using-type.md
@@ -8,9 +8,10 @@ keywords:
   - fonts
 icon: TypeMajor
 hideChildren: true
+order: 2
 ---
 
-# {frontmatter.title}
+# Typography &rarr; {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 
@@ -39,7 +40,7 @@ Vertical alignment is used on type where line height and padding on an element a
 
     ![A badge where the type and icon are different sizes, but are centered vertically to achieve symmetry](/images/design/typography/typography-using-type-03-vertical-do@2x.png)
 
-    Consider aligning centering type vertically when bounding boxes differ from one element to another.
+    Consider aligning type vertically when bounding boxes differ from one element to another.
 
   </Do>