Брендбук TERRA Санкт-Петербург

Главное на одном экране

• Логотип одинКольцо и надпись TERRA. Берём только файлы с этой страницы и не перерисовываем.
• Шрифт один: OnestЗаголовки отличаются размером, подзаголовки и кнопки жирностью 500.
• Шесть фирменных цветовТри синих (ночь, ночь 2, глубокий синий), холодный светлый, белый и золото. Золото только тонкими линиями и отметками.
• Первый экран тёмныйТело страницы светлое. Тёмным делаем только один ключевой блок и подвал.
• Скругление только в трёх местахВторой блок заходит на первый экран, ключевой тёмный блок среди светлых и подвал. Остальные блоки идут встык.
• На каждом экране люди клубаСцена, зал, наставники. Стоковые фото не используем.
• Много воздухаМежду блоками 128 px, под заголовком 36-56 px. Линии только в таблицах.
• Без лишнегоНет жёлтого, бежевого, неона, номеров и подписей над заголовками.

Логотип

Логотип один: кольцо с утолщением снизу и тонкая надпись TERRA. Для тёмного и светлого фона меняется только цвет надписи.

Файл

PNG 1028 × 672 px с прозрачным фоном

В шапке сайта

высота 64 px, на телефоне 51 px

Самый маленький

40 px по высоте

Свободное поле

вокруг знака не меньше высоты букв TERRA

Так нельзя

Цвета

Основа: ночной синий и холодный светлый. Золото работает как металл: тонкая линия, отметка, цифра на тёмном фоне.

Фирменные цвета

Служебные цвета

Не фирменные: нужны, чтобы текст и границы не спорили с основными цветами.

Примерная доля на странице: светлый половина, ночь четверть, белый, синий и золото понемногу.

Шрифт

На всём сайте один шрифт: Onest. Он бесплатный (лицензия OFL), с кириллицей, грузится с нашего сервера и одинаково выглядит на iPhone, Android и компьютере.

Правила набора: элемент и фон

Воздух вокруг заголовков

Заголовок страницы → подводка

40 px, на телефоне 24 px

Подводка → кнопки

40 px, на телефоне 28 px

Заголовок блока → текст

36 px, на телефоне 20 px

Подзаголовок → текст

24 px, внутри карточки 8 px

Заголовок блока → списки, карточки, фото

56 px, на телефоне 32 px

Между блоками

128 px, на телефоне 72 px

Между пунктами списка

16 px, без разделительных линий

Подводка первого экрана

Onest 400, 17-19 px: заголовок крупнее подводки в 5-6 раз. До трёх предложений, каждое с новой строки

• Мельче 12 px текста нет.
• Заголовок не заканчивается одним словом на последней строке.
• «Санкт-Петербург» не переносим по дефису. Числа, рубли и пиксели не отрываем от цифр, короткие предлоги от слова.

Блоки и фон

Адаптация и текст

Каждую страницу делаем сразу для трёх экранов и проверяем на всех трёх до выкладки.

Телефон

390 px. Всё в одну колонку, прокрутки вбок нет

Обычный монитор

1280-1440 px. Контент на всю ширину между полями 48 px

Широкий монитор

1920-2560 px. Контент до 1760 px по центру

Проверка скриптом

layout-audit.mjs на 390, 768, 1280 и 1920 px

Кнопки и ссылки

На экране одна главная кнопка. Исключение: каталоги, где у каждой карточки своя кнопка «Записаться».На кнопке глагол и что будет: «Записаться на поток», «Найти наставника». Стрелок в кружках нет.

Высота

52 px

Поля

17 px сверху и снизу, 24 px по бокам

Скругление

4 px

Текст

Onest 500, 15 px, строчными

В карточках малая кнопка: высота 44 px, поля 13 и 18 px, текст 14 px.

Иконки

Иконки заменяют номера в списках вроде «Для кого TERRA»: номер ничего не говорит, иконка подсказывает смысл пункта.Наведите на иконку, и линия прорисуется заново.

• Только линия: сетка 24 × 24, обводка 1,5 px, скруглённые концы и углы, без заливки.
• Без кружков, плашек и подложек под иконкой.
• Размер 48 px на компьютере и 36 px на телефоне. Иконка стоит над текстом пункта, на телефоне слева от него.
• На светлом фоне глубокий синий #173566, на тёмном золото #D4AA61.
• При наведении линия прорисовывается заново за 0,9 секунды. Если в телефоне включено «уменьшить движение», иконка стоит на месте.
• Иконки рисуем сами в коде. Чужие наборы и шрифты иконок не подключаем.

Набор лежит в _материалы/scripts/build_service_pages.py (словарь ИКОНКИ). Новую иконку добавляем туда, тогда она появится и здесь.

Декор

Приёмов пять: четыре в плитках ниже и кольца. Других не добавляем.Главное на странице всё равно люди, цифры и воздух.

20 октября, 17:00МТС Live ХоллВход бесплатный

Кольца

Кольца повторяют знак TERRA и оживляют блок, чтобы страница не выглядела как газета. Рисуем их кодом, линией 1 px.На тёмном блоке кольца светлые, на светлом тёмные. Одна группа колец в углу блока или за его краем, текст они не перекрывают.

Нельзя

• Неон, свечение вокруг кнопок и карточек, яркие цветные пятна.
• Линии под заголовками и между пунктами списков. Линии оставляем только в таблицах.
• Клетка и сетка на фоне.
• Иконки и стрелки в кружках.
• Плашки-таблетки на каждом элементе.
• Номера и подписи над заголовками блоков.
• Страница из одинаковых рядов скруглённых карточек.
• Библиотеки анимации (GSAP, AOS и подобные).

