Design.dev design.dev
AI Tools

Design Tokens Generator

Brand colors or a Figma export in. tokens.css, a Tailwind v4 @theme, and tokens.json out. Light and dark included. Nothing leaves your browser.

2 Source Brand values or paste tokens

Primary Brand seed for the 50–950 scale
Accent Second scale. Editing this turns it on

3 Output options

Live preview
Acme Docs Pricing

Design tokens, applied

Semantic tokens on real UI. Toggle light and dark to check both modes.

Card title

Cards inherit card and card-foreground tokens, plus radius and shadow.
Color scales
Checks
All clear

Contrast (WCAG 2.2)

4 Export

tokens.css 

						

					

				


				

					
					
					
				

			


			

					

						
Where to put the files

						

							
your-project/
├── AGENTS.md                  ← paste the Agent rules section here
├── tokens.json                ← DTCG source of truth (Style Dictionary, Figma, Tokens Studio)
└── src/
    └── styles/
        ├── tokens.css         ← plain CSS projects
        └── globals.css        ← Tailwind v4: paste theme.css contents here

						

						

							
Consume the tokens:

							
    
								
  • 
									Style Dictionary v4
									Use tokens.json as the source. You supply sd.config.json
								
    • 
								
  • 
									Tailwind v4
									@import "./theme.css";
								
    • 
								
  • 
									Toggle dark mode
									document.documentElement.classList.toggle('dark')
								
    • 
							

						

					


					

						
							
Pair with

							
DESIGN.md Generator →

							
Document the full design system spec agents read for UI work.

						
						
							
Then

							
AGENTS.md Generator →

							
Reference your tokens file from the agent instructions.

						
						
							
Related tool

							
OKLCH Color Converter →

							
Inspect any single color and its scale in OKLCH.

						
					


			

		


		

			

				

					
Frequently asked questions

					
Formats, naming, dark mode, and how the exports fit Tailwind and Style Dictionary.

				

				

					

						How do I convert Figma variables to CSS variables?
						
Export your variables with a Figma plugin (Tokens Studio, Design Token Exporter, or any DTCG exporter), paste the JSON into the Paste tab, and the generator detects the format, resolves aliases, maps light and dark modes, and emits a tokens.css file with :root and dark-mode blocks. Figma has no native JSON export without a plugin or the Enterprise REST API, so the plugin export is the file you paste.

					

					

						How do I convert design tokens to a Tailwind v4 theme?
						
Choose Tailwind v4 in the output options. Primitive scales are emitted inside @theme as --color-*, --font-*, --text-*, --radius-*, and --shadow-* variables, which generate utilities like bg-brand-500. Semantic tokens are emitted as plain :root and .dark variables and wired into Tailwind with @theme inline, so bg-background and text-foreground switch automatically in dark mode.

					

					

						What is the DTCG tokens.json format?
						
The W3C Design Tokens Community Group format, stable since October 2025. Each token is an object with $type and $value, groups nest as plain objects, and references use {group.token} syntax. Style Dictionary v4, Tokens Studio, Figma, Penpot, and Sketch read it. This generator writes dark-mode values under $extensions so a single file carries both modes.

					

					

						How should I name semantic design tokens?
						
Name tokens by role, not by color: background, foreground, card, muted, border, primary, primary-foreground, destructive, and so on. This generator uses the vocabulary popularized by shadcn/ui and Tailwind because it is the naming AI coding agents already know, so generated UI uses your tokens instead of hard-coded hex values.

					

					

						How does the generator create dark mode variants?
						
Dark mode is derived at the semantic layer, not by inverting colors. Each semantic token points at a step in a primitive scale: background is neutral-50 in light mode and neutral-950 in dark mode, primary is brand-600 in light and brand-500 in dark. The contrast table reports WCAG 2.2 ratios for common pairs. Muted and secondary text that falls below 4.5:1 is nudged along the scale in both modes.

					

					

						Which paste formats are supported?
						
DTCG JSON ($value and $type), Tokens Studio legacy JSON (value and type), Figma plugin exports that include $variable_metadata with modes, flat JSON objects mapping names to values, and a raw CSS block of custom properties. Aliases like {color.brand.500} are resolved, and anything that cannot be resolved is listed in the import report.

					

					

						Is anything sent to a server?
						
No. Format detection, color math, contrast checks, and all exports run in your browser. Pasted tokens never leave your machine, and the page works offline once loaded.

					

				

			

		

	


	
	

		

			
		

	


	

	
Copied to clipboard!