# Axiom01 **Semantic-first UI framework. Write meaningful HTML — Axiom handles the CSS.** No utility classes. No BEM complexity. No build tools required. Just clean semantic HTML and a framework that respects your code. ```html

Title

Content here.

Title

Content here.

``` ## Installation ```bash npm install axiom01 ``` ```html ``` ## Quick Start ```html

Your Page Title

Your tagline here.

Get Started View Docs

Card Title

Card content here.

``` ## Core Philosophy ### One Class Per Component Each component uses a single semantic class. The framework styles everything inside it automatically via element selectors. | Axiom01 | Utility-first | |---------|--------------| | `class="card"` | `class="flex flex-col rounded shadow p-6 bg-white"` | | `class="primary"` | `class="bg-blue-500 text-white px-4 py-2 rounded"` | | `class="alert success"` | `class="bg-green-100 text-green-800 border border-green-300 p-4 rounded"` | ### Semantic HTML Write HTML that describes meaning, not appearance: ```html
...
...
``` ### Design Tokens All values are CSS custom properties — change one to update everything: ```css :root { --a-color-primary: #2563eb; --a-space-unit: 1rem; --a-heading-scale: 1.15; --a-border-radius-base: 5px; } ``` ## Components 73 production-ready components: | Category | Components | |----------|-----------| | **Actions** | Button, Link Button, Button Group | | **Content** | Card, Alert, Badge, Avatar | | **Forms** | Input, Select, Textarea, Checkbox, Radio, Toggle, Slider, Rating | | **Navigation** | Navbar, Sidebar, Tabs, Breadcrumb, Pagination, Steps | | **Overlays** | Modal, Drawer, Tooltip, Popover | | **Data** | Table, List, Timeline, Progress | | **Media** | Video Player, Audio Player, Carousel, Gallery, Lightbox | | **Advanced** | AI Chat, Data List, Masonry, Swiping Cards, Autocomplete | ### Buttons ```html Get Started ``` ### Cards ```html

Title

Content here.

Description

Media Card

Image bleeds edge-to-edge automatically.

Feature

Description

Click me →

The entire card is the link.

 ``` ### Alerts ```html

Informational message.

Saved!

Your changes have been saved.

``` ### Forms ```html
``` ### Badges ```html Primary Success Warning Error Info ``` ### Tables ```html
Name Status Role
Alice Smith Active Admin
...
``` ## Axicons — 3,969 SVG Icons Five variants: Base (450), Thin (760), Inverted (758), Color (1,351), Premium (650). ```html ``` ## Theming ### Dark Mode ```html ``` ```js // Toggle document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' ); ``` ### Custom Theme ```css /* Override any tokens in your own stylesheet */ :root { --a-color-primary: #7c3aed; /* Your brand color */ --a-color-secondary: #0ea5e9; --a-border-radius-base: 8px; /* More rounded */ --a-font-family-sans: 'Inter', sans-serif; --a-heading-scale: 1.2; /* Larger heading scale */ } [data-theme="dark"] { --a-color-surface: #0f172a; --a-color-on-surface: #f8fafc; } ``` ## Grid System ```html
Column 1
Column 2
Column 3
...
``` ## Layout ```html
``` ## Typography Paragraphs are automatically constrained to `65ch` for optimal readability. ```html

Page Title

Body paragraph, auto-constrained to 65ch.

Secondary text using muted class.

  1. Step one
  2. Step two
"A quote here." — Source
``` ## Accessibility All components are WCAG 2.1 AA compliant out of the box: - Native semantic elements (`