Карточка наставника: так и нельзя

Прорыв · Услуги

Денисова Анастасия

Доход наставникаот 1 000 000 ₽

Прорыв · Услуги

Денисова Анастасия

Доход наставникаот 1 000 000 ₽

Прорыв · Услуги

Денисова Анастасия

Доход наставникаот 1 000 000 ₽

ПрорывУслугиТоп

Денисова Анастасия

Доход наставникаот 1 000 000 ₽

Фотографии

Кадр

Один и тот же снимок в формате 16:9. Слева кадр по центру, справа сдвинут вверх.

• Макушку, брови, подбородок и руки не режем. Если человек не влезает, отдаляем кадр. Если вокруг много лишнего, приближаем.
• Режем по поясу или по груди. По кистям, локтям и коленям не режем.
• Формат подбираем под снимок: 1:1, 4:5, 4:3, 3:2 или 16:9. Отдельное фото ставим в том формате, где человек виден целиком.
• Для каждого фото отмечаем, где лицо (в коде object-position), чтобы на телефоне при другом формате лицо оставалось в кадре.
• Каждый кадр смотрим глазами в том виде, в каком он стоит на странице, на телефоне и на компьютере.
• Фото из приложения вслепую не ставим. При загрузке кадр подстраивают в рамке нужного формата и только потом выкладывают.

Портреты наставников

Наставники: карточка и фильтры

Имя или ниша, например маркетплейсы Сначала рекомендуемые Фильтры

4 наставника

Прорыв · Маркетплейсы

Бойкова Александра

Маркетплейсы, руководитель наставников

Доход наставника

от 1 000 000 ₽

Для учеников с доходом

от 300 000 ₽

Стоимость

Бесплатно

ПодробнееЗаписаться

Прорыв · Маркетплейсы

Невинный Алексей

Маркетплейсы

Доход наставника

от 1 000 000 ₽

Для учеников с доходом

от 300 000 ₽

Стоимость

Бесплатно

ПодробнееЗаписаться

Прорыв · Маркетплейсы

Воротинский Дмитрий

Маркетплейсы, женская одежда

Доход наставника

от 1 000 000 ₽

Для учеников с доходом

от 300 000 ₽

Стоимость

Бесплатно

ПодробнееЗаписаться

Пороги официальные, от клуба. Наставников уровня «Опора» в Петербурге пока нет, уровень на сайте оставляем.

Тексты

Для людей и для поиска

• Текст пишем для людей: понятно с первого чтения, без канцелярита.
• Слова, по которым ищут в поиске и спрашивают нейросети (SEO и GEO), ставим в заголовок, подводку и первый абзац. Пишем их так, как говорят люди.
• Если выбор между точным поисковым ключом и понятной человеческой фразой, берём человеческую.
• Заголовок страницы прямо говорит, что на ней: «Наставники бизнес-клуба TERRA в Петербурге».

Скачать

Логотип для тёмного фонаPNG · 1028 × 672 px · 71 КБ Логотип для светлого фонаPNG · 1028 × 672 px · 71 КБ АаШрифт OnestWOFF2, все жирности в одном файле АаOnest для макетовGoogle Fonts: TTF для Figma и Word

Цвета для разработчиков

:root{
  --terra-night:#06111f;   /* первый экран, тёмные блоки */
  --terra-night-2:#0b1f36; /* заголовки и текст на светлом, градиент тёмных блоков */
  --terra-deep:#173566;    /* цвет действия: главная кнопка, цифры на светлом */
  --terra-light:#f2f5f8;   /* фон светлых блоков */
  --terra-white:#ffffff;   /* карточки, кнопка на тёмном */
  --terra-line:#d3dbe4;    /* разделители */
  --terra-text-2:#5b6d89;  /* второй текст на светлом */
  --terra-text-2-dark:#b9c9d8; /* второй текст на тёмном */
  --terra-error:#b84a3a;   /* ошибки в формах */
  --terra-ok:#1d7347;      /* заявка отправлена */
  --terra-gold:#d4aa61;    /* тонкие линии, отметки, цифры на тёмном */
  --terra-font:"Onest",Arial,sans-serif;
  --terra-radius-btn:4px; --terra-radius-card:12px;
  --terra-radius-panel:22px; --terra-radius-block:54px;
}

Проверка страницы перед выкладкой

• Один шрифт Onest, жирность 300, 400 или 500.
• Цвета только из палитры, светлый фон один: #F2F5F8.
• Первый экран тёмный, светлого на странице больше половины.
• Скругление 54 px только у второго блока, ключевого блока и подвала.
• Над заголовками блоков нет номеров и подписей.
• В каждом блоке настоящие люди клуба или живой элемент.
• Логотип взят из файлов этой страницы.
• На экране одна главная кнопка, кроме каталогов с карточками.
• Текст не мельче 12 px.
• На ширине 390 px нет прокрутки вбок, ничего не наезжает.
• Нет висячих слов, текст идёт на всю ширину блока.
• Под заголовком блока 36 px до текста и 56 px до остального.
• В кадрах не срезаны руки, макушка и брови.
• Цифры клуба совпадают с этой страницей, тексты прошли проверку humanizer.
• Плашка cookie и кнопка Орбиты видны и нажимаются.