Validate
Catch issues early with a robust validation engine for structure, types, and naming.
Learn moreOpen source
Design Token Kit
Validate, convert, showcase, and analyze DTCG design tokens with confidence.
Give Your LLM a Design Language, not a screenshot.
Type-safe
Format agnostic
Production ready
Everything you need
Built for modern design systems
Convert
Transform tokens between popular formats and frameworks in a single command.
Learn moreShowcase
Generate beautiful, interactive documentation for your tokens automatically.
Learn moreAnalyze
Inspect token usage, detect duplicates, and measure coverage across a system.
Learn moreHOW IT WORKS
From tokens to production
Use the CLI in scripts and CI, or the Core API in your own tools.
Add tokens
tokens.jsontokens.dark.jsontokens.red.jsontokens.yamlDESIGN.md
Run DTK
npx @design-token-kit/cli check tokens.jsonChoose an action
Validate
Convert
Showcase
Analyze
Get results
- Validation passed
- CSS generated
- Showcase created
- Report ready
The same workflow is available through Core API.
Add tokens
tokens.jsontokens.dark.jsontokens.red.jsontokens.yamlDESIGN.md
Validate tokens
TS
import { DtcgChecker }
from '@design-token-kit/core';
const issues = await
new DtcgChecker().validate([
'./tokens.json',
]);Convert to CSS
TS
import { DtcgTokenCssConverter }
from '@design-token-kit/core';
const css = await
new DtcgTokenCssConverter().convert([
'./tokens.json',
]);- Validate
- Convert
- Showcase
- Analyze
Use results
- Validation report
- Converted output
- Showcase HTML
- Stats and analysis
The same workflow is available through CLI.
DOCUMENTATION
Knowledge Base
Browse project documentation, guides, and references from the Docs section.
Everything you need to work with Design Token Kit — from the first validation command to Core API integration. Explore features, supported formats, configuration options, and practical guides.
Open Docs- CLI and Core API guides
- Features and configuration
- Formats and examples
Blog
Articles
Guides, notes, and practical articles about design tokens and DTK.
An LLM Thinks in Tokens
Why design tokens give language models a clearer and more consistent way to understand, generate, and maintain design than screenshots or raw CSS.
Read article →Design Token Kit: A Practical Toolkit for Design Tokens
Why Design Token Kit exists, what problems it solves, and how validation, conversion, and showcase fit together.
Read article →