C1TRuSovo831 Design System
Token architecture, component specifications, systematic design, slide generation.
When to Use
- Design token creation
- Component state definitions
- CSS variable systems
- Spacing/typography scales
- Design-to-code handoff
- Tailwind theme configuration
- Slide/presentation generation
Token Architecture
Load: references/token-architecture.md
Three-Layer Structure
Primitive (raw values)
↓
Semantic (purpose aliases)
↓
Component (component-specific)
Example:
/* Primitive */
--color-blue-600: #2563EB;
/* Semantic */
--color-primary: var(--color-blue-600);
/* Component */
--button-bg: var(--color-primary);
Quick Start
Generate tokens:
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
Validate usage:
node scripts/validate-tokens.cjs --dir src/
References
| Topic | File |
|---|---|
| Token Architecture | references/token-architecture.md |
| Primitive Tokens | references/primitive-tokens.md |
| Semantic Tokens | references/semantic-tokens.md |
| Component Tokens | references/component-tokens.md |
| Component Specs | references/component-specs.md |
| States & Variants | references/states-and-variants.md |
| Tailwind Integration | references/tailwind-integration.md |
Component Spec Pattern
| Property | Default | Hover | Active | Disabled |
|---|---|---|---|---|
| Background | primary | primary-dark | primary-darker | muted |
| Text | white | white | white | muted-fg |
| Border | none | none | none | muted-border |
| Shadow | sm | md | none | none |
Scripts
| Script | Purpose |
|---|---|
generate-tokens.cjs |
Generate CSS from JSON token config |
validate-tokens.cjs |
Check for hardcoded values in code |
search-slides.py |
BM25 search + contextual recommendations |
slide-token-validator.py |
Validate slide HTML for token compliance |
fetch-background.py |
Fetch images from Pexels/Unsplash |
Templates
| Template | Purpose |
|---|---|
design-tokens-starter.json |
Starter JSON with three-layer structure |
Integration
With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config
Workflow dependencies: Use brand for identity/primitives and ui-styling for implementation when those stages are needed; an existing token edit need not load both.
Primary Agents: ui-ux-designer, frontend-developer
Slide System
For HTML slides, read references/slide-system.md. It contains the contextual search workflow, decision CSVs, Chart.js example, navigation and composition requirements, token validation, and reference implementation.
Best Practices
- Never use raw hex in components - always reference tokens
- Semantic layer enables theme switching (light/dark)
- Component tokens enable per-component customization
- Use HSL format for opacity control
- Document every token's purpose
- Slides must import design-tokens.css and use var() exclusively