Токены и компоненты

Токены дизайна - именованные значения: цвета, шрифты, отступы. Их задают один раз и используют везде.

Порядок работы

1. Вынесите значения в CSS-переменные:

:root {
  --color-accent: #4f46e5;
  --space-4: 1rem;
  --radius: 8px;
}

2. Назовите по смыслу (--color-accent), а не по цвету (--blue).
3. Соберите компоненты: кнопка, карточка, поле формы.
4. Одинаковые блоки делайте одним компонентом с вариантами.

Типичные ошибки

• Повторяющиеся значения вписаны в десятках мест.
• Названия «color1», «color2».

Чек-лист

• Все цвета и отступы через переменные
• Компоненты не дублируются

Навыки оформления: colour-palette, typography, spacing.