diff --git a/site/content/docs/0.0/examples/grid-system/grid-system.css b/site/content/docs/0.0/examples/grid-system/grid-system.css
index aac4607cf7..10bedd3742 100644
--- a/site/content/docs/0.0/examples/grid-system/grid-system.css
+++ b/site/content/docs/0.0/examples/grid-system/grid-system.css
@@ -1,27 +1,35 @@
-.padding-color {
+:root {
+  --bs-example-bg-col: #ffe2e2;
+}
+
+.legend {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.bg-example {
+  background-color: #ff9f9f;
+}
+
+.bg-col {
+  background-color: var(--bs-example-bg-col);
+}
+
+.col {
   text-align: center;
-  background-color: #ffe2e2;
+  background-color: var(--bs-example-bg-col);
   background-clip: content-box;
 }
 
-div.row .padding-color {
+div.row .col {
   box-shadow: inset calc(var(--bs-gutter-x) * -.5) 0 0 0 #fff, inset calc(var(--bs-gutter-x) * .5) 0 0 0 #fff;
 }
 
-div.row .padding-color:first-child {
+div.row .col:first-child {
   box-shadow: inset calc(var(--bs-gutter-x) * -.5) 0 0 0 #fff;
 }
 
-div.row .padding-color:last-child {
+div.row .col:last-child {
   box-shadow: inset calc(var(--bs-gutter-x) * .5) 0 0 0 #fff;
 }
-
-.legend {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
-
-.column-color {
-  background-color: #ffe2e2;
-}
diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
index 10e84c1bcf..771cbecf40 100644
--- a/site/content/docs/0.0/examples/grid-system/index.html
+++ b/site/content/docs/0.0/examples/grid-system/index.html
@@ -21,276 +21,242 @@
   </symbol>
 </svg>
 
-<main style="background-color: #ff9f9f; min-height: 100vh" data-bs-theme="light">
-
-  <div class="container-fluid container-max-width mb-3 pt-3">
+<main style="min-height: 100vh">
+  <div class="container-fluid container-max-width pt-4">
     <h1>OUDS Web grid system example</h1>
-    <p>Use this page to see how containers behave while resizing the browser window.</p>
+    <p class="lead">Use this page to see how containers behave while resizing the browser.</p>
     <h2>Legend</h2>
-    <p><span class="bg-light legend border"></span> <span class="align-middle">Containers padding color (#CCCCCC)</span></p>
-    <p><span class="column-color legend border"></span> <span class="align-middle">Columns color (#FFE2E2)</span></p>
-    <p><span class="bg-white legend border"></span> <span class="align-middle">Gutters color (#FFFFFF)</span></p>
+    <p class="d-flex align-items-center">
+      <span class="bg-light legend border me-2"></span>Containers padding color (<code>#CCCCCC</code>)
+    </p>
+    <p class="d-flex align-items-center">
+      <span class="bg-col legend border me-2"></span>Columns color (<code>#FFE2E2</code>)</span>
+    </p>
+    <p class="d-flex align-items-center">
+      <span class="bg-white legend border me-2"></span>Gutters color (<code>#FFFFFF</code>)
+    </p>
   </div>
 
   <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">
-      Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.container-max-width</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
-        <use xlink:href="#info"></use>
-      </svg>
-      To be used by default
+    <h2>Default grid</h2>
+    <p>
+      The default grid system to use is the one combining <code>.container-fluid</code> and <code>.container-max-width</code> classes.
     </p>
   </div>
-  <div class="container-fluid container-max-width mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <div class="bg-example py-3">
+    <div class="container-fluid container-max-width bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
   <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-fluid</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
-        <use xlink:href="#info"></use>
-      </svg>
-      To be used if more space is needed
+    <h2>Need more space?</h2>
+    <p>
+      If more space is needed, use only the <code>.container-fluid</code> class.
     </p>
   </div>
-  <div class="container-fluid mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <div class="bg-example py-3">
+    <div class="container-fluid bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
 <!--
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  The following examples must not be used to be compatible with Orange Unified Design System.
+  They're here for debugging purpose for the OUDS Web core team.
+-->
+<!--
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-xs</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-xs mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-xs bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-sm</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-sm mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-sm bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-md</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-md mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-md bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-lg</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-lg mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-lg bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-xl</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-xl mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-xl bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-2xl</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-2xl mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-2xl bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
-    <p class="text-center">Class <code class="text-black">.container-3xl</code></p>
-    <p class="text-center">
-      <svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
-        <use xlink:href="#warning-important-accessible"></use>
-      </svg>
-      Should not be used to be compatible with Orange Unified Design System
-    </p>
-  </div>
-  <div class="container-3xl mb-3 bg-light">
-    <div class="row" style="min-height: 150px">
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
-      <div class="col padding-color"></div>
+  <hr class="border-none">
+
+  <div class="bg-example py-3">
+    <div class="container-3xl bg-light">
+      <div class="row" style="min-height: 150px">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
     </div>
   </div>
 -->