Смелая геометрия управления
Коралловый ведёт к действию, кобальт показывает выбор, а компактные формы сохраняют темп страницы.
UI kit · версия 1.1 · канон согласованных страниц
Один язык для всех шаблонов.
Эта доска фиксирует визуальный язык Петрополя и правила, уже проверенные на главной, каталоге и карточке экскурсии. Следующие семейства не создают собственные версии шапки, типографики и коммерческих компонентов.
Что берём из референсов
Каждое решение ниже привязано к открытому источнику. Мы не копируем готовую тему целиком, а берём конкретный доказанный приём под свою задачу.
Система состояний
Размеры, фокус, ошибки и disabled-состояния образуют одну предсказуемую библиотеку.
Коммерческий путь
Цена, дата и тёплая CTA-кнопка заметны раньше вторичных действий.
Редакционная иерархия
Плоские поверхности, строгая сетка и крупная типографика заменяют лишние карточки и тени.
Единый источник правил
Логика компонента отделяется от визуальной темы, а повторяемые решения меняются централизованно.
Один следующий шаг
Главная кнопка отличается цветом, положением и точной формулировкой результата.
Измеримая читаемость
Контраст, размер текста и состояния интерактивных элементов проверяются числами.
Повторяемая композиция
Крупные зоны строятся в отношении 61,8 / 38,2, а компоненты сохраняют базовый ритм.
Главный критерий
Каждый элемент либо помогает выбрать экскурсию, понять условия, довериться компании или завершить заявку — либо не попадает в UI kit.
Канон согласованных страниц
Главная, каталог всех экскурсий и карточка экскурсии теперь стоят выше ранних демонстрационных образцов. При расхождении UI kit обновляется по фактической согласованной странице.
Общий каркас
Все коммерческие и сервисные страницы используют home-v2, общий Header.astro и общий Footer.astro без локальных упрощённых вариантов.
Desktop-шапка
Тёмная поверхность #132B3E, белый логотип и навигация, высота 72 px, верхние радиусы 26 px. Все разделы и действия остаются на месте.
Внутренняя страница
Шапка стоит отдельным блоком в общем контейнере с отступом 12 px сверху — как на согласованной карточке экскурсии.
Mobile-шапка
Высота 64 px, радиусы 20 px; остаются логотип, звонок, Telegram, MAX и меню. Скрываются подписи, а не действия.
Коммерческая типографика
H1 и H2 главной, каталога, карточки экскурсии и оформления — Onest 700–750. Prata остаётся только журналу, цитате и короткому редакционному акценту.
Коммерческая полнота
Что это, формат, расписание или выбор даты, цена, выгода, доверие и следующий шаг считываются до второстепенного контента.
Запрещённый дрейф
Нельзя локально делать «облегчённую» белую шапку, скрывать разделы и действия, возвращать Prata в коммерческий H1 или сокращать общий footer. Для нового семейства сначала подключается общий каркас, затем добавляется только его собственная логика.
Логотип и базовая шапка
До разработки отдельного профессионального знака используем спокойный типографический логотип без соборов, гербов и случайной декоративности.
ПЕТРОПОЛЬ ЭКСКУРСИИ ПО ПЕТЕРБУРГУ
Основная версия
Словесный логотип Onest формирует ровный словесный знак и коммерческие заголовки. Prata используется только как редакционный акцент, а не как шрифт логотипа или посадочных страниц.Будущий знак
Проектируется отдельно Не рисуем случайный собор. Символ должен работать в favicon, билете, аватаре и печати. Линия маршрута
Кобальтовая траектория и коралловые точки связывают смысловые зоны и показывают движение по городу.
Навигация и шапка
Это не приблизительный пример, а зафиксированный header-shell согласованных страниц. Он меняет только положение: поверх первого экрана или отдельным блоком внутренней страницы.
Desktop1360–1024 px
Mobileдо 768 px
Тёмный shell, словесный логотип, состав навигации и набор действий не меняются от страницы к странице. Cobalt показывает активное состояние внутри интерфейса, Coral остаётся за целевым действием.
Типографика
Onest задаёт единую коммерческую иерархию главной, каталогов и карточек экскурсий. Prata остаётся точечным редакционным акцентом для журнала и коротких цитат.
Display · Onest · 48/50 · 750
Экскурсии по Санкт-Петербургу
H2 · Onest · 42/44 · 700
Выберите свою прогулку
H3 · Onest · 24/30 · 650
Мистический Петербург
Лид · Onest · 20/30 · 500
Авторские маршруты для тех, кто хочет увидеть город за знакомыми фасадами.
Основной текст · Onest · 16/26 · 400
Собираем понятную программу, показываем цену заранее и остаёмся на связи до начала прогулки.
Акцент · Prata · не более одной короткой фразы на экран «Город запоминается не списком мест, а историями между ними».
Display 48 / 50 px 750
Onest · главный коммерческий экран
H1 48 / 50 px 750
Onest · название страницы или экскурсии
H2 42 / 44 px 700
Onest · основной раздел страницы
H3 24 / 30 px 650
Onest · карточка или подраздел
Lead 20 / 30 px 500
Onest · короткое вводное обещание
Body 16 / 26 px 400
Основной текст
UI 14 / 20 px 600
Кнопки, поля, навигация
Caption 12 / 16 px 500
Подписи, источник, служебный текст
Editorial 44 / 52 px 400
Prata · журнал, цитата или короткий акцент
Prata используется только от 32 px — в журнале, цитатах и коротких редакционных акцентах. Заголовки коммерческих страниц, цены, кнопки, формы, навигация и длинные тексты набираются Onest. Оба шрифта и лицензии SIL OFL сохранены локально; внешняя загрузка не нужна.
Цвета и роли
Нейтральный фон и чёрные чернила удерживают типографику. Коралловый отвечает только за действие, кобальт — только за выбор и навигацию.
Тёмная шапка
#132B3E Единый header-shell согласованных страниц
Коралловый
#E44525 Главный CTA и коммерческий импульс
Кобальт
#2721C3 Выбор, навигация и интерактивное состояние
Мягкий кобальт
#EEEDFF Фокус и спокойная подложка выбранного
Туман
#F2F2F0 Основной нейтральный фон страницы
Белый
#FFFFFF Поля и светлые поверхности
Чернила
#1A1A1A Основной текст и максимальный контраст
Сланец
#5C5C58 Подписи и поясняющий текст
Линия
#D1D1CB Разделители и спокойные границы
Успех
#247050 Подтверждение и наличие мест
Предупреждение
#875A0A Важные условия без ошибки
Ошибка
#B43333 Ошибки поля и критические сообщения
Golden Canon Grid, отступы и поверхности
Golden Canon Grid становится композиционной основой всех шаблонов: крупные зоны делятся в отношении 61,8 / 38,2, а вложенные элементы продолжают те же оси.
61,8% Основной сюжет или коммерческий контент
38,2%61,8%
38,2% Цена, выбор, следующий шаг
61,8%38,2%
16 складных колонок. На среднем экране они переходят в 8, на телефоне — в 4.
Галерея и бронирование, текст и иллюстрация, каталог и фильтр используют одну пропорцию.
Высоты, внутренние отступы и интервалы собираются на базовом ритме, а не подбираются на глаз.
Шаги отступов
48121624324048648096
Радиусы
8 pxПоля и компактные кнопки 10 pxКарточки и FAQ 12 pxКрупные коммерческие панели 999 pxТеги и чипы
Тени
Без тениОбычная карточка ПоднятаяSticky-панель и модальное окно
Кнопки, ссылки и поля
Силуэт тоже объясняет приоритет: крупный CTA с отдельным знаком движения, спокойная контурная альтернатива и текстовое действие.
Кнопки
Коралловый ведёт к брони, кобальт показывает выбор, контур сохраняет альтернативу, а текстовое действие не спорит с главным.
Состояния полей
Подпись не исчезает после ввода, ошибка объясняет исправление, а disabled выглядит недоступным без потери читаемости.
Табы, чипы, переключатели и FAQ
Варианты выбора выглядят как действия, а раскрывающиеся блоки сохраняют понятные состояния и управление с клавиатуры.
Формат экскурсии
Быстрый фильтр
Переключатели
Как забронировать групповую экскурсию?
Выберите формат, дату, время и количество гостей, затем добавьте экскурсию в корзину.
Где я узнаю точное место встречи?
До предоплаты показываем только ближайшее метро. Точную точку отправляем после подтверждения.
Можно ли задать вопрос до заявки?
Да. Вторичная кнопка открывает выбор связи: звонок, Telegram или MAX.
Цена, скидка и коммерческие плашки
Цена всегда заметнее подписи, а условия акции помещаются рядом и читаются без открытия формы.
Две экскурсии — скидка 10%
Применится автоматически, пока пользователь не выбрал другой промокод.
Собрать маршрут →Мистический Петербург — специальное предложение
Маршрутная акция показывает конкретную выгоду и срок действия.
Посмотреть условия →BIRTHDAY10
−10%10% на всю корзину именинника. Подтверждение проверит менеджер.
Пенсионер: −10% только на его билет.
Ветеран СВО: −10% на всю корзину компании.
Именинник: −10% на всю корзину.
4+1: при покупке четырёх билетов пятый гость идёт на экскурсию бесплатно; дети до 7 лет участвуют бесплатно и в расчёт акции не входят.
Несколько акций: не суммируются; введённый промокод имеет приоритет над автоматической скидкой.
Карточки каталога и доверия
Карточка экскурсии собирает решение в одном месте: тема, расписание, рейтинг, цена и следующий шаг. Все фотозоны остаются пустыми до передачи утверждённого медиапакета.
Фото маршрута 5 фотографий · 1 видео · будут загружены из медиапакета Скидка 20% 2 часа
Пешеходная · 2 часа
Мистический Петербург
5,0184 отзыва
Легенды старого города, дворы и судьбы людей, которые не помещаются в обычный путеводитель.
- ◷РасписаниеЕжедневно · 15:00, 17:00 и 19:30
- ММесто стартам. Владимирская
АннаЯндекс Карты · июль 2026
5,0 ★ «Очень живой рассказ и отличный маршрут. Увидели город совсем с другой стороны, а два часа пролетели незаметно».
Фото гида
Экскурсовод · 286 отзывов
Виктория
Показывает архитектуру через истории людей и подстраивает темп прогулки под группу.
- История города
- Архитектура
- Семейные группы
Карусель и управление фотографиями
Одна крупная фотография остаётся главным решением. Управление не перекрывает смысловой центр, показывает номер кадра и работает кнопками, точками и стрелками клавиатуры.
1 / 5
Drawer выбора билетов и семейство S06
Формат, дата, время, билеты и оплата 50/100% открываются в едином правом drawer. Корзина показывает короткое резюме и открывает тот же drawer по действию «Изменить дату и билеты». Для S06 обязательны шкала скидки 0/10/15%, выбор позиций, карусель рекомендаций, коралловое действие «Оформить заказ» и пояснение, что придёт после оплаты.
Статусы, уведомления и пустые состояния
Сообщение называет результат и следующий шаг. Цвет помогает распознать состояние, но смысл никогда не держится только на цвете.
Итог пересчитан с учётом выбранного формата.
Оплата станет доступна после согласования гида и времени.
Проверьте соединение и повторите. Выбранные экскурсии останутся в корзине.
Пустая корзина
Выбрать экскурсию Здесь появятся выбранные прогулки
Добавьте одну или несколько экскурсий, чтобы сравнить даты и применить общую скидку.
Проверяем свободные места на выбранную дату…
Коротко подтверждает действие
Не блокирует экран и исчезает автоматически.
Мобильная фиксированная панель
На карточке экскурсии цена и основное действие остаются под рукой. Панель не перекрывает контент: страница получает нижний безопасный отступ, а вторичная связь остаётся текстовой.
Фото маршрута
Легенды старого города
Два часа прогулки рядом с Владимирской. Точное место встречи откроется после предоплаты.
Сегодня19:30 · есть 7 мест
Реестр покрытия UI kit
Все двенадцать групп проверены и утверждены как рабочая основа для проектирования страниц.
Навигация и шапкаГотовоКанон согласованных страницГотовоКнопки и текстовые ссылкиГотовоПоля, селекты и ошибкиГотовоТабы, чипы и переключателиГотовоЦена, скидка и промокодГотовоКарточки каталогаГотовоОтзывы и карточки гидовГотовоFAQ и раскрывающиеся спискиГотовоМодальные окна и корзинаГотовоСтатусы, уведомления и пустые состоянияГотовоКарусель и управление фотографиямиГотовоМобильная фиксированная панель действияГотово
Этап 1 завершён
UI kit утверждён — переходим к перечню страниц
- Логотип, типографика, цвета, сетка и геометрия согласованы.
- Все 12 групп компонентов и мобильное поведение согласованы.
- Версия 1.0 зафиксирована как источник визуальных правил.
- Следующий этап — утверждение коммерчески обоснованного перечня страниц.