Design Tokens Made Simple
Stop hand-coding CSS variables. Pick what looks good and export production-ready design tokens in minutes.
Create Your Design TokensWhat Are Design Tokens?
Design tokens are the fundamental building blocks of any design system. They are named values that store visual design decisions—colors, typography, spacing, shadows, and more—in a format that can be used across platforms and tools.
Think of design tokens as the DNA of your design system. Instead of scattering hardcoded values throughout your codebase, tokens create a single source of truth. When your brand color changes, you update one token and it propagates everywhere.
Color Tokens
--color-primary: #3b82f6;
--color-background: #ffffff;
--color-foreground: #0f172a;Spacing Tokens
--spacing-1: 0.25rem;
--spacing-4: 1rem;
--spacing-8: 2rem;Typography Tokens
--font-family: "Inter";
--font-size-base: 1rem;
--line-height: 1.5;Shadow Tokens
--shadow-sm: 0 1px 2px...;
--shadow-md: 0 4px 6px...;
--shadow-lg: 0 10px 15px...;The Problem with Manual Token Creation
Inconsistent UI
Without tokens, colors and spacing drift. Every developer makes slightly different choices, and your UI becomes a patchwork.
Time-Consuming
Creating a complete token system from scratch takes hours of research, color theory knowledge, and careful documentation.
Design/Dev Gap
Translating Figma designs to code tokens is error-prone. Names don't match, values get lost, and consistency suffers.
How PickCSS Creates Your Design Tokens
Pick Between Two Options
We show you two complete design options—color palettes, typography pairings, spacing systems. You pick which one feels right. No design knowledge needed.
See Your Choices Applied
Watch your design system come together in real-time. Our preview shows your tokens applied to real UI components—buttons, cards, forms, dashboards.
Export Everything
Download your complete design token system in multiple formats. CSS variables, Tailwind config, JSON, TypeScript types—all from one design session.
Export Formats
Your design tokens, exported in every format you need. One design session, unlimited flexibility.
theme.cssCSS Custom Properties
70+ CSS variables ready to use in any project
tailwind.config.jsTailwind Config
Extends your existing Tailwind setup seamlessly
tokens.jsonJSON Tokens
Compatible with Figma Tokens and Storybook
theme.tsTypeScript Types
Full type definitions for type-safe styling
globals.cssshadcn/ui Ready
Drop-in replacement for shadcn globals
claude-skill/AI Skill Files
Claude Code and Codex understand your system
Frequently Asked Questions
What are design tokens?
Design tokens are the smallest units of a design system—named values that store visual design attributes like colors, spacing, typography, and shadows. They create a single source of truth that keeps your UI consistent across platforms and tools.
How do design tokens work?
Design tokens work by abstracting design decisions into reusable variables. Instead of hardcoding a color like #3b82f6, you use a token like --color-primary. When you need to change your brand color, you update it in one place and it propagates everywhere.
Do I need design skills to create design tokens?
No. PickCSS generates design tokens through simple A-or-B choices. You pick between two complete options—we handle color theory, spacing scales, and typography ratios. You get a professionally crafted design system without needing design expertise.
What formats can I export design tokens in?
PickCSS exports design tokens in multiple formats: CSS custom properties (variables), Tailwind CSS config, JSON tokens (compatible with Figma and Storybook), TypeScript types, and AI-readable specifications for Claude Code and OpenAI Codex.
Ready to Create Your Design Tokens?
50 simple choices. 5 minutes. A complete, production-ready design token system.