Initial commit
This commit is contained in:
Maxim Kalistratov
267
docs/ru/design-system.md
Normal file
267
docs/ru/design-system.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# Morpheus — Дизайн-система
|
||||
|
||||
## Философия дизайна
|
||||
|
||||
### «Ощущается живым, никогда — тяжёлым.»
|
||||
|
||||
Morpheus должен ощущаться как самое быстрое приложение на телефоне. Вдохновлено скоростью Telegram,
|
||||
визуальной отполированностью нативных приложений iOS и характером Discord — но с собственной
|
||||
идентичностью. Не корпоративный. Не андеграунд. Живой.
|
||||
|
||||
## Визуальная идентичность
|
||||
|
||||
### Название и символ
|
||||
|
||||
- **Morpheus** — пробуждающий, тот кто предлагает выбор
|
||||
- Символ: абстрактный глаз или форма пилюли — узнаваемость без объяснений
|
||||
- Символ должен работать в размере 16x16 фавикон и на билборде
|
||||
|
||||
### Цветовая система
|
||||
|
||||
#### Основная палитра
|
||||
|
||||
```plaintext
|
||||
Morpheus Violet #7C3AED — Основной цвет бренда, CTA, активные состояния
|
||||
Electric Indigo #4F46E5 — Вторичный, ссылки, интерактивные элементы
|
||||
```
|
||||
|
||||
#### Нейтральная палитра
|
||||
|
||||
```plaintext
|
||||
Void #09090B — Самый тёмный фон (тёмная тема)
|
||||
Charcoal #18181B — Фон карточек (тёмная тема)
|
||||
Slate #27272A — Границы, разделители (тёмная тема)
|
||||
Mist #A1A1AA — Вторичный текст
|
||||
Cloud #F4F4F5 — Фон карточек (светлая тема)
|
||||
Snow #FAFAFA — Самый светлый фон (светлая тема)
|
||||
Pure #FFFFFF — Текст на тёмном, карточки на светлом
|
||||
```
|
||||
|
||||
#### Акцентная палитра (семантическая)
|
||||
|
||||
```plaintext
|
||||
Pulse Green #10B981 — Успех, онлайн, отправлено
|
||||
Flame Orange #F59E0B — Предупреждение, ожидание
|
||||
Signal Red #EF4444 — Ошибка, деструктивные действия
|
||||
Ice Blue #06B6D4 — Информация, ссылки в контексте
|
||||
```
|
||||
|
||||
#### Градиент
|
||||
|
||||
```plaintext
|
||||
Градиент Morpheus: #7C3AED → #4F46E5 → #06B6D4
|
||||
Применение: экраны онбординга, премиум-бейджи, только «героические» моменты
|
||||
Никогда на тексте body. Никогда на фонах с текстом поверх.
|
||||
```
|
||||
|
||||
### Тёмная тема — по умолчанию
|
||||
|
||||
- Тёмная тема по умолчанию. Светлая полностью поддерживается, но вторична.
|
||||
- Обоснование: целевая аудитория предпочитает тёмную. Тёмная тема экономит батарею OLED.
|
||||
- Тёмные фоны используют шкалу Void/Charcoal, никогда чистый #000000 для карточек.
|
||||
|
||||
## Типографика
|
||||
|
||||
### Набор шрифтов
|
||||
|
||||
```plaintext
|
||||
Основной: Inter (текст интерфейса, body)
|
||||
Моноширинный: JetBrains Mono (ключи, коды, техническая информация)
|
||||
Дисплейный: Manrope или Unbounded (заголовки, маркетинг, hero-текст)
|
||||
```
|
||||
|
||||
### Шкала типографики
|
||||
|
||||
```plaintext
|
||||
Display XL: 36px / 40px межстрочный — Только hero-текст
|
||||
Display: 30px / 36px — Заголовки страниц
|
||||
Heading 1: 24px / 32px — Заголовки секций
|
||||
Heading 2: 20px / 28px — Заголовки карточек
|
||||
Body: 16px / 24px — Стандартный читаемый текст
|
||||
Body Small: 14px / 20px — Вторичная информация, время
|
||||
Caption: 12px / 16px — Лейблы, бейджи, метаданные
|
||||
```
|
||||
|
||||
### Использование жирности
|
||||
|
||||
```text
|
||||
Regular (400): Текст body, описания
|
||||
Medium (500): Лейблы UI, навигация, кнопки
|
||||
Semibold (600): Заголовки, акценты
|
||||
Bold (700): Дисплейный текст, только hero-моменты
|
||||
```
|
||||
|
||||
## Отступы и сетка
|
||||
|
||||
### Шкала отступов (база 4px)
|
||||
|
||||
```text
|
||||
xs: 4px — Внутренние отступы inline, зазоры иконок
|
||||
sm: 8px — Тесная группировка
|
||||
md: 12px — Стандартный внутренний отступ
|
||||
lg: 16px — Отступ карточек, зазоры секций
|
||||
xl: 24px — Между секциями
|
||||
2xl: 32px — Отступы на уровне страницы
|
||||
3xl: 48px — Крупные разрывы секций
|
||||
```
|
||||
|
||||
### Радиусы скругления
|
||||
|
||||
```text
|
||||
sm: 6px — Кнопки, инпуты, мелкие карточки
|
||||
md: 10px — Карточки, диалоги
|
||||
lg: 16px — Крупные карточки, модалы
|
||||
xl: 24px — Аватары (скруглённый квадрат), карточки фич
|
||||
full: 9999px — Пиллы, теги, круглые аватары
|
||||
```
|
||||
|
||||
### Сетка
|
||||
|
||||
- Mobile-first. Одна колонка по умолчанию.
|
||||
- Максимальная ширина контента: 640px для лент (читаемость).
|
||||
- Десктоп: центрированная колонка контента с контекстными сайдбарами.
|
||||
- Никакого бесконечного горизонтального скролла. Вертикальный — нативный.
|
||||
|
||||
## Компоненты
|
||||
|
||||
### Кнопки
|
||||
|
||||
```text
|
||||
Primary: Morpheus Violet фон, белый текст, радиус 6px, medium вес
|
||||
Hover: слегка светлее. Active: слегка темнее.
|
||||
Secondary: Прозрачный фон, фиолетовый текст, граница 1px фиолетовая
|
||||
Hover: заливка violet/10
|
||||
Ghost: Прозрачный фон, mist текст, без границы
|
||||
Hover: заливка slate
|
||||
Destructive: Signal Red фон, белый текст (требуется подтверждение)
|
||||
|
||||
Размер: По умолчанию 40px высота, компактный 32px, большой 48px
|
||||
Минимальная зона касания: всегда 44x44px
|
||||
```
|
||||
|
||||
### Карточки
|
||||
|
||||
```text
|
||||
Тёмная тема: Charcoal фон, граница 1px Slate, радиус md
|
||||
Светлая тема: Pure фон, граница 1px Cloud, радиус md
|
||||
Возвышение: Тень только при hover (никогда в покое)
|
||||
Отступ: lg (16px)
|
||||
```
|
||||
|
||||
### Поля ввода
|
||||
|
||||
```text
|
||||
Высота: 44px (удобно для касания)
|
||||
Граница: 1px Slate, фокус → 2px Morpheus Violet
|
||||
Фон: Void (тёмная) / Snow (светлая)
|
||||
Placeholder: цвет Mist
|
||||
Ошибка: граница Signal Red + текст подсказки ниже
|
||||
```
|
||||
|
||||
### Аватары
|
||||
|
||||
```text
|
||||
Размеры: 24px (inline), 32px (список), 40px (по умолчанию), 64px (профиль), 96px (hero)
|
||||
Форма: Скруглённый квадрат (радиус xl) — отличает от других платформ
|
||||
Фолбэк: Генерируемый градиент из хеша публичного ключа (каждый пользователь уникален)
|
||||
Точка онлайн: Pulse Green, справа внизу, 25% от размера аватара
|
||||
```
|
||||
|
||||
### Навигация
|
||||
|
||||
```text
|
||||
Мобильная: Нижняя панель вкладок, максимум 5 элементов. Хаптик при касании.
|
||||
Активная вкладка: иконка Morpheus Violet + лейбл
|
||||
Неактивная: иконка Mist, без лейбла
|
||||
Десктоп: Левый сайдбар, сворачиваемый. Иконки + лейблы.
|
||||
Переходы: Горизонтальный слайд между вкладками, вертикальный внутри лент
|
||||
```
|
||||
|
||||
## Анимация и движение
|
||||
|
||||
### Принципы
|
||||
|
||||
- **Целенаправленная**: каждая анимация что-то сообщает (смена состояния, пространственная связь)
|
||||
- **Быстрая**: стандартная длительность 150-200мс. Никогда не превышать 300мс для переходов UI.
|
||||
- **Прерываемая**: ввод пользователя немедленно отменяет любую текущую анимацию
|
||||
- **Никакой декоративной анимации**: без плавающих частиц, пульсирующих логотипов, фоновых эффектов
|
||||
|
||||
### Стандартные кривые
|
||||
|
||||
```text
|
||||
ease-out: cubic-bezier(0.0, 0.0, 0.2, 1) — Элементы входят
|
||||
ease-in: cubic-bezier(0.4, 0.0, 1, 1) — Элементы выходят
|
||||
ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1) — Элементы трансформируются
|
||||
spring: spring(1, 80, 10) — Игривые взаимодействия (реакции, лайки)
|
||||
```
|
||||
|
||||
### Ключевые анимации
|
||||
|
||||
```text
|
||||
Переход страницы: Горизонтальный слайд, 200мс ease-out
|
||||
Модал: Scale от 0.95 + fade, 150мс ease-out
|
||||
Тост/снэкбар: Слайд снизу вверх, 200мс ease-out, автоисчезновение 3с
|
||||
Pull to refresh: Нативное ощущение, кастомный индикатор с символом Morpheus
|
||||
Отправка сообщения: Слайд вверх + лёгкий scale, spring easing
|
||||
Реакция: Pop + взрыв частиц, spring easing (один из немногих «весёлых» моментов)
|
||||
Скелетон загрузки: Шиммер-градиент, цикл 1.5с (только при реальной загрузке)
|
||||
```
|
||||
|
||||
## Иконографика
|
||||
|
||||
### Стиль
|
||||
|
||||
- Outlined стиль (не filled) для навигации и UI — обводка 1.5px
|
||||
- Filled стиль для активных/выбранных состояний
|
||||
- Базовый размер 24x24, оптически скорректирован для каждой иконки
|
||||
- Единообразные метафоры: не смешивать material/feather/custom в одном виде
|
||||
|
||||
### Нужны кастомные иконки
|
||||
|
||||
- Индикатор статуса реле
|
||||
- Иконка ключа/идентичности (не буквальный ключ — слишком крипто-бро)
|
||||
- Индикатор шифрования (тонкий, не замок — нормализация, не тревога)
|
||||
- Morpheus-специфичные действия (напр. «zap» для чаевых при использовании Lightning)
|
||||
|
||||
## Тон голоса (UI-тексты)
|
||||
|
||||
### Принципы тона
|
||||
|
||||
- **Разговорный, но не детский** — «Привет», не «Приветствуем вас, уважаемый пользователь»
|
||||
- **Прямой** — «Отправить», не «Подтвердить отправку сообщения»
|
||||
- **Уверенный** — «Ваши сообщения зашифрованы», не «Мы стараемся защитить...»
|
||||
- **Двуязычный** — UI должен работать на русском и английском с первого дня
|
||||
- **Без корпоративного языка** — «Что-то пошло не так», не «Произошла непредвиденная ошибка»
|
||||
|
||||
### Примеры
|
||||
|
||||
```text
|
||||
Пустое состояние: «Тут пока никого. Будь первым.» (не «Контент отсутствует»)
|
||||
Ошибка: «Не удалось подключиться. Нажми, чтобы повторить.» (не «Ошибка сети 503»)
|
||||
Онбординг: «Этот ключ — это ты. Сохрани его в надёжном месте.» (не «Создайте резервную копию ключевой пары»)
|
||||
Деструктивное: «Удалить навсегда?» (не «Вы уверены, что хотите удалить?»)
|
||||
```
|
||||
|
||||
## Доступность
|
||||
|
||||
- Минимальный коэффициент контрастности: 4.5:1 для текста body, 3:1 для крупного текста
|
||||
- Все интерактивные элементы: минимальная зона касания 44x44px
|
||||
- Метки screen reader для всех иконок и нетекстовых элементов
|
||||
- Поддержка Reduce Motion: отключение всей необязательной анимации
|
||||
- Масштабирование шрифта: поддержка системных настроек размера шрифта (до 200%)
|
||||
- Информация не передаётся только цветом (всегда дублировать иконкой или текстом)
|
||||
|
||||
## Целевые платформы
|
||||
|
||||
### Приоритет
|
||||
|
||||
1. **Мобильные (iOS + Android)** — React Native или Flutter, нативное ощущение обязательно
|
||||
2. **Веб (PWA)** — Полный паритет функций, устанавливаемый
|
||||
3. **Десктоп** — Electron или Tauri обёртка веба, или нативный при наличии ресурсов
|
||||
|
||||
### Адаптация к платформам
|
||||
|
||||
- Следовать соглашениям платформы для паттернов навигации (iOS свайп назад, Android кнопка назад)
|
||||
- Нативные share sheets, уведомления, хаптик
|
||||
- Уважать системную тёмную/светлую тему по умолчанию, разрешить ручное переключение
|
||||
- Адаптивные лейауты: телефон → планшет → десктоп, не просто масштабированные
|
||||
Reference in New Issue
Block a user