Zum Inhalt springen
Barrierefrei nach WCAG 2.2 AA – in jeder Variante

Strenge Regeln.
Attraktives Design.

Das Designsystem für Oberflächen mit hohen Auflagen, von der Bank bis zur Behörde. Barrierefrei geprüft und trotzdem so schön wie die besten Systeme. Farbe und Stil wechseln Sie mit einem Klick.

Alle Varianten ansehen

Guten Morgen, Jana

Ihr Überblick für Oktober 2026

Monat
Umsatz
48.210 €+12,4 %
Bestellungen
1.284+8,1 %
Warenkorb
37,55 €−2,3 %
Zufriedenheit
4,8 von 5+0,2

Umsatz

In Tausend Euro, gegen das Vorjahr

Zeitraum
Summe
546 T€+27,0 %
Dieses JahrVorjahr

Kanäle

Anteil am Umsatz im Oktober

48,2 T€Umsatz
  • Online54 %
  • Filiale28 %
  • Partner18 %

Letzte Bestellungen

Die letzten drei Tage

KundeDatumBetragStatus
Jana WeberKöln20.10.2026249,00 €Bezahlt
Mehmet KayaHamburg20.10.202689,90 €Offen
Anna SchulzLeipzig19.10.20261.204,50 €Bezahlt
Tim LehmannBonn19.10.202642,00 €Storniert
Lea HoffmannMünchen18.10.2026318,40 €Bezahlt
Paul BeckerBerlin18.10.202676,20 €Versendet

Bestellungen je Tag

Die letzten 7 Tage

Vorteile

Was sonst nicht zusammengeht.

Auf Seiten mit vielen Auflagen ist gutes Design selten. Hier gehört beides zusammen: Regeln, die geprüft sind, und ein Auftritt, der begeistert.

AA
  • Kontrast
  • Tastatur
  • Fokus sichtbar
  • Zoom bis 400 %

Barrierefrei, in jeder Variante

WCAG 2.2 AA ist eingebaut, nicht nachgerüstet. Jede Marke und jeder Stil wird bei jedem Build automatisch geprüft.

Für Entwickler

Kontrast-Prüfung für jedes Farbpaar, axe-core in jeder Story und jedem Mode, Fokusring ab 2 px mit 3 : 1, Zoom bis 400 %. Rechtliche Grundlage ist EN 301 549, auf die sich BFSG und BITV 2.0 stützen.

Ein System, 30 Looks

Fünf Marken mal sechs Stile, jede Kombination sofort fertig. Probieren Sie es: Jeder Punkt ist eine.

Für Entwickler

Marke tauscht die Farb-Tokens, Skin die Form-Tokens; beide sind unabhängig. Dazu zehn Modes wie Farbschema, Kontrast und Dichte, alle per data-Attribut und auch auf Teilbereichen.

Bitte geben Sie eine vollständige E-Mail-Adresse ein.

Für Formulare gemacht

Sichtbare Labels, verständliche Fehler, Prüfschritte vor dem Absenden. Für Banken, Behörden und überall, wo viele Regeln gelten.

Für Entwickler

Field-Pattern mit automatischer ARIA-Verknüpfung, Fehlerzusammenfassung nach GOV.UK-Muster, Felder für IBAN und Einmalcodes, drei umschaltbare Label-Stile.

Templates statt Einzelteile

Anmeldung, Registrierung, Zwei-Faktor, Profil: fertige Bausteine, die sofort sitzen. Unten zum Durchblättern.

Für Entwickler

Organisms und Templates nach Atomic Design, als shadcn-kompatible Registry. Sie importieren aus @sw-ds/react und forken keine Kernlogik.

–msWechseln Sie eine Variante, dann misst diese Seite live.

Schnell auf jedem Gerät

Umschalten in Millisekunden, schneller als ein Wimpernschlag. Läuft auch auf älteren iPhones und iPads.

Für Entwickler

CSS ohne Laufzeit: ein Wechsel setzt nur Attribute. Kern ≤ 40 KB gzip, Safari und iOS ab 15.4, LCP ≤ 2,5 s bei vierfach gedrosselter CPU.

Baue eine Kontoübersicht mit dem SW Design System.

Tokens statt fester Werte
Sichtbare Labels
Kontrast geprüft

