73 Components
Everything from buttons to video players. All production-ready, accessible, and customizable.
Overview & Quickstart
Beautiful, accessible interfaces in minutes. Semantic HTML, not utility class chaos.
What is Axiom01?
Axiom01 is a semantic-first UI framework that turns clean HTML into beautiful, accessible interfaces. No utility classes. No component naming chaos. Just write meaningful markup and let CSS handle the styling.
149 Design Tokens
Colors, spacing, typography, shadows. Change one variable, your entire site transforms.
13.3 KB CSS
Gzipped. Includes ALL components. Zero dependencies. Production-ready.
Why Axiom01 is Different
Most frameworks force you to choose: clean code OR beautiful design. Axiom01 gives you both.
Semantic HTML
Write meaningful markup using <article>, <section>, <header>. Axiom understands your structure.
One Class Per Component
class="card" instead of class="flex rounded shadow...". Minimal, expressive, readable.
Accessible by Default
WCAG 2.1 AA compliance built-in. Keyboard navigation, focus states, contrast all automatic.
Installation & Setup
Get Axiom01 running in your project with just a few commands.
✨ That's it! Start using components immediately. No build step, no configuration, no dependencies.
Your First Components
Buttons
Create beautiful buttons with semantic meaning:
<button class="button primary">Save Changes</button>
<button class="button secondary">Cancel</button>
<button class="button danger">Delete</button>Cards
Build structured layouts with semantic elements:
Feature Card
Semantic structure for organized content. Use header, main, and footer elements.
Another Card
Mix and match content types. Images, videos, lists—all supported.
<article class="card">
<header>
<h3>Card Title</h3>
</header>
<p>Your content here.</p>
<footer>
<button class="button primary">Action</button>
</footer>
</article>Forms
Fully accessible form controls with consistent styling:
<form>
<label for="email">Email Address</label>
<input type="email" id="email" required>
<label for="message">Message</label>
<textarea id="message" rows="5"></textarea>
<button type="submit" class="button primary">Send</button>
</form>Key Concepts
CSS Variables for Global Control
Customize your entire interface by adjusting CSS variables:
:root {
/* Change spacing globally */
--a-space-unit: 1rem;
/* Adjust primary color */
--a-color-primary: #2563eb;
/* Update typography scale */
--a-heading-scale: 1.15;
}
/* Dark mode automatically applies */
[data-theme="dark"] {
--a-color-surface: #0f172a;
--a-color-text: #f8fafc;
}Semantic Color System
Colors that communicate meaning, not just aesthetics:
- --a-color-primary — Main interactive elements
- --a-color-secondary — Alternative actions
- --a-color-success — Positive outcomes
- --a-color-warning — Caution, alerts
- --a-color-error — Errors, destructive actions
- --a-color-info — Information messages
Responsive Grids
Mobile-first responsive layout with automatic stacking:
<!-- Automatically responsive -->
<div class="grid grid-cols-3">
<article class="card">Column 1</article>
<article class="card">Column 2</article>
<article class="card">Column 3</article>
</div>
<!-- Stacks on mobile, 3 columns on desktop -->Dark Mode Support
Automatic theme switching with zero extra work:
<html data-theme="light">
<!-- All colors automatically adapt -->
</html>
<html data-theme="dark">
<!-- Dark theme applied instantly -->
</html>Quick Reference
File Size
13.3 KB CSS + 1.0 KB JS (gzipped)
Browser Support
All modern browsers (ES6+)
Accessibility
WCAG 2.1 AA compliant
Responsive
Mobile-first design
Dark Mode
Automatic theme support
Components
73 production-ready