The Semantic Web, Reimagined.

Axiom01 is a UI framework that gets out of your way. Write clean HTML, and let us handle the beauty.

Get Started Explore Components

A Framework with a Philosophy

Axiom01 is not just another UI framework. It's a statement against the complexity and bloat that has taken over modern web development. We believe that a framework should serve you, not the other way around. Our philosophy is simple: write clean, semantic HTML, and let the framework do the rest.

While other frameworks encourage a sea of utility classes and `< div >` soup, Axiom champions a return to the principles of the semantic web. This approach leads to code that is more readable, more maintainable, and more accessible by default. It's a long-term investment in the health and sanity of your codebase.

Semantic First

Write clean, meaningful HTML. We'll handle the styling.

Minimal Classes

One class per component. No more, no less.

Accessible by Default

WCAG 2.1 AA compliance out of the box.

The Cascading Spacing System

Axiom's layout is built on a simple, powerful idea: a single source of truth for all spacing. The CSS variable --a-space-unit is the foundation for all sizing related to space. It generates a scale of sizes (from --a-space-xs to --a-space-xxl) used for padding, margin, and gap properties throughout the framework. Adjust the slider below to see how changing this one value can globally and consistently rescale the layout of an entire application.

--a-space-unit: 1rem

Card (padding: --a-space-l)

Button (padding: --a-space-m)

Tag (padding: --a-space-s)

The container above uses gap: var(--a-space-m). Each item's margin and padding are derived from the same unit.

Everything You Need, Nothing You Don't

Axiom01 is packed with features to help you build beautiful, responsive websites with ease.

20+ Themes

Choose from a variety of pre-built themes, or create your own with our theme wizard.

Responsive Design

All components are designed to work on any screen size, from mobile to desktop.

Lightweight

The core framework is just ~12KB (gzipped), so your sites will load lightning fast.

The Color System: Your Automatic Designer

Axiom's color system is designed to do the heavy lifting for you. By simply defining a primary color, Axiom uses color theory to automatically calculate a full, harmonious palette. It generates secondary, tertiary, and analogous colors, plus accessible "on-container" text colors for each. This means you can build beautiful, consistent, and accessible interfaces right out of the box without having to be a color expert. For a deeper dive, visit the Advanced Color Details page or use the Theme Wizard.

Base Palette

Primary

var(--a-color-primary)

Secondary

var(--a-color-secondary)

Tertiary

var(--a-color-tertiary)

Surface

var(--a-color-surface)

On Surface

var(--a-color-on-surface)

Outline

var(--a-color-outline)

Container Palette

These colors are designed for backgrounds. The "on-container" colors are guaranteed to be accessible on their corresponding container color.

Text

Primary Container

var(--a-color-primary-container)

Text

Secondary Container

var(--a-color-secondary-container)

Text

Tertiary Container

var(--a-color-tertiary-container)

Text

Error Container

var(--a-color-error-container)

Analogous Palette

Analogous 1

var(--a-color-analogous-1)

Analogous 2

var(--a-color-analogous-2)

Text

Analogous 1 Container

var(--a-color-analogous-1-container)

Text

Analogous 2 Container

var(--a-color-analogous-2-container)

Semantic Palette

Success

var(--a-color-success)

Warning

var(--a-color-warning)

Error

var(--a-color-error)

Info

var(--a-color-info)

Predefined Gradients

Primary

var(--a-gradient-primary)

Sunset

var(--a-gradient-sunset)

Ocean

var(--a-gradient-ocean)

Forest

var(--a-gradient-forest)

Greyscale Palette

gray-1

gray-5

gray-10

gray-15

gray-20

gray-25

gray-30

gray-36

Advanced Color Details Theme Wizard

Theme Explorer

Axiom's theming is powered by CSS variables. This allows for deep customization that goes beyond simple color changes. Each theme can have its own unique typography, spacing, and border styles. Select a theme below to see the entire page transform instantly.

Select a Theme:

A clean, professional, and modern theme perfect for corporate websites and applications.

42 Production-Ready Components

