# Nord Designsystem

## Nord Designsystem-Oberflächenvorschau

Wählen Sie aus fünf Raumkapazitäten, überprüfen Sie einen Titel und erstellen Sie eine lokale Anfrageübersicht.

## Nord Designsystem-Designreferenz

Nord-Tokens 9.0.4 und aktuelle Komponentendokumentation. Die folgenden Werte beschreiben das Standard-Theme Therapy, nicht jede Marke von Nordhealth. Die öffentliche Dokumentation gewährt keine Erlaubnis, Nord außerhalb des vorgesehenen Nordhealth-Kontexts zu verwenden.

### Therapy-Rollenwerte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --n-color-accent | #3559c7 | Primäre Aktion. |
| --n-color-text | #0c1a3d | Hauptinhalt. |
| --n-color-text-weak | #36434a | Unterstützender Text. |
| --n-color-background | #fafbfb | Seite. |
| --n-color-surface | #ffffff | Panel. |
| --n-color-border | #d8dee4 | Trennlinie. |
| --n-color-border-strong | #bcc5cc | Bedienfeldrand. |
| --n-color-text-error | #d24023 | Fehlermeldung. |
### Abstände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --n-space-xs | 4px | Eng. |
| --n-space-s | 8px | Verwandt. |
| --n-space-m | 16px | Gruppe. |
| --n-space-l | 24px | Abschnitt. |
| --n-space-xl | 36px | Groß. |
| --n-space-xxl | 72px | Wichtig. |
### Typografie und Form

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --n-font-size-m | 0.875rem | Fließtext. |
| --n-font-size-l | 1rem | Großer Text. |
| --n-font-size-xl | 1.25rem | Abschnittstitel. |
| --n-font-size-xxl | 1.5rem | Titel. |
| --n-line-height | 1.5 | Multiplikator für Fließtext. |
| --n-line-height-form | 20px | Zeilenhöhe für Bedienelemente. |
| --n-font-weight-heading | 600 | Überschrift. |
| --n-border-radius-s | 3px | Bedienelement. |
| --n-border-radius | 5px | Oberfläche. |
### Eingabevertrag

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| label / hint / error | Built-in field text | Ein eigenständiges Input beschriftet sich selbst. |
| expand | Boolean, default false | Füllt die Breite des übergeordneten Elements aus. |
| size | s / m / l | Standardmäßig mittelgroß. |
| readonly versus disabled | Submitted versus excluded | Ein schreibgeschütztes Feld bleibt fokussierbar. |
| --n-input-inline-size | 240px | Standardmäßig feste Breite; für responsive Formulare expand bevorzugen. |
### Select-Vertrag

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Default slot | Native option elements | Kein nord-option erfinden. |
| value | String | Gesteuerte Auswahl. |
| required | Boolean | novalidate und anwendungsseitige Fehlermeldungen verwenden. |
| change | User selection event | component.value auslesen. |
| focus() | Component method | Vor dem Aufruf auf die Definition warten. |
### Button-Vertrag

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| type | submit by default | Für Aktionen, die nicht zum Absenden dienen, button angeben. |
| variant | default / primary / dashed / plain / danger | Primäraktion: einmal pro Abschnitt. |
| href | Creates anchor semantics | Für die Navigation. |
| size | s / m / l | Standardmäßig mittelgroß. |
| loading | Busy presentation | Mit einem angekündigten Status kombinieren. |
## Nord Designsystem – Vollständiger Leitfaden

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.

## Nord Designsystem Nord ist ein internes Produktsystem mit öffentlich zugänglichen Referenzen

### Den vorgesehenen Verwendungszweck sichtbar machen

> Die Dokumentation von Nord beschreibt ein System für Nordhealth-Anwendungen. Die öffentlich einsehbaren Komponenten sind nützliche Referenzen. Das Beispiel behauptet jedoch nicht, dass die Marke oder die Komponentenbedingungen eine beliebige kommerzielle Weiterverwendung erlauben. Die Raumnamen und der Anfrageablauf in diesem Beispiel sind eigens erstellte Demodaten.

Die Standard-Tokentabelle bildet Therapy ab. Eine tiermedizinische oder medizinische Anwendung muss das dafür vorgesehene Theme auswählen, statt anzunehmen, dass ein blauer Akzent jede Nordhealth-Anwendung definiert. Die Theme-Entscheidung sollte auf Anwendungsebene getroffen werden.

