Дизайн-система
Живые интерактивные компоненты со всеми состояниями — обычное, наведение, нажатие, фокус, ошибка, успех, выключено. Полный набор для сборки мобильного приложения. Кликайте — большинство контролов настоящие.
Токены
Отступы · сетка 4px
Чистая 4-сетка. Поля экрана 20 · промежуток карточек 12 · внутр. паддинг 16–20 · крупные разрывы 24–32.
Радиусы
12 sm
16 md
18 lg
20 xl
24 card
28 hero
pill
Hero-карточки 28 · карточки 24 · панели 20 · элементы 16–18 · мелочь 12 · кнопки и чипы pill.
Высота и свечение · 4 уровня + 2 glow
Семантика
Success
Warning
Danger
Info
Violet
Neutral
Шкала типографики
Семь именованных ступеней. Manrope везде; Playfair Italic — только Accent.
Градиент-токены
Фиксированные углы и стопы. UI берёт градиент по роли, а не собирает вручную.
Brand
135°
Accent
120°
Mascot
150°
Guide
135°
Health
135°
Warm
135°
Danger
150°
Айдентика
Визуальная основа бренда живёт здесь — единый источник. Брендбук на неё ссылается, но не дублирует.
Бренд
Aqua
#3FC5D2
Aqua Light
#5FD6E0
Coral
#F0A06A
Coral Deep
#F0905A
Mint
#62D2B0
Blue
#6BA8E8
Нейтральные и градиент
Base
#0B0E13
Studio
#0E1218
Panel
#14181F
Ink
#FFFFFF
Brand Gradient
135° aqua → coral
Типографика
Знак
Круг-сфера Джарни. Градиент, глянец, спокойный взгляд.
Иконографика · фирменная графика
Наведите и нажмите, чтобы скачать SVG
Линейные иконки: stroke 1.8, скруглённые концы, 24×24. На активных элементах — на фирменном градиенте.
Действия
Типы · наведите и нажмите
Состояния
Ввод
Текстовое поле · состояния
Обычное
Фокус
Ошибка
Проверьте адрес — кажется, опечатка.
Успех
Выключено
Поле + действие · шаг · слайдер
Счётчик · stepper
Бюджет
{{ slider }}%Выбор
Switch · чекбокс · радио
Сегменты · чипы-фильтры
Удаляемые теги
Меню и списки
Выпадающий список
Клик раскрывает список, выбор пункта закрывает и обновляет значение. Шеврон поворачивается.
Меню действий · «три точки»
Таиланд
Поездка · 12 июля
Иконка «три точки» открывает контекстное меню действий. Выбор пункта закрывает меню.
Ввод дат
Общий компонент · кликабельный
Поведение
Один тап задаёт начало диапазона, второй — конец. После выбора конца календарь сворачивается в строку с итогом дат и числом ночей; стрелка разворачивает его обратно. Стрелки ‹ › листают месяцы.
Контролируемый компонент: состояние (даты, месяц, развёрнут ли) и колбэки приходят пропсами. Используется в «Запланировать отпуск» и в карточке «Когда» при создании поездки.
Контейнеры
Выбираемые плитки · одиночный выбор · канон «выбрано»
Таиланд
от 42 000 ₽
Грузия
от 28 000 ₽
Япония
от 96 000 ₽
Карточка контента · состояния
Строки списка
Бейджи статусов
Аватары
Реплика Джарни
Ваш маршрут уже намечен. Остался один тап — и я займусь визой.
Обратная связь
Инфо. Виза оформляется три дня — документы уже подготовлены.
Успех. Готово на 100%. В этот раз вы собрались даже лучше обычного.
Внимание. Рейс сдвинули на два часа — я уже проверяю стыковку.
Ошибка. Не удалось сохранить — но ваши данные на месте. Попробуем ещё раз?
Прогресс
Скелетон · рейтинг
Пока пусто
Но пара идей уже есть. Куда летим?
Триггеры оверлеев
Геймификация
Celebration · поп + искорки
Появляется при завершении шага (только при отметке, не при снятии). Джарни радуется и хвалит — тёплой репликой в tone of voice. Текст разный на каждой позиции. Авто-скрытие через 2.6 с.
Нажмите несколько раз — реплики чередуются по позициям шага.
Навигация
Топбар
Табы · переключают контент
Обзор маршрута: 6 дней, 3 города, всё под контролем Джарни.
4.8 из 5 · 1 240 отзывов путешественников.
Точки маршрута на карте — от отеля до точки прибытия.
Нижний таб-бар · кликабельный
Принципы
Тёмная база, стекло поверх
Фон #0B0E13, контент — на матовых панелях #14181F.
Градиент — только акцент
Аква→коралл на активных элементах, не на фонах.
Одно состояние «выбрано»
Аква-обводка + свечение. Везде одинаково, без вариаций.
Сетка 4px, поля 22px
Карточки 24, элементы 14–18, промежутки кратны 4.
Отменить бронь?
Деньги вернутся на карту в течение трёх дней. Я прослежу и подберу замену, если нужно.
Сортировать
Сохранено. Я присмотрю за изменениями.
Пока недоступно — закончите шаг выше, и я сразу это включу.
Компоненты
Вынесены из повторяющихся паттернов экранов. Один источник — меняем в одном месте, применяется везде. Подключаются как <dc-import> с пропсами.
Jarnee Mascot
state · glow · halo · bob
Маскот в 6 состояниях. Источник правды для всех вхождений Джарни.
Jarnee ProgressRing
pct · stroke · from · to
Кольцо готовности. Сам считает дугу из процента.
Jarnee Bubble
text · state · size
Реплика Джарни: маскот + облако. Голос всегда на «вы».
Jarnee BottomNav
active · onTrips · onSos · onProfile
Нижняя навигация с активной вкладкой и колбэками.
Jarnee Calendar
value · onChange
Выбор дат поездки — уже общий компонент, используется в планировании.
Локализация
Единый словарь терминов. UI — по-русски; имена собственные продукта не переводятся. Готовим строки к локализации заранее.
Технически: выносим строки в ключи (i18n), избегаем white-space:nowrap на динамических строках и резервируем +30% ширины под EN.