73
Components
Button, Card, Modal, Table, Video Player, AI Chat, and more
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.
Axiom01 is the framework that respects your code. Write meaningful HTML with semantic tags. One class per component. Let Axiom handle the styling. Result: Clean code, fast development, and accessible interfaces with 73 production components, 149 design tokens, 2,900+ Axicons, and 13.3 KB gzipped.
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.
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
Check
Thin (760)
Ultra-thin 0.5px
CheckThin
Inverted (758)
Solid + cutout
CheckInverted
Color (1,351)
Gradients & fills
Check-Color
Premium (650)
Advanced effects
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.
Tables
Striped, sortable tables for displaying structured data.
Modal Preview
Modals
Dialog boxes for important interactions and confirmations.
1
2
3
Pagination
Navigation controls for multi-page content.
Tab 1 content
Tabs
Organize content into labeled tabs for better navigation.
Typography & Rhythm
Axiom01 establishes a perfect mathematical vertical rhythm and enforces optimal line lengths to reduce eye strain 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
Every color in Axiom01 is mathematically calculated to work together beautifully.
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.
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.
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.