Bootstrap a Design System

You are setting up Style Dictionary v5 to compile DTCG JSON token source files into CSS custom properties. The JSON files are the authoritative source — the compiled CSS is a build artifact, never edited directly. **Step 1 — Read the references:** Read the following from the Sistema knowledge base: - Token architecture synthesis: `/raw/principles/tokens/architecture` **Step 2 — Confirm setup:** My token source files: [List which token files exist in `tokens/src/` — e.g. `color.json`, `color.dark.json`, `typography.json`, `shape.json`, `spacing.json`] My project structure: [Describe the framework and directory layout, so the CSS output path can be correctly set — e.g. "Next.js with `src/` directory", "Vite with `public/`", etc.] **Step 3 — Determine output path:** Based on the framework and project structure: - Next.js with `src/` directory → `src/styles/tokens/` - Next.js without `src/` → `styles/tokens/` - Vite / other → derive from the project structure If ambiguous, ask one brief question to confirm. Otherwise proceed. **Step 4 — Generate the Style Dictionary configuration:** Produce `style-dictionary.config.mjs`, ready to run with `node style-dictionary.config.mjs`: 1. Source: all files in `tokens/src/` — include every JSON file present 2. Output: CSS custom properties compiled to the path from Step 3, using the naming convention `--[category]-[token-name]` (e.g. `--color-primary`, `--type-body-lg-size`, `--radius-md`, `--space-4`) 3. Dark mode: if `color.dark.json` exists, output its values under a `[data-theme="dark"]` selector with a `@media (prefers-color-scheme: dark)` fallback 4. Add an npm script to `package.json`: `"tokens": "node style-dictionary.config.mjs"` **Step 5 — Run compilation:** Run `npm run tokens`. If it fails, diagnose and fix before proceeding — do not skip past a failed compilation. **Step 6 — Generate token-check.html:** After successful compilation, generate `token-check.html` at the project root. Its purpose is to confirm that compiled token values match intent before any component code is written. The file must load the compiled CSS and render: - Every color token as a labeled swatch showing the token name and computed hex value - Every type role as a live text specimen rendered in that role's size, weight, and spacing - Every radius stop as a box with a visible border at that corner radius - Every spacing stop as a horizontal bar of that exact width, labeled with its pixel value Open `token-check.html` and verify all values match what was specified. Catch mismatches here, not in component code. **Step 7 — Wire tokens into the project:** Import the compiled token CSS in the project's global stylesheet. Verify the import path against the actual directory structure — the path differs based on whether a `src/` directory is present: ```css /* Next.js with src/ — in src/app/globals.css */ @import '../../styles/tokens/colors.css'; /* Next.js without src/ — in app/globals.css */ @import '../styles/tokens/colors.css'; ``` **Step 8 — Update the living brief:** Update the Tokens entry in Key Decisions and append to the decision log: ``` [date] — Style Dictionary configured and compiled — [token count, output paths, any issues resolved] ``` ---