Загрузка...
Загрузка...
Если reChecker работает неправильно, опишите проблему и укажите страницу, на которой она возникла. Оставьте email или телефон — мы ответим после проверки.
Задайте цвета, отступы и типографику — получите готовые 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), что упрощает глобальные изменения и поддержку единого стиля во всём продукте.
Руководства и советы по теме