# Amsterdam-Designsystem

## Vorschau der Benutzeroberfläche des Amsterdam-Designsystems

Größere Schrift, stärkeren Kontrast und reduzierte Bewegung in der Vorschau aktivieren; Standardeinstellungen wiederherstellen.

## Designreferenz des Amsterdam-Designsystems

Implementierung von CSS und React4.4.0 geprüft; Grenze zu proprietären Design Tokens und Assets kontrolliert. Alle Theme-Werte der Vorschau sind original.

### Vertrag der Open-Source-Komponente

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| CSS package | @amsterdam/design-system-css 4.4.0 | Stylesheet des nativen Schalters unverändert verwendet. |
| Class anatomy | ams-switch; ams-switch__input; ams-switch__label | Das Eingabefeld steht unmittelbar vor dem zugehörigen Label. |
| Input semantics | type=checkbox; role=switch | Der native Checked-Status gibt Ein/Aus wieder. |
| Native behavior | Immediate binary setting | Laut Quelle von React ist keine Formularübermittlung erforderlich. |
| React props | InputHTMLAttributes<HTMLInputElement> | checked, defaultChecked, onChange, disabled und ARIA-Props werden an das Eingabefeld weitergegeben. |
| Focus | Input focus styles the following label | Das eigentliche Eingabefeld nicht mit display:none ausblenden. |
### Vollständiges originales neutrales Theme für den Schalter

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --ams-switch-inline-size | 50px | Originale Breite der Schalterbahn. |
| --ams-switch-thumb-inline-size / block-size | 22px / 22px | Originale Geometrie des runden Schaltknopfs. |
| --ams-switch-label-border-width | 3px | Einzug der Schalterbahn; die Verschiebung im aktivierten Zustand verwendet diesen Wert. |
| --ams-switch-background-color | #666 | Originalfarbe der Schalterbahn im ausgeschalteten Zustand. |
| --ams-switch-checked-background-color | #286044 | Originalfarbe der Schalterbahn im eingeschalteten Zustand; kein Amsterdam-Marken-Token. |
| --ams-switch-thumb-background-color | #fff | Originalfarbe des Schaltknopfs. |
| --ams-switch-disabled-background-color | #aaa | Darstellung im deaktivierten Zustand; das native disabled-Attribut steuert das Verhalten. |
| --ams-switch-outline-offset | 4px | Abstand des Fokusrings. |
| --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Explizite Konfiguration der Interaktion. |
| --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Originale Hover-Darstellung. |
### Typografie und Layout der Anwendung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Font / body | Arial / 18px with 1.5 leading | Originale neutrale Konfiguration; kein Amsterdam Sans-Asset. |
| Heading | 36px; 30px below700px | Entscheidung der Anwendung, keine offizielle Amsterdam-Skala. |
| Layout | 900px maximum; two columns with32px gap | Entscheidung der Anwendung; unterhalb von 700px eine Spalte. |
| Larger reading mode | 22px article text | Lokale Einstellung, kein Ersatz für den globalen Browserzoom. |
| Reduced motion | OS preference plus local preview setting | Die CSS-Komponente berücksichtigt prefers-reduced-motion bereits bei ihren Übergängen. |
### Wiederverwendung und Abgrenzung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Component code | EUPL-1.2 or later | Lizenz und geltende Hinweise beibehalten. |
| Documentation | CC0-1.0 | Von proprietären Assets getrennt. |
| Token package4.3.0 | Proprietary assets | Die eigene LICENSE nimmt sie von der Open-Source-Lizenz aus. |
| Amsterdam Sans / icons / logo | Restricted institutional assets | Nicht in dieses unabhängige Beispiel übernommen. |
## Vollständiger Leitfaden zum Amsterdam-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.

## Amsterdam-Designsystem: Komponente und Theme trennen

### Die Open-Source-Ebene korrekt verwenden

> Amsterdam veröffentlicht die Komponente CSS separat, sodass sich ihr Klassenvertrag auch außerhalb von React implementieren lässt. Das Stylesheet ist von den benutzerdefinierten Eigenschaften von CSS abhängig. Wird es ohne vollständiges Theme importiert, bleiben wichtige Abmessungen und Farben undefiniert. Deshalb wird das native Switch-Stylesheet in diesem Beispiel mit einer vollständigen, eigens erstellten neutralen Konfiguration kombiniert.

