Axiom CSS

A token-driven design system in four CSS files. Mathematical scales, automatic element styling, and a Tailwind-influenced utility layer. No build step, no dependencies, nothing to configure.

Axiom is not a framework. It does not want to own your workflow. Use the full stack or just the design tokens. Change anything. Delete the utility layer if you prefer writing your own CSS. It works well alongside Alpine.js, HTMX, Datastar, or anything else that respects the DOM.

Read the docs

config.css

A design system you can read.

CSS custom properties for type, spacing, colours, shadows, easing, and animation. Everything derives from base values and scale ratios. Change one number and the whole system recalculates. No build step interprets these -- they are just CSS you can open and modify.

Type scale

xs sm md (base) lg xl 2xl 3xl 4xl

Spacing scale

--size-base: 32px, --size-scale: 2

xs (8px)

sm (16px)

md (32px)

lg (64px)

xl (128px)

Each step is the previous multiplied by the scale. Change --size-scale and every margin, padding, and gap recalculates.

OKLCH colours

100 300 500 700 900

One hue value controls the entire blue palette. Five shades derived from fixed lightness and chroma values. Shift the hue from cyan-blue to indigo and the whole ramp follows.

Neutral temperature

Dashboard

Your weekly summary is ready.

Revenue

$4,200

Users

312

One variable controls the warmth of every background, text shade, and border in the system. All neutrals share the same hue.

base.css

HTML that works.

Every HTML element is styled through design tokens. Not a reset -- a finished starting point. Semantic colour tokens auto-invert when you toggle dark mode. Your document looks complete before you write a single class.

Same markup. Colours invert automatically.

Getting started

Every heading, paragraph, list, and form element has been styled with values derived from the design token system. You write semantic HTML and get a finished result.

The base layer is not a reset. It is an opinion about what HTML should look like by default.

Tables have borders, alignment, and spacing
Forms have consistent sizing and focus states
Code blocks, highlights, and keyboard elements all just work

Element	Styled by
Headings	Design tokens
Tables	Design tokens
Forms	Design tokens

Email address

Minimal classes

<article>
  <h3>Getting started</h3>
  <p>Every heading, paragraph...</p>
  <blockquote>The base layer...</blockquote>
  <ul>
    <li>Tables have borders...</li>
    <li>Forms have consistent...</li>
    <li>Code blocks, highlights...</li>
  </ul>
  <table>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
  <label>Email address</label>
  <input type="email" class="mb-sm">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</article>

custom.css

Patterns, not a library.

A designated place for reusable component patterns. Ships with toggle switches, button variants, wrappers, and table enhancements. Add your own. Everything inherits from the token system, so your patterns stay consistent automatically.

Toggle
Notifications

Buttons

Striped table

Name Role

Arthur Dent Earthling

Ford Prefect Researcher

Trillian Astrophysicist

Name	Role
Arthur Dent	Earthling
Ford Prefect	Researcher
Trillian	Astrophysicist

These ship with Axiom. Add your own patterns to custom.css and they inherit the full token system.

utility.css

Responsive to the container, not the viewport.

Single-purpose classes covering roughly 80% of what Tailwind provides. The difference: responsive variants use @container queries, not viewport media queries. Components adapt to their container. Optional -- use config + base without ever touching a utility class.

Revenue

$12,400

+14%

Users

1,203

+7%

Orders

384

+22%

Uptime

99.9%

30 days

· sm: active · 1 column · md: active · 2 columns · default · 4 columns

Narrow Wide

Simulating different container widths. Classes: grid-cols-4 md:grid-cols-2 sm:grid-cols-1

Drag the handle. Classes used: grid-cols-4 md:grid-cols-2 sm:grid-cols-1

Start building.

Use the full stack, or just the tokens and base styles. Delete what you do not need. Change what you do.

<link rel="stylesheet" href="config.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="custom.css">   <!-- optional -->
<link rel="stylesheet" href="utility.css">  <!-- optional -->

Read the documentation