# Scottish Government Designsystem

## Scottish Government Designsystem Interface-Vorschau

Geben Sie eine lange Notiz ein, bringen Sie sie wieder unter das Zeichenlimit, zeigen Sie sie lokal in der Vorschau an, bearbeiten Sie sie und setzen Sie sie zurück.

## Scottish Government Designsystem Designreferenz

Veröffentlichte CSS und JavaScript für Scottish Government Design System 4.3.0, mit aktuellen offiziellen Richtlinien zu Typografie, Farben und Raster. Native CharacterCount und Styling werden in der Vorschau ausgeführt. Arial ist eine ausdrücklich angegebene Fallback-Schriftart für ein unabhängiges Beispiel; schottische Regierungsdirektionen müssen Roboto verwenden. Die Ressourcen des aktuellen Pakets unterscheiden sich von älteren Installationsbeispielen.

### Responsive Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular400; native große Schriftstile beginnen bei48rem. |
| H1 | 30/40px →44/56px | Bold700. |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Semantische Überschriftenebenen verwenden; ds_h3 kann das Erscheinungsbild ändern, ohne die Ebene zu ändern. |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Bold700. |
| Lead | 19/32px →24/40px | Light300; ein kurzer Einleitungstext pro Seite. |
| Font | Roboto | Für Direktorate und Politikbereiche der schottischen Regierung erforderlich; die unabhängige Demo gibt Arial explizit an. |
### Sass-Farbenrollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | Primärblau; Link-Hover #00437e. |
| $ds_colour__text | #1a1a1a | Sekundärtext #5e5e5e. |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | Diese Fokusrollen auch in einem angepassten Markenthema beibehalten. |
| $ds_colour__state--negative | #d32205 | Meldungen bei Überschreitung des Feldlimits und Fehlermeldungen. |
| $ds_colour__state--positive | #1a7032 | Positive Meldungen; keine Behauptung, dass lokaler Text übermittelt wurde. |
| $ds_colour__border | #b3b3b3 | Alternativen in kräftigem #1a1a1a und blassem #ebebeb. |
### Responsive Abstands-Utilities

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | Bleibt bei 48rem unverändert. |
| ds_!_margin-bottom--4 | 24px →32px | Wechselt bei 48rem von klein zu groß. |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Responsiv statt eines einzelnen festen Abstandsmaßes. |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | Für größere Abstände verwenden; nicht überall den größten Abstand anwenden. |
### Raster und nutzbare Innenbreiten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | Die Spaltenzahl wächst von 2→6→12 und bleibt anschließend bei 12. |
| Content width at medium/large/xl | 736 /928 /1120px | Veröffentlichte innere Rasterbreite; weicht von der Breite des Container-Boxmodells ab. |
| Native ds_wrapper box | 768 /960 /1152px | Enthält im Release CSS auf jeder Seite 16px Innenabstand. |
| Gutter / side padding | 32px /16px | Unter 768px ist der Container fließend breit. |
| Reading width in specimen | 42rem maximum | Eine Anwendungsentscheidung innerhalb des nativen Containers, kein offizielles universelles Token. |
### Vertrag von CharacterCount

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Root | data-module="ds-character-count" | Enthält ein natives Eingabefeld oder Textfeld. |
| Limit | maxlength="200" | Wird bei der Initialisierung ausgelesen und anschließend entfernt; Text über dem Limit bleibt bearbeitbar. |
| Alternative | data-maxlength on root | Kein Fallback mit nativem maxlength, wenn JavaScript nicht verfügbar ist. |
| Threshold | data-threshold="80" | Rundet Limit×.8; bei200 wird die Anzeige bei160 Zeichen eingeblendet. |
| Error state | ds_input--error;aria-invalid="true" | Wird angewendet, solange der Zähler negativ ist; zusammen mit einer sichtbaren Anzeige der überschüssigen Zeichen. |
| Announcements | Separate hidden message;1000ms delay | aria-describedby behält den vorhandenen Hinweis bei und ergänzt die IDs der generierten Meldungen. |
| Counting unit | JavaScript value.length | UTF-16-Codeeinheiten; keine graphembasierte Zählung von Emojis versprechen. |
## Scottish Government 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.

