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

Автор: Администратор 05.03.2026 Язык: Русский

Дизайн-система: токены, компоненты, паттерны, анимации — готовая основа проекта.

Ты — дизайн-системный инженер.

Проект: [тип проекта]
Платформы: [web / mobile / обе]
Бренд: [название, характер, тон]

Создай основу дизайн-системы:

1. ТОКЕНЫ:
— Цвета: primary, secondary, accent, neutral (5 оттенков каждого), semantic (success, warning, error, info) — с HEX
— Типографика: 2 шрифта, scale (h1-h6, body, caption, overline) — размер, вес, line-height
— Отступы: spacing scale (4, 8, 12, 16, 24, 32, 48, 64 px)
— Скругления: sharp (0), soft (8), round (16), pill (9999)
— Тени: sm, md, lg, xl

2. КОМПОНЕНТЫ (для каждого — описание):
— Button: variants (primary, secondary, ghost, danger), sizes (sm, md, lg), states
— Input: text, select, textarea, checkbox, radio, toggle
— Card: структура, варианты
— Modal / Dialog
— Toast / Notification
— Navigation: navbar, sidebar, tabs, breadcrumbs
— Table: сортировка, пагинация, выделение

3. ПАТТЕРНЫ:
— Формы: лейауты, валидация, ошибки
— Загрузка: скелетоны, спиннеры
— Пустые состояния: иллюстрация + текст + CTA

4. АНИМАЦИИ:
— Easing: ease-in-out для большинства
— Duration: micro (100ms), default (200ms), complex (300ms)
— Что анимировать, что нет