Colors

Axiom's color system uses OKLCH with hand-tuned lightness and chroma per shade. Six chromatic hues, eleven neutral steps, and a set of semantic tokens that auto-invert for dark mode. Plain CSS, custom properties, no build step.

Color Philosophy

Axiom provides six vibrant colors (red, orange, yellow, green, blue, purple) and an 11-step neutral scale. Each vibrant color has five swatches (100, 300, 500, 700, 900) instead of the typical ten-step scale you might expect from other systems.

Why five? Smaller CSS footprint, and frankly, fewer choices can be liberating. Five swatches cover the range from light tints to dark shades while encouraging consistency. When everyone on a team (or every LLM) has fewer options, you are more likely to converge on the same choices.

Why purple instead of separate indigo and violet? Pragmatism. Purple serves both roles well enough while keeping the palette lean. If you need indigo, add it. This is your CSS.

Color Ramps

Each vibrant color shares a hue variable (e.g. --blue-hue: 260) across all five shades. Lightness and chroma are set per shade for clean results -- no muddy dark yellows or washed-out tints.

Rotate --blue-hue and the entire blue ramp follows. Need finer control? Adjust the lightness or chroma of any individual shade directly. The system uses OKLCH throughout for perceptually uniform results.

Vibrant Colors

Six colors spanning the spectrum. Each includes text and background utilities with dark mode variants:

Neutral Colors

Eleven steps from near-white to near-black. Neutrals need finer control than vibrant colors because they do the heavy lifting for borders, backgrounds, and text hierarchy:

Text utilities follow the same pattern: .text-neutral-25 through .text-neutral-900

Invertible Color System

The i-* utilities are semantic tokens that adapt to light and dark modes automatically. Write your markup once, works in both themes. Toggle the theme in the sidebar to see them flip.

Background elevation: Four layers that stack logically. In light mode, they descend from white. In dark mode, they ascend from near-black.

Text hierarchy: Three levels of contrast, from strong to soft. Values invert for readability in each theme.

Border contrast: Three levels for different emphasis needs. These also set border-style: solid automatically.

Accent color: The --i-accent token provides a single interactive color for links, buttons, and focus rings. It defaults to --blue-500 in light mode and --blue-300 in dark mode.

Status colors: Four semantic palettes for callouts, alerts, badges, and form validation. Each has a background, text, and border class. They auto-invert with .dark just like the rest of the system.

Classes follow the pattern .i-status-{info,success,warning,error}-{bg,text,border}. Compose all three for a complete callout, or use them individually.

The base layer uses these tokens extensively. Forms, tables, and other elements automatically adapt to theme changes without additional markup.

Opacity Utilities

Control transparency for backgrounds, text, and borders. These set custom properties that the color utilities read:

Dark Mode Variants

All vibrant and neutral color utilities include dark: variants that apply only when the .dark class is present on a parent element:

For many cases, the invertible system (i-* utilities) handles theme switching without explicit dark variants. Use dark: variants when you need specific color choices in each theme.