Write Less Code.
Build Better Interfaces.

Semantic HTML meets beautiful design. No utility chaos. No BEM complexity.

Get Started Now View on npm ↗ Explore Components

Most frameworks ask: "What does your interface look like?" Axiom01 asks: "What does your interface mean?" Write semantic HTML that describes content structure, not visual presentation. One class per component. Change tokens globally and watch your entire interface transform in perfect symmetry. No utility chaos. No BEM complexity. Just meaningful markup and a framework that respects your code.

67

Core Components

Button, Card, Modal, Table, Video Player, AI Chat, and more
149

Tokens

Colors, Spacing, Typography, Shadows, Animations
20+

Animations

Fade, Slide, Scale, Bounce, GPU-accelerated
13.3 KB

CSS Gzipped

Everything included. Total: 14.3 KB.

Why Axiom01 is Different

While other frameworks add complexity, Axiom subtracts it.

Semantic-First

Write meaningful HTML using <article>, <section>, <header>. Axiom understands your content.

Minimal Classes

One class per component. class="card" instead of class="max-w-sm rounded shadow-lg bg-white p-6".

Accessible by Default

WCAG 2.1 AA out of the box. Keyboard navigation, focus states, color contrast all handled.

The True Axiom01 Way

Write meaningful markup where class names describe what the element is — a card, alert, button — not what it looks like. Components are complete: one semantic class provides display, spacing, interactions, and state. All styling flows from tokens. If a component needs to behave differently, adjust it using variables. Customize everywhere consistently, not just at the surface.

Symmetry, Math, and Why Your Spacing is Wrong

"We forgot how to use CSS. Modern web development has a hoarding problem. We got scared of the cascade, tried to tame it with naming conventions, then shoved styles into JavaScript. Finally, we gave up and dumped 25 utility classes into a single element."

Good design is rooted in mathematics. When spacing is arbitrary, the user notices — it registers as visual noise.

Axiom01 establishes a perfect mathematical vertical rhythm across your entire application. Change one variable:

:root {
  --a-space-unit: 1rem;
}

That single CSS variable controls everything: padding inside cards, gaps between buttons, margins beneath headers. Your entire interface scales in perfect symmetry. Paragraphs are automatically constrained to 65ch for optimal readability — handled by default.

Writing Meaningful HTML Again

Axiom01 forces you to respect your own code. It strips away visual clutter and demands semantic HTML: <article>, <section>, <header>, <form>.

"When you need a component, you don't describe what it looks like. You declare what it is."

One framework. One philosophy. One seamless experience.

The Utility-First Absurdity

25 utility classes per element

<form class="flex flex-col gap-4 p-4">
  <label class="font-bold text-sm">Email</label>
  <input class="px-3 py-2 border rounded">
  <button class="px-4 py-2 bg-blue-500 text-white">
    Submit
  </button>
</form>

The Semantic Reality

1 semantic class. Complete behavior.

<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <button class="primary">Submit</button>
</form>

"One semantic class provides display, spacing, interactions, and state. This is how you build frameworks where everything works together seamlessly."

Why Axiom01's Approach is Different

See the difference semantic-first development makes to your codebase.

Axiom01

8 lines · 1 class

<article class="card">
  <header>
    <h3>Title</h3>
  </header>
  <p>Content here.</p>
  <footer>
    <button class="primary">Action</button>
  </footer>
</article>

Utility-First

10 lines · 18 classes

<div class="max-w-sm rounded-lg shadow-md bg-white p-6">
  <div class="border-b pb-4 mb-4">
    <h3 class="text-lg font-bold text-gray-800">Title</h3>
  </div>
  <div class="mb-4">
    <p class="text-gray-600 text-sm">Content here.</p>
  </div>
  <div class="flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
  </div>
</div>

Axiom01

6 lines · 1 class

<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <label for="password">Password</label>
  <input id="password" type="password" required>
  <button class="primary">Submit</button>
</form>

Utility-First

8 lines · 25 classes

<form class="flex flex-col gap-4 p-4">
  <label class="font-bold text-sm">Email</label>
  <input class="px-3 py-2 border border-gray-300 rounded">
  <label class="font-bold text-sm">Password</label>
  <input class="px-3 py-2 border border-gray-300 rounded" type="password">
  <button class="px-4 py-2 bg-blue-500 text-white rounded font-bold">Submit</button>
</form>

Axiom01

1 line · 1 class

<button class="primary">Click Me</button>

