Skip to content
Axiomatic Color

Quick Start

This guide will walk you through setting up the Axiomatic Color and building your first themed component.

1. Install & Initialize

Section titled “1. Install & Initialize”

Run the following commands in your project root:

pnpm is recommended (this repo uses pnpm). npm generally works as a best-effort alternative.

Terminal window
npm install -D @axiomatic-design/color
npx axiomatic init

This creates a color-config.json file with default settings.

2. Generate Assets

Section titled “2. Generate Assets”

Now, generate the CSS and TypeScript definitions.

Terminal window
npx axiomatic build --out ./src/theme.css
npx axiomatic export --format typescript --out ./src/theme.ts

3. Build a Card

Section titled “3. Build a Card”

Let’s build a simple “Card” component to see the system in action.

First, import the engine and your generated theme in your app entry point:

import "@axiomatic-design/color/engine.css";
import "./theme.css";

Then, create a Card component:

export function Card() {
  return (
    <div
      className="surface-card"
      style={{ padding: "2rem", borderRadius: "8px" }}
    >
      <h2 className="text-strong">Hello World</h2>
      <p className="text-subtle">I am a themed card.</p>
    </div>
  );
}

4. Next Steps

Section titled “4. Next Steps”

You now have a working theme system!