# NHS Designsystem

## NHS Designsystem-Vorschau der Oberfläche

Wählen Sie eine Methode aus, sehen Sie sich optionale Hilfe an, beheben Sie eine unbeantwortete Frage und ändern Sie Ihre Auswahl.

## NHS Designsystem-Designreferenz

NHS.UK frontend 10.6.1 und NHS Digital Service Manual. Die Vorschau verwendet das offizielle lokale CSS/JS mit Arial, nicht die lizenzpflichtige Schrift Frutiger oder das NHS-Logo. Responsive Werte wurden anhand des ausgewählten Pakets geprüft; klinische Inhalte sind nicht enthalten.

### Typografie und Identität

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Für Frutiger ist die entsprechende Lizenz erforderlich; in dieser Studie wird Arial verwendet. |
| nhsuk-body | 16px small / 19px large | Standardtext für den Lesefluss. |
| nhsuk-body-l | 26px desktop | Lead-Absatz, nicht jeder einleitende Satz. |
| nhsuk-body-s | 14px small / 16px large | Sparsam eingesetzte Zusatzinformationen. |
| nhsuk-heading-l | Transactional h1 | heading-m für die nachfolgende h2 verwenden. |
### Semantische Farbvariablen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Fließtext |
| $nhsuk-secondary-text-colour | #4c6272 | Hinweise |
| $nhsuk-link-colour | #005eb8 | Verknüpfte Ziele |
| $nhsuk-focus-colour | #ffeb3b | Tastaturfokus |
| $nhsuk-border-colour | #d8dde0 | Strukturelle Grenzen |
| $nhsuk-input-border-colour | #4c6272 | Eingabegrenzen |
| $nhsuk-error-colour | #d5281b | Validierungsrückmeldung |
| $nhsuk-button-colour | #007f3b | Primäre Aktion |
### Responsive Abstände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Kleiner Bildschirm → über 768px; verwenden Sie die Klasse statt einer lokalen Kopie. |
### Seitenkomposition

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Äußerer Container mit fester Breite. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | Für transaktionale Dienste empfohlen. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | Die Rasterbreiten gelten ab 769px. |
| Breakpoints | 320 / 641 / 769 / 990px | Mobilgerät, Tablet, Desktop, großer Desktop. |
| nhsuk-u-reading-width | Readable content measure | Verwenden, wenn der umgebende Container breit ist. |
## NHS 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.

## NHS Designsystem NHS-Kontext und Schriftarten

### Eine Gesundheitsoberfläche ohne vorgetäuschte Identität

> Das NHS.UK-Frontend liefert die visuelle und interaktive Grundlage. Es vereinbart jedoch keine Termine und entscheidet auch nicht, welche Teilnahmearten eine Klinik unterstützt. Die Studie zeigt einen fiktiven Termin und lässt Besucherinnen und Besucher eine Präferenz auswählen. Das Ergebnis ist eine lokale Übersicht, keine Buchung.

Frutiger ist ein NHS-Markenbestandteil, für den Lizenzbedingungen gelten. Diese unabhängige Ressource verwendet Arial, die dokumentierte Ausweichschrift, und verzichtet auf das NHS-Logo. Die offizielle CSS bleibt unverändert; eine explizite lokale Schriftüberschreibung verhindert Anfragen nach Frutiger.

Unterstützende Spezifikation lesen

## NHS Designsystem Typografie für Transaktionen

### Die Frage gibt die Hierarchie vor

Verwende nhsuk-heading-l für die Frage auf der Seite und nhsuk-heading-m für einen untergeordneten Abschnitt. Das unterscheidet sich von einer längeren redaktionellen Seite, auf der die Anleitung mit heading-xl beginnt. Die Radiobutton-Gruppe kann eine Legende in Überschriftengröße verwenden, ohne ihre Gruppenbedeutung zu verlieren.

Reguläre Absatzklassen unterscheiden zwischen Fließtext, Einleitung und kleingedrucktem Begleittext. Ein einleitender Text mit 26px eignet sich einmal am Anfang einer Seite; Termininformationen bleiben hingegen gewöhnlicher Fließtext. Die Vorschau bietet ausreichend Zeilenbreite, damit Datumsangaben und Ortsnamen umgebrochen werden können.

