Styleguide

Стайлгайд

О нас

Connecteam – база знаний для IT-команд, которая помогает улучшать деловую коммуникацию через статьи, разборы кейсов, интерактивы и идеи для тимбилдинга.

Миссия медиа – оптимизировать общение в IT-командах для свободного и эффективного развития продукта.

Ценности

Метафора

В основе метафоры лежит идея воссоздания коллективного непрерывного рабочего процесса. Это передаёт основной посыл сервиса: эффективное общение — это не конечный результат, а постоянный процесс, который требует вовлечённости всех участников и открытости к новым подходам.

Пример использования полной версии логотипа

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

Логотип объединяет в себе начертания как моно шрифта, так и гротеска Inter Tight, что подчёркивает взаимосвязь и сплочённость членов команды.

Пример использования полной версии логотипа

Логотип состоит из двух элементов, один из которых интегрирован в другой: иконка загрузки замещает букву «o», так как похожа по своей форме.

Допустим только данный вид использования полной версии логотипа. Различные изменения и деформации знака не допускаются.

Знак

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

Пример использования короткой версии логотипа

Цвета

Белый или черный, в зависимости от цвета фона, на котором находится логотип. Может располагаться на поверхности любого цвета.

НЕ использовать на градиентном фоне.

НЕ вращать.

Цвета

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

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

Основная палитра

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

Все цвета можно сочетать друг с другом.

Синий — ведущий цвет фирменного стиля медиа-сервиса, символизирующий доверие, профессионализм и ясность. Он подчёркивает миссию бренда — оптимизировать общение в IT-командах для свободного и эффективного развития продукта.

Пример использования ведущей цветовой палитры

Вторичная палитра

Вторичная палитра дополняет основную и используется в декоративных элементах: стикеры и иллюстрации внутри блоков.

Данные цвета используются только для небольших элементах в вебе, в основной айдентике их запрещено использовать.

Пример использования вторичных цветов в стикерах в вебе

Базовая палитра

Цвета, используемые для текста, сетки и фонов в вебе и айдентике.

Типографика

Для медиа-сервиса использовалось сочетание двух гротескных шрифтов.

Inter Tight — современный гротеск с минималистичным дизайном и высокой читабельностью. Этот шрифт с меньшим интервалом для отображения является производным от семейства Inter и сохраняет стиль современного функционализма. Он принадлежит к американскому гротеску, хотя в его линиях заметны отсылки к швейцарской типографике.

Hauora — неогротеск, сочетающий минимализм, геометрию и чистоту форм. Его сбалансированная ширина, увеличенная высота строчных букв и короткие выносные элементы обеспечивают простой и чистый вид.

Заголовки

Шрифт для заголовков — Inter Tight Medium. Вы можете скачать веб-шрифт здесь.

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

Шрифт для заголовков — Hauora. Вы можете скачать веб-шрифт здесь.

Main boxes

Шрифт для текста внутри боксов — Hauora. Вы можете скачать веб-шрифт здесь..

Test boxes headlines

Шрифт для текста внутри боксов с тестами — Inter Tight Medium. Вы можете скачать веб-шрифт здесь.

Main boxes

Шрифт для текста внутри кнопок — Hauora. Вы можете скачать веб-шрифт здесь.

Изображения

Допустимо использовать любые фотографии исключительно в чёрно-белом варианте в сочетании с фирменным градиентом поверх.

Если выбранная фотография слишком тёмная и выделяется, стоит увеличить экспозицию на 30%.

Фотография до и после наложения эффектов

Фотография до и после наложения эффектов