Skip to main content
Code & Tokens

W3C DTCG 2025.10 compliant token export

DeveloperDesigner

Overview

The W3C Design Tokens Community Group format is the emerging standard for interoperable design tokens. The --dtcg flag exports extracted tokens directly in that format, with $type, $value and group nesting, so the output moves between tools without a conversion step.

Design tokens only compound in value if they move freely between the tools that produce them and the tools that consume them. The W3C DTCG spec (2025.10 draft) defines the shared JSON structure for that: typed values under $type and $value, grouped hierarchically, with $description and $extensions for tool-specific metadata. The --dtcg flag on Dembrandt writes extracted colors, typography, spacing, radii and shadows directly in that structure from a live URL, no manual mapping. The output is spec-shaped from the start, which is what makes the Tokens Studio and Figma Variables conversions in the other recipes a straight import instead of a rebuild.

Export DTCG-compliant tokens

Terminal
dembrandt example.com --dtcg --save-output

Print to stdout, pipe into a validator

Terminal
dembrandt example.com --dtcg --json-only | dtcg-validator -
Output

A single JSON file in W3C DTCG format: typed, grouped tokens ready for any DTCG-compliant consumer.

More in Code & Tokens

Design-system-aware Cursor projectGive GitHub Copilot brand contextRefactor hardcoded colors to token variablesTailwind defaults to brand themeLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExport design tokens to StorybookExtract design tokens for a Next.js application

Browse all

All recipes →

59 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more