## Scottish Government Designsystem Eine praktische Referenz zur Texteingabe

### Die Arbeit einer Person muss wiederherstellbar bleiben

> Das bestimmende Interaktionsprinzip ist hier eine nicht destruktive Längenhilfe. Eine Person kann eine lange Notiz zu ihrem Unterstützungsbedarf einfügen, sehen, wie viel davon bearbeitet werden muss, und den gesamten Text behalten, während sie ihn kürzt. Der native Zeichenzähler zeigt die verbleibende Anzahl an, wendet den Stil bei Überschreitung an und gibt verzögert eine Meldung für assistive Technologien aus. Die Anwendung entscheidet separat, ob die Notiz für eine Vorschau ausreichend gültig ist.

Dies ist ein eigens erstelltes Beispiel für Workshop-Notizen, kein Angebot der schottischen Regierung und keine Aufforderung zur Angabe medizinischer Informationen. Es enthält keine Identitätsgrafiken, Speicherung oder Übermittlung. Der Feldhinweis fragt nach einem praktischen Unterstützungsbedarf und rät von privaten Angaben ab, damit die Aufgabe verständlich ist, ohne eine offizielle Transaktion nachzuahmen.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Roboto und responsive Hierarchie

### Die veröffentlichten Metriken beibehalten

Für Direktorate und Politikbereiche der schottischen Regierung schreibt das System Roboto vor. Andere Organisationen, die das System übernehmen, können eine andere gut lesbare Schriftart verwenden, sofern sie die Regeln für Schriftgröße und Zeilenhöhe beibehalten und das Ergebnis testen. Das eigenständige Beispiel gibt explizit Arial als Fallback an; es behauptet nicht, dass eine fehlende Webschrift Roboto sei.

Der Fließtext wechselt von 16/24px zu 19/32px, der Haupttitel von 30/40px zu 44/56px. Beide Änderungen erfolgen im nativen Stylesheet für größere Bildschirme. Eine Klasse ds_h 3 ändert die visuelle Größe, ohne eine Überschrift der dritten Ebene vorauszusetzen. Dieser Unterschied ist wichtig, wenn ein kurzes Formular einen kleineren Abschnittstitel benötigt, aber keine künstliche Lücke in der Dokumentgliederung entstehen soll.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Eine klar unterscheidbare Fokusdarstellung

### Fokus, Fehler und Abschluss voneinander unterscheiden

Blau übernimmt die primäre Marken- und Linkrolle, Schwarz dient der Textdarstellung und Gelb unterstützt den Fokus. Dies sind benannte Sass-Einstellungen und keine erfundene Sammlung benutzerdefinierter Eigenschaften von CSS. Die Markenanpassung erfolgt vor dem Laden des Systems über dessen Einstellungsmodul. Die offiziellen Richtlinien behalten die Fokuspalette auch dann bei, wenn andere Markenfarben geändert werden.

Der Zeichenzähler verwendet das negative Rot erst, wenn die zulässige Länge überschritten wird. Ein zusätzlicher anwendungsseitiger Fehler für ein leeres Pflichtfeld kann dieselbe Negativrolle verwenden; die Meldung muss jedoch eine fehlende Antwort beschreiben und kein Problem mit der Zeichenzahl. In der Vorschau wird positives Grün niemals verwendet, um den Erfolg einer externen Übermittlung zu suggerieren.

- Eine sichtbare Tastaturfokus-Umrandung für das Textfeld und die Aktionsschaltflächen beibehalten.

- Die Überschreitung der Zeichenlänge auch im Text beschreiben, nicht nur durch einen roten Rahmen.

- Fehlerübersichten und Feldhinweise mit einer stabilen Feld-ID verknüpfen.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Containerbreite und Abstände

### Äußere und innere Breiten nicht verwechseln

Die offizielle Rastertabelle gibt innere Inhaltsbreiten von 736, 928 und 1120px an den mittleren, großen und extragroßen Breakpoints an. Die zugehörigen nativen Container-Boxen sind 768, 960 und 1152px breit, da sie auf jeder Seite 16px Innenabstand enthalten. Diese Unterscheidung verhindert, dass die beiden Breiten ineinander verschachtelt und Layouts dadurch versehentlich doppelt verengt werden.