Each component is built with accessibility, theming, and semantic HTML at its core. From basic elements to advanced e-commerce features.

Component Library (42 Components)

Explore our complete collection of components. All components are documented and available in the docs.

Get Started in Seconds

Axiom is a free and open-source framework, released under the MIT License. You can use it for any personal or commercial project. Start building your next project today with one of the options below.

Use the CDN

The quickest way to get started. Just add the following stylesheet link to the <head> of your HTML file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Sol-Roth-Media/axiom01@main/css/axiom.css">

Download Locally

Download the full framework source code to host it yourself and get access to all component files and themes.

# Coming Soon: CLI installation
npm install axiom-ui

Typography: Expressive and Readable

Axiom's typography system is crafted for optimal readability and visual hierarchy, ensuring your content is both beautiful and easy to consume. We provide a comprehensive set of semantic text styles, from headings to paragraphs, designed to work harmoniously across all devices.

Heading 1 with a Subtitle

This is a lead paragraph, often used for introductory text that needs to stand out.

Heading 2 with a Subtitle

This is a standard paragraph of text. Axiom uses a clean, modern font stack that is optimized for all devices, ensuring legibility and a consistent reading experience.

Heading 3

Text can be bold, italic, or underlined. You can also use muted text for less emphasis.

Heading 4

"This is a blockquote. It is used to highlight a quote or a key piece of information, providing visual separation and emphasis."
— Famous Author

Heading 5

Here's a list of items:

List Item 1
List Item 2
List Item 3

Heading 6

And an ordered list:

First item
Second item
Third item

Paragraphs

This is a paragraph demonstrating how text can wrap around a floating image. The image is aligned to the left, and the text flows naturally around it. This is a common pattern for articles and blog posts where you want to integrate visuals without breaking the flow of the text. Axiom makes this easy to achieve with a simple utility class.

This is small text, often used for disclaimers or copyright information.

For a deeper dive into font families, weights, sizes, line heights, and advanced text utilities, see the Advanced Typography Guide.

Accessible by Default

Axiom is built with accessibility at its core. We follow the Web Content Accessibility Guidelines (WCAG) 2.1 AA to ensure that your applications can be used by everyone, regardless of their abilities.

Semantic HTML

Axiom's semantic-first approach provides a strong foundation for accessibility, making your content easier to understand for screen readers and other assistive technologies.

High Contrast

All default themes are designed with high-contrast color palettes to ensure readability for users with low vision.

Keyboard Navigation

All interactive components are fully navigable using a keyboard, ensuring that users who cannot use a mouse can still access all functionality.

Badges

Badges are a great way to highlight small pieces of information, such as counts or statuses.

Default Primary Secondary Success Warning Error Pill

Free and Open Source

Axiom01 is released under the MIT License, which means it's free for everyone, for any project. We believe in the power of open source to create better software for everyone. Whether you're building a personal blog, a corporate website, or a complex web application, you can use Axiom without any restrictions.

MIT License

Use Axiom in any project, commercial or personal. The code is yours to modify and distribute.

View License

Community Driven

Axiom is built by a community of developers. We welcome contributions of all kinds, from bug reports to new features.

Contributing Guide

AI-Ready Components

Axiom is one of the first UI frameworks to include AI-powered components out of the box. Integrate powerful AI features into your applications with just a few lines of code.

AI Chat

A complete, ready-to-use chat component for conversational AI. Just connect it to your favorite AI service.

AI Image Generator

A component that allows users to generate images from a text prompt, powered by AI.

Media & Icons: Optimized for Performance and Flexibility

Axiom provides a robust approach to handling media assets and icons, ensuring your visuals are performant, responsive, and visually consistent. Our philosophy emphasizes flexibility, allowing you to choose the best format for your needs while maintaining high quality.

Images

From responsive images that adapt to any screen size to lazy loading for improved performance, Axiom helps you deliver stunning visuals without compromising speed. We encourage modern formats like WebP for optimal compression.

Icons & SVGs

Integrate scalable vector graphics (SVGs) and icon fonts seamlessly. Axiom provides guidance on using icons for accessibility and ensures they scale beautifully without loss of quality.

