# Orange OUDS Web-Designsystem ## Vorschau der Orange OUDS Web-Designsystem-Oberfläche Untersuche jedes native Drawer-Menü, triff eine lokale Auswahl und wechsle die Darstellung. ## Designreferenz für das Orange OUDS Web-Designsystem Festgelegte Quellen für @ouds/web-orange und @ouds/web-common 1.4.0, wobei eigene Layoutentscheidungen gesondert gekennzeichnet sind. ### Semantische Farbrollen für helle Darstellung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bs-color-action-enabled | #000 | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-action-selected | #f15e00 | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-action-hover | rgba(0, 0, 0, 0.68) | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-action-pressed | #f15e00 | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-bg-primary | #fff | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-bg-secondary | #f4f4f4 | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-border-default | rgba(0, 0, 0, 0.2) | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-always-black | #000 | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | | --bs-color-always-white | #fff | Die ersten Deklarationen der Voreinstellung Orange 1.4 für die helle Darstellung. Die dunkle Darstellung ermittelt ihre eigenen Werte über data-bs-theme, statt diese Tabelle als wörtliche Farbangaben zu übernehmen. | ### Skalierte Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bs-space-scaled-none | 0px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-3xsmall | 2px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-2xsmall | 4px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-xsmall | 8px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-small | 12px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-medium | 16px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-large | 24px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-xlarge | 32px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-2xlarge | 40px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | | --bs-space-scaled-3xlarge | 48px | Tatsächlich exportierte Abstandsskala. Die eigene Vergleichskomposition legt anhand dieser Werte Abstände von 24px fest. | ### Typografierollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-size-display-large | 2.5rem | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-size-heading-large | 1.5rem | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-size-body-large | 1rem | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-size-body-medium | 0.875rem | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-size-body-small | 0.75rem | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-line-height-body-large | 1.5 | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | | --bs-font-line-height-body-medium | 1.4285714286 | Veröffentlichte Deklarationen für Schriftarten und Typografie. Die eingebettete Studie verwendet ausdrücklich den Arial-Fallback, nicht die markengeschützten HelvNeueOrange-Schriftdateien. | ### Offcanvas-Standardwerte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält. | | --bs-offcanvas-width | 400px | Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält. | | --bs-offcanvas-height | 30vh | Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält. | | --bs-offcanvas-transition | transform 0.3s ease-in-out | Native Komponentenstandardwerte. Das eigene Drawer-Menü überschreibt die Breite mit 440px, während die native Regel für die maximale Breite das Menü innerhalb des Ansichtsfensters hält. | ### Verträge für native Drawer-Menüs und Schaltflächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Brand action | .btn.btn-brand | Die tatsächliche Orange-Variante; upstream darf nicht angenommen werden, dass Bootstrap .btn-primary dasselbe bedeutet. | | Default action | .btn.btn-default | Die tatsächlich verwendete sekundäre Standarddarstellung für die Anpassung der Darstellung und das Löschen der lokalen Auswahl. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | Native data-API-Attribute öffnen über jede ursprüngliche Planschaltfläche dasselbe Drawer-Menü. | | Content event | show.bs.offcanvas / event.relatedTarget | Den angeklickten Plan vor dem Rendern des Drawer-Inhalts aus dem Auslöser auslesen. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | Die vorhandene native Instanz nach einer lokalen Auswahl schließen. | | Theme | data-bs-theme="light" or "dark" | Ändert die tatsächlichen Theme-Variablen, ohne den Vergleichsstatus neu aufzubauen. | ## Vollständiger Leitfaden zum Orange OUDS Web-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Orange OUDS Web-Designsystem: Orange OUDS-Paket- und Theme-Struktur ### Die Common- und Orange-Pakete gemeinsam installieren > OUDS Web 1.4.0 trennt gemeinsames Verhalten vom markenspezifischen Theme. Im Beispiel werden @ouds/web-common und @ouds/web-orange in derselben Version installiert. Das Orange-Paket stellt kompiliertes CSS bereit, das Common-Paket das gebündelte Browser-JavaScript. Das Root-Dokument bindet beide expliziten Pfade ein, sodass der Leitfaden nicht mit einem Paketbefehl und einer ungestalteten statischen Seite endet. - @ouds/web-orange stellt das Orange-Theme-CSS bereit. - @ouds/web-common stellt gemeinsames JavaScript bereit. - In diesem Beispiel sind beide Pakete auf 1.4.0 festgelegt. ### OUDS als eigenständigen Komponentenvertrag behandeln OUDS basiert auf Bootstrap, doch daraus folgt nicht, dass jede Upstream-Klasse unverändert passt. Diese Version verwendet btn-brand, btn-default und weitere benannte Varianten. Der Vergleich nutzt diese tatsächlichen Klassen und die nativen Offcanvas-Datenattribute. Bei einer Migration sollten sowohl das Markup als auch die Theme-Werte verglichen werden, statt lediglich eine Stylesheet-URL zu ändern. ## Orange OUDS Web-Designsystem: Semantische Farb- und Typografierollen in Orange OUDS ### Die installierten semantischen Variablen verwenden Die eigenen Karten verwenden color-bg-primary und color-border-default. Der schmale Akzent in der Kopfzeile folgt color-action-selected, das in den Deklarationen für die helle Darstellung zu #f15e00 aufgelöst wird. Das dunkle Theme ändert diese Rollen über data-bs-theme am Root-Element. Der Leitfaden hält daher die hellen Werte mitsamt ihrem Geltungsbereich fest und überlässt dem Laufzeitsystem die Auswahl der passenden Darstellung, statt einen einzelnen orangefarbenen Hex-Code als ganzes Designsystem darzustellen. ### Typografie klar ausweisen Das Paket nennt HelvNeueOrange an erster Stelle in seinem Schriftstapel. In dieser lokal eingebetteten Studie werden nicht verwendete font-face-Deklarationen entfernt und Arial wird ausdrücklich als Fallback verwendet. Die Tabelle erläutert weiterhin die tatsächlich veröffentlichte Schriftfamilie und die Textrollen. Das Laden von Komponenten-CSS belegt nicht, dass die markengeschützte Schriftart geladen wurde. Ein Projekt, das diese Schriftart übernimmt, muss ihre Schriftdateien gezielt einbinden. ## Orange OUDS Web-Designsystem: Vergleichskarten und Inhalte in Orange OUDS ### Dem Vergleich eine klare Entscheidungsstruktur geben Die drei Karten zeigen fiktive Datenvolumen, eine kurze Nutzungsbeschreibung und eine Aktion zum Prüfen. Jede Karte enthält vollständigen Text und keine Abbildung mit Platzhalterzeilen. Es handelt sich um eigene Studieninhalte, nicht um aktuelle Orange-Produkte, Preise oder Verträge. Preise bleiben bei dieser Designübung außerdem außen vor, damit weder ein kaufbares Angebot noch ein Bezahlvorgang suggeriert wird. ### Die Grundlinie der wiederholten Karten einheitlich halten Das Desktop-Layout verwendet drei gleich breite Grid-Spalten und Karten mit Flexbox-Spaltenlayout, sodass die Prüfschaltflächen unten bündig abschließen. Bei 720 px wechselt es zu einer einzelnen Spalte mit natürlicher Höhe. Die nativen Schaltflächenklassen stellen die tatsächlichen Aktionszustände bereit; das umgebende Grid, das Padding von 24 px und die Reihenfolge der Inhalte sind ursprüngliche Anwendungsentscheidungen, die im bereitgestellten CSS sichtbar sind. ## Orange OUDS Web Orange-Designsystem: native OUDS-Offcanvas-Komposition ### Drawer über den Auslöser befüllen Jede Prüfschaltfläche verweist auf dasselbe #details-Offcanvas und enthält einen kleinen data-Planindex. Das Ereignis show.bs.offcanvas stellt relatedTarget bereit. Damit werden der passende ursprüngliche Titel, die Beschreibung und die Featureliste ausgewählt, bevor der Drawer angezeigt wird. Die Liste wird mit textContent und echten Listenelementen erstellt, sodass die Daten vom Markup getrennt bleiben. Der Drawer-Titel ist über aria-labelledby verknüpft. ### Öffnen und Schließen der nativen Laufzeit überlassen Das Daten-API übernimmt das Öffnen sowie das Verhalten von Backdrop, Escape und Fokus. Nach einer lokalen Auswahl verwendet der Handler oudsWeb.Offcanvas.getInstance(drawer).hide(), um die vorhandene Instanz zu schließen. Er entfernt keine CSS-Klasse, durch die der Fokusfang oder der Backdrop zurückbleiben würde. Der Test wartet den Übergang ab, bevor er die Rückgabe des Fokus prüft, denn das asynchrone Schließen gehört zum Komponentenvertrag. ## Orange OUDS Web Orange-Designsystem: lokale Auswahl und Wiederherstellung in OUDS ### Die tatsächlich ausgeführte Aktion beschreiben „Diese lokale Auswahl speichern“ speichert nur, welcher fiktive Tarif ausgewählt wurde, und zeigt die Auswahl unter den Karten an. Die Meldung stellt ausdrücklich klar, dass keine Bestellung aufgegeben wurde. Eine neue Auswahl ersetzt die vorherige; beim Löschen wird die Meldung ausgeblendet und der Fokus auf die erste Prüfschaltfläche zurückgesetzt. Es werden keine Daten an ein Konto, einen Warenkorb oder einen Zahlungsdienst übermittelt. ### Darstellung und Auswahl getrennt halten Die Aktion für helles/dunkles Erscheinungsbild ändert das Theme-Attribut am Root-Element und die Beschriftung der Aktion selbst. Die aktuelle lokale Auswahl und die Inhalte der drei Karten bleiben erhalten. Bei der Prüfung eines Themes ist diese Unterscheidung wichtig: Eine visuelle Änderung sollte die aktuelle Auswahl des Nutzers nicht unbemerkt zurücksetzen. Die Studie verwendet native CSS in beiden Darstellungsvarianten; nur die äußere Komposition stammt von der Anwendung. ## Orange OUDS Web Orange-Designsystem: Tastatur- und Verhalten auf schmalen Bildschirmen in OUDS ### Schließen und Prüfen klar benennen Jede Kartenaktion enthält den Namen des Tarifs. Die native Schließen-Schaltfläche mit Symbol hat die explizite barrierefreie Beschriftung „Details schließen“. Der Drawer verfügt über tabindex und einen beschrifteten Titel, damit die native Implementierung den Fokus verwalten kann. In den Tests wird der Drawer „Explore“ geöffnet, mit Escape geschlossen und geprüft, ob der Fokus zum Auslöser zurückkehrt, bevor zu einer anderen Karte gewechselt wird. ### Den Drawer im tatsächlichen Ansichtsfenster halten Die Anwendung legt die Breite des Drawers auf 440 px fest; die native max-width-Regel für Offcanvas hält ihn jedoch innerhalb eines schmalen Ansichtsfensters. Auf kleinen Bildschirmen werden die Karten untereinander angeordnet und das äußere Padding wird reduziert. Das Beispiel wurde nach der Auswahl eines Tarifs und dem Wechsel des Erscheinungsbilds bei 280 px, 390 px sowie Tablet- und Desktopbreiten geprüft – nicht nur im Ausgangszustand. ## Orange OUDS Web Orange-Designsystem: vollständige statische OUDS-Integration ### Das vollständige Beispiel mit drei Dateien verwenden orange-index.html als index.html speichern und orange.css sowie orange-app.js daneben ablegen. Die beiden festgelegten Pakete installieren und das Verzeichnis bereitstellen. Das HTML enthält beide Pfade zu den nativen Assets, alle Karteninhalte, die Drawer-Struktur und das Anwendungsskript. Für diese Browser-Komposition sind weder ein React-Wrapper noch ein fehlendes Grundgerüst oder ein erfundenes SDK erforderlich. 1. Alle drei bereitgestellten Dateien zusammen ablegen. 2. Beide passenden OUDS-Pakete installieren. 3. Den Ordner bereitstellen und jede Karte prüfen. 4. Escape, Fokus-Rückgabe, lokales Löschen und beide Darstellungsvarianten testen. ### Code und Assets auf derselben Version halten Wenn Sie Versionen ändern, prüfen Sie gemeinsam die Schaltflächenvarianten, den Daten-API-Namensraum, die Ereignisnamen und die Theme-Variablen. CSS aus einer Version und Skripte aus einer anderen können zunächst korrekt wirken, bis eine Interaktion die Abweichung sichtbar macht. Die bereitgestellte Version ist eine konkrete, getestete Referenz – keine Garantie dafür, dass jede künftige Paketkombination identisch funktioniert. ## Orange OUDS Web Designsystem-Komponentenbeispiele ### orange-index.html Vollständiges Markup und native CSS-/JavaScript-Imports. ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.