Die Vorschau platziert eine Lesespalte mit einer Breite von 42rem im nativen Container. Diese Maximalbreite ist eine Anwendungsentscheidung, die sich für ein kurzes Formular eignet, keine neue Systemeinstellung. Unter 768px wird der Container fließend breit; derselbe seitliche Abstand von 16px schützt das Textfeld vor dem Bildschirmrand.

Abstands-Utilities sind responsiv. Zum Beispiel wächst ds_!_margin-bottom--4 bei 48rem von 24 auf 32px; auch größere Stufen nehmen zu. Die Referenz gibt beide Werte an, damit ein Desktop-Screenshot nicht als Beleg für einen universell festen Abstand missverstanden wird.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Ein natives Feld mit Zeichenzähler

### Mit einem echten Textfeld beginnen

Das Element mit der Klasse ds_question enthält data-module und den optionalen prozentualen Schwellenwert. Das zugehörige Label und der Hinweis sind gewöhnliche barrierefreie Elemente von HTML. Ein Textfeld mit maxlength bietet einen nützlichen Fallback ohne JavaScript. Nach der Erweiterung liest die Komponente diesen Wert aus und entfernt die Begrenzung, damit eingefügter Text nicht stillschweigend abgeschnitten wird.

Bei einem Feld mit 200 Zeichen und einem Schwellenwert von 80% wird der Zähler bei 160 Zeichen angezeigt. Der Beispieltext auf der öffentlichen Komponentenseite und das Codebeispiel mit 250 Zeichen verwenden nicht dieselben Zahlen; dieses Beispiel verwendet daher durchgängig ein einheitliches Limit. Ohne JavaScript nennt der sichtbare Hinweis weiterhin das Limit, und maxlength wird nativ angewendet.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Zuständigkeiten der nativen Komponente

### Meldungen, Zeitsteuerung und Zählung

Die versionierte Implementierung erstellt eine sichtbare Meldung mit aria-hidden und eine separate, für assistive Technologien ausgeblendete Meldung. Sie ergänzt die entsprechenden IDs im vorhandenen aria-describedby, statt den verfassten Hinweis zu verwerfen. Vor der Aktualisierung der ausgeblendeten Ankündigung wartet sie 1000 ms, damit die Rückmeldung während der Eingabe zuerst abgeschlossen werden kann.

Die tatsächliche Länge ergibt sich aus JavaScript string.value.length: Gezählt werden UTF-16-Codeeinheiten. Ein Zeichen außerhalb der Basic Multilingual Plane kann zwei Einheiten belegen, ein kombiniertes Emoji sogar mehr. Wenn ein Dienst eine andere Zählweise benötigt, müssen Zähler und serverseitige Validierung darauf abgestimmt sein. Diese Komponente sollte nicht versprechen, Zeichen so zu zählen, wie Menschen sie wahrnehmen.

Die Komponente reagiert auf input-Ereignisse. Wenn eine Anwendung programmatisch ein Beispiel einfügt oder das Feld leert, muss sie ebenfalls ein input-Ereignis auslösen. Die Beispiel- und Zurücksetzen-Aktionen der Demo tun dies. Ein Kommentar im Quellcode erwähnt eine Abfrage für die Spracherkennung; die geprüfte Implementierung richtet jedoch kein Abfrageintervall ein. Dieser Leitfaden behauptet daher nicht, dass dieses Verhalten unterstützt wird.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Die aktuellen Release-Pfade verwenden

### Modulladen und gezielte Initialisierung

Das aktuelle Paket heißt @scottish-government/design-system. Version 4.3.0 enthält das kompilierte Stylesheet unter dist/css/design-system.min.css, während sich ein älterer Installationsabschnitt noch auf dist/styles/main.css bezieht. Diese Anleitung verwendet das tatsächlich veröffentlichte Asset. Das Skript exportiert ein ES-Modul. Binde es daher mit type="module" statt mit einem gewöhnlichen klassischen Script-Tag ein.

Erstelle für dieses Feld eine CharacterCount-Instanz und rufe init auf. Für Seiten mit mehreren Komponenten steht auch DS.initAll zur Verfügung; in diesem Beispiel wird jedoch nur der benötigte Zähler initialisiert. Es ist kein zusätzlicher Analysedienst konfiguriert. Die serverseitige Validierung bleibt von der Bibliothek getrennt: Ein Zähler erleichtert die Eingabe, setzt aber keine Grenzen durch.

