v0.7.0

One UI language.

A structural UI design system for humans and AI.
Machine-readable by design.

npm i @airframeui/core

Same classes. Any engine.

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

export function Dashboard() {
  return (
    <main className="af-stack af-gap-lg">
      <header className="af-inline af-justify-between">
        <h1>Dashboard</h1>
        <button className="af-btn">Create</button>
      </header>
      <section className="af-grid af-grid-2">
        <div className="af-card">Revenue</div>
        <div className="af-card">Users</div>
      </section>
    </main>
  );
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    <main class="af-stack af-gap-lg">
      <header class="af-inline af-justify-between">
        <h1>Dashboard</h1>
        <button class="af-btn">Create</button>
      </header>
      <section class="af-grid af-grid-2">
        <div class="af-card">Revenue</div>
        <div class="af-card">Users</div>
      </section>
    </main>
  `
})
export class DashboardComponent {}

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

Dashboard

Revenue

Users

CSS is the spec

One source. Everything reads it.

--af-*

Why the grammar outlives the engine →

Tokens --af-* UI Structure to blueprints Themes CSS, Figma Tooling ESLint, IntelliSense AI Catalog, MCP

Machine-readable by design.

Give AI a UI language. A contract it can follow.

AI shouldn't invent your interface conventions every time.
Structured rules, a class reference, and MCP give it a contract to look up. Structure, patterns, blocks, and blueprints. Not only class names.

Tailwind-style utilities

<div class="flex flex-col gap-4 rounded-xl border bg-white p-6 shadow-sm">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">…</h1>
    <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">…</button>
  </div>
  <div class="grid grid-cols-2 gap-4">…</div>
</div>

Fast to generate. Hard to keep consistent.

Airframe

<div class="af-stack af-gap-lg">
  <header class="af-inline af-justify-between">
    <h1>…</h1>
    <button class="af-btn">…</button>
  </header>
  <div class="af-grid af-grid-2">…</div>
</div>

Intent in the class names. A contract AI can follow.

Structured rules

@airframeui/core/rules — the contract agents follow.

Class reference

Known af-* only. Look up, don't invent.

MCP

search_patterns → get_pattern → get_example → validate_markup. On demand.

Airframe for AI agents →

Readable DOM

Structure before styling. Readable for humans and AI.

Styling describes appearance. Structure describes intent.
Airframe starts with structure, so markup stays predictable — for people and models.

Readable DOM →

Live theme ->

Overview

Dashboard

Revenue

$48.2k

Users

1,284

Conversion

3.8%

Quota used 72%

Projects 12 active

Deployments Healthy

<main class="af-stack af-gap-lg">
  <header class="af-inline af-justify-between">
    <h1>Dashboard</h1>
    <button class="af-btn">Create</button>
  </header>
  <input class="af-input" placeholder="Find…" />
  <section class="af-grid af-grid-3">…</section>
  <div class="af-progress">
    <div class="af-progress-bar" style="width: 72%"></div>
  </div>
</main>

Compose

From structure to screens. Four levels. One language.

Arrange → Pieces → Sections → Interfaces.

Structure

Arrange and compose UI.

Stack · Inline · Grid

Patterns

Reusable UI pieces.

Button · Card · Input

Blocks

Reusable UI sections.

Toolbar · Hero · Chat

Blueprints

Complete interfaces.

Dashboard · Settings · Inbox

Structure

UI Grammar. A small set of concepts.

Combine them to describe almost any interface.

Stack af-stack Inline af-inline Grid af-grid Center af-center Sidebar af-sidebar Container af-container

Explore structure →

Theming

One system. Unlimited brands.

Override --af-* in CSS. Light, dark, and high-contrast ship ready.
Add another data-brand for another theme.

Theming →

/* Default styles */
:root {
  --af-base-primary: #0876dd;
  --af-font-body: 'Inter', system-ui, sans-serif;
}
/* Delta */
[data-brand='delta'] {
  --af-base-primary--light: #c23018;
  --af-base-primary--dark: #e85d2a;
  --af-color-background--light: #fefaf8;
  --af-color-background--dark: #1a0b08;
  --af-color-surface-secondary--light: #f9ece7;
  --af-color-surface-secondary--dark: #2a1410;
}
/* Vortex */
[data-brand='vortex'] {
  --af-base-primary--light: #00d2cc;
  --af-base-primary--dark: #00e0d4;
  --af-color-on-primary--light: #042628;
  --af-color-on-primary--dark: #042628;
  --af-color-background--light: #061516;
  --af-color-background--dark: #030a0b;
  --af-color-text--light: #e8fafa;
  --af-color-text--dark: #e8fafa;
  --af-color-surface-tertiary--light: #010101;
  --af-color-surface-tertiary--dark: #010101;
}
/* …as many [data-brand] themes as you design */

CSS variables. Named brands, light, dark, high-contrast. Add as many as you design.

Figma

Airframe → Figma. Same colours in Figma and the app.

Set the brand once. Designers get it as Figma variables — light, dark, and high contrast. No separate palette to keep in sync by hand.

How it works → Theme Studio →

Variables

Name

Light

Dark

HC Light

HC Dark

Color

primary

#0876dd

#1678d4

#0058b0

#7ec8ff

background

#ffffff

#0d1117

#ffffff

#000000

surface-secondary

#f8fafc

#1d2434

#f5f5f5

#2a2a2a

text

#0d1117

#f8fafc

#000000

#ffffff

Light, dark, and two high-contrast modes on one collection. Switch brand for another collection. Same names as the live app.

Brand once

Colours live in the project. The live app already uses them.

Export

Theme Studio, or af theme export from the project.

Use in Figma

Apply with the Airframe plugin, or drop a four-file pack onto a collection.

Any framework. Pure CSS. Zero runtime.

Same classes. Any engine.

<main class="af-stack af-gap-lg">
  <header class="af-inline af-justify-between">
    <h1>Dashboard</h1>
    <button class="af-btn">Create</button>
  </header>
</main>

export function Dashboard() {
  return (
    <main className="af-stack af-gap-lg">
      <header className="af-inline af-justify-between">
        <h1>Dashboard</h1>
        <button className="af-btn">Create</button>
      </header>
    </main>
  );
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    <main class="af-stack af-gap-lg">
      <header class="af-inline af-justify-between">
        <h1>Dashboard</h1>
        <button class="af-btn">Create</button>
      </header>
    </main>
  `
})
export class DashboardComponent {}

