I built Runrate's design guide

I built Runrate's design guide in HTML by describing it to Codex in natural language instead of starting in Figma.

It still covers what I would normally organize in a Figma library:

- semantic color tokens and themes

- typography, spacing, shape, elevation, icons, and motion

- accessibility and responsive behavior

- reusable components with states, usage guidance, anti-patterns, and live examples

- product patterns for the ledger, accounts, forms, navigation, and risk or recovery states

- guidance for translating the same intent between Web and iOS

The difference is that these are not static frames.

The tokens are implementation contracts. The components can be used in the browser. The patterns include real constraints, interaction behavior, and accessibility. Production Web remains the source of truth.

Then I point the project's AGENTS.md file at the guide.

The instruction is essentially this:

Before creating or changing a customer-facing Runrate surface, consult the design guide. Use Foundations for tokens, hierarchy, and voice. Use Components for behavior and states. Use Patterns for composition. Reuse the existing system before extending it.

That applies to new product features, email templates, marketing creative, and anything else that should match the guide.

So the design system is not only a library.... it becomes part of the context used to generate the work.

What do you think about this? And are you making your design system readable by agents? Curious what other people are doing.