Веб-студия Quadro
Руководство по работе
с визуальным стилем
Апрель 2019. Версия 2.0
Разрабатываем
Лендинги, корпоративные сайты, интернет-магазины и блоги
с настроенной маркетинговой экосистемой.
Превращаем
Смыслы в пиксели. Создаем креативные концепции и визуальные решения для брендов любых масштабов.
Анализируем
Цифровые решения и получаем высокую конверсию за счёт
связки с системами аналитики и рекламой.
Логотип
Веб-студия Quadro
Логотип представляет из себя квадрат, в центре которого находится графический символ - цифра 4.

Квадрат - это совершенство, порядок, единство и простота.
Цифра четыре - разделение всего сущего на четыре части, четырёхчастность любых структур и процессов.
Логотип
Веб-студия Quadro
Логотип представляет из себя квадрат, в центре которого находится графический символ - цифра 4.

Квадрат - это совершенство, порядок, единство и простота.
Цифра четыре - разделение всего сущего на четыре части, четырёхчастность любых структур и процессов.

Правила использования логотипа
Свободное пространство
Вокруг логотипа всегда должно оставаться охранное поле — не менее половины ширины фирменной иконки.
Черно-белая версия
В некоторых случаях допускается использование черно‑белой версии логотипа.
Монохром
При физическом нанесении логотипа методом гравировки, напыления, тиснения и т. п. используйте монохромную версию.

Недопустимые варианты
Логотип нефирменного цвета
Запрещено использовать любые цвета, кроме фирменного
красного и абсолютно белого.
Логотип в инвертированных цветах
Запрещено использовать красную монограмму на белой иконке
(инвертированный логотип).
Неактуальный логотип
Не используйте старые версии логотипа и не совмещайте надпись
с цифрой 4. Актуальные вариации логотипа даны в данном руководстве.

Дополнительная
версия логотипа
Может быть использован в документах, промо-материалах и там, где горизонтальное написание выглядит более уместно.

Первую букву в слове Quadro пишем прописной, остальные строчные. Прочие написания будут являться ошибочными.
Дополнительная
версия логотипа
Может быть использован в документах, промо-материалах и там, где горизонтальное написание выглядит более уместно.

Первую букву в слове Quadro пишем прописной, остальные строчные. Прочие написания будут являться ошибочными.
Фирменные цвета
Основным фирменным цветом является красный. Он используется как основной цвет в коммуникациях Веб-студии Quadro.
Остальные цвета являются дополнительными и используются в визуализации любых элементов компании.
Цвет болида Формулы-1. Стремительность, лидерство, победа.
Цвет космоса. Глубина мысли, ответственность, притягательность.
Цвет технологий. Интеллект, сосредоточенность, стойкость.
Цвет в чистом виде. Безграничность, простота и ничего лишнего.
Типографика
Наш основной шрифт. Используйте его в маркетинговых материалах, для заголовков и в качестве акцидентного шрифта, чтобы создать полноценный образ Quadro.
123/AaBb
NanamiPro
Текстовый шрифт разработанный Google, Используйте его для основного набора. Он легко читается на любых интерфейсах.
123/AaBb
OpenSans
Типографика

Размеры шрифтов на сайте
Шрифт - NanamiPro
Начертание - SemiBold
Размер - 81px
Регистр - Аа, АА
Главный заголовок сайта
Шрифт - NanamiPro
Начертание - SemiBold
Размер - 48px
Регистр - Аа
Остальные заголовки
Quadro
Шрифт - NanamiPro
Начертание - Medium
Размер - 20px
Регистр - Аа
Подзаголовки
Quadro
Шрифт - OpenSans
Начертание - Normal
Размер - 16px
Регистр - Аа, АА
Основной текст
Quadro
Шрифт - OpenSans
Начертание - Light
Размер - 14px
Регистр - Аа, АА
Второстепенный текст
Quadro
Quadro
Размеры шрифтов на сайте
Кнопки
Кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие пользователя с сайтом. Стиль кнопок Quadro - яркий, крупный, контрастный. Цвет и форма притягивают взгляд, а плоский дизайн и отсутствие теней не отвлекают от контента.
КНОПКА #1
Цвет фона: #f0102c
Цвет текста: #ffffff
Шрифт: OpenSans SemiBold
Фон при наведении: #14dbb3

Главная по акценту. Как правило, вызывает форму заявки.
Основная
КНОПКА #2
Цвет фона: #181c20
Цвет текста: #ffffff
Шрифт: OpenSans SemiBold
Фон при наведении: #14dbb3

Используется рядом с основной кнопкой и в различных карточках.
Второстепенная
КНОПКА #3
Цвет фона: #14dbb3
Цвет текста: #ffffff
Шрифт: OpenSans SemiBold
Фон при наведении: #181c20

Используется, если в пределах одного экрана уже есть два типа кнопок.
Дополнительная
Кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие пользователя с сайтом. Стиль кнопок Quadro - яркий, крупный, контрастный. Цвет и форма притягивают взгляд, а плоский дизайн и отсутствие теней не отвлекают от контента.
Кнопки


Дизайн форм
Pop-up также реализуется с учетом фирменного стиля Веб-стадии Quadro, учитываются правила цвета, типографики и кнопок.

В этом же стиле оформляются карточки, квизы и слайдеры.
Цвет иконок, тултипов, переключателей и прочих UI-элементов по умолчанию красный, но допускается и использование остальных фирменных цветов по мере необходимости.

Затемнение фона: 70%
Цвет: #000000
Форма заявки
Оставьте заявку и мы свяжемся с вами в ближайшее время
Нажимая кнопку "Отправить", вы принимаете правила политики конфиденциальности


Дизайн форм
Pop-up также реализуется с учетом фирменного стиля Веб-стадии Quadro, учитываются правила цвета, типографики и кнопок.

В этом же стиле оформляются карточки, квизы и слайдеры.
Цвет иконок, тултипов, переключателей и прочих UI-элементов по умолчанию красный, но допускается и использование остальных фирменных цветов по мере необходимости.

Затемнение фона: 70%
Цвет: #000000
Форма заявки
Оставьте заявку и мы свяжемся с вами в ближайшее время
Нажимая кнопку «Отправить», вы принимаете правила политики конфиденциальности
Отступы
На компьютере: 3 line (90px)
На телефоне: 1,5 line (45px)
Made on
Tilda