Skip to content
Airframe

Manifesto

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

Frameworks power your application. Airframe provides the structure underneath.

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.

Structure first

Section titled “Structure first”

Most UI tools help you style surfaces or assemble components. Airframe starts earlier: how the UI is organised, named, and constrained before you decorate it.

Tailwind  → styling utilities
Bootstrap → components
Airframe  → UI structure

That is not a brand-new category. It is a different priority. Structure before decoration, so markup stays understandable when humans or AI change it.

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 one-off flex recipes.
  • Full token layer — colour, space, type, radii, motion, control chrome. Override --af-* tokens and your brand applies without a rebuild.
  • Readable DOM — af-card, af-btn, af-stack. Read the markup, understand the UI.
  • Accessibility built in — Visible focus, reduced-motion, contrast-minded defaults, RTL-ready patterns. Themes include high-contrast. Aim for WCAG 2.2 AA; your content and choices still matter.
  • Zero runtime JS — CSS-only. Works with any framework, or none.

Why structure helps in the AI era

Section titled “Why structure helps 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 — Prefer af-stack over 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. Built for humans and AI — Predictable patterns. @airframeui/core ships the rules, catalog, and class reference.
  4. Accessible by default — Not a plugin. A system constraint, with room for you to get the details right.
  5. Framework-agnostic — Engines change. Structure stays.

What Airframe is not

Section titled “What Airframe is not”
  • Not a UI library — No 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”