Das Repository trennt Open-Source-Pakete von proprietären Assets. Für das untersuchte Token-Paket 4.3.0 gibt es einen eigenen Lizenzhinweis, der es von der Open-Source-Lizenz ausnimmt. Amsterdam Sans, die Icons und das Stadtlogo unterliegen ebenfalls besonderen Einschränkungen. Dieser Leitfaden erwähnt sie als Kontext, verbreitet sie aber weder weiter noch behauptet er, dass ein öffentlicher npm-Download uneingeschränkte Markenrechte gewährt.

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – vollständige neutrale Konfiguration

### Gib alle Eigenschaften an, die die Komponente benötigt

Die Referenztabelle führt alle Variablen auf, die das ausgewählte Switch-Stylesheet verwendet. Breite, Abmessungen des Schaltknopfs, Rahmenbreite, Farben, Outline-Abstand, Cursor und Hover-Darstellung sind jeweils mit konkreten Werten versehen. Dies sind eigens für dieses Beispiel festgelegte Werte, keine kopierten Amsterdam Design-Tokens. Dank dieser Unterscheidung können Leser das Beispiel nachbilden, ohne fehlende Bestandteile des Themes erraten zu müssen.

Der Schalter ist 50px breit und hat einen 22px großen Schaltknopf sowie einen 3px breiten Rahmen. Die Transformation im nativen checked-Zustand berechnet den Verschiebeweg anhand der Breite des Schaltknopfs und der Rahmenbreite. Wird nur die Breite des Schalters geändert, kann der Schaltknopf daher falsch positioniert sein. Passe zusammengehörige Geometriewerte gemeinsam an und überprüfe beide Zustände.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

Code-Referenz

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – Aufbau eines nativen Schalters

### Das Label muss auf das Input-Element folgen

Die React-Implementierung rendert einen Wrapper, ein Input-Element und ein leeres, zugehöriges Label. Das CSS verwendet Geschwisterselektoren, um das Label anhand der Fokus-, checked- und disabled-Zustände des Input-Elements zu gestalten. Behalte diese Reihenfolge bei einer einfachen HTML-Implementierung bei. Ein zwischen Input-Element und Label eingefügter Beschreibungstext unterbricht diese Selektoren.

Das tatsächliche Input-Element ist eine Checkbox mit role="switch". Es behält die native checked-Eigenschaft und das native Tastaturverhalten bei. Da das visuelle Label keinen Text enthält, musst du über aria-label oder aria-labelledby einen zugänglichen Namen bereitstellen. Das Beispiel verweist auf einen sichtbaren Einstellungstitel und verknüpft die Erklärung über aria-describedby.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – sofort wirksame Einstellungen

### Ein Schalter ändert die aktuelle Ansicht

Laut Komponentenquelle ist Switch eine sofort wirksame binäre Einstellung. Die Vorschau folgt diesem Verhalten: Größere Schrift verändert die Textgröße des Artikels, höherer Kontrast verändert Text und Outline, und bei reduzierter Bewegung entfällt der kurze Einblendeffekt des Badges. Es gibt keinen Speichern-Button, der fälschlich den Eindruck erweckt, diese lokalen Einstellungen würden an einen Kontodienst übermittelt.

„Standards wiederherstellen“ deaktiviert alle drei nativen checked-Zustände und weist dem Artikel wieder die Standardklassen zu. Eine Statusmeldung beschreibt die aktivierten Einstellungen. Nach dem Navigieren oder Neuladen bleiben sie nicht erhalten. Ein Produktivsystem für Einstellungen könnte eine Persistenz ergänzen, sollte aber angeben, ob die Einstellung für diese Seite, ein Gerät oder ein Konto gilt.

1. Aktiviere „Größere Schrift“ und überprüfe die Absatzgröße im Artikel daneben.

2. Fokussiere „Höherer Kontrast“ und drücke die Leertaste, um die Einstellung per Tastatur umzuschalten.

3. Stelle die Standards wieder her und überprüfe, ob alle drei Schalter und der Artikel gemeinsam zurückgesetzt werden.

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – Tastatur, Fokus und Bewegung

### Das native Input-Element muss verfügbar bleiben

