ckm:design-system

A three-layer design token architecture organizes branding variables into primitive, semantic, and component layers. This structure standardizes theming across products by mapping raw design tokens to semantic meaning and component-specific styling.

You can generate CSS variables from design tokens by running a token generator script on a token JSON file. This process exports standardized CSS variables to plug directly into your design-to-code workflow for visual coherence.

Yes, design tokens can be applied to slide-generation templates to produce brand-consistent investor decks and marketing assets. Standardized spacing and typography scales ensure visual coherence across presentations.

You need a SKILL.md frontmatter containing a name and description to implement the design token architecture. Optional scripts, references, and assets can be added to provide additional tooling and workflow support.

Centralizing design tokens into primitive, semantic, and component layers is the best way to prevent visual drift. This approach ensures consistent branding and speeds up the design-to-code handoff across multiple platforms.

CSS variables provide scalable component theming but require a structured three-layer token model to avoid drift. Without centralized semantic and component token mapping, maintaining visual coherence across products remains difficult.