Загрузка...
Загрузка...
Found a bug, outage, or unexpected behavior in reChecker? Send us a message and we will check and fix it.
With a subscription — no extra charge. Paid Site Control from 990 ₽/mo includes local tools with unlimited manual runs. The volume limit for each run is shown on the tool page. Paid AI features and API integrations are charged separately.
View subscriptionЗадайте цвета, отступы и типографику — получите готовые CSS-переменные, 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 — инструмент для создания дизайн-токенов из вашей цветовой палитры, шрифтовых шкал и значений отступов. Задайте базовые параметры дизайна — получите CSS-переменные, конфиг для Tailwind и JSON-файл для передачи между командами разработки и дизайна.
Ввод цветов, отступов и типографики в одном интерфейсе
Экспорт CSS custom properties (--color-primary, --spacing-sm)
Генерация Tailwind extend config для прямой вставки в tailwind.config.js
JSON-формат для интеграции с Figma Tokens и Style Dictionary
Копирование в буфер обмена одним кликом
Живой предпросмотр токенов в браузере
Дизайн-токены — это именованные константы дизайн-системы: цвета, отступы, размеры шрифтов, радиусы и т.д. Вместо хардкода значений вы используете имена (--color-brand, --spacing-lg), что упрощает глобальные изменения и поддержку единого стиля во всём продукте.
Guides and tips for this topic