Unterstützende Spezifikation lesen

## Nord Designsystem Therapy-Rollen sorgen für eine ruhige Arbeitsfläche

### Rollen für Text, Ränder und Oberflächen trennen

Das Beispiel verwendet für Anfragedetails die Haupttextrolle und für Erläuterungen die zurückhaltendere Rolle. Weiße Panels liegen auf dem cremeweißen Seitenhintergrund; ein stärkerer Rand kennzeichnet bearbeitbare Felder. Der Fehlertext erscheint neben dem ungültigen Titel, statt die gesamte Oberfläche rot einzufärben. Die Vorschau enthält keine klinischen Daten oder Patientendaten.

Unterstützende Spezifikation lesen

## Nord Designsystem Kompakter Text braucht genügend Zeilenabstand

### Die dokumentierte Schriftgröße und den Zeilenabstand gemeinsam verwenden

Das Token kombiniert eine Fließtextgröße von 0.875rem mit einer Fließtext-Zeilenhöhe von 1.5. Für Formulartext gilt dagegen eine eigene Zeilenhöhe von 20px. Das sind unterschiedliche Regeln: Wird der Formularwert auf längere Absätze angewendet, werden diese unnötig zusammengedrückt. Die Live-Referenz verwendet das Nordhealth-Sans-Familientoken; diese Offline-Interpretation greift bewusst auf verfügbare Systemschriften zurück und gibt nicht vor, eine lizenzierte Schrift bereitzustellen.

Unterstützende Spezifikation lesen

## Nord Designsystem Bedienelemente innerhalb des Anwendungsrasters erweitern

### Die Komponente legt keinen Breakpoint für die Seite fest

Input verwendet anfangs die Inline-Größenvariable 240px. Mit dem dokumentierten Wert expand wird die verfügbare Feldspalte ausgefüllt. In unserem Beispiel steht die Raumliste auf dem Desktop neben dem Editor und wird auf Mobilgeräten darunter angezeigt. Dieser Breakpoint ist eine Entscheidung auf Anwendungsebene und kein Nord-Token. Bei Auswahl einer Zeile bleiben Raumname, Kapazität und Verfügbarkeitsangabe sichtbar.

Die Raumliste in der Offline-Interpretation ist eine native Radio-Gruppe. Das separat bereitgestellte Bibliotheksbeispiel verwendet ein Select mit fünf Optionen. Beide ermöglichen die Auswahl eines Raums, veranschaulichen jedoch unterschiedliche Layouts und werden nicht als identische Komponentenimplementierungen zur Laufzeit dargestellt.

Unterstützende Spezifikation lesen

## Nord Designsystem Legen Sie fest, ob Beschriftungen und Fehlermeldungen zentral verwaltet werden

### Für dieses Formular reichen eigenständige Felder aus

Ein Input oder Select kann Beschriftung, Hinweis und Fehlermeldung selbst anzeigen. Bei Verwendung übernimmt die neuere Field-Komposition diese Aufgaben. Werden beide Varianten kombiniert, entstehen redundante Hinweise. Dieses Beispiel verwendet den eigenständigen Ansatz und zeigt eine kurze Fehlermeldung an, wenn der bereinigte Titel leer ist.

Deaktivierte Felder werden nicht übermittelt, während schreibgeschützte Felder einen relevanten Wert für den Fokus und die Übermittlung beibehalten. Deaktivieren Sie eine Raumkennung nicht bloß, um ihre Bearbeitung zu verhindern, wenn sie weiterhin mit der Anfrage übermittelt werden muss.

- Die Beschriftung des Anfragetitels muss sichtbar bleiben.

- Der Hinweis sollte den erwarteten Inhalt erläutern und nicht die Beschriftung ersetzen.

- Die Validierungsmeldung dem ungültigen Bedienelement zuordnen.

Unterstützende Spezifikation lesen

## Nord Designsystem Select enthält gewöhnliche Option-Elemente

### Den Wert von der Host-Komponente auslesen

Der Standard-Slot akzeptiert native Option-Elemente. Jeder Raum hat einen stabilen Wert und eine beschreibende sichtbare Beschriftung mit Angabe der Kapazität. Das change-Ereignis informiert die Anwendung darüber, dass sie die Übersicht anhand des Host-Werts neu berechnen soll. In dieser Komposition gibt es kein benutzerdefiniertes nord-option-Tag.