Unterstützende Spezifikation lesen

## NHS Designsystem Abstände und Container

### Das NHS-Abstandsraster unterscheidet sich vom GOV.UK-Abstandsraster

Die responsiven NHS-Einheiten folgen einer anderen Reihenfolge und wechseln oberhalb von 768px. Einheit 6 ändert sich beispielsweise von 32px auf 40px. Übernimm den Wert der GOV.UK-Einheit 6 nicht für NHS, nur weil die Namen der Hilfsklassen ähnlich aussehen.

Die Demo verwendet den 960px-Container und eine Lesespalte mit zwei Dritteln der Breite. Das native Raster wechselt unterhalb der Desktopgröße zu einer einzelnen Spalte. Die Layoutänderungen werden von der Bibliothek gesteuert; der schmale, unabhängige Identitätsstreifen ist hingegen eine Anwendungsformatierung.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

Code-Referenz

Unterstützende Spezifikation lesen

### Responsive Breakpoints

In der Dokumentation werden 641px als Tablet- und 769px als Desktop-Breite angegeben. Die Spaltenbreiten des Rasters beginnen bei der Desktop-Breite. Das bedeutet nicht, dass für alle Typografieregeln dieselbe Grenze gilt. Verwende die nativen Klassen, anstatt für alle Eigenschaften einen einzigen globalen Breakpoint festzulegen.

Unterstützende Spezifikation lesen

## NHS Designsystem Gruppierte Auswahl der Teilnahmeart

### Ein Fieldset, eine Antwort

Das Beispiel verwendet nhsuk-fieldset mit einer sichtbaren Legende und einem gemeinsamen name-Attribut für die Radiobuttons. Jedes Eingabefeld hat eine eigene id und ein eigenes Label. Der Hinweis wird über aria-describedby der Gruppe zugeordnet. So kann der Browser eine einzelne Auswahl aus sich gegenseitig ausschließenden Optionen darstellen.

Die Struktur eines Radio-Elements platziert das Eingabefeld und sein Label innerhalb von nhsuk-radios__item. Standard-Radiobuttons eignen sich für eine zentrale Frage; die kleine Variante ist für kompaktere Filterbereiche gedacht. Die fiktiven Teilnahmearten schließen sich gegenseitig aus, auch wenn sie mit den Pfeiltasten bedient werden.

- Die Legende benennt die Entscheidung.

- Der gemeinsame Name für die Teilnahmeart bildet die Auswahlgruppe.

- Jedes Label verweist auf eine andere Eingabefeld-ID.

Unterstützende Spezifikation lesen

## NHS Designsystem Hilfe, ohne Wichtiges zu verbergen

### Ein natives details-Element verwenden

Das details-Beispiel enthält nhsuk-details__summary mit einem summary-text-Span, gefolgt von nhsuk-details__text. Es wird mit dem nativen Verhalten des Browsers geöffnet. Die Terminangaben und der Hinweis, dass keine Buchung erfolgt, müssen außerhalb des aufklappbaren Bereichs stehen, da alle diese Informationen benötigen.

In Version 10.6 verwendet das Nunjucks-API summary.text oder summary.html; die ältere Option summaryText ist veraltet. Wenn du Macros verwendest, solltest du die neue Objektstruktur bevorzugen. Das Beispiel mit HTML vermeidet eine Templating-Abhängigkeit und behält dennoch dieselbe Struktur bei.

Unterstützende Spezifikation lesen

## NHS Designsystem Auswahlfehler und Übersicht

### Die Gruppe validieren, ohne eine Option vorauszuwählen

Zu Beginn ist keine Option ausgewählt. Wenn ohne Antwort fortgefahren wird, erscheint eine Inline-Fehlermeldung, die der Gruppe zugeordnet ist. Die Vorschau setzt anschließend den Fokus auf den Fehler. Bei der Rückkehr aus der Übersicht bleibt die Auswahl sichtbar. Diese Entscheidungen zum Anwendungsstatus ergänzen die nativen Steuerelemente.