Advanced Media & Icons Guide

Icons and Graphics

Axiom supports both icon fonts and SVGs, giving you the flexibility to choose the best format for your project. We recommend using SVGs for their scalability and small file size, but we also provide full support for Font Awesome.

Icon Fonts

Use any icon font library, like Font Awesome, by including the library's CSS and using the appropriate classes.

SVGs

Embed SVGs directly into your HTML for maximum control over styling and animation.

Forms, Inputs, and Editors

Axiom provides a solid foundation for building accessible and user-friendly forms. Our components are designed to be flexible and can be easily combined to create complex data entry experiences.

Standard Inputs

Text Input Password Input Select Checkboxes

Checkbox 1 Checkbox 2

Radio Buttons

Radio 1 Radio 2

Contextual Menus

Use the dropdown component to create contextual menus that appear on click or hover.

Rich Text Editor

Axiom integrates seamlessly with third-party libraries like CKEditor to provide rich text editing capabilities.

The Grid: Simple, Powerful, and Responsive

Axiom's grid system is designed to be both simple and powerful, built on the flexibility of CSS Grid. It allows you to create complex, responsive layouts with minimal effort, adhering to modern responsive design patterns.

Mobile-First

Axiom is mobile-first, meaning components and layouts are designed for small screens first, then enhanced for larger screens.

Fluid & Responsive

The grid is fluid and responsive, adapting to any screen size without the need for utility classes.

Semantic

Create layouts with semantic HTML and minimal classes, making your code cleaner and more maintainable.

Advanced Layout Guide

The Axiom Style: A Guide to Semantic Design

Axiom is more than a UI framework; it's a design philosophy. By following these principles, you can create interfaces that are not only beautiful and functional but also clean, maintainable, and accessible.

Structure with Semantics

Use the right HTML tag for the job. <nav> for navigation, <main> for the main content, <article> for self-contained content, etc. A well-structured document is the foundation of a great user experience.

Style with Classes, Not Utilities

Axiom components are styled with a single class. Avoid the temptation to add utility classes for minor tweaks. Instead, embrace the cascade and create new components or variations when needed.

Accessibility First

Design for everyone. Use proper headings, ARIA attributes, and color contrast. A semantic structure is the first step toward an accessible application.

Code in Action: The Axiom Advantage

Axiom is designed to be simple, semantic, and powerful. See how creating a complex component like a card in Axiom compares to a utility-first framework.

Axiom

Clean, semantic, and easy to read. The single .card class handles all the styling.

<article class="card">
    <header>
        <img src="img/axiom.jpeg" alt="Axiom Logo">
        <h3>Axiom Card</h3>
    </header>
    <main>
        <p>This is a simple card component.</p>
    </main>
    <footer>
        <button class="primary">Learn More</button>
    </footer>
</article>

Utility-First Framework

Verbose and hard to read. The styling is mixed directly into the HTML.

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
    <img class="w-full" src="img/axiom.jpeg" alt="Axiom Logo">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Card Title</div>
        <p class="text-gray-700 text-base">This is a simple card component.</p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#axiom</span>
    </div>
</div>

Why Choose Axiom?

Axiom is built on a different philosophy from other frameworks. We believe in clean, semantic HTML and a framework that gets out of your way. Here's how we compare to some of the most popular alternatives:

Feature	Axiom	Bootstrap	Tailwind CSS
Semantic HTML	Encouraged	Discouraged	Not Applicable
Class Usage	Minimal	Component-based	Utility-first
Accessibility	High	High	Developer-dependent
Customization	High (via CSS Variables)	Medium (via Sass)	High (via config)

Proudly Powering

Axiom01 is already being used to build beautiful, semantic websites. Here are a few examples of live sites that are built with Axiom.

unruled.org

A project dedicated to open-source and web standards, built entirely with Axiom01.

solroth.com

A personal portfolio and blog, showcasing the flexibility and power of the Axiom framework.

Version 0.2.0

Released on July 27, 2025

~12KB

Gzipped Core CSS

42+

Components

20+

Themes

View Release Notes