Introduction

Foundations are copied by npx axiom init. Every other layer builds on them.

The theme has three layers, from raw values to component defaults:

Components read the last layer. They never use raw palette values directly, so changing a semantic color updates every component that depends on it.

The Theme contract

A theme puts the three layers together. Each theme is checked with satisfies, so a missing or mistyped value fails at compile time without widening the type.

export const light = {
	tokens,
	colors: lightColors,
	components: components(lightColors),
} satisfies Theme;

The contracts don’t depend on the styling tool. Each variant translates them into its own form. See Styling.