In der Übersicht werden die gewählte Teilnahmeart und die Angaben zum fiktiven Termin erneut angezeigt. Die Aktion ist mit „Präferenz ändern“ beschriftet. Es gibt keine Bestätigung, die den Eindruck erweckt, ein medizinischer Dienst habe die Präferenz angenommen. Ebenso werden keine Gesundheitshinweise oder Vorbereitungsanforderungen erfunden.

1. Fahre fort, ohne eine Teilnahmeart auszuwählen.

2. Wähle „Telefon“ und öffne die lokale Übersicht.

3. Ändere die Präferenz zu „Vor Ort“ und sieh dir die aktualisierte Übersicht an.

Unterstützende Spezifikation lesen

## NHS Designsystem Lokale Frontend-Assets

### Das ausgewählte Paket und Modul verwenden

Bei der Einrichtung werden das CSS in Version 10.6.1 und das Browsermodul in ein Verzeichnis für statische Assets kopiert. Das Modul exportiert initAll. Rufe die Funktion auf, nachdem das Markup der Komponente eingefügt wurde. Das eigenständige Beispiel verwendet dieselbe lokal bereitgestellte Distribution und eine Arial-Überschreibung auf Seitenebene.

Die Stylesheets enthalten Komponentenregeln und responsive Grundlagen. Das kleine Skript, das die Übersichtsansicht ändert, ist davon unabhängiger Anwendungscode. In einem Produktivsystem würde der fiktive Termineintrag durch gepflegte Daten ersetzt. Eine echte Präferenzanfrage würde über das eigene Backend verarbeitet.

Unterstützende Spezifikation lesen

## NHS Designsystem Die Komposition überprüfen

### Den Kontext des Gesundheitsdienstes prüfen

Entscheidend ist, dass Besucherinnen und Besucher den Termin erkennen, verstehen, dass eine Teilnahmepräferenz noch nicht bestätigt ist, und die gewählte Teilnahmeart ändern können, ohne den Kontext zu verlieren. Eine allgemeine Erfolgsmeldung würde diesen Unterschied verschleiern.

Teste die Bedienung der Radiobutton-Gruppe und der details-Zusammenfassung mit der Tastatur. Prüfe anschließend die schmale Ansicht mit einem langen Kliniknamen. Bei einem Fehler wegen fehlender Auswahl sollte der Fokus zurück zur Gruppe führen. Die Bibliothek stellt wiederverwendbares Verhalten bereit; die Organisation bleibt für die tatsächlichen Terminregeln und medizinischen Informationen verantwortlich.

Unterstützende Spezifikation lesen

## NHS Designsystem Beispiele für Design-System-Komponenten

### Radiobutton-Gruppe für die Teilnahmeart

Ein beschriftetes Fieldset mit sich gegenseitig ausschließenden nativen Eingabefeldern und NHS-Komponentenklassen.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

Code-Referenz

### Optionale kontextbezogene Hilfe

Das native details-Element stellt zusätzliche Informationen bereit, ohne die Aufgabe zu verbergen.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

Code-Referenz

### Vollständiges eigenständiges Beispiel

Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

Code-Referenz

- Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.

- Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.

## NHS Designsystem Einrichtung des Agenten

### Ausgangspunkt für die Implementierung

Legen Sie Shell-Befehle und HTML jeweils in den dafür vorgesehenen Dateien ab. Arial ist eine ausdrückliche Überschreibung für die unabhängige Vorschau; NHS-Organisationen sollten sich nach ihrer tatsächlichen Schriftlizenz und ihren Markenanforderungen richten. Das vollständige ZIP-Archiv mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die genauen Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/nhs.html. Öffnen Sie Beispiele mit Modulen nicht über file://.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### Ein Prompt für dein Projekt

