Генератор дизайн-токенов
Задайте цвета, отступы и типографику — получите готовые 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
Design Tokens Generator — инструмент для создания дизайн-токенов из вашей цветовой палитры, шрифтовых шкал и значений отступов. Задайте базовые параметры дизайна — получите готовые CSS-переменные, конфиг для Tailwind и JSON-файл. Идеально подходит для синхронизации дизайн-системы между командами разработки и дизайна.
Часто задаваемые вопросы
Дизайн-токены — это именованные константы дизайн-системы: цвета, отступы, размеры шрифтов, радиусы и т.д. Вместо хардкода значений вы используете имена (--color-brand, --spacing-lg), что упрощает глобальные изменения и поддержку единого стиля во всём продукте.
Токены решают проблему синхронизации: одно изменение обновляет весь проект. Они также служат общим языком между дизайнерами (Figma) и разработчиками (CSS/JS). Инструменты типа Style Dictionary автоматически конвертируют JSON-токены в CSS, SCSS, Swift, Kotlin и другие форматы.
Генератор поддерживает три формата: CSS custom properties для прямого подключения в стили, объект extend для tailwind.config.js с настройками theme.colors/spacing/fontSize, и JSON-формат совместимый с Figma Tokens и W3C Design Tokens specification.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker