Skip to content
Accessible to WCAG 2.2 AA – in every variant

Strict rules.
Attractive design.

The design system for interfaces under strict requirements, from banks to public services. Verified accessible and yet as beautiful as the best systems. Switch colour and style with one click.

See all variants

Good morning, Jana

Your overview for October 2026

Month
Revenue
€48,210+12.4 %
Orders
1,284+8.1 %
Basket
€37.55−2.3 %
Satisfaction
4.8 of 5+0.2

Revenue

In thousand euros, against last year

Period
Total
€546k+27.0%
This yearLast year

Channels

Share of revenue in October

€48.2kRevenue
  • Online54 %
  • Branch28 %
  • Partner18 %

Latest orders

The last three days

CustomerDateAmountStatus
Jana WeberCologne20/10/2026€249.00Paid
Mehmet KayaHamburg20/10/2026€89.90Pending
Anna SchulzLeipzig19/10/2026€1,204.50Paid
Tim LehmannBonn19/10/2026€42.00Cancelled
Lea HoffmannMunich18/10/2026€318.40Paid
Paul BeckerBerlin18/10/2026€76.20Shipped

Orders per day

The last 7 days

Benefits

What usually does not go together.

Where regulations are strict, good design is rare. Here the two belong together: rules that are verified, and a look that wins people over.

AA
  • Contrast
  • Keyboard
  • Visible focus
  • Zoom up to 400 %

Accessible, in every variant

WCAG 2.2 AA is built in, not bolted on. Every brand and every style is checked automatically with every build.

For developers

A contrast check for every colour pair, axe-core in every story and every mode, a focus ring of at least 2 px at 3 : 1, zoom up to 400 %. The legal basis is EN 301 549, which the German BFSG and BITV 2.0 build on.

One system, 30 looks

Five brands times six styles, every combination ready at once. Try it: each dot is one.

For developers

The brand swaps the colour tokens, the skin the shape tokens; the two are independent. Plus ten modes such as colour scheme, contrast and density, all set by data attribute, on a part of the page too.

Please enter a complete email address.

Made for forms

Visible labels, clear errors, a review step before sending. For banks, public services and anywhere strict rules apply.

For developers

Field pattern with automatic ARIA links, an error summary after the GOV.UK pattern, fields for IBAN and one-time codes, three switchable label styles.

Templates, not just parts

Sign-in, sign-up, two-factor, profile: ready-made building blocks that just fit. Browse them below.

For developers

Organisms and templates after Atomic Design, as a shadcn-compatible registry. They import from @sw-ds/react and fork no core logic.

–msSwitch a variant and this page measures it live.

Fast on every device

Switching takes milliseconds, faster than a blink. Runs on older iPhones and iPads too.

For developers

CSS without runtime: a switch only sets attributes. Core ≤ 40 KB gzip, Safari and iOS from 15.4, LCP ≤ 2.5 s with a four-times throttled CPU.

Build an account overview with the SW Design System.

Tokens, no fixed values
Visible labels
Contrast checked

Ready for AI assistants

AI agents read the rules and build by them. In a trial, four outside agents built banking screens from our docs alone.

For developers

llms.txt, AGENTS.md, SKILL.md and a component manifest; a lint preset binds to the tokens. Every check builds and tests the trial screens too.

Templates and components

Ready-made blocks. Ready to use.

From sign-in to the error summary: templates for whole flows and components for everything in between. All of it is real and rendered in the current variant.
Forgot password?
Template

Sign in

With password or passkey, ready to use.

  • At least 12 characters
  • At least one digit
  • At least one capital letter
Template

Sign up

Password rules you see while typing.

Enter code

We sent a code to +49 151 … 47.

Valid for 10 minutes
Send a new code
Template

Two-factor

Code by text or app, with clear help.

Jana Weber

Customer since 2019

Email
jana.weber@example.com
Phone
+49 151 … 47
Last sign-in
Today, 08:12 · Cologne
Template

Profile and security

Every setting in one place.

Appointment, October 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
Component

Calendar

Local date format, fully usable by keyboard.

Receipts
PDF or JPG, up to 10 MB
invoice-october.pdf68%
Component

File upload

Drag or choose, with progress.

Nothing for the first twelve months, then €4.90 a month.

Component

Frequent questions

Expand without losing the overview.

Documents
Contracts
Statements
October 2026.pdf
September 2026.pdf
Tax 2025
Component

Folders

A tree that remembers what is open.

New featureStanding orders now in the app too.
SavedYour changes are saved.
Component

Notices

Four tones, never told by colour alone.

40%
72%
88%
Storage81%
Application50%
Component

Progress

Circle, bar and meter with thresholds.

No receipts yet

Upload your first receipt and it will show up here.

Component

Empty state

Says what is missing and what comes next.

Component

Steps

Where you are, what comes next.

Variants

One system. Every brand. Every style.

The brand sets the colour, the skin the shape. Every tile already shows itself in its own variant; one click applies it to the whole page.

Brand
Skin

Configurator

Everything adjustable. Live.

The configurator on the right, the result on the left. Anywhere else on the page you open it top right; here it snaps into place.

Transfer

Every field follows the label style

Shown on the bank statement
Jana Weber

Product design · Cologne

Profile complete80%
One click, all newEvery setting applies to the whole page at once.

Foundations

Measured live.

These numbers are not copied from anywhere: the page is measuring them in your browser right now. Pick another variant and it measures again at once.

Colour

Brand colour and grey, eleven steps each

Legibility

How strongly text stands out from its background

–

Typeface

Inter, 14 sizes

Aa

Heights

Button and field are always the same height

Shape

Corners and shadows of the skin

Icons

99 icons, style in the configurator

Share the state

Every setting lives in the address

…

Copy the link and others see exactly this variant.

Try it yourself.

It stays accessible in every combination.