Bereit für KI-Assistenten

KI-Agenten lesen die Regeln mit und bauen danach. In einer Probe bauten vier fremde Agenten Bank-Bildschirme nur aus unserer Doku.

Für Entwickler

llms.txt, AGENTS.md, SKILL.md und ein Komponenten-Manifest; ein Lint-Preset bindet an die Tokens. Die Bildschirme der Probe baut und prüft jeder Check mit.

Templates und Komponenten

Fertige Bausteine. Sofort einsetzbar.

Vom Login bis zur Fehlerzusammenfassung: Templates für ganze Abläufe und Komponenten für alles dazwischen. Alles hier ist echt und in der aktuellen Variante gerendert.
Passwort vergessen?
Template

Anmelden

Mit Passwort oder Passkey, sofort einsatzbereit.

  • Mindestens 12 Zeichen
  • Mindestens eine Ziffer
  • Mindestens ein Großbuchstabe
Template

Registrieren

Passwortregeln, die man während des Tippens sieht.

Code eingeben

Wir haben einen Code an +49 151 … 47 gesendet.

Gültig für 10 Minuten
Neuen Code senden
Template

Zwei-Faktor

Code per SMS oder App, mit klarer Hilfe.

Jana Weber

Kundin seit 2019

E-Mail
jana.weber@beispiel.de
Telefon
+49 151 … 47
Letzte Anmeldung
Heute, 08:12 · Köln
Template

Profil und Sicherheit

Alle Einstellungen an einem Ort.

Termin, Oktober 2026

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Komponente

Kalender

Deutsches Datumsformat, per Tastatur bedienbar.

Belege
PDF oder JPG, bis 10 MB
rechnung-oktober.pdf68 %
Komponente

Datei-Upload

Ziehen oder auswählen, mit Fortschritt.

Die ersten zwölf Monate nichts, danach 4,90 € im Monat.

Komponente

Häufige Fragen

Aufklappen, ohne den Überblick zu verlieren.

Dokumente
Verträge
Kontoauszüge
Oktober 2026.pdf
September 2026.pdf
Steuer 2025
Komponente

Ordner

Ein Baum, der sich merkt, was offen ist.

Neue FunktionDaueraufträge jetzt auch per App.
GespeichertIhre Änderungen sind übernommen.
Komponente

Hinweise

Vier Töne, nie nur über Farbe erkennbar.

40 %
72 %
88 %
Speicher81 %
Antrag50 %
Komponente

Fortschritt

Kreis, Balken und Messwert mit Schwellen.

Noch keine Belege

Laden Sie Ihren ersten Beleg hoch, dann erscheint er hier.

Komponente

Leerer Zustand

Sagt, was fehlt, und wie es weitergeht.

Komponente

Schritte

Wo man steht, was noch kommt.

Varianten

Ein System. Jede Marke. Jeder Stil.

Die Marke gibt die Farbe, der Skin die Form. Jede Kachel zeigt sich schon in ihrer eigenen Variante; ein Klick gilt für die ganze Seite.

Marke
Skin

Konfigurator

Alles einstellbar. Live.

Rechts der Konfigurator, links das Ergebnis. Überall sonst auf der Seite öffnen Sie ihn oben rechts; hier rastet er ein.

Überweisung

Alle Felder folgen dem Label-Stil

Erscheint auf dem Kontoauszug
Jana Weber

Produktdesign · Köln

Profil vollständig80 %
Ein Klick, alles neuJede Einstellung wirkt sofort auf die ganze Seite.

Grundlagen

Live gemessen.

Diese Zahlen sind nicht abgeschrieben: Die Seite misst sie gerade in Ihrem Browser. Wählen Sie eine andere Variante, und sie misst sofort neu.

Farbe

Markenfarbe und Grau, je elf Stufen

Lesbarkeit

So stark hebt sich Text vom Hintergrund ab

–

Schrift

Inter, 14 Größen

Aa

Höhen

Button und Feld sind immer gleich hoch

Form

Ecken und Schatten des Skins

Icons

99 Icons, Stil im Konfigurator

Zustand teilen

Jede Einstellung steht in der Adresse

…

Link kopieren, und andere sehen genau diese Variante.

Probieren Sie es selbst.

Barrierefrei bleibt es in jeder Kombination.