Full pipeline from Figma variables to a multi-brand React app, with Style Dictionary, Storybook, and AI-readable docs. Figma holds foundations and components (one page per component); the dashboard lives in code.
CI=true corepack pnpm install
CI=true corepack pnpm dev # http://localhost:5173
CI=true corepack pnpm storybook # http://localhost:6006
CI=true corepack pnpm build # tokens + app
CI=true corepack pnpm build:llms # regenerate llms-full.txt| Path | Purpose |
|---|---|
| figma.md | Figma component library (foundations + per-component pages) |
| packages/tokens/ | DTCG JSON (build source of truth) |
| packages/acme-tokens/ | Style Dictionary → 4 theme CSS files |
| packages/acme-app/ | React + Tailwind dashboard + Storybook |
| docs/ | Component and token documentation |
| public/llms.txt | AI agent entry point |
Set on <html>:
data-theme="brand-alpha"|brand-betadata-mode="dark"for dark mode
Components use semantic CSS variables only — no hardcoded brand colors.
Edit DTCG JSON in packages/tokens/, then rebuild. Figma is visual reference only — changes are not auto-synced.
| Change | Where |
|---|---|
| Shared spacing, radius, typography | packages/tokens/primitive/ |
| Brand-specific colors (and radius) | packages/tokens/brand-alpha/, brand-beta/ |
| Semantic names components use | packages/tokens/semantic/ |
| Dark mode overrides | packages/tokens/dark/semantic/ |
Common cases
- Brand color — edit primitives in
brand-alpha/color.jsonorbrand-beta/color.json. Semantic aliases insemantic/color.json(e.g.action-primary→{color.blue.500}) pick up the change automatically. - Dark mode only — edit
packages/tokens/dark/semantic/. - New semantic token — add under
semantic/, optional dark override, then map inpackages/acme-app/src/index.css(@theme inline) if you need a Tailwind utility. Updatedocs/tokens.mdand component docs.
CI=true corepack pnpm build:tokens # writes packages/acme-tokens/build/*.css
CI=true corepack pnpm dev # build + copy CSS into app + start ViteDo not hand-edit packages/acme-app/src/tokens/*.css — they are copied from the Style Dictionary build.
See docs/tokens.md for architecture and docs/theming.md for adding a new brand.
See docs/verification.md for the AI-agent test checklist.
On every push and PR, the CI pipeline:
- Installs dependencies via pnpm
- Builds design tokens with Style Dictionary
- Builds the React app with TypeScript + Vite
- Builds Storybook and publishes to Chromatic for visual review and Storybook hosting
- Create a project at chromatic.com and link it to this GitHub repo.
- Copy the project token from Manage → Configure.
- Add
CHROMATIC_PROJECT_TOKENto GitHub Actions secrets for CI. - Run locally (replace the token with yours from Chromatic → Manage → Configure):
export CHROMATIC_PROJECT_TOKEN=chpt_xxxxxxxx # not a placeholder — paste your real token
CI=true corepack pnpm chromaticStorybook lives in packages/acme-app/; the chromatic script builds tokens first, then uploads packages/acme-app/storybook-static.