Das Stylesheet verringert die visuelle Breite des Input-Elements, lässt das tatsächliche Steuerelement aber bestehen. Der Fokus-Selektor legt die Outline auf das folgende Label. Ersetzt du das Input-Element durch ein dekoratives div, gehen native Formularsemantik verloren und eine separate Tastaturimplementierung wird erforderlich. Setze für das Input-Element nicht display:none.

Das native Stylesheet beschränkt Übergänge auf prefers-reduced-motion:no-preference. Auch der Effekt im Artikel berücksichtigt unabhängig vom lokalen Schalter die Einstellung des Betriebssystems. Wer systemweit weniger Bewegung wünscht, sollte nicht erst einen zusätzlichen Schalter suchen müssen, damit sich das Beispiel entsprechend verhält.

- Verwende die Eigenschaft checked als maßgebliche Quelle. Erfinde keinen davon unabhängigen visuellen Aktivzustand.

- Gib jeder Einstellung einen eindeutigen Namen und verknüpfe ihre Erklärung mit dem Input-Element.

- Teste nach Änderungen an Theme-Geometrie oder Farben die Zustände Aus, Ein, Fokus und Deaktiviert.

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – Aufbau der Lesevorschau

### Zeige die Wirkung neben dem Steuerelement

Das Beispiel verwendet ein zweispaltiges Layout, sodass jede Einstellung eine sichtbare Auswirkung auf den Artikel hat. Unterhalb eines anwendungsspezifischen Breakpoints von 700px werden die Steuerelemente oberhalb der Vorschau angeordnet. Die maximale Breite von 900px und der Abstand von 32px sind individuelle Layoutentscheidungen und kein Beleg für ein stadtweit gültiges Raster-Token.

Als neutrale Schriftart dient Arial. Der Fließtext hat eine Größe von 18px und einen Zeilenabstand von 1.5; der Modus „Größere Schrift“ ändert ausschließlich den Artikel auf 22px. Dies veranschaulicht eine anwendungsspezifische Einstellung. Es ist kein Ersatz für den Browserzoom und bedeutet nicht, dass Amsterdam diese Größen vorschreibt. Lange Labels werden umbrochen, ohne die Breite des nativen Schalters zu verringern.

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – Integration mit CSS oder React

### Wähle die Implementierungsebene

In einer bestehenden React-Anwendung akzeptiert die geprüfte Switch-Komponente die üblichen Input-Attribute und leitet die ref an das Input-Element weiter. Für eine gesteuerte Verwendung werden checked und onChange angegeben; bei einer ungesteuerten Verwendung kann defaultChecked angegeben werden. Die Komponente stellt weder Anwendungsspeicher noch einen API für Kontoeinstellungen bereit.

Für dieses unabhängige HTML-Beispiel ist nur die Open-Source-Switch-CSS erforderlich. Das Setup und der vollständige Code ergänzen die fehlende Theme-Konfiguration und die lokale Zustandsverwaltung. Das Paketinstallationsprogramm kann proprietäre Assets als Abhängigkeiten herunterladen. Dass sie auf der Festplatte vorhanden sind, berechtigt jedoch nicht dazu, sie zu importieren oder auszuliefern. Das mitgelieferte Beispiel enthält nur die ausgewählte CSS und ihre Open-Source-Lizenz.

Unterstützende Spezifikation lesen

## Amsterdam Designsystem – Einsatz und Einschränkungen

### Visuelle Ähnlichkeit bedeutet keine Zugehörigkeit

Das städtische System soll kommunale Produkte konsistent und barrierefrei gestalten. Der wiederverwendbare Code kann im Rahmen seiner Lizenz untersucht und angepasst werden. Für Logo, proprietäre Schrift und Icon-Assets gelten jedoch eigene Bedingungen. Die Vorschau verwendet eine eigens erstellte Markenidentität und neutrale Inhalte, damit sie nicht mit einem Amsterdam-Dienst verwechselt wird.

Der geprüfte Umfang umfasst eine native Komponente mit vollständig angepasstem Theme und sinnvoller lokaler Funktionalität. Es handelt sich nicht um eine vollständige Neuimplementierung des städtischen Themes. Ein echtes Produkt, das das umfassendere CSS-Paket übernimmt, sollte alle von weiteren Komponenten benötigten Variablen definieren und testen, statt die Konfiguration dieses Switch auf andere Steuerelemente zu übertragen.

