Dessau Design System

What it is

Dessau is a design system delivered as plain CSS and a small amount of optional JavaScript. There is no component framework to adopt, no build step a consumer has to run, and nothing loaded from a shared CDN at runtime — a product links one stylesheet and writes standard HTML with dds- classes.

Principles it is built on

• Semantic HTML first. A <button>, a <dialog>, a <details>, a <table> — never a <div> with a role bolted on.
• Progressive enhancement. Every component renders and works with CSS alone; JavaScript adds behaviour the platform does not provide, and its absence degrades to something usable rather than broken.
• Native before custom. The platform's own elements and APIs (popover, <dialog>, :user-invalid, scroll-driven animation) are preferred over re-implementations.
• Semantic tokens only. Colour, space, type and radius are consumed through named custom properties that follow the theme — never a raw hex, never a primitive ramp step.
• Never colour alone. Status and emphasis always pair colour with text or an icon and a change in weight or fill.

Scope

Around forty components and a dozen recurring interaction patterns — forms and validation, navigation and site chrome, content display, overlays, multi-step flows — each with a fixed, ARIA-correct markup contract, a rendered reference, and a machine-readable inventory so an agent can answer "does this already exist?" before building anything.

Outcome

Dessau is consumed in two ways: directly by a product, or as the base for a derived system that substitutes the foundation (colour, type, radius) while inheriting every component unchanged. Neon — the brand layer this portfolio is built on — is exactly that: Dessau's components and ARIA, Martin Gude's palette and typography, shipped with no runtime tie back to Dessau.