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

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

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

Логотип

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

Скачать логотип

Официальные файлы с прозрачным фоном: для тёмного фона, для светлого и знак отдельно. В архиве памятка с правилами.

Скачать архив · 4 файлаСкопировать код для сайта

Или по одному: для тёмного фона.png для светлого фона.png знак.png

x

Файл

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

В шапке сайта

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

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

40 px по высоте

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

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

Так нельзя

Цвета

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

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

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

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

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

Сочетания: что на чём читается

Цифра показывает контраст текста и фона. Для обычного текста нужно не меньше 4,5 : 1, для крупного 3 : 1.

Шрифт

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

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

Цитата

Для миссии клуба, слов основателя и отзывов, которые показываем крупно. Набор светлый (300) и крупнее заголовка блока: 80 px на компьютере, 34 на телефоне. Ёлочки золотые и одного размера с текстом: открывающая вынесена на поле слева, чтобы строки стояли ровно по краю, закрывающая стоит в строке. Главные слова можно выделить глубоким синим с жирностью 400. Под цитатой подпись: золотая черта 28 × 2 px и кто сказал («Миссия клуба», имя и роль). Фон блока: мягкий светлый градиент с большими кольцами в углу. Курсив не используем. Так оформлена миссия на странице «О клубе».

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

Отступы одинаковы на всех страницах. Ниже живой образец: синие полосы показывают отступ и его размер на компьютере.

• Мельче 12 px текста нет.
• Заголовок не заканчивается одним словом на последней строке.
• «Санкт-Петербург» не переносим по дефису. Числа, рубли и пиксели не отрываем от цифр, короткие предлоги от слова.
• Абзацы разной важности подряд (описание, пояснение, реквизиты) различаем размером и цветом: главное 17 px основным цветом, пояснение 15 px вторым, реквизиты 14 px приглушённым и отдельно. Курсив и жирность для этого не используем.

Блоки и фон

Меню

Меню одно на всех страницах. Ниже живая шапка сайта с открытой панелью «О Бизнес-Клубе».

• Шапка тёмная и полупрозрачная, с размытием под ней. Высота 84 px, на телефоне 72 px.
• Верхние пункты Onest 14 px обычной жирности, на ноутбуке 13 px. Текущий раздел подчёркнут золотой линией 1 px.
• В панели слева заголовок раздела и короткая подводка, справа группы ссылок. Названия групп 14 px без капса, пункты 16 px, без линий между ними.
• При наведении на пункт панели слева выезжает золотая черта.
• Справа одна белая кнопка «Записаться на поток» высотой 44 px.
• На телефоне меню открывается кнопкой, фон сплошной, разделы раскрываются касанием.

Подвал

Подвал один на всех страницах. Ниже живой подвал сайта.

• Фон: градиент подвала, скругление сверху 54 px, на телефоне 28 px. Блок перед подвалом светлый.
• Свет и кольца идут из правого нижнего угла, откуда светлеет градиент.
• Призыв: заголовок блока и белая кнопка «Записаться на поток». На блоге, политике и записи его нет.
• Три колонки. Слева о клубе, миссия, реквизиты, администратор сайта и правовые документы, соцсети. В середине разделы сайта в четыре столбца, те же, что в меню: о клубе, наставничество, школы и курсы, партнёрам. Справа подписка на почту, контакты, «Подписаться на канал» и «Попасть на ближайший поток».
• Значки соцсетей и приложений одноцветные, в квадратах 44 px с обводкой.
• Нижняя строка обычными буквами, подпись разработчика 12 px.

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

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

Телефон

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

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

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

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

1680-2560 px. Поля от 110 px, контент не шире 1600 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.На тёмном блоке кольца светлые, на светлом тёмные. Одна группа колец в том углу, откуда светлеет градиент блока: свет и кольца идут из одной точки. Точки на кольцах ставим в пустые места, текст кольца не перекрывают. Центр точки всегда на линии своего кольца: ставим её по углу на окружности, а не процентами от блока, иначе на другой ширине экрана точка повисает между кольцами. Если на телефоне точка попадает на текст или на почти невидимую часть кольца, её прячем.

Кольца на светлом блоке

Когда светлых блоков подряд много, один из них разбавляем: мягкий градиент от холодного светлого к белому, пятно голубого света в углу и одно-два больших кольца линией 1 px. Так сделан блок «Курсы» на главной.Кольца еле видны, прозрачность линии 8-12%. Такой фон ставим не чаще, чем через два обычных светлых блока, и не под мелким текстом.

Нельзя

• Неон, свечение вокруг кнопок и карточек, яркие цветные пятна.
• Линии под заголовками и между пунктами списков. Линии оставляем только в таблицах.
• Клетка и сетка на фоне.
• Иконки и стрелки в кружках.
• Плашки-таблетки на каждом элементе.
• Номера и подписи над заголовками блоков, например «01 / Наша команда» над заголовком «Наша команда». Номера пунктов, шагов и большие цифры на карточках можно.
• Страница из одинаковых рядов скруглённых карточек.
• Библиотеки анимации (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 в Петербурге».

Скачать

Логотип и знак лежат в разделе «Логотип». Здесь шрифт и цвета для разработчиков.

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

: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 и кнопка Орбиты видны и нажимаются.