Enter colors, spacing, and typography in one interface
Loading page
This may take a few seconds.
Loading page
This may take a few seconds.
If reChecker is not working correctly, describe the problem and the page where it happened. Leave an email or phone number; we will reply after checking.
Design token generator: CSS variables, Tailwind, JSON
:root {
--color-primary: #3B82F6;
--color-secondary: #8B5CF6;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-text: #1F2937;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--font-family: Inter, system-ui, sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
}Design Tokens Generator — a tool for creating design tokens from your color palette, type scales, and spacing values. Set your core design parameters to get CSS variables, a Tailwind config, and a JSON file to share between development and design teams.
Enter colors, spacing, and typography in one interface
Export CSS custom properties (--color-primary, --spacing-sm)
Generate a Tailwind extend config to paste directly into tailwind.config.js
JSON format for integration with Figma Tokens and Style Dictionary
Copy to clipboard in one click
Live preview of tokens in the browser
Design tokens are named constants in a design system: colors, spacing, font sizes, radii, and more. Instead of hardcoding values, you use names (--color-brand, --spacing-lg), making global changes easier and keeping the product’s style consistent.