Untersuchen Sie die Token des Nord-Therapy-Themes und die Web-Component-Verträge anhand eines Entwurfs für eine Raumanfrage: echte Farbrollen, responsive Feldgrößen, explizite Validierung und lokal vorbereitete Ergebnisse.
Offline-Interpretation der Nord Therapy-Tokens mit HTML/CSS; die native Web-Component-Integration wird separat gezeigt. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
Laden Sie das Framework-CSS vor den Komponentenmodulen.
Warten Sie bei der Initialisierung auf customElements.whenDefined, bevor Sie focus aufrufen.
Fügen Sie Handler für Validierung und lokalen Zustand hinzu.
Bündeln Sie Abhängigkeiten für die Produktion, statt sich auf zahlreiche CDN-Modulanfragen zu verlassen.
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.
html
<!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>
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.
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.
04
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.
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.
05
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.
