From 8ae8242fde1bde65153e20ff883962923fd0306f Mon Sep 17 00:00:00 2001
From: Alexandra Duval <alexandra.duval@orange.com>
Date: Wed, 24 Jun 2026 15:41:50 +0200
Subject: [PATCH 1/6] feat: added label font sizes tokens and updated docs

---
 .../orange-compact/scss/tokens/_semantic.scss |  4 +++
 packages/orange/scss/tokens/_semantic.scss    |  6 +++-
 packages/sosh/scss/tokens/_semantic.scss      |  4 +++
 scss/_maps.scss                               |  4 +++
 .../migration-from-boosted.mdx                |  4 +--
 .../docs/getting-started/migration.mdx        |  4 +--
 site/src/content/docs/utilities/text.mdx      | 28 +++++++++++++++----
 7 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/packages/orange-compact/scss/tokens/_semantic.scss b/packages/orange-compact/scss/tokens/_semantic.scss
index 3ebd633533..ed30a6c5f9 100644
--- a/packages/orange-compact/scss/tokens/_semantic.scss
+++ b/packages/orange-compact/scss/tokens/_semantic.scss
@@ -445,6 +445,10 @@ $ouds-font-size-body-small-desktop: $core-ouds-font-size-175 !default;
 $ouds-font-size-body-small-mobile: $core-ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $core-ouds-font-size-150 !default;
 $ouds-font-size-code-medium: $core-ouds-font-size-200 !default;
+$ouds-font-size-label-xlarge: $core-ouds-font-size-300 !default;
+$ouds-font-size-label-large: $core-ouds-font-size-250 !default;
+$ouds-font-size-label-medium: $core-ouds-font-size-200 !default;
+$ouds-font-size-label-small: $core-ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $core-ouds-font-size-850 !default;
 $ouds-font-size-display-large-mobile: $core-ouds-font-size-750 !default;
 $ouds-font-size-display-large-tablet: $core-ouds-font-size-750 !default;
diff --git a/packages/orange/scss/tokens/_semantic.scss b/packages/orange/scss/tokens/_semantic.scss
index 09323fcadc..de6197eb62 100644
--- a/packages/orange/scss/tokens/_semantic.scss
+++ b/packages/orange/scss/tokens/_semantic.scss
@@ -396,10 +396,10 @@ $ouds-font-letter-spacing-heading-small-tablet: $core-ouds-font-letter-spacing-3
 $ouds-font-letter-spacing-heading-xlarge-desktop: $core-ouds-font-letter-spacing-850 !default;
 $ouds-font-letter-spacing-heading-xlarge-mobile: $core-ouds-font-letter-spacing-550 !default;
 $ouds-font-letter-spacing-heading-xlarge-tablet: $core-ouds-font-letter-spacing-750 !default;
+$ouds-font-letter-spacing-label-xlarge: $core-ouds-font-letter-spacing-300 !default;
 $ouds-font-letter-spacing-label-large: $core-ouds-font-letter-spacing-250 !default;
 $ouds-font-letter-spacing-label-medium: $core-ouds-font-letter-spacing-200 !default;
 $ouds-font-letter-spacing-label-small: $core-ouds-font-letter-spacing-150 !default;
-$ouds-font-letter-spacing-label-xlarge: $core-ouds-font-letter-spacing-300 !default;
 $ouds-font-line-height-body-large-desktop: $core-ouds-font-line-height-450 !default;
 $ouds-font-line-height-body-large-mobile: $core-ouds-font-line-height-450 !default;
 $ouds-font-line-height-body-large-tablet: $core-ouds-font-line-height-450 !default;
@@ -410,6 +410,10 @@ $ouds-font-line-height-body-small-desktop: $core-ouds-font-line-height-350 !defa
 $ouds-font-line-height-body-small-mobile: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-body-small-tablet: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-code-medium: $core-ouds-font-line-height-350 !default;
+$ouds-font-line-height-label-xlarge: $core-ouds-font-line-height-450 !default;
+$ouds-font-line-height-label-large: $core-ouds-font-line-height-450 !default;
+$ouds-font-line-height-label-medium: $core-ouds-font-line-height-350 !default;
+$ouds-font-line-height-label-small: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-display-large-desktop: $core-ouds-font-line-height-2050 !default;
 $ouds-font-line-height-display-large-mobile: $core-ouds-font-line-height-1050 !default;
 $ouds-font-line-height-display-large-tablet: $core-ouds-font-line-height-1850 !default;
