From e81091948d1aced5bec0eb279d2799ed536c2bd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 19 May 2026 09:04:34 +0200
Subject: [PATCH] Split semantic token docs into components patterns and
 layouts

---
 index.html                      |  2 +
 semantic-tokens-components.html | 95 ---------------------------------
 semantic-tokens-layouts.html    | 75 ++++++++++++++++++++++++++
 semantic-tokens-patterns.html   | 68 +++++++++++++++++++++++
 4 files changed, 145 insertions(+), 95 deletions(-)
 create mode 100644 semantic-tokens-layouts.html
 create mode 100644 semantic-tokens-patterns.html
diff --git a/index.html b/index.html
index dfbbe63..a344570 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
       <ul class="sg-index-list">
         <li><a href="./foundations.html">Foundations</a></li>
         <li><a href="./semantic-tokens-components.html">Semantic Tokens Components</a></li>
+        <li><a href="./semantic-tokens-patterns.html">Semantic Tokens Patterns</a></li>
+        <li><a href="./semantic-tokens-layouts.html">Semantic Tokens Layouts</a></li>
       </ul>
     </section>
 
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 8abb8a5..15bd66b 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -25,17 +25,6 @@
         <tr><td>divider-card-segment</td><td>color-white</td><td>Trenner zwischen Segmenten.</td></tr>
         <tr><td>text-card-header</td><td>color-font-light</td><td>Header-Textfarbe.</td></tr>
         <tr><td>text-card-body</td><td>color-font-dark</td><td>Standard-Textfarbe im Body.</td></tr>
-        <tr><td>layout-card-body-content-justify</td><td>flex-start</td><td>Ausrichtung des Inhalts im Body-Segment der Card.</td></tr>
-        <tr><td>layout-card-segment-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.</td></tr>
-        <tr><td>layout-card-segment-padding-top</td><td>card-segment-padding-vertical</td><td>Oberer Innenabstand von Card-Segmenten.</td></tr>
-        <tr><td>layout-card-segment-padding-right</td><td>card-segment-padding-horizontal</td><td>Rechter Innenabstand von Card-Segmenten.</td></tr>
-        <tr><td>layout-card-segment-padding-bottom</td><td>card-segment-padding-vertical</td><td>Unterer Innenabstand von Card-Segmenten.</td></tr>
-        <tr><td>layout-card-segment-padding-left</td><td>card-segment-padding-horizontal</td><td>Linker Innenabstand von Card-Segmenten.</td></tr>
-        <tr><td>layout-card-body-padding-top</td><td>layout-card-segment-padding-top</td><td>Oberer Innenabstand des Card-Body-Segments.</td></tr>
-        <tr><td>layout-card-body-padding-right</td><td>layout-card-segment-padding-right</td><td>Rechter Innenabstand des Card-Body-Segments.</td></tr>
-        <tr><td>layout-card-body-padding-bottom</td><td>layout-card-segment-padding-bottom</td><td>Unterer Innenabstand des Card-Body-Segments.</td></tr>
-        <tr><td>layout-card-body-padding-left</td><td>layout-card-segment-padding-left</td><td>Linker Innenabstand des Card-Body-Segments.</td></tr>
-        <tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
       </tbody>
     </table>
 
@@ -80,7 +69,6 @@
       <tr><td>surface-tab-compact-unselected</td><td>color-medium-grey</td><td>Fläche nicht aktiver Tabs in der kompakten Variante.</td></tr>
       <tr><td>text-tab-selected</td><td>color-font-light</td><td>Textfarbe des ausgewählten Tabs.</td></tr>
       <tr><td>text-tab-unselected</td><td>color-dark-grey</td><td>Textfarbe nicht ausgewählter Tabs.</td></tr>
-      <tr><td>layout-tab-navigation-large-padding-inline</td><td>interaction-padding-horizontal</td><td>Horizontaler Innenabstand für große Tab-Navigationen.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Form Controls</h3>
@@ -92,21 +80,12 @@
       <tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr>
       <tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr>
       <tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</td></tr>
-      <tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr>
-      <tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
-      <tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr>
-      <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
       <tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</td></tr>
-      <tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
-      <tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
-      <tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
-      <tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
-      <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
     </tbody></table>
@@ -115,9 +94,6 @@
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-toggle-track</td><td>color-medium-grey</td><td>Toggle-Track-Fläche.</td></tr>
       <tr><td>surface-toggle-handle</td><td>color-darkblue</td><td>Toggle-Handle-Fläche.</td></tr>