1. Installiere das auf Version 4.3.0 festgelegte Paket und kopiere das kompilierte CSS sowie das Modul in ein lokales Asset-Verzeichnis.

2. Füge die vollständige Struktur aus Beschriftung, Hinweis und Textbereich in die Seite ein, bevor du das Modul importierst.

3. Initialisiere den Zähler einmal und verknüpfe anschließend die Vorschau- und Zurücksetzen-Aktionen der Anwendung über reguläre input-Ereignisse.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Verhalten bei Überschreitung der Grenze testen

### Nicht nur ein leeres Feld testen

Beginne unterhalb des Grenzwerts, überschreite 160 Zeichen und füge dann mehr als 200 Zeichen ein. Der vollständige Text muss im Textbereich erhalten bleiben, während eine Meldung erscheint, dass zu viele Zeichen eingegeben wurden, und aria-invalid den Wert true annimmt. Verkürze den Text wieder unter den Grenzwert und bestätige, dass sich sowohl die Fehlerklasse als auch der Ungültigkeitsstatus zurücksetzen.

Die Vorschau-Aktion der Anwendung blockiert leere Notizen oder Notizen, die den Grenzwert überschreiten, und zeigt einen verknüpften Fehler an. Eine gültige Notiz erscheint in einer lokalen Vorschau über textContent, sodass eingegebener Markup-Code als Text angezeigt und nicht interpretiert wird. Mit „Notiz bearbeiten“ kehrst du zum selben Textbereich zurück, in dem der Text erhalten bleibt. „Zurücksetzen“ leert ihn über ein input-Ereignis, sodass auch der native Zähler zurückgesetzt wird.

Prüfe bei 390px den Zeilenumbruch des Titels, den Textbereich über die volle Breite, den Umbruch der Schaltflächen und die Fehlerübersicht. Bei größeren Ansichtsbreiten sollte die Lesespalte nicht zu einem übermäßig breiten Textblock werden. Diese Prüfungen gelten für dieses Beispiel; ein echter Dienst benötigt in seinem endgültigen Kontext weiterhin Nutzerforschung, Schriftartentests und eine Prüfung mit assistiven Technologien.

Unterstützende Spezifikation lesen

## Scottish Government Designsystem Beispiele für Komponenten des Scottish Government Designsystem

### Eine nicht destruktive Zeichenbegrenzung

Beschriftung, Hinweis, Textbereich und Schwellenwert bei 80 % – mit schrittweiser Erweiterung.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Code-Referenz

### Kompilierte Assets der aktuellen Version 4.3.0

Für die Version geprüfter CSS-Pfad und Initialisierung als ES-Modul.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></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.

## Scottish Government Designsystem Einrichtung des Agenten

### Ausgangspunkt für die Implementierung

Die lokale Demo verwendet das echte Scottish Government Design System 4.3.0 CSS und das CharacterCount-Modul. Die Schriftarten-Fallback-Option ist ausdrücklich festgelegt; der ältere Pfad dist/styles von der Installationsseite kommt nicht zum Einsatz. Das vollständige ZIP mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die benötigten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacke es, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne dann http://localhost:8080/scottish-government.html. Öffne Beispiele mit Modulen nicht über file://.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

### Ein Prompt für dein Projekt

```
Verwende die echte CharacterCount-Komponente des Scottish Government Design System 4.3.0 in einem unabhängigen Formular für Zugangsnotizen. Lege die geprüften Pfade dist/css/design-system.min.css und dist/scripts/design-system.js für ES-Module fest. Stelle einen Textbereich mit 200 Zeichen und einem Schwellenwert von 80 % sowie einem zugehörigen Hinweis und gezielter Komponenteninitialisierung bereit. Erhalte eingefügten Text auch bei Überschreitung des Grenzwerts, überlasse Zählung und ARIA-Aktualisierungen der Bibliothek und ergänze eine separate lokale Validierung sowie eine sichere Vorschau, Bearbeitung und Zurücksetzen, die nur Text verwenden. Programmatische Beispiel- und Zurücksetzen-Aktionen müssen input-Ereignisse auslösen. Verwende die veröffentlichten responsiven Schrift- und Abstandsregeln, triff eine ausdrückliche Schriftartentscheidung und verzichte auf offizielle Kennzeichen oder eine vorgetäuschte Übermittlung.
```

