Брендбук

АРКА

Академия зодчих АРКА

Свод правил для всех носителей: знак, цвет, шрифт и фирменные приёмы. Если макет собран по этой странице — он выглядит как АРКА.

Редакция 1.0

02

Цвет

Четыре акцента, шесть нейтралей и два вспомогательных цвета. Других оттенков в макетах не появляется.

Акценты

#D8F24C

Лайм

RGB 216 242 76

Главный акцент на тёмном: кнопки, цифры, треугольник, выделение в тексте.

На белом — 1.26 (не для текста)На графите — 13.86 (AA)

#EE2578

Фуксия

RGB 238 37 120

Целевое действие и звезда: кнопка заявки, плашки иконок.

На белом — 4.06 (AA, от 24px)На графите — 4.29 (AA, от 24px)

#070FAB

Ультрамарин

RGB 7 15 171

Фон крупных блоков и формы, облако, третья буква знака.

На белом — 12.61 (AA)На графите — 1.38 (не для текста)

#0891B2

Циан

RGB 8 145 178

Четвёртое направление: точечные маркеры и подписи на тёмном.

На белом — 3.68 (AA, от 24px)На графите — 4.73 (AA)

Нейтрали

#FFFFFF

Белый

RGB 255 255 255

Фон светлых секций и текст на тёмном.

#EEEEEE

Облачный

RGB 238 238 238

Плашки и карточки внутри светлых секций.

#D9D9D9

Линия

RGB 217 217 217

Разделители и соединительные линии на светлом.

#1F1F1F

Карточка

RGB 31 31 31

Тёмные карточки внутри светлых и тёмных секций.

#1A1A1A

Графит

RGB 26 26 26

Основной тёмный фон секций и текст на светлом.

#202020

База

RGB 32 32 32

Фон страницы, самый нижний слой.

Вспомогательные

#2B6585

Стальной

RGB 43 101 133

Третий план: ромб, соцкнопки, служебные подписи на светлом.

На белом — 6.36 (AA)На графите — 2.74 (не для текста)

#FF0000

Ошибка

RGB 255 0 0

Только формы: звёздочка обязательного поля и текст ошибки.

На белом — 4.00 (AA, от 24px)На графите — 5.25 (AA)

Выведены из обращения

Эти оттенки встречались в макетах как случайные дубли. При правке любого блока заменяются на канонические.

  • #FF1F8E#EE2578
  • #E93B81#EE2578
  • #DFFF3B#D8F24C
  • #D3F23D#D8F24C
  • #2563EB#070FAB
  • #0057FF#070FAB
  • #000EB0#070FAB
  • #00B4D8#0891B2
  • #2D6487#2B6585

Правила

  • На экране один ведущий акцент, остальные работают точечно: цифра, фигура, маркер.

  • Лайм живёт только на тёмном: на графите контраст 13.86, на белом — 1.26.

  • Белый текст на фуксии — от 18px Bold: контраста 4.06 хватает только для крупного кегля.

  • Ультрамарин — фон и текст на светлом (12.61). На графите он нечитаем (1.38).

  • Циан как текст — только на тёмном (4.73), на белом он допустим лишь заливкой.

Нельзя

  • Добавлять новые оттенки под конкретный макет вместо канонических.

  • Ставить акцент на акцент: лайм на фуксии, циан на ультрамарине.

  • Красить текст стальным на тёмном фоне — контраст 2.74.

  • Использовать служебный красный где-либо, кроме форм.

03

Шрифт

Kreadon — единственная гарнитура бренда. Системные шрифты допускаются только как fallback, если файлы недоступны.

Kreadon

Локальная гарнитура, семь начертаний от ExtraLight 200 до ExtraBold 800. Подключается из пакета @meetorra/fonts переменной --assets-font-kreadon.

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ 0123456789

Начертания

  • Академия зодчих200 · ExtraLightНе используем
  • Академия зодчих300 · LightНе используем
  • Академия зодчих400 · RegularРабочее
  • Академия зодчих500 · MediumРабочее
  • Академия зодчих600 · DemiНе используем
  • Академия зодчих700 · BoldРабочее
  • Академия зодчих800 · ExtraBoldТолько акценты

