Introduction

Airframe is a structural UI design system for humans and AI. Machine-readable by design.

Import one CSS file. Get layout primitives (af-stack, af-inline, af-grid), a full token layer, production-ready, accessible CSS patterns, and a readable DOM. Blocks and blueprints are starting points you can edit. 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.

Want to learn more? Why Airframe.

From structure to screens

Four levels of construction. Not a nested tree. A blueprint may use af-grid directly.

Level	Role	Start here
Structure	Arrange and compose UI	Stack, Inline, Grid
Patterns	Reusable UI pieces	Button, Card, Input, Dialog
Blocks	Section guides. Start, then edit	Hero, Toolbar, Pricing, FAQ
Blueprints	Complete interfaces. Start, then edit	Dashboard, Inbox, Settings

A block is a section guide. A blueprint is a screen guide. Start from one when it is close, then change it. They are not the only correct composition. Patterns are not components.

Structure has two kinds: primitives (how children relate) and shells (how the viewport is divided). Shells.

Customise with CSS

Override --af-* tokens in your stylesheet. No theme build. Changes apply at runtime.

Four schemes are built in: light, dark, high-contrast light and high-contrast dark. Follow system preferences or force a scheme with data-theme.

Named brand palettes use data-brand and work across all schemes.

:root {
  --af-base-primary: #0876dd;
  --af-font-body: 'Inter', system-ui, sans-serif;
}

Full walkthrough: Theming. Token catalog: Tokens. Same tokens in Figma: Figma plugin.

Use as much as you need

Use Airframe as the design system: af-* in templates. Or wrap af-btn in <my-button> if you already have a kit. Both are valid. Do not run two palettes or two layout grammars.

Tokens only, structure only, pattern classes, or wrappers. That is how much you take. It is not the same ladder as Structure → Patterns → Blocks → Blueprints.

Airframe owns how it looks. Your kit owns how it behaves.

Full contract: Use as much as you need.

Next steps

Understand

Why Airframe
Get started
Comparison — Tailwind, Bootstrap, and shadcn

Install

Build

Brand

Integrate

Automate