parkhotelostrov.ru · Тильда
Дизайн-код сайта «Царская Усадьба Остров»
Короткий свод правил для всех, кто правит сайт. Цвета, шрифты, кнопки и отступы ниже уже используются на главной и на страницах площадок. Новый блок собирается из этих деталей. Своих цветов и шрифтов не вводим.
1. Цвета
На сайте три основных цвета: кремовый фон, зелёный для текста и заголовков, золотой для акцентов. Примерная пропорция на экране: 60% крема, 30% зелёного, 10% золота. Если золота больше, страница выглядит дешевле.
Крем
фон страниц и секций
#F6F3EEфон страниц и секций
Белый
карточки, плашки, формы
#FFFFFFкарточки, плашки, формы
Зелёный
заголовки, второстепенные кнопки
#465A46заголовки, второстепенные кнопки
Тёмно-зелёный
тёмные секции, цены, подвал
#2D3A2Dтёмные секции, цены, подвал
Шалфей
подписи полей, мелкие метки
#72806Aподписи полей, мелкие метки
Золото
главная кнопка, надзаголовки, акценты
#C79B4Eглавная кнопка, надзаголовки, акценты
Светлое золото
наведение на кнопку, акцент на тёмном фоне
#D8B06Eнаведение на кнопку, акцент на тёмном фоне
Текст
основной и второстепенный текст
#2D2D2D / #4A4A4Aосновной и второстепенный текст
- Не используем чистый чёрный
#000, ярко-красный, синий и другие оттенки зелёного (#1F2E1D,#243320и т.п.). Если нужен тёмный фон, берём#2D3A2D. - Не красим длинный текст в золото: золотом пишут только надзаголовок, цену или короткую метку.
- Тонкие линии и рамки рисуем зелёным с прозрачностью 16%:
rgba(70,90,70,.16).
2. Шрифты
На сайте два шрифта. Cormorant Garamond для заголовков и крупных цифр. Manrope для всего остального: текста, кнопок, подписей, форм.
H1 · первый экран
Cormorant 500, 40–76 px
Cormorant 500, 40–76 px
Историческая земля русских царей
H2 · заголовок секции
Cormorant 500, 34–56 px, на телефоне 32
Cormorant 500, 34–56 px, на телефоне 32
Девять категорий домов
H3 · карточка
Cormorant 600, 22–28 px
Cormorant 600, 22–28 px
Беседка «Царская»
Надзаголовок
Manrope 600, 12–13 px, прописные, разрядка 0.22em
Manrope 600, 12–13 px, прописные, разрядка 0.22em
Банкеты в усадьбе
Вводный абзац
Manrope 300, 16–19 px
Manrope 300, 16–19 px
Загородный парк-отель в 10 км от МКАД.
Основной текст
Manrope 400, 16 px, межстрочный 1.6
Manrope 400, 16 px, межстрочный 1.6
Ферма и сыроварня, баня и аквазона, прогулки у Москвы-реки.
Цена
Cormorant 600, 26–40 px
Cormorant 600, 26–40 px
от 130 830 ₽
Мелкий текст, условия
Manrope 400, 13–14 px
Manrope 400, 13–14 px
Бесплатная отмена до 30.11.2026, 14:00 МСК
- Внимание, ловушка Тильды. Шрифт проекта «Usadba» в настройках собран из двух: начертание 300 (Light) подставляет декоративный старорусский шрифт, а 400–800 обычный Manrope. В стандартных блоках и формах не выбирайте Light. Иначе получится как в форме «Свяжитесь с нами», где заголовок набран декоративным шрифтом.
- Не набираем абзацы прописными и не центрируем длинный текст. По центру ставим только заголовок секции и короткий вводный абзац.
- Курсив Cormorant используем только для выделения пары слов в заголовке, золотым цветом.
3. Кнопки и ссылки
Получить расчёт Записаться на просмотр
Цены и свободные дома Программа праздника
| Кнопка | Вид | Когда |
|---|---|---|
| Главная | золотая «таблетка», белый текст, скругление 100 px, высота 48–52 px | одна на экран: бронирование, расчёт, заявка |
| Второстепенная | прозрачная, зелёная рамка 1.5 px | второе действие рядом с главной |
| На тёмном фоне | прозрачная, белая рамка 60% | второе действие на фото и тёмных секциях |
| Текстовая ссылка | золотой текст со стрелкой «→» | «Смотреть площадку →», «Все события →» |
- Текст кнопки начинается с глагола и обещает результат: «Забронировать», «Получить расчёт», «Узнать свободные даты». Не пишем «Подробнее», «Нажмите сюда», «Отправить заявку на обратный звонок».
- Куда ведут: заявка открывает форму-попап
#popup:myform, бронирование ведёт на/booking, звонок наtel:с номером. - Перед публикацией проверяем, что якорь, на который ведёт кнопка, есть на этой странице. Если блок с якорем удалили, кнопка перестаёт работать без предупреждения.
4. Карточки, плашки, метки
Беседка «Царская»
до 15 декабряБелая карточка: скругление 18 px, рамка 1 px rgba(70,90,70,.16), мягкая тень 0 4px 24px rgba(45,45,45,.06), внутренний отступ 24 px.
Банкет в усадьбе
Плашка с предложением
Без сервисного и пробкового сборовКак карточка, плюс золотая полоса 4 px слева. Используется для акций и условий.
- Скругления: карточки 16–22 px, кнопки и метки 100 px. Острых углов и скруглений 4–8 px на сайте нет.
- Метка-«таблетка» нужна для коротких условий («до 15 декабря», «всесезонная»). Не больше двух меток на карточку.
- Тени только мягкие. Резкие тёмные тени и обводки толще 2 px не используем.
5. Сетка и отступы
| Компьютер | Телефон | |
|---|---|---|
| Ширина контента | до 1280 px, поля по 32 px | поля по 18–20 px |
| Отступ секции сверху и снизу | 96–120 px | 64–80 px |
| Между карточками | 16–24 px | 12–16 px |
| Порядок внутри секции | надзаголовок → заголовок H2 → вводный абзац (1–2 предложения) → содержимое → одна кнопка | |
Соседние секции чередуют фон: крем → белые карточки на креме → тёмно-зелёная секция. Две тёмные секции подряд и два одинаковых блока подряд не ставим.
6. Телефон: первый экран и всплывающие элементы
НОВЫЙ ГОД 2027Новый год в Царской УсадьбеТри ночи с семьёй рядом с МосквойЦены и свободные дома
- Первый экран телефона (375 × 812) показывает предложение и одну главную кнопку. Ничего не должно их закрывать.
- Одновременно на экране не больше двух плавающих элементов: нижняя панель «Позвонить / Забронировать» и ещё один.
- Виджеты TravelLine («Подарок», ИИ-помощник) появляются по одному и только после первой прокрутки. Кнопка «Узнать цены» на телефоне скрыта, потому что дублирует нижнюю панель.
- Плашка cookie на телефоне в 3–4 строки, над нижней панелью. Её кнопку ничто не перекрывает.
- Когда открыта форма, все плавающие кнопки скрыты.
- Новые всплывающие окна и таймеры без согласования не добавляем.
7. Тексты и цифры
- Кавычки «ёлочки»: Беседка «Царская», зал «Дворец».
- Цены с пробелом по разрядам и неразрывным пробелом перед знаком: 100 000 ₽, «от 7 200 ₽/сутки».
- Даты словами: «до 15 декабря», «30 декабря — 2 января». Сроки акций пишем всегда.
- Условия акции рядом с предложением, мелким текстом, а не в отдельном блоке внизу страницы.
- Закончившиеся акции снимаем в день окончания вместе с упоминаниями в новостях и на главной.
- На опубликованной странице нет служебных пометок, комментариев в коде, тестового текста и слов «уточнить», «заглушка», «TODO».
8. Чек-лист перед публикацией
- Блок собран из деталей этого кода: цвета из раздела 1, шрифты из раздела 2, кнопки из раздела 3.
- Новый блок проще скопировать с похожего на сайте и заменить текст, чем собирать с нуля.
- Открыть страницу на телефоне или в режиме 375 px: первый экран не перекрыт, текст не вылезает, кнопки нажимаются пальцем (высота от 44 px).
- Нажать каждую новую кнопку: форма открывается, номер звонит, ссылка ведёт куда надо.
- Отправить тестовую заявку и проверить, что она дошла.
- Открыть код страницы (Ctrl+U) и поискать «TODO», «тест», «уточнить», «Нужно»: должно быть пусто.
9. Что сейчас выбивается из кода
Найдено при сверке 11.11.2026. Исправляется постепенно, при следующих правках этих страниц.
| Где | Что не так | Как должно быть |
|---|---|---|
| Форма «Свяжитесь с нами» (попап на всех страницах) | серый фон, заголовок декоративным шрифтом, серая неактивная кнопка | крем или белый фон, заголовок Cormorant, кнопка золотая |
| Страница «Новый год 2027» | свой набор цветов и классов, отдельный от остального сайта | после праздника привести к палитре раздела 1 |
| Главная, мобильная версия | на первом экране одновременно cookie, «Узнать цены», ИИ-помощник с подсказкой, «Подарок» и нижняя панель. «Подарок» закрывает кнопку «Принимаю» | правило из раздела 6 (подготовлено в копии главной) |
| Блок «Афиша» на главной | заглушка «Скоро 2026» и общие карточки | актуальная программа выходных или последние новости |
| Старые плашки акций | другие оттенки зелёного (#1F2E1D) и красный значок #8C2B23 | тёмно-зелёный #2D3A2D и золотая метка |