``` Code-Referenz - orange-index.html als index.html speichern; die Namen der beiden anderen Dateien unverändert lassen. ### orange.css Ursprüngliche responsive Kartenanordnung und expliziter Schrift-Fallback. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` Code-Referenz - orange-index.html als index.html speichern; die Namen der beiden anderen Dateien unverändert lassen. ### orange-app.js Native Drawer-Ereignisbehandlung sowie lokaler Auswahl- und Theme-Zustand. ``` const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'}); ``` Code-Referenz - orange-index.html als index.html speichern; die Namen der beiden anderen Dateien unverändert lassen. ## Orange OUDS Web Einrichtung des Designsystem-Agenten ### Ausgangspunkt für die Implementierung http://localhost:8000/ öffnen. Hier kommen kompilierte native Assets zum Einsatz; ein Sass-Build ist nicht erforderlich. ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Ein Prompt für dein Projekt ``` Die vollständige OUDS-Web-1.4-Vergleichsstudie mit passenden Common-/Orange-Paketen, den echten Varianten btn-brand und btn-default, nativen Offcanvas-Ereignissen und API, der Auflösung heller und dunkler Design-Token sowie einem expliziten Arial-Fallback umsetzen. Alle Paketinhalte fiktiv halten und die Auswahl ausschließlich lokal speichern. ``` ## Orange OUDS Web Quellen und Geltungsbereich des Designsystems Tatsächliche OUDS-Web-CSS- und Offcanvas-Laufzeit mit ursprünglichen fiktiven OpenDesign-Paketen und lokaler Auswahl. Arial-Fallback ist explizit festgelegt; es wird weder ein kommerzielles Angebot noch eine Bestellung dargestellt. - Installation Abgestimmte Einrichtung der Common- und Theme-Pakete. - Offcanvas Drawer-Struktur, Ereignisse und API. - Schaltflächen OUDS-spezifische Varianten und Zustände. - JavaScript Laufzeitverhalten und Integrationsgrenzen. ## Orange OUDS Web Weiterführende Ressourcen zum Designsystem ### Palantir Blueprint Erstellen Sie mit Blueprint einen datenintensiven Arbeitsbereich: mit verifizierten Typografie- und Intent-Tokens, einer Tabelle mit auswählbarem Datensatz, einem Prüfbereich und vollständigem React-Quellcode. ### Pega Bolt Entdecke Bolts Inhaltsdesignsystem im Pega-Stil: variable Schriftgrößen, getrennte horizontale und vertikale Abstände sowie eine Twig-Akkordeon-Komposition für eine redaktionelle Ressourcenseite. ### Porsche Designsystem Entdecken Sie Porsche Design System v4 mit fließenden Abständen, CSS-Farbschemata, Porsche-Next-Typografie und einem Konfigurator mit zwei Auswahlmöglichkeiten. Die Referenz enthält echte Token-Ausdrücke und einen vollständigen Vite-Einstiegspunkt, der aktuelle Ereignisse des Segmented Controls verwendet. - [Implementierungsreferenz](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Quelle](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [Quelle](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Code-Referenz](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [Installation Abgestimmte Einrichtung der Common- und Theme-Pakete.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas Drawer-Struktur, Ereignisse und API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Schaltflächen OUDS-spezifische Varianten und Zustände.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript Laufzeitverhalten und Integrationsgrenzen.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)