@airframeui/core
v0.5.0
Published
Airframe UI Core, a structural UI design system for humans and AI — structure primitives, shells, design tokens, and accessible CSS patterns.
Maintainers
itoddReadme
@airframeui/core
Airframe UI Core, a structural UI design system for humans and AI. Structure primitives, design tokens, accessible CSS patterns, blocks and blueprints. Framework-agnostic. Zero runtime JS.
This package depends on @airframeui/tokens. Installing core is enough:
npm install @airframeui/coreQuick start
@import '@airframeui/core/core.css';Static HTML / CDN (no npm or bundler):
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@airframeui/[email protected]/dist/airframe.min.css"
/>Pin a version in production. unpkg serves the same file (https://unpkg.com/@airframeui/[email protected]/dist/airframe.min.css). core.css is an @import graph for bundlers — it will not load from a CDN. airframe.min.css is the inlined bundle.
<button class="af-btn">Save</button>
<section class="af-stack af-gap-lg af-p-lg">
<h1>Payments</h1>
<p class="af-text-muted">Accessible UI foundations for production systems.</p>
<div class="af-card">
<h2 class="af-card__title">Card title</h2>
<p class="af-card__body">Card content</p>
</div>
</section>Full docs: airframeui.com · Installation · Patterns · Blocks · Blueprints · Changelog
What you get
- Semantic-first base styles (native HTML looks usable by default)
- Structure classes (
af-stack,af-inline,af-grid,af-app, …) - Production-ready CSS-only patterns (buttons, cards, forms, nav, …)
- Copy-ready blocks and blueprints as starting points. Edit them to fit.
- Use as your design system, or wrap a kit. As much or as little as you need (tokens, structure, patterns, or wrappers)
- Responsive utilities via
@suffixes (af-grid-2@md) - Light / dark / high-contrast themes
- Rules, catalog, and class reference for AI tooling (catalog regenerates from
src/patterns, foundation CSS, and enrichment on build)
Imports
Full system (recommended)
@import '@airframeui/core/core.css';Includes tokens, reset, base, structure, grid, shells, patterns, responsive utilities, and utilities.
Put class="af-body" on <body> for a viewport-tall document column that pins a direct-child <footer>. That class lives in shells, not reset. Skip it in Angular (and any app whose overlays append to body).
For a single file (CDN, static HTML, or a <link> without a bundler), use airframe.min.css instead. It inlines tokens and every layer.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@airframeui/[email protected]/dist/airframe.min.css"
/>Selective CSS
@import '@airframeui/core/reset.css';
@import '@airframeui/core/base.css';
@import '@airframeui/core/a11y.css';
@import '@airframeui/core/structure.css';
@import '@airframeui/core/grid.css';
@import '@airframeui/core/shells.css';
@import '@airframeui/core/utilities.css';
@import '@airframeui/core/responsive.css';
@import '@airframeui/core/patterns.css';
@import '@airframeui/core/patterns/button.css';AI and tooling exports
import rules from '@airframeui/core/rules';
import catalog from '@airframeui/core/catalog';
import classes from '@airframeui/core/classes';
import examples from '@airframeui/core/examples';
import aiGuide from '@airframeui/core/ai';
import migration from '@airframeui/core/migration';
import breaking from '@airframeui/core/breaking';./classes is the nested class reference. ./classes.json is the flat af-* allowlist.
Agent entry points: llms.txt · AI Rules
Themes and brands
<html data-theme="dark" data-brand="delta">
…
</html>document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.setAttribute('data-brand', 'delta');data-theme is the light/dark mode (light / dark only — same as Starlight and next-themes). data-brand is a named palette and composes with mode. High contrast stays on prefers-contrast. .af-force-light / .af-force-dark lock a subtree to the catalog light or dark canvas without switching scheme.
Override brand colors with CSS variables (no rebuild):
:root {
--af-base-primary: #018183;
}
[data-brand='delta'] {
--af-base-primary--light: #c23018;
--af-base-primary--dark: #e85d2a;
}Structure
<div class="af-stack af-gap-lg">…</div>
<div class="af-inline af-gap-sm">
<button class="af-btn">One</button>
<button class="af-btn">Two</button>
</div>
<div class="af-grid af-grid-1 af-grid-2@md af-grid-3@lg af-gap-lg">
<div class="af-card">…</div>
<div class="af-card">…</div>
<div class="af-card">…</div>
</div>
<div class="af-app">
<aside class="af-app__sidebar">…</aside>
<main class="af-app__main">…</main>
</div>Cascade layers
Order: af.reset → af.tokens → af.base → af.typography → af.structure → af.shells → af.patterns → af.responsive → af.utilities
Prefer overriding --af-* variables. For CSS overrides, add your own layer after Airframe’s:
@layer af.patterns, app;
@layer app {
.af-btn {
/* overrides */
}
}Related
Most apps only install this package. Tokens ship with it. The rest is optional:
| Package | Role |
| --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| @airframeui/tokens | Airframe UI Tokens — CSS variables, JSON, and typed exports (installed with core) |
| @airframeui/theme | Airframe UI Theme — generate, map, and lint --af-* CSS from a foreign token file |
| @airframeui/mcp | Airframe UI MCP — install -D (same version as core) or npx -y @airframeui/mcp |
| @airframeui/eslint-plugin | ESLint rules — leftover Tailwind/Bootstrap, unknown af-*, redundant defaults |
| airframe-intellisense | Airframe UI IntelliSense — VS Marketplace, not npm |
Inventory: Packages · Documentation · Changelog
License
MIT