A design system is more than tokens. ODSF packages the whole of it (tokens, components, behaviors, and rules) into one bundle of markdown, HTML, and CSS. An agent reads it from a task down to the exact rule that task needs, and produces UI that adheres to your system.
ODSF builds on two recent ideas.
Google's open, vendor-neutral spec for the context an AI agent needs. Plain markdown files, each a typed concept, with one-rule conformance, cross-links, and progressive disclosure. No SDK, no platform. If you can read a file, you can read OKF.
Google Labs' format for documenting a design system for coding agents: design tokens in YAML frontmatter (colors, type, spacing) with {group.name} references and human-readable rationale. It nails how to write down a token. It stops there: one file of tokens, with nowhere for components, behaviors, and rules to live, and no structure for an agent to navigate.
ODSF bundles those tokens the OKF way and makes components, patterns, behaviors, and guidelines first-class typed concepts, linked into a graph an agent navigates from a task to the rule it needs. One conformance rule keeps every bundle readable by any agent or tool.
They don't know your color roles, your spacing scale, your "never convey meaning with color alone" rule, so they invent plausible-but-wrong defaults. The fix is to hand them the system as context they can load.
Every piece (a token, a component, a behavior, a do/don't) is a typed concept in a linked graph. An agent walks from "build a sign-up form" to the patterns, components, and rules that task needs, and reads only those.
Every token lives once and appears twice: as agent-readable frontmatter and as a runnable CSS variable. The description and the code come from one source, so they never drift apart.
A bundle is conformant if every concept declares a type and the bundle states its version. That single contract lets any agent or tool read any bundle the same way, with no SDK and no lock-in.
A bundle is a directory you commit next to your product. Open it in a browser, diff it in a PR, point an agent at it.
type. This is what makes a bundle conformant.// a conformant ODSF concept --- type: Component title: Button tokens: button-primary: background: "{colors.primary}" color: "{colors.on-primary}" --- # Examples - button.example.html (every variant, live)
Three well-known systems, each cloned into a conformant ODSF bundle and rendered live in the single-file viewer. Browse the tokens, the components, and the do/don'ts, then flip light/dark.
A warm, editorial brand voice: cream canvas, coral accent, slab-serif display. A fixed identity.
Functional color roles, full light/dark theming, and the signature green primary action.
High-contrast and monochrome-first on numbered scales, fully theme-able across light and dark.
The viewer is one HTML file with no dependencies. It reads any ODSF bundle's index.md and renders it.