```
Erstellen Sie mit NHS.UK Frontend 10.6.1 eine unabhängige Frage zur bevorzugten Art der Teilnahme an einem Termin. Verwenden Sie eine Fieldset- und Legend-Struktur für sich gegenseitig ausschließende Teilnahmemethoden, zugehörige Radio-Hinweise und das native Details-Element für optionale Hilfe. Frage und wichtige Hinweise müssen sichtbar bleiben. Zeigen Sie bei einer unbeantworteten Überprüfung eine verlinkte Fehlerübersicht und einen Inline-Fehler an; erhalten Sie die ausgewählte Methode, wenn man von der lokalen Überprüfung zurückkehrt. Laden Sie das passende CSS und module initAll sowie die ausdrücklich dokumentierte Arial-Überschreibung für die Studie. Fügen Sie weder eine Terminsuche noch tatsächliche Änderungen an Buchungen, klinische Beratung oder eine Behauptung der Zugehörigkeit zum NHS hinzu.
```

## NHS Designsystem Quellen und Geltungsbereich

Unabhängige Studie zur bevorzugten Art der Teilnahme an einem Termin mit NHS.UK frontend 10.6.1. Kein NHS-Logo, keine lizenzierte Schrift Frutiger, keine echte Buchung, keine klinischen Anweisungen und keine implizite Befürwortung.

- Typografie Schriftzulassung und Schrift-Hierarchie für Transaktionen.

- Farbe Benannte semantische Variablen.

- Abstände Responsive Klassenskalierung.

- Layout Container und Desktop-Raster.

- Radios Gruppenstruktur und Zustände.

- Details Aufbau der Offenlegung und aktuelles Makro API.

- Frontend-Quellcode Offizielle Implementierung und Distribution.

- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.

## NHS Designsystem Verwandte Ressourcen

### NL Designsystem

Erstellen Sie mit echten Komponenten für öffentliche Dienste und einem expliziten Theme ein entsprechendes Interface. Diese Referenz verwendet Utrecht CSS, um die Zuordnung von Design-Tokens, den Aufbau einer Datenliste und zwei eigens entwickelte Themes mit demselben Bearbeitungsworkflow zu veranschaulichen.

### NSW Designsystem

Entdecken Sie NSW-Design-Tokens, die Typografie mit Public Sans und native, per Tastatur bedienbare Tabs anhand eines vollständigen Workshop-Leitfadens mit einer unabhängigen lokalen Leseliste.

### ONS Designsystem

Erstellen Sie eine Umfrageantwort, die sich nicht widersprechen kann: native ONS-Checkboxen, sich gegenseitig ausschließende Antworten, genaue Referenzen für Schrift und Farbe sowie ein vollständiger lokaler Prüfablauf.


- [Implementierungsreferenz](https://service-manual.nhs.uk/design-system/components/radios)
- [Quelle](https://service-manual.nhs.uk/design-system/styles/typography)
- [Quelle](https://service-manual.nhs.uk/design-system/styles/colour)
- [Quelle](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Quelle](https://service-manual.nhs.uk/design-system/styles/layout)
- [Unterstützende Spezifikation lesen](https://service-manual.nhs.uk/design-system/styles/typography)
- [Code-Referenz](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Unterstützende Spezifikation lesen](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Unterstützende Spezifikation lesen](https://service-manual.nhs.uk/design-system/styles/layout)
- [Unterstützende Spezifikation lesen](https://service-manual.nhs.uk/design-system/components/radios)
- [Unterstützende Spezifikation lesen](https://service-manual.nhs.uk/design-system/components/details)
- [Unterstützende Spezifikation lesen](https://github.com/nhsuk/nhsuk-frontend)
- [Code-Referenz](https://service-manual.nhs.uk/design-system/components/radios)
- [Code-Referenz](https://service-manual.nhs.uk/design-system/components/details)
- [Typografie Schriftzulassung und Schrift-Hierarchie für Transaktionen.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Farbe Benannte semantische Variablen.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Abstände Responsive Klassenskalierung.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Layout Container und Desktop-Raster.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Radios Gruppenstruktur und Zustände.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Aufbau der Offenlegung und aktuelles Makro API.](https://service-manual.nhs.uk/design-system/components/details)
- [Frontend-Quellcode Offizielle Implementierung und Distribution.](https://github.com/nhsuk/nhsuk-frontend)