<template>
  <main class="af-stack af-gap-lg">
    <header class="af-inline af-justify-between">
      <h1>Dashboard</h1>
      <button class="af-btn">Create</button>
    </header>
  </main>
</template>

<main class="af-stack af-gap-lg">
  <header class="af-inline af-justify-between">
    <h1>Dashboard</h1>
    <button class="af-btn">Create</button>
  </header>
</main>

Get started →

Two paths

Use as much as you need. Built with Airframe, or on it.

A structural UI system. Tokens, structure, and production-ready CSS patterns.
Or wrap af-btn in your own components.

Need a section or a screen? Start from blocks or blueprints, then edit them.

Tokens

Map --af-* once.
Keep your components.

Structure

af-stack / af-inline / af-grid.
Your widgets on top.

Patterns

Production-ready CSS-only patterns.
Buttons, forms, nav, overlays.

Wrappers

<MyButton> is an af-btn.
Not a restyled cousin.

Use as much as you need →

Accessibility

Accessible by design. It's part of the structure.

Visible focus, reduced motion, accessible contrast, RTL-ready layouts, and high-contrast themes — built into the system from the start. Designed with WCAG 2.2 AA requirements in mind.

Explore A11y Contrast checker →

One UI language. Design system Everywhere.

One source. Everything reads it.

Give AI a UI language. A contract it can follow.

Structure before styling. Readable for humans and AI.

From structure to screens. Four levels. One language.

UI Grammar. A small set of concepts.

One system. Unlimited brands.

Airframe → Figma. Same colours in Figma and the app.

Any framework. Pure CSS. Zero runtime.

Use as much as you need. Built with Airframe, or on it.

Accessible by design. It's part of the structure.

Airframe

One UI language.