-      <tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal).</td></tr>
-      <tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.</td></tr>
-      <tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
       <tr><td>surface-checkbox-default</td><td>color-light-grey</td><td>Standardfläche der Checkbox.</td></tr>
       <tr><td>surface-checkbox-on-context</td><td>color-white</td><td>Checkbox-Fläche auf Kontextflächen.</td></tr>
       <tr><td>surface-radio-default</td><td>color-white</td><td>Standardfläche des Radio-Buttons.</td></tr>
@@ -126,7 +102,6 @@
       <tr><td>surface-help-panel</td><td>color-light-grey</td><td>Fläche des Help-Panels.</td></tr>
       <tr><td>text-help-icon</td><td>color-font-dark</td><td>Textfarbe im Help-Icon.</td></tr>
       <tr><td>text-help-panel</td><td>color-font-dark</td><td>Textfarbe im Help-Panel.</td></tr>
-      <tr><td>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
       <tr><td>icon-sandwich-line-portal</td><td>color-font-dark</td><td>Linienfarbe des Sandwich-Icons für große und kleine Variante.</td></tr>
     </tbody></table>
 
@@ -189,76 +164,6 @@
     <h3 class="sg-sub-heading sg-section-h3">Typography Preview</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>text-typography-preview</td><td>color-font-light</td><td>Textfarbe in der Typografie-Preview.</td></tr>
