Semantic-First
Write meaningful HTML using <article>, <section>, <header>. Axiom understands your content.
Alerts
Provide contextual feedback with accessible, theme-aware alerts.
Write Less Code.
Build Better Interfaces.
Semantic HTML meets beautiful design. No utility chaos. No BEM complexity.
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. Use one semantic class per component. Change tokens globally and watch your entire interface transform in perfect symmetry. Everything is calculated—spacing, color harmony, typography rhythm. No utility chaos. No BEM complexity. Just meaningful markup and a framework that respects your code.
73
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.
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 (blue, large, padded). Components are complete—one semantic class provides display, spacing, interactions, and state. All styling flows from tokens. Don't separate concerns across different classes; keep behaviors entangled by design. If a component needs to behave differently, adjust the component itself using variables—customize everywhere consistently, not just the surface. This is how you build frameworks that respect your code.
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 deeply 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. Everything scales proportionally. 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. And readability? Axiom automatically constrains paragraphs to 65ch (characters). A good design system handles this 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."
You don't need overlapping, fragmented dependency trees of component libraries and utility sheets that weren't designed to talk to each other. 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">
<label class="font-bold text-sm">Password</label>
<input class="px-3 py-2 border rounded" type="password">
<button class="px-4 py-2 bg-blue-500 text-white">
Submit
</button>
</form>The Semantic Reality
1 semantic class. Complete behavior.
<form 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>"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 Approach
HTML: 8 lines | Classes: 1
<article class="card">
<header>
<h3>Title</h3>
</header>
<main>
<p>Content here.</p>
</main>
<footer>
<button class="primary">Action</button>
</footer>
</article>Utility-First Approach
HTML: 10 lines | Classes: 18
<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 gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded">
Action
</button>
</div>
</div>Axiom01 Approach
HTML: 7 lines | Classes: 1
<form 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 Approach
HTML: 10 lines | Classes: 25
<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>3,941 Modular SVG Icons - Pick Your Variant
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
Start with 450 base icons. 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
Every icon is available in 5 responsive variants. Click any icon to copy its name.
Base (450)
Clean outline style, perfect for primary actions and status indicators
Check
Thin (760)
Ultra-thin 0.5px strokes for elegant, minimal interfaces
Minimize
Inverted (758)
Solid with transparent cutouts, high visual impact
Zap
Color (1,351)
Gradients & multi-color fills for vibrant, playful designs
Check-Color
Premium (650)
Advanced effects like shadows, glows, and 3D transformations
Check-Premium
💡 How It Works
1. Start Minimal
<script src="axicons-base.js">
Load 450 base icons (89KB)
2. Mix Variants
<script src="axicons-thin...">
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
Explore Our Components
Axiom includes 73 production-ready components with comprehensive variants, all built with accessibility, dark mode support, and semantic HTML at its core. With our design token system and animations, you have everything needed for professional interfaces.
Success message!
Operation completed successfully.
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 and consistently styled input fields and textareas.
| Name | Status |
|---|---|
| Alice Smith | Active |
| Bob Jones | Away |
Tables
Striped, sortable tables for displaying structured data.
Dropdowns
Context menus and action dropdowns.
Tab 1 content
Tabs
Organize content into labeled tabs for better navigation.
Typography & Vertical Rhythm
"Typography and rhythm aren't decorative—they're functional. Perfect mathematical spacing reduces cognitive load and establishes trust. Axiom handles this automatically."
Semantic Headings
Heading 1
Heading 2
Heading 3
Heading 4
Headers automatically scale based on the --a-heading-scale token (default 1.15x).
Readability Limits
Paragraphs are automatically constrained to 65ch (characters). This prevents lines from stretching too wide on large monitors, guaranteeing optimal readability without complex layout hacks.
Native Blockquotes
"The best design is the one you don't notice. It just works, letting the content speak for itself."
Color Harmony at Your Fingertips
Color is not guesswork. 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.
Live Theme Explorer
Choose from 22 carefully crafted themes, each with unique color palettes and personalities. See the changes instantly.
Select a Theme
Your selection is saved and will persist on your next visit.
Theme Description
Select a theme to see its description and instantly preview the color scheme across the entire page.
The Cascade: One Variable, Infinite Impact
Adjust spacing globally by changing a single CSS variable.
1
rem
Component
Subcomponent
Business decision requires more breathing room? Change --a-space-unit and refresh—your entire interface scales proportionally.
Latest Release
v2.0.0
Axiom01 2.0.0
Released June 15, 2026
Axiom01 2.0.0
Released June 15, 2026
CSS Bundle
13.3 KB gzipped
JavaScript
1.0 KB gzipped
Components
73
Design Tokens
149
Free and Open Source
Axiom01 is released under the permissive MIT License. It is completely free to use for personal, commercial, and enterprise projects. No strings attached.