A contract-first design system

Author once. Let the platforms agree.

A component is a single YAML contract — surface, slots, events, states, tokens, accessibility obligations. The Wyrding Way projects it into working code for the platforms you choose, and gates their parity in CI. Interaction and geometry are identical by construction, not by convention.

Get started View on GitHub

Everything below is generated from this.

Change the contract and every chosen target regenerates. The drift gate fails the build until they agree — the reference you are reading and the code you are shipping cannot disagree.

Targets — yours to choose

Parity gated across 3 selected targets.

wyrd.component.button source of truth 
identity:  name: Button  tag: wyrd-button  package: wyrd.component.buttontarget-strategy:  react: required  flutter: requiredsurface:  properties: [variant, is-disabled, is-loading]  slots: [label, leading-icon, trailing-icon]  events: [press]  states: [default, hover, focus-visible, pressed, disabled, loading]  tokens:    primary:      background: color.primary      foreground: color.on-primary    radius: rounded.mdobligations:  accessibility:    role: button  sdui:    status: serializable
projects to ReactFlutter abridged · 207 lines in the catalog

What the system guarantees.

  1. 01

    A working catalog, day one

    57 components ship ready to use — from Button and Card to a flow editor and a graph viewer — all rendered from your brand tokens. When you author components of your own, the same machinery applies: one contract, projected to the targets you choose.

  2. 02

    Quality is the pipeline

    Accessibility scans, localization stress fixtures, WCAG contrast, and cross-stack visual parity fail the build, not the audit.

  3. 03

    An input, not a fork

    Your identity is a DESIGN.md compiled into W3C tokens. The same components re-skin per brand; our brand never competes with yours.

  4. 04

    Two kinds of authors, one surface

    Contracts, tokens, and behavior are machine-readable. Human designers and AI agents work the very same surfaces, under the very same guarantees.

One card. Four design languages.

A brand is a DESIGN.md compiled into W3C tokens — an input, not a fork. Watch the same composite re-skin as the tokens change. The contracts underneath never move.

The Wyrding Way

Welcome back

The homage presets demonstrate range, not affiliation — the same contracts wearing four very different DESIGN.md files, each compiled through the real token pipeline. They are clearly labeled and nothing third-party ships with the system.

Drawn to spec.

Every component documents its own anatomy from the contract — slots, tokens, focus, radius. Parity is not a tolerance.

ANATOMY · LIVE SPECIMEN Button primary example · contract-derived
  1. Slot content slot required · text

    The visible action label supplied by the contract example.

  2. Token background color.primary

    The semantic surface binding applied by the active brand.

  3. Part root interactive control

    The contract-defined button boundary.

  4. State focus-visible platform focus

    The keyboard focus state of the real control.

Parts

  • rootInteractive control
  • labelVisible content

Slots

  • contentRequired

States

  • focus-visibleKeyboard focus

Tokens

  • backgroundcolor.primary
  • radiusradius.control

FIG. 1 Button — anatomy TOL. ±0

The site of a design system is the first component a skeptic inspects.

Every guarantee above runs as a CI gate, and the Button reference is generated from the same contract you just read. Start your inspection there.

Inspect the Button reference