Getting Started

Three steps to integrate the aiaiai design system into your project. Tokens in, consistent UI out.

1. Install

Add the package to your project.

npm install aiaiai-design-system

Or clone/link the repo directly if you're working within the aiaiai monorepo.

Import the semantic tokens and a theme into your main stylesheet.

@import 'aiaiai-design-system/tokens/semantic.css';
@import 'aiaiai-design-system/tokens/themes/aiaiai.css';

For Tailwind v4 projects, bridge the tokens into utility classes:

@theme inline {
  --color-surface: var(--color-surface);
  --color-text: var(--color-text);
  --color-accent: var(--color-accent);
  /* ... */
}

See the full @theme mapping in the Theming guide.

If your page has a warm paper background (#f7f5f3), warm brown text (#2c2825), and orange accent (#ff6b35), the system is working.

VERIFICATION

This card uses system tokens. The background is --color-surface, the text is --color-text, and the button below is --color-accent.