← Home

Getting Started

Set up a new project with the CMS-aiChemist design system in four steps. Every project shares the same token pipeline and component library.

Step 1: Design Tokens

Define your visual language in Penpot, export as DTCG JSON.

# Export tokens from Penpot as DTCG JSON
# Place in packages/tokens/src/tokens.json
python3 packages/tokens/build.py

Step 2: Build Pipeline

Transform tokens into CSS custom properties automatically.

# Output: packages/tokens/output/tokens.css
# Import in your app:
@import "packages/tokens/output/tokens.css";

Step 3: Use Components

Import shared UI components that consume your tokens.

import { Button, Card, Tabs } from "packages/ui/src";

<Button variant="primary">Click me</Button>

Step 4: Deploy Surface

Ship to Next.js or Astro — same components, same tokens.

Ready to Start?

Use the interactive wizard to define your tokens, preview components, and generate everything you need.

Resources