Дизайн-система

Из чего состоит

• Токены — именованные значения: --color-primary: #c05c08, --spacing-md: 16px
• Компоненты — кнопки, формы, модалы, карточки. Готовые к использованию блоки
• Паттерны — правила комбинирования компонентов (формы регистрации, пагинация)
• Документация — когда и как использовать каждый компонент

Популярные дизайн-системы

Material Design (Google), Fluent (Microsoft), Tailwind UI, Ant Design, Radix UI.

Почему важно

Без дизайн-системы: каждая новая страница имеет немного другие отступы, цвета, размеры кнопок. Консистентность ухудшается со временем. С дизайн-системой: изменение токена --color-primary обновляет весь продукт.