design-tokens

Desktop app that extracts colour, type and spacing tokens from any live website and exports to CSS, Figma or XD.

Open-source, self-hostable design and prototyping tool with native design tokens, CSS Grid/Flex layouts and an open file format.

Supersized collection of CSS custom properties covering colour, easing, shadows, gradients and animations.

Token management platform with Figma, Penpot, VS Code and GitHub integrations plus theme and mode composition.

React design language shipped in three themes (atmospheric, dense, light) generated from one shared token vocabulary.

Utility that expands a single base hex color into a full 50-900 shade ramp suitable for Tailwind or CSS variables.

CLI that compiles DTCG token JSON into CSS, Sass, TypeScript, Swift and Tailwind outputs, successor to Cobalt UI.

Node tool that drives a real browser to extract a site's logo, colours, typography, borders and motion into tokens.

Figma plugin exporting styles and variables to Style Dictionary-compatible JSON, with direct push to GitHub or GitLab.

W3C community group repository holding the design tokens specification, its issue history and the format's ongoing design debates.

Microsoft-maintained Figma plugin that imports design tokens from JSON files straight into Figma variable collections and modes.

Language server, CLI and editor extensions giving autocomplete, hover docs and validation for design tokens inside your editor.

Storybook addon that parses your stylesheets and icon files to auto-generate a live, always-current token documentation panel.

MCP server that translates design tokens between Tailwind, Figma, CSS variables, Material 3 and SwiftUI.

Curated list of design token specs, tooling, transformers and writing, maintained over several years.

CLI that pulls tokens, graphics and React components out of a Figma file into a versioned codebase automatically.

Build system that transforms a single token source into platform-specific outputs for web, iOS, Android and beyond.

Salesforce's original token transformer, converting a single source into Sass, Less, JSON and native platform formats.

Library that puts colour palettes, type scales, icon grids and full styleguides on the clipboard as SVG you paste into Figma as editable frames.

Agent skill that turns one brand hex into OKLCH ramps, WCAG-checked semantic tokens, and Tailwind or CSS output offline.

Agent design skill with research, moodboard, tokens, register dials, and a slop linter so UI stops looking generic.

Chrome extension that scans a rendered web UI's observable styles, states and icons, plus a Figma plugin that rebuilds them as editable variables and components.

Library of DESIGN.md files capturing real brand design systems — colour, type, spacing — in a format coding agents can read directly.

Agent skill that encodes Material Design 3 decision rules — semantic tokens, component choice by behaviour, adaptive width classes, accessibility — with progressive-disclosure reference files.

Bootstraps a project's font, colour and spacing scales into a coherent starting system before you write components.

Generates a complete set of CSS custom property design tokens for colour, type and spacing from a few inputs.

Statically analyses any CSS file or live URL and extracts the implicit design tokens already hiding in it.

DTCG-native token build system supporting resolver documents, sets and modifiers, exporting CSS, Tailwind v4, Swift and Compose.

Web tool that checks a token JSON file against the DTCG specification and reports structural and type errors.

Nathan Curtis's taxonomy of token naming across category, property, concept, variant, state, scale, mode, object and namespace.

Browser-based design token editor and converter that previews colour, type and spacing while exporting standard token formats.