Nord empfiehlt Select für eine größere Auswahl und Radio-Buttons, wenn es sinnvoll ist, einige wenige Optionen direkt anzuzeigen. Das Beispiel bietet fünf Räume; mit der Radio-Darstellung der Offline-Interpretation lassen sich die Unterschiede zwischen den Kapazitäten leicht erkennen.

Unterstützende Spezifikation lesen

## Nord Designsystem Button-Standardwerte beeinflussen die Formularkomposition

### Aktion, Link- und Ladeverhalten ausdrücklich festlegen

Nord Button verwendet standardmäßig type="submit". Eine sekundäre Vorschau- oder Zurücksetzen-Aktion innerhalb eines Formulars benötigt daher einen expliziten Typ, wenn sie das Formular nicht absenden soll. Wenn Sie der Komponente ein href zuweisen, erhält sie die Semantik eines Links. Verwenden Sie diesen Weg für die Navigation, statt mit einem Click-Handler einen Anker nachzuahmen.

Im Ladezustand bleibt der Button fokussierbar, während wiederholte Aktivierungen verhindert werden. Der Spinner ist für Hilfstechnologien ausgeblendet, daher muss die Anwendung den Fortschritt in Worten mitteilen. Verwenden Sie disabled nicht pauschal: Eine nicht verfügbare Aktion und eine bereits laufende Aktion erfordern unterschiedliche Fokus- und Rückmeldungsverhalten.

Das Beispiel für eine Raumanfrage berechnet einen Entwurf synchron und benötigt daher keine Ladezeit. Der primäre Button überprüft den Titel und liest den ausgewählten Raum aus; bei einer Änderung an einem der beiden Felder wird der veraltete Entwurfssatz entfernt. In den Abschnitten zu Field und Select oben wird erklärt, welche Nord-APIs für diese Eingaben zuständig sind.

Unterstützende Spezifikation lesen

## Nord Designsystem Laden Sie CSS, bevor Sie Komponentenmethoden aufrufen

### Prototyp-Ladevorgang und Produktions-Bundling unterscheiden sich

Die offizielle Schnellstartanleitung kombiniert das Komponentenmodul mit dem Framework CSS. Letzteres stellt gemeinsame Design-Tokens und grundlegende Stile bereit. Installieren Sie für eine gebündelte Anwendung @nordhealth/css und @nordhealth/components, importieren Sie CSS einmal und nur die Komponentenmodule, die Sie verwenden. Die Paketmodule registrieren ihre Elemente als Nebeneffekt.

React 19 kann diese Custom Elements direkt verwenden. Der ältere @nordhealth/react-Wrapper ist in der aktuellen Dokumentation als veraltet gekennzeichnet. Beim serverseitigen Rendering ist das Shadow DOM der Komponenten nicht enthalten; für Next.js-Imports ist eine Client-Grenze erforderlich. Halten Sie diese Integrationsbeschränkungen getrennt von der Offline-HTML-Vorschau, deren Interaktionen ohne die Bibliothek funktionieren.

1. Laden Sie das Framework-CSS vor den Komponentenmodulen.

2. Warten Sie bei der Initialisierung auf customElements.whenDefined, bevor Sie focus aufrufen.

3. Fügen Sie Handler für Validierung und lokalen Zustand hinzu.

4. Bündeln Sie Abhängigkeiten für die Produktion, statt sich auf zahlreiche CDN-Modulanfragen zu verlassen.

Unterstützende Spezifikation lesen

## Nord Designsystem-Komponentenbeispiele

