# Дизайн документация

## Документы

| Документ | Описание | Статус |
|----------|----------|--------|
| [YARU Style](yaru-style.md) | Фирменный стиль: красная буква, короны, цвета | ✅ Готов |
| [Компоненты](components.md) | Svelte компоненты UI | 📝 План |
| [Макеты](layouts.md) | Макеты страниц | 📝 План |

---

## План раздела

- [ ] Логотип и фирменный стиль
- [ ] Цветовая палитра
- [ ] Типографика
- [ ] Дизайн-система компонентов
- [ ] Макеты основных страниц
- [ ] Анимации и переходы

---

## Логотип

### Концепция
- **Минимализм** — простой запоминающийся символ
- **Адаптивность** — работает с разными подзаголовками
- **Fediverse связь** — визуальная ассоциация с федеративными сетями

### Варианты
- [ ] Основной логотип (цветной)
- [ ] Монохромная версия
- [ ] Иконка для favicon/app
- [ ] Версия с подзаголовком (YARU Service/Revolution/Blog/Fediverse)

---

## Цветовая палитра

### Основная (требует утверждения)

| Цвет | HEX | Использование |
|------|-----|---------------|
| Primary | `# TBD` | Кнопки, ссылки, акценты |
| Secondary | `# TBD` | Вторичные элементы |
| Background | `# TBD` | Фон приложения |
| Surface | `# TBD` | Карточки, панели |
| Text Primary | `# TBD` | Основной текст |
| Text Secondary | `# TBD` | Вторичный текст |
| Success | `# TBD` | Положительные действия |
| Error | `# TBD` | Ошибки |
| Warning | `# TBD` | Предупреждения |

### Тёмная тема
- [ ] Определить цвета для тёмной темы
- [ ] Автоматическое переключение по системным настройкам

---

## Типографика

### Шрифты (требует выбора)
- [ ] Основной шрифт: **TBD** (Inter, Roboto, Open Sans?)
- [ ] Моноширинный: **TBD** (Fira Code, JetBrains Mono?)
- [ ] Поддержка кириллицы

### Иерархия
```
H1 — Заголовки страниц (32px)
H2 — Разделы (24px)
H3 — Подразделы (20px)
Body — Основной текст (16px)
Small — Вторичный текст (14px)
```

---

## Компоненты дизайн-системы

### Базовые компоненты
- [ ] Button (primary, secondary, outline, ghost)
- [ ] Input (text, textarea, password)
- [ ] Card (пост, профиль)
- [ ] Avatar (пользователь)
- [ ] Badge (теги, статусы)
- [ ] Modal (диалоги)
- [ ] Toast (уведомления)
- [ ] Spinner (загрузка)
- [ ] Dropdown (меню)

### Специфичные компоненты
- [ ] PostCard (пост с контентом, медиа, кармой)
- [ ] KarmaCounter (отображение кармы)
- [ ] FollowButton (подписка/отписка)
- [ ] Timeline (лента постов)
- [ ] Composer (создание поста)

---

## Макеты страниц

### Требуемые макеты
- [ ] Главная страница (лента)
- [ ] Профиль пользователя
- [ ] Создание поста
- [ ] Настройки
- [ ] Страница поста (детальный просмотр)
- [ ] Подписки/подписчики
- [ ] Поиск
- [ ] Landing page (для неавторизованных)

### Формат макетов
- [ ] Figma (предпочтительно)
- [ ] Или экспорты в PNG/SVG
- [ ] Mobile + Desktop версии

---

## Анимации и переходы

### Микроанимации
- [ ] Hover эффекты на кнопках
- [ ] Плавное появление постов в ленте
- [ ] Анимация лайка/репоста
- [ ] Индикатор загрузки

### Переходы между страницами
- [ ] Fade-in/fade-out
- [ ] Slide переходы для mobile

---

## Вопросы для обсуждения

- [ ] Есть ли предпочтения по цветовой схеме (тёплая/холодная)?
- [ ] Нужен ли готовый UI kit (Material, Chakra) или кастомный дизайн?
- [ ] Кто будет делать макеты (самостоятельно или заказывать)?
- [ ] Требуется ли brandbook документ?