Introduction

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

Import one CSS file. Get layout primitives (af-stack, af-inline, af-grid), a full token layer, accessible patterns, and a readable DOM. No build step. No JavaScript runtime. No framework lock-in.

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

Structure first

Most tools help you style surfaces or assemble components. Airframe starts with the layout contract underneath — stack, inline, grid, tokens, and patterns that keep markup readable.

Tailwind  → styling utilities
Bootstrap → components
Airframe  → UI structure

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

What it is / isn’t

Airframe is	Airframe is not
Structural primitives and patterns	A component library with JS widgets
CSS tokens you override at runtime (optional Theme Studio / af theme codegen)	A required build step to use the system
Readable af-* markup	Utility soup
Framework-agnostic CSS	Another React (or Vue) dependency

You keep your framework. Airframe gives the structure that survives it.

Why start

Readable markup for your team. Predictable patterns for AI. Branding via CSS variables, not a rebuild. Accessibility as infrastructure, not a plugin.

Install Airframe · Read the Manifesto

Next Steps

• Installation — get the CSS in your project
• Usage — first patterns and primitives
• Layouts — stack, inline, grid, and more
• Tokens & Theming — brand it with --af-* variables
• Demo — an admin UI built only with Airframe classes
• AI Rules — the contract for humans and coding agents