Design Token Kit
Get Started

Open source

Design Token Kit

Validate, convert, showcase, and analyze DTCG design tokens with confidence.

Give Your LLM a Design Language, not a screenshot.

Get StartedView on GitHub

Everything you need

Built for modern design systems

Validate

Catch issues early with a robust validation engine for structure, types, and naming.

Learn more

Convert

Transform tokens between popular formats and frameworks in a single command.

Learn more

Showcase

Generate beautiful, interactive documentation for your tokens automatically.

Learn more

Analyze

Explore token counts, types, references, direct values, and theme breakdowns.

Learn more

HOW IT WORKS

From tokens to production

Use the CLI in scripts and CI, or the Core API in your own tools.

1

Add tokens

  • tokens.json
  • tokens.dark.json
  • tokens.red.json
  • tokens.yaml
  • DESIGN.md
2

Validate tokens

TS
import { TokenChecker }
from '@design-token-kit/core';

const issues = await
new TokenChecker().check([
  './tokens.json',
]);
3

Convert to CSS

TS
import { CssTokenConverter }
from '@design-token-kit/core';

const css = await
new CssTokenConverter().convert([
  './tokens.json',
]);
  • Validate
  • Convert
  • Showcase
  • Analyze
4

Use results

  • Validation report
  • Converted output
  • Showcase HTML
  • Stats and analysis

The same workflow is available through CLI.

Try it online

Validate and convert tokens in your browser

Try the token workflow here, or open the full playground for file upload, validation, linting, and conversion. Everything runs locally in your browser, including nested property references.

Open full playgroundRead the docs

Output

Paste tokens or load an example to start.

Validation pendingYour tokens are checked locally and never uploaded.

    Figma plugin

    Export Figma tokens with Design Token Kit

    Export Variables and Styles, validate Token Architecture, audit text contrast and token usage, and convert tokens into CSS, SCSS, Tailwind v4, SwiftUI, and Android outputs.

    Figma Variables and Styles exported to DTCG JSON, then converted to CSS, SCSS, Tailwind v4, SwiftUI, and Android XML.

    Export flow for code-ready tokens

    Keep Figma as the source for variables and styles, export DTCG token files, then convert those files into implementation formats for product teams.

    Explore pluginLearn more
    Outputs and files
    • DTCG JSON
    • CSS
    • SCSS
    • Tailwind v4
    • SwiftUI
    • Android
    • Base file
    • Theme files

    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
    Documentation page preview with sidebar navigation and main Markdown content.

    Blog

    Articles

    Guides, notes, and practical articles about design tokens and DTK.

    View all articles →
    CSS and Architecture

    Utility-First CSS. New Name, Old Problem

    The industry spent twenty years moving away from inline styles for the sake of separation of concerns, then came back to them under the name of utility classes. The history of an anti-pattern and what to do about it.

    Read article →
    AI and Design Tokens

    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 →