SA360 PULSE / ДИЗАЙН-СИСТЕМА
Единая система.
Два контекста.
Палитра, типографика, состояния и адаптивные компоненты для игроков, тренеров и администраторов.
Основной
#155EEFАкцент
#06B6D4Поверхность
#FFFFFFОсновной текст
#10182801 / ТИПОГРАФИКА
Точность — в ритме,
а не в декоре.
Время
двигаться.
Следующая тренировка
Geologica / Heading MD / 22 px / 600Выберите удобное время, подтвердите участие и приходите на площадку. Интерфейс остаётся спокойным, пока задача не завершена.
Lato / Body MD / 16 px / 40002 / ЦВЕТОВАЯ СИСТЕМА
Цвет сообщает состояние.
Основной синий ведёт к действию. Статусные цвета не конкурируют с ним и не используются для украшения.
03 / КОМПОНЕНТЫ В КОНТЕКСТЕ
Сценарий игрока
Mobile-first: одна понятная задача, крупные зоны касания и видимое следующее действие.
ШАГ 2 ИЗ 3
Выберите время
Игра с тренером · 60 минут
Парк «Маяк», корт 2
Итого2 400 ₽
04 / СЕТКА НА УСТРОЙСТВАХ
Две колонки.
Один центр.
На широких экранах canvas состоит только из навигации и рабочей колонки. Свободное пространство остаётся снаружи, как в композиции VK.
Внешний фонНавигация 240 pxРабочая колонка до 1016 px
640 px спокойного фона с каждой стороны
320 px спокойного фона с каждой стороны
24 px внешний отступ · одна рабочая колонка
16 px внешний отступ · нижняя навигация
05 / БАЗОВЫЕ ПРИМИТИВЫ
Одна семантика,
разная плотность.
Общие компоненты сохраняют смысл и состояния в каждом интерфейсе. Меняются только контейнер и плотность.
ДЕЙСТВИЯ
PrimaryButton / SecondaryButtonСТАТУСЫ
ОплаченоОжидает оплатыОтменено
StatusBadgeПОЛЕ ВВОДА
TextField / высота 48 / 40 pxПУСТОЕ СОСТОЯНИЕ
○Пока нет записейИзмените параметры фильтра или создайте тренировку.
EmptyState