Agent-first design system
A foundation for building digital products
Paste one prompt into a coding agent and the Dessau Design System reads the rules, asks the decisions that are yours to make, and builds — a product like this site, or a design system of your own to hand to a client. Accessibility is not a review step: WCAG 2.2 AA is the floor everything else sits on.
- Components
- 64
- Patterns
- 14
- Light & dark mode
- YES
- WCAG 2.2 baseline
- AA
- Runtime dependencies
- NO
Why Dessau Design System
Agent-first
Built to be operated by a coding agent, not transcribed by hand. Paste one prompt and it reads the rules, asks the decisions that are yours to make, and builds.
A foundation for your own system
The layer the Dessau Design System exists for: a design system built on it that works without it, shipped to one client — substituting the foundation rather than overriding it.
Accessibility is the floor
WCAG 2.2 AA outranks visual preference, convenience and deadline. Every colour pair is calculated, not estimated — 188 pairs, verified, in both themes.
Why the name
The Dessau Design System is named for the city of Dessau, not the aesthetic — the Bauhaus's second and most architecturally definitive home from 1925, where instruction paired form with material and cut anything that did not carry weight. Clarity over decoration, system over style. The name is a promise this repository is held to: six deliberate decisions, not forty accidental ones.
What it is
Six layers, each depending only on the ones before it. A derived design system — built on the Dessau Design System, working without it, shipped to one client — is the layer it exists for; a product consuming it directly, the way this site does, is supported too.
Principles
What is non-negotiable. Accessibility, semantic HTML and progressive enhancement outrank visual preference, convenience and deadline.
Foundations
Colour, type, spacing, motion — the primitive and semantic tokens every component and pattern reads from.
Components
Reusable building blocks — a button, a field, a dialog, a table — each documented with its real markup and ARIA.
Patterns
Compositions that solve a recurring user task: a combobox, a validated form, a multi-step wizard.
Derived systems
A design system built on the Dessau Design System that works without it — substituting the foundation rather than overriding it, one per client.
Products
Real screens, built by consuming a derived system, or the Dessau Design System directly — the way this site does.
Why it exists
Ten rules govern every change. Break any of them and the change is wrong, regardless of how it looks. Five of them, in brief:
- Accessibility is a constraint, not a review step. WCAG 2.2 AA is the floor. It outranks visual preference, convenience and deadline.
-
Semantic HTML first.
A button is a
<button>. ARIA supplements semantics; it never replaces them. - Progressive enhancement, always. The markup works before JavaScript runs. If a script fails to load, forms still submit and content is still readable.
-
Native before custom.
<dialog>,<details>,<select>and the Constraint Validation API before a custom replacement. - Extend before duplicating. A second button style is a defect, not a variant.
Get started
There's more than one way in — the full recipes are on GitHub. The fastest one: copy a prompt into your coding agent.
Built with and for Claude Code. Works the same way with Codex
and Antigravity: AGENTS.md is a
vendor-neutral convention, not a Claude-specific file.
Paste this into an empty product repository — the same prompt that built this site.
Prompt
This product uses Dessau DS as its design system.
1. Add it as a submodule at libs/dessau:
git submodule add https://github.com/ma6/dessau.git libs/dessau
2. Read, in this order, and treat them as authoritative over anything you
already believe about design systems:
- libs/dessau/AGENTS.md
- libs/dessau/agent/index.json
- libs/dessau/agent/recipes/derive-a-design-system.md
- libs/dessau/agent/recipes/new-product.md
3. Work through derive-a-design-system.md end to end — it already tells you
to ask rather than answer, and where the answers go.
4. Then follow new-product.md end to end.
5. Copy libs/dessau/agent/consumer-AGENTS.template.md into this repository as
AGENTS.md, fill in every [PLACEHOLDER], and point CLAUDE.md at it — one
instruction set, never two divergent copies.
Two things you will not discover on your own, and both fail silently:
- The pages must be SERVED, not opened as file://. The paths are absolute
(/libs/dessau/…), so a file:// origin resolves them against the disk root and
loads no stylesheet, no script, and reports no error.
python3 -m http.server 8000 --bind 127.0.0.1
- The icon sprite must be INLINED into each document:
node libs/dessau/scripts/sync-icons.mjs --dir=.
An external <use href="icons.svg#…"> breaks currentColor silently — the icon
renders, in black, in both themes.
There is a rendered reference. Serve the project and open it when you are unsure
how a component should behave or what markup it expects:
python3 -m http.server 8000 --bind 127.0.0.1
http://localhost:8000/libs/dessau/reference/
It works from the project root because those pages reach into DDS only by relative
path. Prefer looking at it over guessing, and copy its markup including the ARIA.
Before you tell me it is done:
node libs/dessau/scripts/sync-icons.mjs --dir=. --check
and walk libs/dessau/agent/definition-of-done.md.
Build nothing that agent/index.json already lists. If something is close but not
right, say so and ask — a second button style is a defect, not a variant.Full recipe on GitHub: new-product.md (opens in a new tab) and derive-a-design-system.md (opens in a new tab).
Paste this into an empty repository that will become a design system of its own — one that works without Dessau DS.
Prompt
This repository is going to become a design system built on Dessau DS. It must work
WITHOUT Dessau DS: what it ships to its consumers carries no dependency on it.
1. Add Dessau DS as a submodule:
git submodule add https://github.com/ma6/dessau.git libs/dessau
Never edit anything inside libs/dessau. It is a pinned dependency.
2. Read, in this order, and treat them as authoritative:
- libs/dessau/AGENTS.md
- libs/dessau/agent/index.json
- libs/dessau/agent/recipes/derive-a-design-system.md
- libs/dessau/agent/recipes/derive-a-standalone-system.md
3. Work through derive-a-design-system.md end to end — it already tells you
to ask rather than answer, and where the answers go.
4. Then follow derive-a-standalone-system.md end to end.
5. Repoint the verification scripts and prove each one can still fail —
derive-a-standalone-system.md step 4 says how, and why a check that
cannot fail is worse than none. Report which checks you repointed and
what each one said when you broke it.
6. This is a design system, so it owes what one owes (derive-a-standalone-
system.md step 5): our own agent/index.json, AGENTS.md, reference, and
our own version of libs/dessau/agent/consumer-init.prompt.md.
Do not read this repository's future clone URL from `git remote` and
treat it as settled. Propose it as a candidate if you want, but ASK ME
to confirm both the URL and the `libs/<name>` directory name before
writing them into that prompt — a repo can be local-only, forked, or
moved before its first consumer exists.
DO NOT build components. Dessau DS's already exist and we are inheriting them —
your job here is the foundation, the wiring and the gates. If something seems
missing, tell me rather than adding it.
Stop and show me the built stylesheet and the check output before going further.Full recipe on GitHub: derive-a-standalone-system.md (opens in a new tab) and derive-a-design-system.md (opens in a new tab).
Read every component and pattern
Every one rendered with its variants and states, its specification anchor, and its real, current markup including ARIA.