Design Schema: An Agentic Design System

A documentation-first design system: every component is specified once, in plain language, and that one schema generates the real thing for the web, for web components, and for native platforms. The accessibility contract travels with the schema, so what ships is what was specified.

Four pillars

Schema-driven

One Markdown doc per component holds its props, anatomy, states and accessibility contract. Everything downstream — the code, these docs, the tests — is derived from that doc rather than written a second time and left to drift.

Every platform

The same schema generates React, Lit web components and React Native, and the same tokens build for SwiftUI. A prop added to a doc reaches every platform in one pass, with the same name and the same behavior.

Zero-token theming

A theme is chosen in words — a tone, one word it must never be, a seed color, a ratio — and the palettes, type scale and spacing are derived from it. Adopting the system does not start with a spreadsheet of hex values.

Accessible by construction

Each doc carries its APG role, its keyboard map and its contrast pairs, and the build proves them: keyboard tests derived from the spec, axe over every story, and a contrast check on every pair in every theme.