Utility-First

1 line · 12 classes

<button class="px-4 py-2 bg-blue-500 text-white rounded font-bold hover:bg-blue-600 focus:ring-2">Click Me</button>

3,941 Modular SVG Icons

Ultra-lightweight by default (89KB base), mix-and-match variants, scale up only as needed. No bloat, full flexibility.

⚡ Start Ultra-Minimal

89KB — base icons only. Add variants only when needed:

Base: 89KB (450 icons)
+ Thin: +170KB (760 icons)
+ Inverted: +243KB (758 icons)
+ Color: +440KB (1,351 icons)

All Icon Variants

Five responsive variants. Click any icon to copy its name.

Base (450)

Thin (760)

Inverted (758)

Color (1,351)

Premium (650)

How It Works

1. Start Minimal

<script src="axicons-base.js">

Load 450 base icons (89KB)

2. Mix Variants

<script src="axicons-thin.js">

Add thin icons (+170KB)

3. Lazy Load

await AxiconsLoader...

Load on-demand later

Code & Dev

Terminal, Git, Database

Social & Brands

GitHub, Twitter, Links

Status

Alerts, Success, Errors

Files

Documents, PDFs, Archives

Browse All Icons Variants Guide

Explore Our Components

73 production-ready components built with accessibility, dark mode support, and semantic HTML at their core.

Success message! Operation completed successfully.

Alerts

Contextual feedback with accessible, theme-aware alerts.

Buttons

Clear, semantic calls to action with various styles and sizes.

Card Title

Short description here.

Cards

Flexible content containers for grouping related information.

Primary Success Warning Error

Badges

Small colored indicators for status, labels, and metadata.

Forms

Accessible, consistently styled inputs and textareas.

Name	Status
Alice Smith	Active
Bob Jones	Away

Tables

Striped, sortable tables for displaying structured data.

Modals

Accessible dialog overlays with smooth transitions.

Tabs

Organize content into labeled tabs for better navigation.

View All Components

Typography & Vertical Rhythm

Every text element — headings, paragraphs, lists, quotes — is styled automatically. Write semantic HTML and the framework handles spacing, scale, and rhythm.

Heading Scale

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Scale controlled by --a-heading-scale: 1.15

Unordered Lists

Bullet lists use the native <ul> element:

Semantic HTML first — no classes needed
One class per component maximum
Design tokens for all values
WCAG 2.1 AA by default

Ordered Lists

Numbered lists use the native <ol> element:

Write semantic HTML structure
Add one root class per component
Customize via CSS tokens
Ship — no build step needed

Blockquote

"The best design is the one you don't notice. It just works, letting the content speak for itself." — Design Philosophy

Inline Text

Text can be bold, italic, underlined, or highlighted.

Inline code and keyboard elements are styled automatically.

Muted text uses --a-color-on-surface-variant.

Icons in Lists

Axicons work naturally inline with text:

Accessible by default
13.3 KB gzipped
Zero dependencies
WCAG 2.1 AA

Typography Reference →

Color Harmony at Your Fingertips

Every color in Axiom01 is mathematically calculated using color theory. Every token works together beautifully across 22 live themes.

Analogous Harmony

Colors that sit next to each other on the color wheel create calm cohesion.

Complementary

Opposite colors create maximum contrast and striking visual impact.

Semantic Pairing

Semantic colors convey meaning and reinforce user expectations.

Explore Colors & Tokens

Live Theme Explorer

Choose from 22 carefully crafted themes, each with unique color palettes. See the changes instantly.

Select a Theme

Available Themes

Your selection is saved and persists on your next visit.

Theme Description

Select a theme to preview the color scheme across the entire page.

Latest Release

v2.1.2 — Released January 24, 2025

13.3 KB gzipped

CSS Bundle

1.0 KB gzipped

JavaScript

67

Core Components

149

Design Tokens

View on npm Release Notes

Free and Open Source

Axiom01 is released under the permissive MIT License. Completely free for personal, commercial, and enterprise projects. No strings attached.

Star on GitHub Read License

Write Less Code.Build Better Interfaces.

Semantic-First

Minimal Classes

Accessible by Default

The True Axiom01 Way

Code & Dev

Social & Brands

Status

Files

Alerts

Buttons

Cards

Badges

Forms

Tables

Modals

Tabs

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

13.3 KB gzipped

1.0 KB gzipped

67

149

Free and Open Source

Write Less Code.
Build Better Interfaces.