ckm:design-system

Structure design tokens using a three-layer architecture: primitive, semantic, and component layers. This model unifies tokens and UI components with CSS variables, enabling consistent brand theming and scalable collaboration across multiple products.

A three-layer token architecture maps primitive tokens to semantic tokens, which then map to component tokens. This hierarchy separates raw values from contextual meaning and UI component specs, allowing design teams to update themes without breaking underlying variables.

Generate design system artifacts by running the provided token generation scripts. These scripts process your three-layer token model and assemble reusable references, CSS variables, and design assets for immediate project integration.

Yes, CSS variables manage component specs and slide templates within this system. It provides reusable references and assets that support token validation and documentation, accelerating brand-aligned design-to-delivery workflows.

Yes, the token architecture explicitly targets design teams, frontend engineers, and product managers. It satisfies requirements for three-layer token references, CSS variable usage, documentation, and tooling for generation and validation across brands.

Document component specifications by assembling design assets through the generation scripts. This establishes a unified documentation system that validates tokens and aligns slide templates with your component specs for consistent delivery.