yaru.nixg.ru/docs/design

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

Документы

Документ	Описание	Статус
YARU Style	Фирменный стиль: красная буква, короны, цвета	✅ Готов
Компоненты	Svelte компоненты UI	📝 План
Макеты	Макеты страниц	📝 План

---

План раздела

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

---

Логотип

Концепция

• Минимализм — простой запоминающийся символ
• Адаптивность — работает с разными подзаголовками
• 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 документ?