-      <tr><td>layout-preview-align-items</td><td>flex-start</td><td>Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.</td></tr>
-    </tbody></table>
-  </section>
-
-  <section id="semantic-patterns">
-    <h2 class="sg-sub-heading sg-section-h2">Patterns</h2>
-
-    <h3 class="sg-sub-heading sg-section-h3">Portal Header</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>surface-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
-      <tr><td>surface-portal-header-tab</td><td>color-midblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
-      <tr><td>surface-portal-header-tab-active</td><td>color-light-grey</td><td>Fläche aktiver Header-Tabs.</td></tr>
-      <tr><td>text-portal-header-brand</td><td>color-font-light</td><td>Textfarbe der Brand.</td></tr>
-      <tr><td>font-size-portal-header-brand</td><td>calc(var(--font-size-brand) * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
-      <tr><td>text-portal-header-tab</td><td>color-font-light</td><td>Textfarbe nicht aktiver Header-Tabs.</td></tr>
-      <tr><td>text-portal-header-tab-active</td><td>color-font-dark</td><td>Textfarbe aktiver Header-Tabs.</td></tr>
-    </tbody></table>
-
-    <h3 class="sg-sub-heading sg-section-h3">Options Row</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>surface-options-row</td><td>color-light-grey</td><td>Grundfläche der Options Row.</td></tr>
-      <tr><td>surface-options-row-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>surface-options-row-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>surface-options-row-input-clear</td><td>surface-input-clear</td><td>Alias auf Clear-Button-Fläche im Input der Options Row.</td></tr>
-      <tr><td>surface-options-row-toggle-track</td><td>surface-toggle-track</td><td>Alias auf Toggle-Track-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>surface-options-row-toggle-handle</td><td>surface-toggle-handle</td><td>Alias auf Toggle-Handle-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>surface-options-row-help-icon</td><td>surface-help-icon</td><td>Alias auf Help-Icon-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>surface-options-row-help-panel</td><td>surface-help-panel</td><td>Alias auf Help-Panel-Fläche innerhalb der Options Row.</td></tr>
-      <tr><td>divider-options-row-mobile</td><td>color-white</td><td>Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row.</td></tr>
-      <tr><td>text-options-row-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe für Controls in der Options Row.</td></tr>
-      <tr><td>text-options-row-placeholder</td><td>text-control-disabled</td><td>Alias auf Placeholder-/Disabled-Textfarbe in der Options Row.</td></tr>
-      <tr><td>text-options-row-help-icon</td><td>color-font-light</td><td>Textfarbe im Help-Icon der Options Row.</td></tr>
-      <tr><td>text-options-row-help-panel</td><td>text-help-panel</td><td>Alias auf Help-Panel-Textfarbe der Options Row.</td></tr>
-      <tr><td>text-options-row-description</td><td>color-font-light</td><td>Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row.</td></tr>
-      <tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
-      <tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
-      <tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
-      <tr><td>layout-options-row-mode-toggle-width</td><td>dimension-options-row-mode-toggle-width</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
-      <tr><td>layout-options-row-help-panel-width</td><td>dimension-options-row-help-panel-width</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
-    </tbody></table>
-
-    <h3 class="sg-sub-heading sg-section-h3">Object Card</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>layout-object-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
-      <tr><td>layout-object-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
-      <tr><td>layout-object-card-height</td><td>dimension-object-card-height</td><td>Fixe Höhe der Object Card im Desktop-Layout.</td></tr>
-      <tr><td>layout-object-card-mobile-width</td><td>dimension-object-card-mobile-width</td><td>Volle verfügbare Breite der Object Card auf Mobile.</td></tr>
-      <tr><td>layout-object-card-mobile-height</td><td>dimension-object-card-mobile-height</td><td>Inhaltsabhängige Höhe der Object Card auf Mobile.</td></tr>
-      <tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
-      <tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt.</td></tr>
-      <tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
-      <tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
-    </tbody></table>
-
-    <h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
-      <tr><td>surface-navigation-card-body</td><td>color-white</td><td>Fläche im Body-Segment der Navigation Card.</td></tr>
-    </tbody></table>
-
-    <h3 class="sg-sub-heading sg-section-h3">Card Gruppe mit Tastennavigation</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>surface-content-block-card-title</td><td>color-light-grey</td><td>Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.</td></tr>
-      <tr><td>surface-content-block-card-content</td><td>color-white</td><td>Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.</td></tr>
-      <tr><td>text-content-block-card-title</td><td>color-font-dark</td><td>Textfarbe im Titel-Segment der Inhaltsblock-Karte.</td></tr>
-      <tr><td>text-content-block-card-content</td><td>color-font-dark</td><td>Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.</td></tr>
-      <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
-      <tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
-      <tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
-      <tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
     </tbody></table>
   </section>
 
diff --git a/semantic-tokens-layouts.html b/semantic-tokens-layouts.html
new file mode 100644
index 0000000..46f3829
--- /dev/null
+++ b/semantic-tokens-layouts.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Semantic Tokens Layouts</title>
+  <link rel="stylesheet" href="./styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Semantic Tokens Layouts</h1>
+
+  <section id="semantic-layouts">
+    <h2 class="sg-sub-heading sg-section-h2">Layouts</h2>
+
+    <h3 class="sg-sub-heading sg-section-h3">Cards</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
+      <tr><td>layout-card-body-content-justify</td><td>flex-start</td><td>Ausrichtung des Inhalts im Body-Segment der Card.</td></tr>
+      <tr><td>layout-card-segment-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.</td></tr>
+      <tr><td>layout-card-segment-padding-top</td><td>card-segment-padding-vertical</td><td>Oberer Innenabstand von Card-Segmenten.</td></tr>
+      <tr><td>layout-card-segment-padding-right</td><td>card-segment-padding-horizontal</td><td>Rechter Innenabstand von Card-Segmenten.</td></tr>
+      <tr><td>layout-card-segment-padding-bottom</td><td>card-segment-padding-vertical</td><td>Unterer Innenabstand von Card-Segmenten.</td></tr>
+      <tr><td>layout-card-segment-padding-left</td><td>card-segment-padding-horizontal</td><td>Linker Innenabstand von Card-Segmenten.</td></tr>
+      <tr><td>layout-card-body-padding-top</td><td>layout-card-segment-padding-top</td><td>Oberer Innenabstand des Card-Body-Segments.</td></tr>
+      <tr><td>layout-card-body-padding-right</td><td>layout-card-segment-padding-right</td><td>Rechter Innenabstand des Card-Body-Segments.</td></tr>
+      <tr><td>layout-card-body-padding-bottom</td><td>layout-card-segment-padding-bottom</td><td>Unterer Innenabstand des Card-Body-Segments.</td></tr>
+      <tr><td>layout-card-body-padding-left</td><td>layout-card-segment-padding-left</td><td>Linker Innenabstand des Card-Body-Segments.</td></tr>
+      <tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Interactive Elements</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
+      <tr><td>layout-tab-navigation-large-padding-inline</td><td>interaction-padding-horizontal</td><td>Horizontaler Innenabstand für große Tab-Navigationen.</td></tr>
+      <tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr>
+      <tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
+      <tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr>
+      <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
+      <tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
+      <tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
+      <tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
+      <tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
+      <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
+      <tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.</td></tr>
+      <tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.</td></tr>
+      <tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
+      <tr><td>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Typography</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
+      <tr><td>layout-preview-align-items</td><td>flex-start</td><td>Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Pattern Layout Tokens</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
+      <tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
+      <tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
+      <tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
+      <tr><td>layout-options-row-mode-toggle-width</td><td>dimension-options-row-mode-toggle-width</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
+      <tr><td>layout-options-row-help-panel-width</td><td>dimension-options-row-help-panel-width</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
+      <tr><td>layout-object-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
+      <tr><td>layout-object-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
+      <tr><td>layout-object-card-height</td><td>dimension-object-card-height</td><td>Fixe Höhe der Object Card im Desktop-Layout.</td></tr>
+      <tr><td>layout-object-card-mobile-width</td><td>dimension-object-card-mobile-width</td><td>Volle verfügbare Breite der Object Card auf Mobile.</td></tr>
+      <tr><td>layout-object-card-mobile-height</td><td>dimension-object-card-mobile-height</td><td>Inhaltsabhängige Höhe der Object Card auf Mobile.</td></tr>
+      <tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
+      <tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment der Object Card.</td></tr>
+      <tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
+      <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
+      <tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
+    </tbody></table>
+  </section>
+
+</body>
+</html>
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
new file mode 100644
index 0000000..67099bc
--- /dev/null
+++ b/semantic-tokens-patterns.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Semantic Tokens Patterns</title>
+  <link rel="stylesheet" href="./styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Semantic Tokens Patterns</h1>
+
+  <section id="semantic-patterns">
+    <h2 class="sg-sub-heading sg-section-h2">Patterns</h2>
+
+    <h3 class="sg-sub-heading sg-section-h3">Portal Header</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
+      <tr><td>surface-portal-header-tab</td><td>color-midblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
+      <tr><td>surface-portal-header-tab-active</td><td>color-light-grey</td><td>Fläche aktiver Header-Tabs.</td></tr>
+      <tr><td>text-portal-header-brand</td><td>color-font-light</td><td>Textfarbe der Brand.</td></tr>
+      <tr><td>font-size-portal-header-brand</td><td>calc(var(--font-size-brand) * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
+      <tr><td>text-portal-header-tab</td><td>color-font-light</td><td>Textfarbe nicht aktiver Header-Tabs.</td></tr>
+      <tr><td>text-portal-header-tab-active</td><td>color-font-dark</td><td>Textfarbe aktiver Header-Tabs.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Options Row</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-options-row</td><td>color-light-grey</td><td>Grundfläche der Options Row.</td></tr>
+      <tr><td>surface-options-row-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>surface-options-row-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>surface-options-row-input-clear</td><td>surface-input-clear</td><td>Alias auf Clear-Button-Fläche im Input der Options Row.</td></tr>
+      <tr><td>surface-options-row-toggle-track</td><td>surface-toggle-track</td><td>Alias auf Toggle-Track-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>surface-options-row-toggle-handle</td><td>surface-toggle-handle</td><td>Alias auf Toggle-Handle-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>surface-options-row-help-icon</td><td>surface-help-icon</td><td>Alias auf Help-Icon-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>surface-options-row-help-panel</td><td>surface-help-panel</td><td>Alias auf Help-Panel-Fläche innerhalb der Options Row.</td></tr>
+      <tr><td>divider-options-row-mobile</td><td>color-white</td><td>Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row.</td></tr>
+      <tr><td>text-options-row-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe für Controls in der Options Row.</td></tr>
+      <tr><td>text-options-row-placeholder</td><td>text-control-disabled</td><td>Alias auf Placeholder-/Disabled-Textfarbe in der Options Row.</td></tr>
+      <tr><td>text-options-row-help-icon</td><td>color-font-light</td><td>Textfarbe im Help-Icon der Options Row.</td></tr>
+      <tr><td>text-options-row-help-panel</td><td>text-help-panel</td><td>Alias auf Help-Panel-Textfarbe der Options Row.</td></tr>
+      <tr><td>text-options-row-description</td><td>color-font-light</td><td>Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Object Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
+      <tr><td>surface-navigation-card-body</td><td>color-white</td><td>Fläche im Body-Segment der Navigation Card.</td></tr>
+    </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Card Gruppe mit Tastennavigation</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-content-block-card-title</td><td>color-light-grey</td><td>Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.</td></tr>
+      <tr><td>surface-content-block-card-content</td><td>color-white</td><td>Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.</td></tr>
+      <tr><td>text-content-block-card-title</td><td>color-font-dark</td><td>Textfarbe im Titel-Segment der Inhaltsblock-Karte.</td></tr>
+      <tr><td>text-content-block-card-content</td><td>color-font-dark</td><td>Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.</td></tr>
+      <tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
+      <tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
+    </tbody></table>
+  </section>
+
+</body>
+</html>

Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-pulldown-panel	color-light-grey	Fläche geöffneter Pulldown-Panels.
icon-pulldown-chevron	currentColor-basierte Verlaufsgrafik	Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.
layout-pulldown-panel-padding-inline	compact-interaction-padding-horizontal	Horizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inline	compact-interaction-padding-horizontal	Horizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inline	compact-interaction-padding-horizontal	Innenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offset	compact-interaction-padding-horizontal	Rechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-space	spacing-large	Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
surface-menu-panel-portal	color-light-grey	Fläche des Sandwich-Menü-Panels für große und kleine Variante.
text-menu-link-portal	color-font-dark	Linktextfarbe im Sandwich-Menü für große und kleine Variante.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-toggle-track	color-medium-grey	Toggle-Track-Fläche.
surface-toggle-handle	color-darkblue	Toggle-Handle-Fläche.
layout-mode-toggle-local-height	compact-interaction-height	Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß (wie Tasten-Navigation-schmal).
layout-mode-toggle-local-width-factor	3	Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.
layout-mode-toggle-width	calc(interaction-height * 3.5)	Standardbreite des Mode-Toggles in regulären Varianten.
surface-checkbox-default	color-light-grey	Standardfläche der Checkbox.
surface-checkbox-on-context	color-white	Checkbox-Fläche auf Kontextflächen.
surface-radio-default	color-white	Standardfläche des Radio-Buttons.
surface-help-panel	color-light-grey	Fläche des Help-Panels.
text-help-icon	color-font-dark	Textfarbe im Help-Icon.
text-help-panel	color-font-dark	Textfarbe im Help-Panel.
layout-help-panel-width	calc(interaction-height * 8)	Standardbreite des Help-Panels.
icon-sandwich-line-portal	color-font-dark	Linienfarbe des Sandwich-Icons für große und kleine Variante.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
text-typography-preview	color-font-light	Textfarbe in der Typografie-Preview.
layout-preview-align-items	flex-start	Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-portal-header	color-darkblue	Header-Grundfläche.
surface-portal-header-tab	color-midblue	Fläche nicht aktiver Header-Tabs.
surface-portal-header-tab-active	color-light-grey	Fläche aktiver Header-Tabs.
text-portal-header-brand	color-font-light	Textfarbe der Brand.
font-size-portal-header-brand	calc(var(--font-size-brand) * 1.1)	Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).
text-portal-header-tab	color-font-light	Textfarbe nicht aktiver Header-Tabs.
text-portal-header-tab-active	color-font-dark	Textfarbe aktiver Header-Tabs.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-options-row	color-light-grey	Grundfläche der Options Row.
surface-options-row-control	surface-control-default	Alias auf Standard-Control-Fläche innerhalb der Options Row.
surface-options-row-control-selected	surface-control-active	Alias auf aktive Control-Fläche innerhalb der Options Row.
surface-options-row-input-clear	surface-input-clear	Alias auf Clear-Button-Fläche im Input der Options Row.
surface-options-row-toggle-track	surface-toggle-track	Alias auf Toggle-Track-Fläche innerhalb der Options Row.
surface-options-row-toggle-handle	surface-toggle-handle	Alias auf Toggle-Handle-Fläche innerhalb der Options Row.
surface-options-row-help-icon	surface-help-icon	Alias auf Help-Icon-Fläche innerhalb der Options Row.
surface-options-row-help-panel	surface-help-panel	Alias auf Help-Panel-Fläche innerhalb der Options Row.
divider-options-row-mobile	color-white	Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row.
text-options-row-default	text-control-default	Alias auf Standard-Textfarbe für Controls in der Options Row.
text-options-row-placeholder	text-control-disabled	Alias auf Placeholder-/Disabled-Textfarbe in der Options Row.
text-options-row-help-icon	color-font-light	Textfarbe im Help-Icon der Options Row.
text-options-row-help-panel	text-help-panel	Alias auf Help-Panel-Textfarbe der Options Row.
text-options-row-description	color-font-light	Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row.
layout-options-row-margin-top	spacing-small	Abstand oberhalb der Options Row.
layout-options-row-main-gap	spacing-large	Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.
layout-options-row-group-gap	spacing-small	Abstand zwischen Controls innerhalb der linken und rechten Gruppe.
layout-options-row-mode-toggle-width	dimension-options-row-mode-toggle-width	Breite des Mode-Toggles innerhalb der Options Row.
layout-options-row-help-panel-width	dimension-options-row-help-panel-width	Breite des Help-Panels innerhalb der Options Row.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
layout-object-card-min-width	dimension-object-card-min-width	Mindestbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-max-width	dimension-object-card-max-width	Maximalbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-height	dimension-object-card-height	Fixe Höhe der Object Card im Desktop-Layout.
layout-object-card-mobile-width	dimension-object-card-mobile-width	Volle verfügbare Breite der Object Card auf Mobile.
layout-object-card-mobile-height	dimension-object-card-mobile-height	Inhaltsabhängige Höhe der Object Card auf Mobile.
layout-object-card-desktop-breakpoint	dimension-object-card-desktop-breakpoint	Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.
layout-object-card-content-grow	dimension-object-card-content-grow	Flex-Grow-Wert für das vorletzte Segment, damit das Action-Segment unten in der Card bleibt.
layout-object-card-shared-width	auto	Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.
surface-object-card-lower-segment	color-white	Hintergrundfläche der unteren zwei Segmente der Object Card.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-navigation-card	color-white	Grundfläche der Navigation Card.
surface-navigation-card-body	color-white	Fläche im Body-Segment der Navigation Card.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
surface-content-block-card-title	color-light-grey	Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.
surface-content-block-card-content	color-white	Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.
text-content-block-card-title	color-font-dark	Textfarbe im Titel-Segment der Inhaltsblock-Karte.
text-content-block-card-content	color-font-dark	Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.
layout-content-cards-group-gap	spacing-small	Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.
surface-card-list-drawer	color-background-purple	Fläche des ausziehbaren Card-Listenbereichs.
text-card-list-drawer	color-font-dark	Textfarbe im ausziehbaren Card-Listenbereich.
layout-card-list-drawer-width	dimension-card-list-drawer-width	Breite des ausziehbaren Card-Listenbereichs relativ zum Container.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck im Layout
layout-card-body-content-justify	flex-start	Ausrichtung des Inhalts im Body-Segment der Card.
layout-card-segment-content-gap	spacing-small	Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.
layout-card-segment-padding-top	card-segment-padding-vertical	Oberer Innenabstand von Card-Segmenten.
layout-card-segment-padding-right	card-segment-padding-horizontal	Rechter Innenabstand von Card-Segmenten.
layout-card-segment-padding-bottom	card-segment-padding-vertical	Unterer Innenabstand von Card-Segmenten.
layout-card-segment-padding-left	card-segment-padding-horizontal	Linker Innenabstand von Card-Segmenten.
layout-card-body-padding-top	layout-card-segment-padding-top	Oberer Innenabstand des Card-Body-Segments.
layout-card-body-padding-right	layout-card-segment-padding-right	Rechter Innenabstand des Card-Body-Segments.
layout-card-body-padding-bottom	layout-card-segment-padding-bottom	Unterer Innenabstand des Card-Body-Segments.
layout-card-body-padding-left	layout-card-segment-padding-left	Linker Innenabstand des Card-Body-Segments.
layout-card-body-text-margin	0	Textabstand im Card-Body; verhindert zusätzliche Default-Margins.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck im Layout
layout-tab-navigation-large-padding-inline	interaction-padding-horizontal	Horizontaler Innenabstand für große Tab-Navigationen.
layout-input-label-width	dimension-input-label-width	Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.
layout-input-field-desktop-width	dimension-input-field-desktop-width	Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.
layout-input-field-max-width	dimension-input-field-max-width	Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).
layout-search-field-width	dimension-search-field-width	Fixe Breite des Suchfeld-Inputs.
layout-pulldown-panel-padding-inline	compact-interaction-padding-horizontal	Horizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inline	compact-interaction-padding-horizontal	Horizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inline	compact-interaction-padding-horizontal	Innenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offset	compact-interaction-padding-horizontal	Rechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-space	spacing-large	Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
layout-mode-toggle-local-height	compact-interaction-height	Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.
layout-mode-toggle-local-width-factor	3	Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.
layout-mode-toggle-width	calc(interaction-height * 3.5)	Standardbreite des Mode-Toggles in regulären Varianten.
layout-help-panel-width	calc(interaction-height * 8)	Standardbreite des Help-Panels.