diff --git a/build.washingtonpost.com/docs/foundations/principles.mdx b/build.washingtonpost.com/docs/foundations/principles.mdx
index b3a4d65d1..0290c05b3 100644
--- a/build.washingtonpost.com/docs/foundations/principles.mdx
+++ b/build.washingtonpost.com/docs/foundations/principles.mdx
@@ -5,6 +5,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ---
 
 <BR />
+
 ## Table of contents
 
 - [Reusable](/foundations/principles#1.%20Reusable)
@@ -18,7 +19,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 1. Reusable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Component Reusability
 
@@ -26,8 +27,9 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 - **Consistency:** Ensure visual and functional consistency across all platforms and products to foster a unified brand image and enhance user familiarity.
 - **Documentation:** Maintain comprehensive documentation for each component, detailing its purpose, usage guidelines, and implementation code to facilitate easy adoption by other teams and projects.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -42,7 +44,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 2. Functional
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### User-Centered Functionality
 
@@ -50,8 +52,9 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 - **Performance:** Ensure components are optimized for performance, minimizing load times and ensuring smooth interactions.
 - **Reliability:** Design components should consistently perform their intended function across all use cases and user flows.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -66,7 +69,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 3. Adaptable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Responsive and Scalable Design
 
@@ -74,8 +77,9 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 - **Scalability:** Design components should be able to handle variations in content and functionality without compromising user experience or aesthetic appeal.
 - **Globalization:** Consider localization and internationalization to ensure the design system is adaptable to different languages and cultures.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -90,7 +94,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 4. Predictable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Intuitive and Predictable Interactions
 
@@ -98,8 +102,9 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 - **Feedback:** Provide clear and immediate feedback in response to user actions to confirm outcomes and guide next steps.
 - **Guidance:** Implement clear, intuitive wayfinding and familiar ui so users understand and can predict how a component behaves/functions when they see it on our product.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -114,7 +119,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 5. Accessible
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Inclusive and Accessible Design
 
@@ -122,8 +127,9 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 - **Compliance:** Adhere to WCAG (Web Content Accessibility Guidelines) to ensure that digital content is accessible to all users, including those with disabilities.
 - **Inclusive Imagery and Language:** Utilize imagery and language that reflect diversity and inclusivity, ensuring that all users feel represented and welcomed.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}