Генератор дизайн-токенов
Создавайте семантические цвета, интервалы, радиусы и маркеры типографики с предварительным просмотром живого компонента. экспорт CSS свойств или JSONБесплатно без ИИ.
Дизайн жетонов
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}Текст экспорта остаётся на английском; введённые данные сохраняются без изменений.
Не подписывайся. Никаких кредитов. Этот инструмент собирает ваш вывод в вашем браузере.
От идеи к чему-то полезному.
- 01
Установите свои семантические цвета и базовые значения.
- 02
Осмотрите живую выборку и генерируемую шкалу интервалов.
- 03
Копия CSS Переменные или экспорт соответствия JSON ценностей.
Небольшой контекст.
Семантические токены дают повторяющимся дизайнерским решениям имя. Этот инструмент создает компактную палитру и шкалу расстояния от вашего выбора. CSS и JSON Экспорт имеет одинаковые значения. The JSON Это простой документ с ключом, а не требование о соответствии определенному стандарту обмена токенами.
Хорошие вопросы.
Могу ли я использовать это в своей теме?
Да. Карта или переименование экспортируемых токенов в конвенции вашей темы, а не замена установленной системы вслепую.
Создает ли это темные и светлые темы?
Он экспортирует одну палитру за раз. Создавайте и загружайте каждую палитру отдельно и просматривайте контраст в каждом режиме.