Skip to content
Airframe

Manifesto

Airframe is a structural UI system designed for humans and AI.

Frameworks power your application. Airframe provides the structure.

Like an aircraft airframe, it defines form and integrity. You bring the engine: React, Vue, Angular, AI-generated code, or whatever comes next. Swap the engine later. Keep the structure.

A New Category

Section titled “A New Category”

Most UI tools sit in one of two places: styling utilities, or component kits.

Airframe sits above both. It defines how UI is organised before you paint it or wrap it in widgets.

Tailwind  → styling utilities
Bootstrap → components
Airframe  → UI structure

Structure is above styling. That’s a new category.

What you get

Section titled “What you get”
  • Layout primitives — af-stack, af-inline, af-grid, af-center, af-cover, af-sidebar. Layout as concepts, not flex recipes.
  • Full token layer — colour, space, type, radii, motion, component chrome. Override --af-base-primary. Your brand applies everywhere. No rebuild.
  • Readable DOM — af-card, af-btn, af-stack. Read the markup, understand the UI.
  • Accessibility as infrastructure — WCAG 2.2 AA. Visible focus, reduced-motion, contrast-safe, RTL-ready. Four themes including high-contrast.
  • Zero runtime JS — CSS-only. Works with any framework, or none.

Why structure wins in the AI era

Section titled “Why structure wins in the AI era”

AI can generate UI fast. It still struggles with structure: messy nesting, inconsistent layout, random spacing utilities, weak semantics.

Airframe gives it a contract. Humans get markup they can review. Both get the same language.

<div class="af-stack af-gap-lg">
  <header class="af-inline af-justify-between">
    <h1>
      Dashboard
    </h1>
    <button class="af-btn">
      Create
    </button>
  </header>
  <div class="af-grid af-grid-3">
    <div class="af-card">
      Revenue
    </div>
    <div class="af-card">
      Users
    </div>
    <div class="af-card">
      Growth
    </div>
  </div>
</div>

Readable by humans. Predictable for AI.

Principles

Section titled “Principles”
  1. Structure over styling — af-stack instead of flex flex-col gap-4. Names that say what the UI is.
  2. Human-readable in the DOM — If you can read the markup, you can understand the UI. Semantic HTML is the baseline.
  3. AI-native by design — Predictable patterns. @airframeui/core ships the rules, catalog, and class reference.
  4. Accessible as infrastructure — Not a plugin. A system constraint.
  5. Framework-agnostic — Engines change. Structure stays.

What Airframe is not

Section titled “What Airframe is not”
  • Not a UI library — We don’t ship a JS widget zoo. Patterns are CSS. Behaviour stays native (<button>, <dialog>, <details>).
  • Not a utility free-for-all — Classes express structure and intent, not every possible CSS property.
  • Not a design system for one brand — Tokens are yours to override. Airframe is the skeleton, not the skin.
  • Not framework lock-in — No runtime. No proprietary components. Leave when you want; the markup still makes sense.
  • Not magic — Explicit classes, explicit tokens, cascade layers you can see and extend.

Airframe provides structure, not shortcuts.

Airframe
The structural UI system designed for humans and AI.

Learn More

Section titled “Learn More”