docs(site): clarify spacing migration examples

Make the spacing demo legible on the docs site and explain what the standalone example is showing.

Carry the spacing-specific QA refinements onto the spacing review branch without pulling in the later typography example cleanup.

Author: diogo-filipe-costa

packages/site/styles/design-example-overrides.scss

@@ -27,25 +27,23 @@ body {
 }
 
 /*
-  In order to show how the grid works, we need to have an element inside the
-  grid that is visible and fills the available space with a background color.
+  Spacing examples need a visible content block so the responsive gap beneath
+  each item is easy to inspect in the docs iframe.
 */
-.ofh-grid-row > .spacing-example div > p {
-  background-color: $ofh-color-brand-blue-royal-2;
-  color: $ofh-color-greyscale-white;
-  padding: 20px;
-  text-align: center;
+.spacing-example__item {
+  border-left: 4px solid $ofh-color-brand-blue-royal-4;
 }
 
-/*
-  Spacing examples for on divs
-*/
-.spacing-example div {
-  background: $ofh-color-brand-blue-royal-5;
+.spacing-example__item > p {
+  background-color: $ofh-color-brand-blue-royal-2;
+  color: $ofh-color-greyscale-white;
+  margin: 0;
+  padding: 12px 16px;
+  width: fit-content;
 }
 
-.spacing-example div:nth-of-type(odd) {
-  background: $ofh-color-brand-blue-royal-4;
+.spacing-example__item:nth-of-type(odd) > p {
+  background-color: $ofh-color-brand-blue-royal-4;
 }
 
 /*

packages/site/views/design-system/styles/spacing/default/index.njk

@@ -1,12 +1,12 @@
 <div class="spacing-example">
-  <div class="ofh-u-padding-bottom-56"></div>
-  <div class="ofh-u-padding-bottom-48"></div>
-  <div class="ofh-u-padding-bottom-40"></div>
-  <div class="ofh-u-padding-bottom-32"></div>
-  <div class="ofh-u-padding-bottom-24"></div>
-  <div class="ofh-u-padding-bottom-16"></div>
-  <div class="ofh-u-padding-bottom-12"></div>
-  <div class="ofh-u-padding-bottom-8"></div>
-  <div class="ofh-u-padding-bottom-4"></div>
-  <div class="ofh-u-padding-bottom-2"></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-56"><p>Size key 56</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-48"><p>Size key 48</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-40"><p>Size key 40</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-32"><p>Size key 32</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-24"><p>Size key 24</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-16"><p>Size key 16</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-12"><p>Size key 12</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-8"><p>Size key 8</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-4"><p>Size key 4</p></div>
+  <div class="spacing-example__item ofh-u-padding-bottom-2"><p>Size key 2</p></div>
 </div>

packages/site/views/design-system/styles/spacing/index.njk

@@ -2,7 +2,7 @@
 {% set pageDescription = "Spacing pages and setting the width of page elements so that they are consistent, responsive and clear." %}
 {% set pageSection = "Design system" %}
 {% set subSection = "Foundation styles" %}
-{% set dateUpdated = "April 2023" %}
+{% set dateUpdated = "March 2026" %}
 {% set backlog_issue_id = "24" %}
 {% set hideContact = "true" %}
 
@@ -145,6 +145,7 @@
   <p class="rich-text">The last part of the class is the spacing size key. For example, <code>ofh-u-margin-56</code> uses the <code>56</code> responsive spacing token.</p>
 
   <h3 id="spacing-examples" class="ofh-u-padding-top-12">Examples</h3>
+  <p>In the default example below, the blue label is the content block and the white gap underneath it is the responsive spacing being applied.</p>
 
   {{ designExample({
     group: "styles",