diff --git a/packages/sosh/scss/tokens/_semantic.scss b/packages/sosh/scss/tokens/_semantic.scss
index d90409100e..495067b600 100644
--- a/packages/sosh/scss/tokens/_semantic.scss
+++ b/packages/sosh/scss/tokens/_semantic.scss
@@ -465,6 +465,10 @@ $ouds-font-size-body-small-desktop: $core-ouds-font-size-200 !default;
 $ouds-font-size-body-small-mobile: $core-ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $core-ouds-font-size-150 !default;
 $ouds-font-size-code-medium: $core-ouds-font-size-200 !default;
+$ouds-font-size-label-xlarge: $core-ouds-font-size-300 !default;
+$ouds-font-size-label-large: $core-ouds-font-size-250 !default;
+$ouds-font-size-label-medium: $core-ouds-font-size-200 !default;
+$ouds-font-size-label-small: $core-ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $core-ouds-font-size-1850 !default;
 $ouds-font-size-display-large-mobile: $core-ouds-font-size-850 !default;
 $ouds-font-size-display-large-tablet: $core-ouds-font-size-1450 !default;
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 79261faf4f..026211b0b9 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -123,6 +123,10 @@ $ouds-elevations: (
 
 // scss-docs-start ouds-maps-font
 $ouds-font-sizes: (
+  lxl: "/label-xlarge",
+  ll: "/label-large",
+  lm: "/label-medium",
+  ls: "/label-small",
   cm: "/code-medium",
   bs: "/body-small",
   bm: "/body-medium",
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index c64423754c..930518a2dc 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -1483,10 +1483,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
       <li><code>$ouds-font-line-height-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-tablet</code></li>
+      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-line-height-label-large</code></li>
       <li><code>$ouds-font-line-height-label-medium</code></li>
       <li><code>$ouds-font-line-height-label-small</code></li>
-      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-size-body-large-desktop</code></li>
       <li><code>$ouds-font-size-body-large-mobile</code></li>
       <li><code>$ouds-font-size-body-large-tablet</code></li>
@@ -1518,10 +1518,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
       <li><code>$ouds-font-size-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-size-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-size-heading-xlarge-tablet</code></li>
+      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-size-label-large</code></li>
       <li><code>$ouds-font-size-label-medium</code></li>
       <li><code>$ouds-font-size-label-small</code></li>
-      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-weight-system-web-default</code></li>
       <li><code>$ouds-font-weight-system-web-strong</code></li>
       <li><code>$ouds-font-weight-web-body-default</code></li>
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index f4ab1679a3..ac524878f7 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -1681,10 +1681,10 @@ toc: true
       <li><code>$ouds-font-line-height-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-tablet</code></li>
+      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-line-height-label-large</code></li>
       <li><code>$ouds-font-line-height-label-medium</code></li>
       <li><code>$ouds-font-line-height-label-small</code></li>
-      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-size-150</code></li>
       <li><code>$ouds-font-size-200</code></li>
       <li><code>$ouds-font-size-250</code></li>
@@ -1730,10 +1730,10 @@ toc: true
       <li><code>$ouds-font-size-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-size-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-size-heading-xlarge-tablet</code></li>
+      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-size-label-large</code></li>
       <li><code>$ouds-font-size-label-medium</code></li>
       <li><code>$ouds-font-size-label-small</code></li>
-      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-weight-400</code></li>
       <li><code>$ouds-font-weight-700</code></li>
       <li><code>$ouds-font-weight-body-default</code></li>
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index c992ab7011..cc490eaaca 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -19,7 +19,11 @@ export const fontSize = [
   "body-large",
   "body-medium",
   "body-small",
-  "code-medium"
+  "code-medium",
+  "label-xlarge",
+  "label-large",
+  "label-medium",
+  "label-small"
 ]
 
 export const screenSize = [
@@ -140,13 +144,17 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
               {level === 'body-medium' && (<>Body medium (<code>{'.fs-bm'}</code>)</>)}
               {level === 'body-small' && (<>Body small (<code>{'.fs-bs'}</code>)</>)}
               {level === 'code-medium' && (<>Code medium (<code>{'.fs-cm'}</code>)</>)}
+              {level === 'label-xlarge' && (<>Label xlarge (<code>{'.fs-lxl'}</code>)</>)}
+              {level === 'label-large' && (<>Label large (<code>{'.fs-ll'}</code>)</>)}
+              {level === 'label-medium' && (<>Label medium (<code>{'.fs-lm'}</code>)</>)}
+              {level === 'label-small' && (<>Label small (<code>{'.fs-ls'}</code>)</>)}
             </td>
             {
               screenSize.map((size) => (
                 <td>
-                  {level !== 'code-medium'
+                  {(level !== 'code-medium' && !level.includes('label-'))
                     && (<><code>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem</code> ({getTokenValue(`$ouds-font-size-${level}-${size}`)})</>)}
-                  {level === 'code-medium'
+                  {(level === 'code-medium' || level.includes('label-'))
                     && (<><code>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem</code> ({getTokenValue(`$ouds-font-size-${level}`)})</>)}
                 </td>
               ))
@@ -188,11 +196,15 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
               {level === 'body-medium' && (<>Body medium (<code>{'.fs-bm'}</code>)</>)}
               {level === 'body-small' && (<>Body small (<code>{'.fs-bs'}</code>)</>)}
               {level === 'code-medium' && (<>Code medium (<code>{'.fs-cm'}</code>)</>)}
+              {level === 'label-xlarge' && (<>Label xlarge (<code>{'.fs-lxl'}</code>)</>)}
+              {level === 'label-large' && (<>Label large (<code>{'.fs-ll'}</code>)</>)}
+              {level === 'label-medium' && (<>Label medium (<code>{'.fs-lm'}</code>)</>)}
+              {level === 'label-small' && (<>Label small (<code>{'.fs-ls'}</code>)</>)}
             </td>
             {
               screenSize.map((size) => (
                 <td>
-                  {level !== 'code-medium'
+                  {(level !== 'code-medium' && !level.includes('label-'))
                     && (
                       <ul class="mb-none ps-medium">
                         <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem</b></li>
@@ -201,7 +213,7 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
                         <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>
                       </ul>
                     )}
-                  {level === 'code-medium'
+                  {(level === 'code-medium' || level.includes('label-'))
                     && (
                       <ul class="mb-none ps-medium">
                         <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem</b></li>
@@ -230,7 +242,11 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
   <p class="fs-bl">.fs-bl text</p>
   <p class="fs-bm">.fs-bm text</p>
   <p class="fs-bs">.fs-bs text</p>
-  <p class="fs-cm font-monospace">.fs-cm.font-monospace text</p>`} />
+  <p class="fs-cm font-monospace">.fs-cm.font-monospace text</p>
+  <p class="fs-lxl">.fs-lxl text</p>
+  <p class="fs-ll">.fs-ll text</p>
+  <p class="fs-lm">.fs-lm text</p>
+  <p class="fs-ls">.fs-ls text</p>`} />
 
 Customize your available `font-size`s by modifying the `$ouds-font-sizes` Sass map.
 

From e33c96528060ff6c50419509cc47e2f08c3d9892 Mon Sep 17 00:00:00 2001
From: Alexandra Duval <alexandra.duval@orange.com>
Date: Thu, 25 Jun 2026 12:20:43 +0200
Subject: [PATCH 2/6] feat: updated test and typography page

---
 .../_ouds-web-bootstrap-utilities.test.scss   | 64 +++++++++++++++++++
 .../content/docs/foundation/typography.mdx    | 33 ++++++++--
 2 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index d722fa63d4..ed6e6f44de 100644
--- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -3508,6 +3508,38 @@ $utilities: ();
 
         /* rtl:end:remove */
 
+        .fs-lxl {
+          font-size: var(--bs-font-size-label-xlarge);
+          line-height: var(--bs-font-line-height-label-xlarge);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
+        }
+
+        .fs-ll {
+          font-size: var(--bs-font-size-label-large);
+          line-height: var(--bs-font-line-height-label-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-large);
+        }
+
+        .fs-lm {
+          font-size: var(--bs-font-size-label-medium);
+          line-height: var(--bs-font-line-height-label-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-medium);
+        }
+
+        .fs-ls {
+          font-size: var(--bs-font-size-label-small);
+          line-height: var(--bs-font-line-height-label-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-small);
+        }
+
         .fs-cm {
           font-size: var(--bs-font-size-code-medium);
           line-height: var(--bs-font-line-height-code-medium);
@@ -15430,6 +15462,38 @@ $utilities: ();
 
         /* rtl:end:remove */
 
+        .fs-lxl {
+          font-size: var(--bs-font-size-label-xlarge);
+          line-height: var(--bs-font-line-height-label-xlarge);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
+        }
+
+        .fs-ll {
+          font-size: var(--bs-font-size-label-large);
+          line-height: var(--bs-font-line-height-label-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-large);
+        }
+
+        .fs-lm {
+          font-size: var(--bs-font-size-label-medium);
+          line-height: var(--bs-font-line-height-label-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-medium);
+        }
+
+        .fs-ls {
+          font-size: var(--bs-font-size-label-small);
+          line-height: var(--bs-font-line-height-label-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-label-small);
+        }
+
         .fs-cm {
           font-size: var(--bs-font-size-code-medium);
           line-height: var(--bs-font-line-height-code-medium);
diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx
index 05c8953d23..99358cfe42 100644
--- a/site/src/content/docs/foundation/typography.mdx
+++ b/site/src/content/docs/foundation/typography.mdx
@@ -30,6 +30,13 @@ export const textLevel = [
   "body-small"
 ]
 
+export const labelLevel = [
+  "label-xlarge",
+  "label-large",
+  "label-medium",
+  "label-small"
+]
+
 export const screenSize = [
   "mobile",
   "tablet",
@@ -288,17 +295,24 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
     </thead>
     <tbody>
     {
-      textLevel.map((level) => (
+      [ ...textLevel, ...labelLevel].map((level) => (
       <tr>
         <td>
           {level === 'body-large' && (<>Body large (<code>{'.lead'}</code>)</>)}
           {level === 'body-medium' && (<>Body medium (default <code>{'<p>'}</code>)</>)}
           {level === 'body-small' && (<>Body small (<code>{'.small'}</code> or <code>{'<small>'}</code>)</>)}
+          {level === 'label-xlarge' && (<>Label xlarge</>)}
+          {level === 'label-large' && (<>Label large</>)}
+          {level === 'label-medium' && (<>Label medium</>)}
+          {level === 'label-small' && (<>Label small</>)}
         </td>
         {
           screenSize.map((size) => (
             <td>
-              <code>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem</code> ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
+              {!level.includes('label-')
+                    && (<><code>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem</code> ({getTokenValue(`$ouds-font-size-${level}-${size}`)})</>)}
+              {level.includes('label-')
+                && (<><code>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem</code> ({getTokenValue(`$ouds-font-size-${level}`)})</>)}
             </td>
           ))
         }
@@ -323,21 +337,26 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
       </thead>
       <tbody>
       {
-        textLevel.map((level) => (
+        [ ...textLevel, ...labelLevel].map((level) => (
         <tr>
           <td>
             {level === 'body-large' && (<>Body large (<code>{'.lead'}</code>)</>)}
             {level === 'body-medium' && (<>Body medium (default <code>{'<p>'}</code>)</>)}
             {level === 'body-small' && (<>Body small (<code>{'.small'}</code> or <code>{'<small>'}</code>)</>)}
+            {level === 'label-xlarge' && (<>Label xlarge</>)}
+            {level === 'label-large' && (<>Label large</>)}
+            {level === 'label-medium' && (<>Label medium</>)}
+            {level === 'label-small' && (<>Label small</>)}
           </td>
           {
             screenSize.map((size) => (
               <td>
                 <ul class="mb-none ps-medium">
-                  <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem</b></li>
-                  <li><code>line-height</code>: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}</li>
-                  <li><code>letter-spacing</code>: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem</li>
-                  <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>
+                  <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</b></li>
+                  <li><code>line-height</code>: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2))) * 10000) / 10000}</li>
+                  <li><code>letter-spacing</code>: {(getTokenValue(`$ouds-font-letter-spacing-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</li>
+                  {!level.includes('label-')
+                    && (<li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>)}
                 </ul>
               </td>
             ))

From 8ccdecd2507bda9558173805563b9b217b85e229 Mon Sep 17 00:00:00 2001
From: Alexandra Duval <alexandra.duval@orange.com>
Date: Fri, 26 Jun 2026 16:04:44 +0200
Subject: [PATCH 3/6] feat: revert semantic tokens and migration from boosted
 updates and updated changelog with labels utilities

---
 .../orange-compact/scss/tokens/_semantic.scss    |  4 ----
 packages/orange/scss/tokens/_semantic.scss       |  6 +-----
 packages/sosh/scss/tokens/_semantic.scss         |  4 ----
 site/src/content/docs/foundation/typography.mdx  | 16 ++++++++--------
 .../getting-started/migration-from-boosted.mdx   |  4 ++--
 .../content/docs/getting-started/migration.mdx   | 10 ++++++++--
 6 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/orange-compact/scss/tokens/_semantic.scss b/packages/orange-compact/scss/tokens/_semantic.scss
index ed30a6c5f9..3ebd633533 100644
--- a/packages/orange-compact/scss/tokens/_semantic.scss
+++ b/packages/orange-compact/scss/tokens/_semantic.scss
@@ -445,10 +445,6 @@ $ouds-font-size-body-small-desktop: $core-ouds-font-size-175 !default;
 $ouds-font-size-body-small-mobile: $core-ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $core-ouds-font-size-150 !default;
 $ouds-font-size-code-medium: $core-ouds-font-size-200 !default;
-$ouds-font-size-label-xlarge: $core-ouds-font-size-300 !default;
-$ouds-font-size-label-large: $core-ouds-font-size-250 !default;
-$ouds-font-size-label-medium: $core-ouds-font-size-200 !default;
-$ouds-font-size-label-small: $core-ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $core-ouds-font-size-850 !default;
 $ouds-font-size-display-large-mobile: $core-ouds-font-size-750 !default;
 $ouds-font-size-display-large-tablet: $core-ouds-font-size-750 !default;
diff --git a/packages/orange/scss/tokens/_semantic.scss b/packages/orange/scss/tokens/_semantic.scss
index de6197eb62..09323fcadc 100644
--- a/packages/orange/scss/tokens/_semantic.scss
+++ b/packages/orange/scss/tokens/_semantic.scss
@@ -396,10 +396,10 @@ $ouds-font-letter-spacing-heading-small-tablet: $core-ouds-font-letter-spacing-3
 $ouds-font-letter-spacing-heading-xlarge-desktop: $core-ouds-font-letter-spacing-850 !default;
 $ouds-font-letter-spacing-heading-xlarge-mobile: $core-ouds-font-letter-spacing-550 !default;
 $ouds-font-letter-spacing-heading-xlarge-tablet: $core-ouds-font-letter-spacing-750 !default;
-$ouds-font-letter-spacing-label-xlarge: $core-ouds-font-letter-spacing-300 !default;
 $ouds-font-letter-spacing-label-large: $core-ouds-font-letter-spacing-250 !default;
 $ouds-font-letter-spacing-label-medium: $core-ouds-font-letter-spacing-200 !default;
 $ouds-font-letter-spacing-label-small: $core-ouds-font-letter-spacing-150 !default;
+$ouds-font-letter-spacing-label-xlarge: $core-ouds-font-letter-spacing-300 !default;
 $ouds-font-line-height-body-large-desktop: $core-ouds-font-line-height-450 !default;
 $ouds-font-line-height-body-large-mobile: $core-ouds-font-line-height-450 !default;
 $ouds-font-line-height-body-large-tablet: $core-ouds-font-line-height-450 !default;
@@ -410,10 +410,6 @@ $ouds-font-line-height-body-small-desktop: $core-ouds-font-line-height-350 !defa
 $ouds-font-line-height-body-small-mobile: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-body-small-tablet: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-code-medium: $core-ouds-font-line-height-350 !default;
-$ouds-font-line-height-label-xlarge: $core-ouds-font-line-height-450 !default;
-$ouds-font-line-height-label-large: $core-ouds-font-line-height-450 !default;
-$ouds-font-line-height-label-medium: $core-ouds-font-line-height-350 !default;
-$ouds-font-line-height-label-small: $core-ouds-font-line-height-250 !default;
 $ouds-font-line-height-display-large-desktop: $core-ouds-font-line-height-2050 !default;
 $ouds-font-line-height-display-large-mobile: $core-ouds-font-line-height-1050 !default;
 $ouds-font-line-height-display-large-tablet: $core-ouds-font-line-height-1850 !default;
diff --git a/packages/sosh/scss/tokens/_semantic.scss b/packages/sosh/scss/tokens/_semantic.scss
index 495067b600..d90409100e 100644
--- a/packages/sosh/scss/tokens/_semantic.scss
+++ b/packages/sosh/scss/tokens/_semantic.scss
@@ -465,10 +465,6 @@ $ouds-font-size-body-small-desktop: $core-ouds-font-size-200 !default;
 $ouds-font-size-body-small-mobile: $core-ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $core-ouds-font-size-150 !default;
 $ouds-font-size-code-medium: $core-ouds-font-size-200 !default;
-$ouds-font-size-label-xlarge: $core-ouds-font-size-300 !default;
-$ouds-font-size-label-large: $core-ouds-font-size-250 !default;
-$ouds-font-size-label-medium: $core-ouds-font-size-200 !default;
-$ouds-font-size-label-small: $core-ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $core-ouds-font-size-1850 !default;
 $ouds-font-size-display-large-mobile: $core-ouds-font-size-850 !default;
 $ouds-font-size-display-large-tablet: $core-ouds-font-size-1450 !default;
diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx
index 99358cfe42..e647542c31 100644
--- a/site/src/content/docs/foundation/typography.mdx
+++ b/site/src/content/docs/foundation/typography.mdx
@@ -301,10 +301,10 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
           {level === 'body-large' && (<>Body large (<code>{'.lead'}</code>)</>)}
           {level === 'body-medium' && (<>Body medium (default <code>{'<p>'}</code>)</>)}
           {level === 'body-small' && (<>Body small (<code>{'.small'}</code> or <code>{'<small>'}</code>)</>)}
-          {level === 'label-xlarge' && (<>Label xlarge</>)}
-          {level === 'label-large' && (<>Label large</>)}
-          {level === 'label-medium' && (<>Label medium</>)}
-          {level === 'label-small' && (<>Label small</>)}
+          {level === 'label-xlarge' && (<>Label xlarge (<code>{'.fs-lxl'}</code>)</>)}
+          {level === 'label-large' && (<>Label large (<code>{'.fs-ll'}</code>)</>)}
+          {level === 'label-medium' && (<>Label medium (<code>{'.fs-lm'}</code>)</>)}
+          {level === 'label-small' && (<>Label small (<code>{'.fs-ls'}</code>)</>)}
         </td>
         {
           screenSize.map((size) => (
@@ -343,10 +343,10 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
             {level === 'body-large' && (<>Body large (<code>{'.lead'}</code>)</>)}
             {level === 'body-medium' && (<>Body medium (default <code>{'<p>'}</code>)</>)}
             {level === 'body-small' && (<>Body small (<code>{'.small'}</code> or <code>{'<small>'}</code>)</>)}
-            {level === 'label-xlarge' && (<>Label xlarge</>)}
-            {level === 'label-large' && (<>Label large</>)}
-            {level === 'label-medium' && (<>Label medium</>)}
-            {level === 'label-small' && (<>Label small</>)}
+            {level === 'label-xlarge' && (<>Label xlarge (<code>{'.fs-lxl'}</code>)</>)}
+            {level === 'label-large' && (<>Label large (<code>{'.fs-ll'}</code>)</>)}
+            {level === 'label-medium' && (<>Label medium (<code>{'.fs-lm'}</code>)</>)}
+            {level === 'label-small' && (<>Label small (<code>{'.fs-ls'}</code>)</>)}
           </td>
           {
             screenSize.map((size) => (
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 930518a2dc..c64423754c 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -1483,10 +1483,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
       <li><code>$ouds-font-line-height-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-tablet</code></li>
-      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-line-height-label-large</code></li>
       <li><code>$ouds-font-line-height-label-medium</code></li>
       <li><code>$ouds-font-line-height-label-small</code></li>
+      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-size-body-large-desktop</code></li>
       <li><code>$ouds-font-size-body-large-mobile</code></li>
       <li><code>$ouds-font-size-body-large-tablet</code></li>
@@ -1518,10 +1518,10 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
       <li><code>$ouds-font-size-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-size-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-size-heading-xlarge-tablet</code></li>
-      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-size-label-large</code></li>
       <li><code>$ouds-font-size-label-medium</code></li>
       <li><code>$ouds-font-size-label-small</code></li>
+      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-weight-system-web-default</code></li>
       <li><code>$ouds-font-weight-system-web-strong</code></li>
       <li><code>$ouds-font-weight-web-body-default</code></li>
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index ac524878f7..45b2b5e5e5 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -55,6 +55,12 @@ toc: true
 
 - <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `.shadow-default` has been deprecated in favor of `.shadow-elevated`. It will be removed in v1.5.0. Read more in our [shadow page]([[docsref:/utilities/shadow]]).
 
+#### Text
+
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available.
+See [Regular Texts]([[docsref:foundation/typography#regular-texts]]) for more details.
+
+
 ### CSS and Sass variables
 
 - <details class="mb-small">
@@ -1681,10 +1687,10 @@ toc: true
       <li><code>$ouds-font-line-height-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-line-height-heading-xlarge-tablet</code></li>
-      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-line-height-label-large</code></li>
       <li><code>$ouds-font-line-height-label-medium</code></li>
       <li><code>$ouds-font-line-height-label-small</code></li>
+      <li><code>$ouds-font-line-height-label-xlarge</code></li>
       <li><code>$ouds-font-size-150</code></li>
       <li><code>$ouds-font-size-200</code></li>
       <li><code>$ouds-font-size-250</code></li>
@@ -1730,10 +1736,10 @@ toc: true
       <li><code>$ouds-font-size-heading-xlarge-desktop</code></li>
       <li><code>$ouds-font-size-heading-xlarge-mobile</code></li>
       <li><code>$ouds-font-size-heading-xlarge-tablet</code></li>
-      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-size-label-large</code></li>
       <li><code>$ouds-font-size-label-medium</code></li>
       <li><code>$ouds-font-size-label-small</code></li>
+      <li><code>$ouds-font-size-label-xlarge</code></li>
       <li><code>$ouds-font-weight-400</code></li>
       <li><code>$ouds-font-weight-700</code></li>
       <li><code>$ouds-font-weight-body-default</code></li>

From 34fd33996e03a7d9f984a326b67644a75d3e8385 Mon Sep 17 00:00:00 2001
From: Alexandra Duval <alexandra.duval@orange.com>
Date: Mon, 29 Jun 2026 09:35:46 +0200
Subject: [PATCH 4/6] feat: updated bundlewatch

---
 .bundlewatch.config.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 5f2a906251..8b1d3a0ef9 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -6,7 +6,7 @@
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "79.25 kB"
+      "maxSize": "79.5 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",
@@ -34,11 +34,11 @@
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.css",
-      "maxSize": "66.5 kB"
+      "maxSize": "66.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.min.css",
-      "maxSize": "62.5 kB"
+      "maxSize": "62.75 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

From 4dfb7399b594cba829515064bfd5381561445327 Mon Sep 17 00:00:00 2001
From: Maxime Lardenois <maxime.lardenois@orange.com>
Date: Fri, 3 Jul 2026 14:43:05 +0200
Subject: [PATCH 5/6] add max widths on fs label utilities

---
 scss/mixins/_fonts.scss                       |  8 ++++---
 scss/mixins/_utilities.scss                   |  2 +-
 .../_ouds-web-bootstrap-utilities.test.scss   |  8 +++++++
 .../content/docs/foundation/typography.mdx    | 21 +------------------
 .../docs/getting-started/migration.mdx        |  4 +---
 site/src/content/docs/utilities/text.mdx      | 11 +++++++++-
 6 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/scss/mixins/_fonts.scss b/scss/mixins/_fonts.scss
index 4285173cc4..d2f09aeb76 100644
--- a/scss/mixins/_fonts.scss
+++ b/scss/mixins/_fonts.scss
@@ -1,9 +1,11 @@
 // scss-docs-start ouds-mixin-font
 // $font-size-ref can be one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large"
 
-@mixin get-font-size($font-size-ref: "display-large") {
-  @if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" {
-    max-width: var(--#{$prefix}font-max-width-#{$font-size-ref});
+@mixin get-font-size($font-size-ref: "display-large", $label-with-max-width: false) {
+  @if str-slice($font-size-ref, 1, 4) != "code" {
+    @if str-slice($font-size-ref, 1, 5) != "label" or $label-with-max-width == true {
+      max-width: var(--#{$prefix}font-max-width-#{$font-size-ref});
+    }
   }
   font-size: var(--#{$prefix}font-size-#{$font-size-ref});
   line-height: var(--#{$prefix}font-line-height-#{$font-size-ref});
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index c4c583a7f0..e3d87be8bc 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -45,7 +45,7 @@
         // OUDS mod
         @if type-of($value) == "string" and str-slice($value, 1, 1) == "/" {
           .#{$bkpt-prefix + $property-class + $infix + $property-class-modifier} {
-            @include get-font-size(#{str-slice($value, 2)});
+            @include get-font-size(#{str-slice($value, 2)}, true);
           }
           // End mod
         } @else {
diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index ed6e6f44de..8a0ef72acd 100644
--- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -3509,6 +3509,7 @@ $utilities: ();
         /* rtl:end:remove */
 
         .fs-lxl {
+          max-width: var(--bs-font-max-width-label-xlarge);
           font-size: var(--bs-font-size-label-xlarge);
           line-height: var(--bs-font-line-height-label-xlarge);
 
@@ -3517,6 +3518,7 @@ $utilities: ();
         }
 
         .fs-ll {
+          max-width: var(--bs-font-max-width-label-large);
           font-size: var(--bs-font-size-label-large);
           line-height: var(--bs-font-line-height-label-large);
 
@@ -3525,6 +3527,7 @@ $utilities: ();
         }
 
         .fs-lm {
+          max-width: var(--bs-font-max-width-label-medium);
           font-size: var(--bs-font-size-label-medium);
           line-height: var(--bs-font-line-height-label-medium);
 
@@ -3533,6 +3536,7 @@ $utilities: ();
         }
 
         .fs-ls {
+          max-width: var(--bs-font-max-width-label-small);
           font-size: var(--bs-font-size-label-small);
           line-height: var(--bs-font-line-height-label-small);
 
@@ -15463,6 +15467,7 @@ $utilities: ();
         /* rtl:end:remove */
 
         .fs-lxl {
+          max-width: var(--bs-font-max-width-label-xlarge);
           font-size: var(--bs-font-size-label-xlarge);
           line-height: var(--bs-font-line-height-label-xlarge);
 
@@ -15471,6 +15476,7 @@ $utilities: ();
         }
 
         .fs-ll {
+          max-width: var(--bs-font-max-width-label-large);
           font-size: var(--bs-font-size-label-large);
           line-height: var(--bs-font-line-height-label-large);
 
@@ -15479,6 +15485,7 @@ $utilities: ();
         }
 
         .fs-lm {
+          max-width: var(--bs-font-max-width-label-medium);
           font-size: var(--bs-font-size-label-medium);
           line-height: var(--bs-font-line-height-label-medium);
 
@@ -15487,6 +15494,7 @@ $utilities: ();
         }
 
         .fs-ls {
+          max-width: var(--bs-font-max-width-label-small);
           font-size: var(--bs-font-size-label-small);
           line-height: var(--bs-font-line-height-label-small);
 
diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx
index e647542c31..2dc19d8fbd 100644
--- a/site/src/content/docs/foundation/typography.mdx
+++ b/site/src/content/docs/foundation/typography.mdx
@@ -355,8 +355,7 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
                   <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</b></li>
                   <li><code>line-height</code>: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2))) * 10000) / 10000}</li>
                   <li><code>letter-spacing</code>: {(getTokenValue(`$ouds-font-letter-spacing-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</li>
-                  {!level.includes('label-')
-                    && (<li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>)}
+                  <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>)
                 </ul>
               </td>
             ))
@@ -506,21 +505,3 @@ Align terms and descriptions horizontally by using our grid system’s predefine
       </dl>
     </dd>
   </dl>`} />
-
-## Text style for custom components
-
-OUDS Web introduces a specific text style for components named `label` with 4 levels: `small`, `medium`, `large` and `xlarge`, it sets `font-size`, `line-height` and `letter-spacing` css properties. We use this style for many components included in OUDS Web, if you need to develop a custom component for your project you can use this font by calling the Scss mixin `get-font-size()`. Following is a call example for this mixin.
-
-<Example showPreview={false}  lang="scss" code={`.my-custom-component {
-    @include get-font-size("label-medium");
-  }`} />
-
-This will result in the following CSS.
-
-<Example showPreview={false}  lang="css" code={`.my-custom-component {
-    font-size: var(--bs-font-size-label-medium);
-    line-height: var(--bs-font-line-height-label-medium);
-
-    // only for ltr
-    letter-spacing: var(--bs-font-letter-spacing-label-medium);
-  }`} />
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 45b2b5e5e5..2ed407fd4a 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -57,9 +57,7 @@ toc: true
 
 #### Text
 
-- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available.
-See [Regular Texts]([[docsref:foundation/typography#regular-texts]]) for more details.
-
+<span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [typography page]([[docsref:foundation/typography#regular-texts]]).
 
 ### CSS and Sass variables
 
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index cc490eaaca..1eb52fdd60 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -213,7 +213,16 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa
                         <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>
                       </ul>
                     )}
-                  {(level === 'code-medium' || level.includes('label-'))
+                  {(level.includes('label-'))
+                    && (
+                      <ul class="mb-none ps-medium">
+                        <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem</b></li>
+                        <li><code>line-height</code>: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}`).slice(0, -2))) * 10000) / 10000}</li>
+                        <li><code>letter-spacing</code>: {(getTokenValue(`$ouds-font-letter-spacing-${level}`).slice(0, -2)) / 16}rem</li>
+                        <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>
+                      </ul>
+                    )}
+                  {(level === 'code-medium')
                     && (
                       <ul class="mb-none ps-medium">
                         <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem</b></li>

From 8c6c7f95bdce4622cb41b718c367c7c8c1ded280 Mon Sep 17 00:00:00 2001
From: Maxime Lardenois <maxime.lardenois@orange.com>
Date: Fri, 3 Jul 2026 14:51:07 +0200
Subject: [PATCH 6/6] fixes

---
 .bundlewatch.config.json                        | 4 ++--
 site/src/content/docs/foundation/typography.mdx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 8b1d3a0ef9..75bad61043 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
-      "maxSize": "83.0 kB"
+      "maxSize": "83.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "79.5 kB"
+      "maxSize": "79.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",
diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx
index 2dc19d8fbd..0c6e881587 100644
--- a/site/src/content/docs/foundation/typography.mdx
+++ b/site/src/content/docs/foundation/typography.mdx
@@ -355,7 +355,7 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
                   <li><code class="text-default">font-size</code>: <b>{(getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</b></li>
                   <li><code>line-height</code>: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2))) * 10000) / 10000}</li>
                   <li><code>letter-spacing</code>: {(getTokenValue(`$ouds-font-letter-spacing-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem</li>
-                  <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>)
+                  <li><code>max-width</code>: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem</li>
                 </ul>
               </td>
             ))