Типографическая шкала

  • 55/159 px · 500 · интерлиньяж 1.0

    Дисплей

    Первый экран. Одна строка на всю ширину контейнера, в макете не повторяется.

  • 24/64 px · 500 · интерлиньяж 1.0 · капслок

    Заголовок секции

    Начало каждого блока. Всегда капслоком, одна-две строки.

  • 18/32 px · 400 · интерлиньяж 1.2

    Подзаголовок

    Одно предложение под заголовком секции, поясняет её смысл.

  • 48/96 px · 700 · интерлиньяж 1.0

    Крупная цифра

    Номера пунктов и статистика. Цвет берётся из акцентов по кругу.

  • 16/24 px · 700 · интерлиньяж 1.2 · капслок

    Заголовок карточки

    Заголовок внутри карточек и списков, капслоком.

  • 14/16 px · 400 · интерлиньяж 1.4

    Основной текст

    Абзацы и описания. Ширина строки не больше 530px.

  • 14/14 px · 500 · интерлиньяж 1.4

    Подпись

    Служебные подписи, теги, значения в таблицах.

Правила

  • Рабочих начертания три: Regular 400, Medium 500 и Bold 700.

  • ExtraBold 800 — только знак и крупные цифры.

  • Капслок — заголовки секций и карточек. В абзацах капслока нет.

  • У крупного кегля интерлиньяж 1.0, у основного текста — 1.4.

  • Трекинг не меняем: шрифт рассчитан на стандартный.

Нельзя

  • Смешивать Kreadon с другими гарнитурами в одном макете.

  • Использовать ExtraLight, Light и Demi — они выпадают из ритма.

  • Растягивать шрифт или имитировать начертания обводкой.

04

Фирменные фигуры

Четыре геометрических формы — вторая после цвета опознавательная черта бренда. Каждая закреплена за своим цветом.

Звезда

#EE2578

Акцент первого экрана и бейджей. Единственная фигура, поверх которой ставится текст.

Треугольник

#D8F24C

Направление и движение. Крупное фоновое пятно на светлых секциях.

Ромб

#2B6585

Третий план: мелкие элементы у края секции.

Облако

#070FAB

Спокойный фон под фотографиями и карточками.

Углы поворота

Допустимы четыре положения: минус 15°, 0°, 15° и 90°. Произвольные углы ломают фигуру.

  • -15°
  • 0°
  • 15°
  • 90°

Правила

  • Фигура — декоративный слой: лежит под контентом и не перехватывает курсор.

  • Не больше двух фигур в декоративном слое секции. Фигуры-иконки внутри контента не считаются.

  • Цвет фигуры закреплён и не меняется от секции к секции.

  • Фигуру можно обрезать краем экрана — это нормальный приём.

  • Размер от 24px в роли маркера до 600px в роли фонового пятна.

Нельзя

  • Обводить, заливать градиентом, добавлять тень.

  • Ставить фигуру поверх текста, лица на фото или знака.

  • Поворачивать на произвольный угол и отражать.

  • Рисовать новые фигуры в этой стилистике.

05

Приёмы

Набор узнаваемых деталей, по которым макет читается как АРКА даже без логотипа.

Подать заявкуСмотреть программу

Кнопки-пилюли

Пилюля (полный радиус), Bold 16px, поля 32 на 12. Фуксия — целевое действие, лайм — второстепенное.

Академия учит проектировать в реальной практике бюро.

Лайм-выделение

Короткая фраза в лайм-пилюле внутри абзаца. Один раз на секцию.

25мест в первом потоке

Карточка-цифра

Фон карточки, радиус 20px, цифра ExtraBold, подпись Medium 14px.

Композиция

Маркер: точка и линия

Цветной круг 12px и белая линия 1px под заголовком пункта.

Ритм фонов

Белые секции чередуются с тёмными: между двумя графитовыми — одна-две светлых. Ультрамарин работает раз на страницу, на блоке заявки. Серый в фон секции не идёт — он только для карточек.

  • Иконка
  • Карточка
  • Блок
  • Пилюля

Радиусы

Четыре значения на весь сайт, остальные не используем.

Фотослой города

Петербургская застройка в правом нижнем углу первого экрана: фотография уходит под контент и обрезается краем.

Фотослой города

Сетка

Контейнер
1324px
Боковые поля
16px
Ширина строки
530px

Правила

  • Контейнер 1324px с полями 16px — общий для всех страниц.

  • Вертикальные отступы секций: 48px на мобильном, 120px на десктопе.

  • Заголовок, подзаголовок и контент выравниваются по левому краю контейнера.

  • Цифры в списках и статистике набираются акцентами по кругу палитры.

  • Тёмная секция получает одну фигуру, светлая — крупное фоновое пятно.

Нельзя

  • Центрировать длинные абзацы и заголовки секций.

  • Смешивать разные радиусы в одном блоке.

  • Ставить две светлые или две тёмные секции подряд.