Unterstützende Spezifikation lesen

## Amsterdam – Komponentenbeispiele zum Designsystem

### Vollständiges neutrales Switch-Theme

Alle vom nativen Stylesheet benötigten Variablen sind definiert; sämtliche Werte sind eigene Originalwerte.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

Code-Referenz

### Barrierefreie native Anatomie

Echtes Checkbox-Input, Switch-Rolle und angrenzendes visuelles Label.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

Code-Referenz

### Vollständige sofortige Leseeinstellungen

Natives Switch CSS, eigenes Theme und sichtbare lokale Effekte.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>
```

Code-Referenz

## Amsterdam – Einrichtung des Designsystem-KI-Agenten

### Ausgangspunkt für die Implementierung

Nur Open-Source-CSS; ein vollständiges eigenes Theme und ein funktionierendes HTML folgen. Es werden keine proprietären Token- oder Asset-Pakete mitgeliefert. Das vollständige ZIP mit dem funktionierenden Beispiel unter Sources enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie die Datei, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/amsterdam.html. Öffnen Sie modulbasierte Beispiele nicht über file://.

```
npm install @amsterdam/design-system-css@4.4.0
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
```

### Ein Prompt für dein Projekt

```
Verwenden Sie das Open-Source-Switch-Amsterdam CSS mit einem vollständigen eigenen Theme. Behalten Sie die Anatomie aus Wrapper, Input und angrenzendem Label, role=switch und barrierefreier Benennung bei. Wenden Sie binäre Einstellungen sofort an und verwenden Sie checked als Status. Berücksichtigen Sie reduzierte Bewegung und unterscheiden Sie lokale Einstellungen von gespeicherten Kontoeinstellungen. Importieren Sie keine proprietären Token, Schriftarten, Logos oder Icons ohne die entsprechenden Rechte.
```

## Amsterdam – Quellen und Geltungsbereich des Designsystems

Unabhängiges OpenDesign-Beispiel. Amsterdam-Markentoken, Amsterdam Sans, offizielle Icons und das Logo sind nicht enthalten.

- Repository und Lizenzen Open-Source-Pakete und Abgrenzung zu proprietären Bestandteilen.

- CSS-Vertrag Klassenarchitektur, Verwendung von CSS und Theme-Abhängigkeit.

- Switch-Dokumentation Semantik für sofort angewendete binäre Einstellungen.

- Hinweis zu Assets Einschränkungen für Schriftarten, Icons, Branding und Logos.

- Umfang des Token-Pakets Separate proprietäre Token-Ebene.

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

## Amsterdam – Weiterführende Ressourcen zum Designsystem

### B.C. Designsystem

Erstellen Sie ein Erinnerungsformular nach dem Vorbild von British Columbia mit echten semantischen Tokens, nativen React-Aria-Steuerelementen, bedingten Kontaktfeldern und vollständigem Validierungsverhalten.

### Canada.ca Designsystem

Entdecken Sie Typografie, semantische Design-Token und native Webkomponenten des GC Design System anhand eines vollständigen, durchsuchbaren Vorbereitungsleitfadens mit Offenlegungs- und Leerzustandsverhalten.

### CFPB Designsystem

Setzen Sie das redaktionelle Raster, die aktuelle Typografie und die nativen Expandables von CFPB um – mit einem funktionierenden Arbeitsblatt zum Lesen, überprüften Paket-APIs und klaren Grenzen für die Markenidentität.


- [Implementierungsreferenz](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Quelle](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Quelle](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Unterstützende Spezifikation lesen](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Code-Referenz](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Unterstützende Spezifikation lesen](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Code-Referenz](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Unterstützende Spezifikation lesen](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Repository und Lizenzen Open-Source-Pakete und Abgrenzung zu proprietären Bestandteilen.](https://github.com/Amsterdam/design-system)
- [CSS-Vertrag Klassenarchitektur, Verwendung von CSS und Theme-Abhängigkeit.](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Switch-Dokumentation Semantik für sofort angewendete binäre Einstellungen.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Hinweis zu Assets Einschränkungen für Schriftarten, Icons, Branding und Logos.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Umfang des Token-Pakets Separate proprietäre Token-Ebene.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)