Reference
A foundation, not a catalogue
"Dessau DS" is short for the Dessau Design System — the starting point for a digital product: the principles that do not change, the design foundations everything is measured against, a small set of components, the patterns that solve recurring tasks — and structured context so a coding agent can use all of it correctly without rediscovering the rules.
These pages are the rendered proof. The values shown here are read from the same stylesheets a product loads, so nothing on this page can drift from what ships.
The model
Each layer depends only on the ones before it. Nothing downstream introduces a value that does not exist upstream — that one-way dependency is what keeps the system coherent as it grows.
-
Principles
What is non-negotiable. Accessibility, progressive enhancement, native before custom.
-
Foundations
Colour, type, space, radius, elevation, motion. Primitive values and the semantic roles that point at them.
-
Components
One thing with one purpose. A button, a field, a dialog.
-
Patterns
Components plus behaviour, solving a recurring user task. Address search, validation, results.
-
Products
What you are actually building. Dessau DS should make its first day cheap and its second year survivable.
Component or Pattern?
The distinction is kept explicit in code, documentation and agent context, because it is the question that decides where new work goes.
Component
A reusable building block with one purpose. It has variants, sizes and states, and it does not know what task it is being used for.
Button, field, checkbox, select, badge, card, dialog, table, tabs.
Pattern
Components plus behaviour, solving a task a person actually has. It owns the things a single element cannot: focus order, live announcements, request lifecycle, error recovery.
Address search, autocomplete, form validation, search and results, conditional fields.
The test: if it renders in isolation with no task in mind, it is a Component. If describing it requires the word “then”, it is a Pattern.
Built to be used by coding agents
Dessau DS does not just publish UI code for a person to browse and copy. It carries structured, machine-readable context so an agent can navigate, extend and apply the system correctly.
Start here
AGENTS.md at the repository root, with
CLAUDE.md pointing at the same content.
Both are entry points into agent/.
Structured context
agent/ holds principles, architecture,
foundations, component and pattern specifications, accessibility and
writing rules, and a Definition of Done.
Machine-readable index
agent/index.json maps every component
and pattern to its files, tokens and specification, so an agent can
resolve “does this already exist?” without reading prose.
Task recipes
agent/recipes/ gives step-by-step
procedures for the jobs that recur: start a product, add a
component, add a pattern, build an accessible form.
Using it
One stylesheet and, if you want the behaviour, two scripts. No build step, no dependencies, no framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Blocking, in <head>: sets the theme before the first paint. -->
<script src="/dds/js/theme-init.js"></script>
<link rel="stylesheet" href="/dds/dds.css">
</head>
<body>
<!-- Inline the icon sprite once per document. -->
<main>…</main>
<script src="/dds/js/dds.js" defer></script>
<script src="/dds/js/components.js" defer></script>
</body>
</html>Information: The stylesheet is enough
Every component renders correctly with CSS alone. The scripts add behaviour the platform does not provide — they are never required for a page to work.
Starting a product
agent/consumer-init.prompt.md is a
paste-ready prompt for a coding agent starting a product on
Dessau DS — the submodule, the six decisions, the reference
obligation, all of it. Fetched live below, not copied onto this
page, so what you copy can never drift from the file itself.
Loading…