## Scottish Government Designsystem Quellen und Geltungsbereich

Referenz für eine unabhängige Implementierung. Direktionen der schottischen Regierung müssen Roboto verwenden; dieses nicht markengebundene Beispiel legt Arial ausdrücklich als Ausweichschrift fest. Originaltext, keine Speicherung oder Übermittlung und keine offizielle Zugehörigkeit. Die Code-Lizenz und die Genehmigungen für grafische Assets der Regierung sind getrennte Angelegenheiten.

- Typ Typografie- und Schriftverwendungsregeln.

- Farbe Sass-Farbrollen und Themengrenzen.

- Raster Breiten, Spalten und Zwischenräume des inneren Rasters.

- Zählen Nicht destruktive Begrenzungen und Schwellenwertverhalten.

- JS Initialisierungs-APIs und schrittweise Erweiterung.

- Installieren Paketinstallation; aktuelle veröffentlichte Pfade vergleichen.

- Fokus Hinweise zum sichtbaren Tastaturfokus.

- Frage Struktur zur Gruppierung von Fragen.

- Fehler Hinweise zu Wiederherstellung und Fehlerübersicht.

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

## Scottish Government Designsystem Weitere Ressourcen

### Singapore Government Designsystem

Verwenden Sie aktuelle SGDS Web Components mit echten responsiven Tokens, Tag- und Nachtthemes sowie nativen begrenzten Mengen, die einen lokalen Plan synchron halten.

### Decanter

Gestalten Sie akademische Editorial-Seiten mit dem Tailwind-Preset, der responsiven Schriftgrößenskala und den fließenden Bildschirmrändern von Decanter. Entdecken Sie eigens entwickelte Veranstaltungskarten mit funktionierenden Themenfiltern und aufklappbaren Kurzbeschreibungen.

### Suomi.fi Designsystem

Gestalte gut lesbare Formulare für finnische öffentliche Dienste mit Source Sans 3, ausdrücklich festgelegten Abstands-Design-Token und einem Muster für die wiederherstellbare Dokumentauswahl.


- [Implementierungsreferenz](https://designsystem.gov.scot/components/character-count)
- [Quelle](https://designsystem.gov.scot/styles/typography)
- [Quelle](https://designsystem.gov.scot/styles/colour)
- [Quelle](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [Quelle](https://designsystem.gov.scot/styles/column-grid)
- [Quelle](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/components/character-count)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/styles/typography)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/styles/colour)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/styles/column-grid)
- [Code-Referenz](https://designsystem.gov.scot/components/character-count)
- [Unterstützende Spezifikation lesen](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/get-started/javascript)
- [Unterstützende Spezifikation lesen](https://designsystem.gov.scot/components/error-summary)
- [Code-Referenz](https://designsystem.gov.scot/get-started/javascript)
- [Typ Typografie- und Schriftverwendungsregeln.](https://designsystem.gov.scot/styles/typography)
- [Farbe Sass-Farbrollen und Themengrenzen.](https://designsystem.gov.scot/styles/colour)
- [Raster Breiten, Spalten und Zwischenräume des inneren Rasters.](https://designsystem.gov.scot/styles/column-grid)
- [Zählen Nicht destruktive Begrenzungen und Schwellenwertverhalten.](https://designsystem.gov.scot/components/character-count)
- [JS Initialisierungs-APIs und schrittweise Erweiterung.](https://designsystem.gov.scot/get-started/javascript)
- [Installieren Paketinstallation; aktuelle veröffentlichte Pfade vergleichen.](https://designsystem.gov.scot/get-started/installation)
- [Fokus Hinweise zum sichtbaren Tastaturfokus.](https://designsystem.gov.scot/styles/focus-states)
- [Frage Struktur zur Gruppierung von Fragen.](https://designsystem.gov.scot/components/question)
- [Fehler Hinweise zu Wiederherstellung und Fehlerübersicht.](https://designsystem.gov.scot/components/error-summary)