ckm:design-system

You can generate design tokens using a three-layer architecture of primitives, semantic, and component tokens, then export them as CSS variables and Tailwind mappings. The tooling produces JSON token exports that map directly into your Tailwind config for maintainable styling.

A three-layer design token architecture structures styling data from primitives to semantic to component levels. You need this approach to establish a single source of truth, enabling themeable and maintainable design systems while avoiding hardcoded styles across your product team.

Yes, you can generate brand-compliant slide HTML that imports your design-tokens.css file directly. The slide system includes Chart.js integration for data visualization, curated backgrounds, and validation to ensure no hardcoded colors remain in your investor or marketing presentations.

Run the built-in command-line validation scripts to check token usage across your component specifications and slide HTML. These validators scan your codebase to ensure all styling references your CSS variables and JSON token exports rather than hardcoded values.

Yes, the workflow supports authoring component specifications with documented variants, sizes, and accessibility guidelines for buttons, inputs, cards, and tables. Component specs enforce token-based styling compliance across all documented component states.

Use the built-in BM25 slide search functionality to query and retrieve specific slides from your generated decks. This search mechanism indexes your brand-compliant slide HTML content, allowing you to locate and reference specific presentation slides quickly.