Обзор дизайн-токенов

Что такое дизайн-токены

Дизайн-токены — это именованные CSS-переменные, описывающие визуальный стиль сайта: цвета, шрифты, отступы, тени, радиусы. Они позволяют быстро перенести проверенный стиль с эталонного сайта (например, Linear или Stripe) на свой проект — вместо ручного подбора палитры.

Категории токенов

• Цвета — фон, текст, акцент, muted, границы, семантические цвета (успех/ошибка/предупреждение).
• Типографика — шрифты, размеры, насыщенность.
• Отступы — padding, margin, gap (нормализованная шкала).
• Компоненты — кнопки, карточки, инпуты, навигация.
• Скругления и тени.

Где применять

• Извлечение с сайта — см. «Извлечение с сайта».
• Применение к скопированному сайту — см. «Применение к копии».
• Сохранение тем — см. «Сохранение тем».

Зачем это нужно

Вместо ручного подбора цветов и шрифтов вы берёте согласованный дизайн с эталонного сайта и за минуту получаете единый визуальный стиль своей копии.