Roadmap

This is intent, not a calendar. If it is not listed here, do not assume it.

Contributor copy lives in the repo as docs/ROADMAP.md.

Ships today

• CSS grammar — tokens, layout primitives, 57 CSS patterns. One import. Zero runtime.
• Token package — @airframeui/tokens is authored as CSS, then emitted as CSS, JSON, and TypeScript.
• Inbound mapping — Theme Studio and @airframeui/theme read DTCG, Tokens Studio, CSS variables, Figma Variables export JSON, and Style Dictionary-like JSON, then write --af-* CSS.
• AI contract — rules, class reference, catalog, MCP, llms.txt.

Use Airframe as the design system, or wrap a kit. Use as much as you need.

Next: Figma Variables export

Designers are part of “everywhere.” That surface is not in the homepage slogan until it ships.

Today you can map Figma into Airframe CSS. You cannot yet generate Figma Variables from Airframe.

Target:

Airframe token spec (git)
      │
      ├── CSS custom properties     (ships)
      ├── JSON / TypeScript         (ships)
      ├── DTCG interchange          (planned)
      ├── Figma Variables           (planned)
      └── Variables Studio dataset  (investigate)

Git owns the definitions. Figma is a generated view. If designers change Variables in Figma and that never returns to git, the systems drift. Same failure as copying hex values by hand.

Investigate first

Do not pick an exporter from marketing. Confirm the workplace workflow (Variables Studio vs Tokens Studio vs native Figma Variables) and whether DTCG can be the interchange for all of them.

Airframe should not add a proprietary interchange format. CSS stays the runtime. @airframeui/tokens JSON stays an implementation view. DTCG is the likely file you generate for other tools.

Full architecture, layers, and what to do until export exists: Design tokens as the source of truth.

Later

• Web Components (@airframeui/elements) — optional implementation. Not a replacement for the CSS contract.
• Optional a11y JS — focus trap and similar, as a layer on Airframe. Core stays CSS.

Not planned

• Official React, Angular, or Vue runtime packages. Framework files in your repo wrap af-*. See How to keep one design system across React and Angular.
• A portable JS widget kit with “the same keyboard map” in every engine. That is a behaviour library. Separate design from behaviour.

Next steps

• Design tokens as the source of truth — Figma, DTCG, and the token pipeline.
• One UI language. Everywhere. — the customer promise.
• Theme Studio — map an existing token file into --af-* today.