About the KLIC design system
From small details to complete screens. KLIC is a design system connecting components, blocks, motion recipes and design guidance through seven dimensions and four token layers.
Delivery scope and source
KLIC shares seven design dimensions and four token layers, but applies them differently: components shape individual controls, blocks compose workflows, and motion defines transitions over time. Public npm: [email protected]. Source candidate [email protected] is not published; [email protected] remains available.
247 working + 80 planned = 327 total blocks
109 components and 247 working blocks provide 356 standalone reference workspaces through CLI plan/add. 884 source-adapted motion patterns provide HTML/CSS/JavaScript/React source, including CSS/React examples, through the detail view, API and CLI motion get, with source id + pattern provenance and preserved notices. Previews and JavaScript/React implementations share a runtime; CSS alone does not reproduce Canvas playback. The package exposes components/*, blocks/* and motions/*; motion counts are separate from workspace bundles. Source candidate [email protected] is not published; [email protected] remains available.
Motion previews and CSS/React code ↗Provenance and license guide · Figma manifest · Figma migration guide
Figma files support manual handoff. Live synchronization and a public KLIC source-repository URL are not declared in the current delivery contract.
Version, publication and policy identifiersWhat is available now
- Components
- 109
- Working blocks, including variants
- 247
- Shared implementation modules
- 61
- Working diagram examples
- 28
- CSS/React motion recipes
- 884
- CLI source workspaces
- 356
Counts come from the current public registry. Working blocks include variants of shared implementations. Motion CSS/React recipes have a separate count; planned entries are excluded from working examples and source workspaces.
Inspect the original registry ↗7 dimensions
size · typography · color · layout · spacing · surface · interaction
4 token layers
Primitive → Brand → Semantic → Component
klic.primitive → klic.brand → klic.semantic → klic.componentDelivery scope
Working examples include their actual framework scope, dependencies, DESIGN.md, token mapping and source plan. Web, MCP, CLI and API share the same public item IDs.
MCP · CLI · API ↗What your product still needs
Example data and behavior are local demonstrations. Implement and verify authentication, server permissions, databases, external integrations and production accessibility for your product. Preserve per-file licenses.
Accessibility and recovery checks ↗Common questions
Is this an npm component package?
[email protected] is an unpublished source candidate with exports tokens, theme, motion, motions/runtime, motions/runtime.css, components, blocks, Agent Skill, CSS, TypeScript, CLI. Confirmed public release: [email protected]. Test candidate changes from a KLIC source checkout with bun run pack:npm, then install the generated artifact from ./artifacts/npm.
What is KLIC?
KLIC is a design system with seven dimensions and four token layers, components, working blocks, CSS/React motion recipes, usage principles and source-delivery paths.
Which AI tools can I use it with?
Copy or download a Markdown brief and give it to an AI that accepts text. URL retrieval and MCP support depend on your AI product.
Does it connect to a production product?
Working examples use sample data and local behavior. Implement authentication, server authorization, databases and external services separately in your product.
What source is available?
Each item documents its actual framework, dependencies, DESIGN.md and source plan. Preserve per-file licenses; every example is not available in every framework.