### Vollständige, eigenständige interaktive Demo

Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Offline-Interpretation von HTML/CSS-Nord-Therapy-Tokens; die native Integration mit Web Components wird separat gezeigt.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
```

Code-Referenz

- Dieses Beispiel stellt die Raumauswahl als Optionsfelder dar; im nativen Nord-Beispiel wird Select mit gewöhnlichen Option-Elementen verwendet. Keines der Beispiele reserviert einen echten Raum.

### Eine Raumanfrage mit Beschriftung und expliziter Validierung

Die eigenständigen nord-input und nord-select bieten Beschriftungen ohne die optionale Field-Familie. Beim Absenden werden die Komponentenwerte ausgelesen und die Input-Fehlereigenschaft zugewiesen.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

Code-Referenz

- Fünf Raumoptionen machen Select zu einer praktischen, kompakten Auswahl.

- Button ist standardmäßig vom Typ submit; in diesem Beispiel ist der Typ ausdrücklich angegeben.

- Vor der Verwendung von Methoden wird auf die Custom Elements gewartet. Es wird kein Buchungsdienst aufgerufen.

## Nord Designsystem Einrichtung des KI-Agenten

### Ausgangspunkt für die Implementierung

Vollständiger Prototyp über ein öffentliches CDN zur autorisierten Verwendung durch Nordhealth. In der Dokumentation werden derzeit CSS 5.2.4 und Components 5.3.0 angegeben. Für den Produktiveinsatz sollten npm-Pakete gebündelt werden; die Offline-Interpretation der Benutzeroberfläche weiter unten lädt diese Remote-Pakete nicht.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

### Ein Prompt für dein Projekt

```
Verwenden Sie semantische Rollen von Nord Therapy mit beschrifteten Steuerelementen. Ordnen Sie Felder in einem responsiven Anwendungslayout an. Validieren Sie den von Leerzeichen bereinigten Anfragetitel, behalten Sie jeweils nur einen ausgewählten Raum bei und zeigen Sie ausschließlich ein lokales Entwurfsergebnis an. Beachten Sie für eine echte Nordhealth-Implementierung die dokumentierten Berechtigungen für Pakete und Themes.
```

## Nord Designsystem Quellen und Geltungsbereich

Unabhängige OpenDesign-Referenz. Nord gibt an, dass das System für Nordhealth-Produkte vorgesehen ist. Diese eigenständige HTML-Interpretation reserviert weder einen Raum noch gewährt sie Rechte zur Nutzung der Marke oder Komponenten.

- Tokenreferenz Therapy-Werte, Abstände und Typografie.

- Einrichtung der Web Components Erforderliches CSS, Imports und Framework-Grenzen.

- Input Beschriftungen, Fehler und responsive Größenanpassung.

- Select Optionen und Werteverarbeitung.

- Button Semantik beim Absenden und Aktionsvarianten.

## Nord Designsystem Verwandte Ressourcen

### Oracle Redwood

Untersuchen Sie die tatsächliche Farbpalette, semantische Rollen sowie Grenzen für Abstände und Dichte von Oracle JET 19 Redwood anhand eines vollständigen, eigenständigen und bearbeitbaren Arbeitsblatts zur Aktienanalyse.

### Orange OUDS Web

Untersuchen Sie in einer vollständigen responsiven Vergleichsstudie die tatsächlichen semantischen Tokens, Theme-Pakete und das native Offcanvas-Verhalten von Orange OUDS 1.4.

### 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.


- [Implementierungsreferenz](https://nordhealth.design/core/tokens/)
- [Quelle](https://nordhealth.design/core/tokens/)
- [Quelle](https://nordhealth.design/components/input/)
- [Quelle](https://nordhealth.design/components/select/)
- [Quelle](https://nordhealth.design/components/button/)
- [Unterstützende Spezifikation lesen](https://nordhealth.design/docs/developer/web-components/)
- [Unterstützende Spezifikation lesen](https://nordhealth.design/core/tokens/)
- [Unterstützende Spezifikation lesen](https://nordhealth.design/components/input/)
- [Unterstützende Spezifikation lesen](https://nordhealth.design/components/select/)
- [Unterstützende Spezifikation lesen](https://nordhealth.design/components/button/)
- [Code-Referenz](https://nordhealth.design/core/tokens/)
- [Code-Referenz](https://nordhealth.design/components/input/)
- [Tokenreferenz Therapy-Werte, Abstände und Typografie.](https://nordhealth.design/core/tokens/)
- [Einrichtung der Web Components Erforderliches CSS, Imports und Framework-Grenzen.](https://nordhealth.design/docs/developer/web-components/)
- [Input Beschriftungen, Fehler und responsive Größenanpassung.](https://nordhealth.design/components/input/)
- [Select Optionen und Werteverarbeitung.](https://nordhealth.design/components/select/)
- [Button Semantik beim Absenden und Aktionsvarianten.](https://nordhealth.design/components/button/)