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

З чого складається

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

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

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

Чому важливо

Без дизайн-системи: кожна нова сторінка має трохи інші відступи, кольори, розміри кнопок. Consistence погіршується з часом. З дизайн-системою: зміна токену --color-primary оновлює весь продукт.