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:

bash 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 CSS in your app entry point:

import './theme.css';

Then, create a Card component:

import { tokens } from "./theme";


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

4. Next Steps

Section titled “4. Next Steps”

You now have a working theme system!