умные разговорные роботы для бизнеса
Решения
О Tomoru
Партнёрам

01. Логотип

Начертание

Логотип компании Tomoru представляет собой графический знак и шрифтовое написание. Графический знак состоит из круга c градиентом от зеленого до темно-зеленого. Внутри круга волнообразная сквозная фигура. В соц.сетях разрешается использовать шрифтовое написание, т.к. рядом применяются теги.
Основный логотип
Компактный
Компактный

Охранная зона

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

Не размещайте графические или текстовые элементы внутри охранной зоны.

В цифровых макетах минимальный размер логотипа должен составлять не менее 30 px, в печатных — 3 мм

Возможные цвета логотипа

В изобразительном элементе логотипа используется линейный градиент слева направо под углом 45°, от зеленого #41BA8A до темно-зеленого #297556

Текстовая часть логотипа — #292929. Основной фон для логотипа рекомендуется использовать белый #FFFFFF
#41BA8A
#292929
#FFFFFF
#297556

Возможные цвета логотипа

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

Использование логотипа

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

Использование логотипа

Не используйте в логотипе любые цвета, кроме описанных выше и не располагайте логотип на любом ярком фоне, кроме фирменного зеленого #41BA8A
Не перемещайте изобразительную часть логотипа относительно шрифтовой и не используйте шрифтовую часть без изобразительной
Недопустимо использовать основную версию логотипа без градиента в изобразительной части
Не используйте основную версию логотипа на фото
Не используйте в логотипе тени и свечения, не нарушайте пропорции логотипа

Версии для скачивания

Основаная версия логотипа
Глиф логотипа
Текстовая версия логотипа

Версии для скачивания

Основаная версия логотипа
Глиф логотипа
Текстовая версия логотипа

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

Контентные цвета

HEX
RGB
CMYK
#FFFFFF
255, 255, 255
HEX
RGB
CMYK
#F5F7FC
245, 247, 252
3, 2, 0, 1
0, 0, 0, 0

Акцентные цвета

HEX
RGB
CMYK
#8C76DE
140, 118, 222
37, 47, 0, 13
Дефолтные
При наведении
HEX
RGB
CMYK
#FFD749
255, 215, 73
0, 16, 71, 0
HEX
RGB
CMYK
#22A2FF
34, 162, 255
87, 36, 0, 0
HEX
RGB
CMYK
#7545FF
117, 69, 255
54, 73, 0, 0

Дополнительные цвета

HEX
RGB
CMYK
#284CCF
40, 76, 207
81, 63, 0, 19
HEX
RGB
CMYK
#DCDCDC
220, 220, 220
0, 0, 0, 14
HEX
RGB
CMYK
#0CBE90
12, 190, 144
94, 0, 24, 25
HEX
RGB
CMYK
#FFBB37
255, 187, 55
0, 27, 78, 1
HEX
RGB
CMYK
#098C6A
9, 140, 106
94, 0, 24, 45
HEX
RGB
CMYK
#292929
41, 41, 41
0, 0, 0, 84
HEX
RGB
CMYK
#4A4A4A
74, 74, 74
0, 0, 0, 71
H1
Gilroy Bold, 54pt
Line Height: 110%
Заголовки блоков
H2
Gilroy Bold, 32pt
Line Height: 110%
Заголовки блоков
H3
Gilroy Medium, 24pt
Line Height: 110%
Подзаголовок и заголовки карточек
Caption
Gilroy Bold, 20pt
Line Height: 110%
Теги над заголовком
Button
Gilroy Bold, 18pt
Line Height: 110%
Текст для кнопок (все, кроме желтых)
Button
Gilroy SemiBold, 18pt
Line Height: 110%
Текст для кнопок (желтые и текстовые)
Body 1
Gilroy Medium, 18pt
Line Height: 120%
Основной текст
Body 2
Gilroy SemiBold, 14pt
Line Height: 115%
Подпись аудио
Body 3
Gilroy Regular, 14pt
Line Height: 115%
Подпись
Caption 2
Gilroy Bold, 12pt
Line Height: 100%
Для сфер деятельности (кейсы)
Small
Gilroy Medium, 10pt
Line Height: 110%
Для дополнительной информации
H1
Gilroy Bold, 32pt
Line Height: 110%
Заголовки блоков
H2
Gilroy Bold, 22pt
Line Height: 110%
Заголовки блоков
H3
Gilroy Medium, 20pt
Line Height: 110%
Подзаголовок и заголовки карточек
Caption
Gilroy Bold, 16pt
Line Height: 110%
Теги над заголовком
Button
Gilroy Bold, 16pt
Line Height: 110%
Текст для кнопок (все, кроме желтых)
Button
Gilroy SemiBold, 16pt
Line Height: 110%
Текст для кнопок (желтые и текстовые)
Body 1
Gilroy Medium, 14pt
Line Height: 120%
Основной текст
Body 2
Gilroy SemiBold, 12pt
Line Height: 115%
Подпись аудио
Body 3
Gilroy Regular, 12pt
Line Height: 115%
Подпись
Caption 2
Gilroy Bold, 10pt
Line Height: 100%
Для сфер деятельности (кейсы)
Small
Gilroy Medium, 10pt
Line Height: 110%
Для дополнительной информации
H1
Gilroy Bold, 32pt
Line Height: 110%
Заголовки блоков
H2
Gilroy Bold, 20pt
Line Height: 110%
Заголовки блоков
H3
Gilroy Medium, 18pt
Line Height: 110%
Подзаголовок и заголовки карточек
Caption
Gilroy Bold, 14pt
Line Height: 110%
Теги над заголовком
Button
Gilroy Bold, 16pt
Line Height: 110%
Текст для кнопок (все, кроме желтых)
Button
Gilroy SemiBold, 16pt
Line Height: 110%
Текст для кнопок (желтые и текстовые)
Body 1
Gilroy Medium, 14pt
Line Height: 120%
Основной текст
Body 2
Gilroy SemiBold, 12pt
Line Height: 115%
Подпись аудио
Body 3
Gilroy Regular, 12pt
Line Height: 115%
Подпись
Caption 2
Gilroy Bold, 10pt
Line Height: 100%
Для сфер деятельности (кейсы)
Small
Gilroy Medium, 10pt
Line Height: 110%
Для дополнительной информации
120px
Отступ между блоками на странице
56px
Отступ между заголовком (H1) и контентом блока
40px
Отступ от контента до кнопки или формы
32px
1. Отступ от заголовка (H1) до дескриптора
2. Отступ между подразделами блока
24px
1. Отступ от (H3) до основного текста
2. Отступ между карточками
16px
Отступ между элементами внутри карточки
8px
Отступ между пунктами в тексте
80px
Отступ между блоками на странице
32px
Отступ между заголовком (H1) и контентом блока
28px
Отступ от контента до кнопки или формы
24px
1. Отступ от заголовка (H1) до дескриптора
2. Отступ между подразделами блока
16px
1. Отступ от (H3) до основного текста
2. Отступ между карточками
8px
Отступ между элементами внутри карточки
4px
Отступ между пунктами в тексте
72px
Отступ между блоками на странице
32px
Отступ между заголовком (H1) и контентом блока
28px
Отступ от контента до кнопки или формы
24px
1. Отступ от заголовка (H1) до дескриптора
2. Отступ между подразделами блока
16px
1. Отступ от (H3) до основного текста
2. Отступ между карточками
8px
Отступ между элементами внутри карточки
4px
Отступ между пунктами в тексте

Пример

Пример

Пример

12 колонок, контейнер - 1080, ширина колонки - 68, расстояние между колонками - 24, отступы - 20
Текстовый контент и карточки располагаем четко по сетке на расстоянии 60px от края макета (1200px)
Различного рода подложки располагаем на всю ширину экрана (1200px), отступы внутри оформляем в соответствии с пунктом 07 дизайн-системы
6 колонок, контейнер - 620, ширина колонки - 60, расстояние между колонками - 16, отступы - 10
Текстовый контент и карточки располагаем четко по сетке на расстоянии 10px от края макета (640px)
Различного рода подложки, также, располагаем по сетке, отступы внутри оформляем в соответствии с пунктом 07 дизайн-системы
6 колонок, контейнер - 300, ширина колонки - 37, расстояние между колонками - 16, отступы - 10
Текстовый контент располагается четко по сетке
Блоки на подложках выходят за рамки контейнера и в ширину составляют 360px, отступы внутри оформляем в соответствии с пунктом 07 дизайн-системы

06. Основные компоненты

Хедер

Хедер для страницы Голосовые роботы без переключения языка
Хедер для страницы Голосовые роботы с переключением языка
Хедер для страницы Чат-роботы без переключения языка
Лучшие разговорные роботы
Кейсы
О нас
Чат-роботы
Лучшие разговорные роботы
Кейсы
О нас
Чат-роботы
Лучшие разговорные роботы
Кейсы
О нас
Голосовые роботы

Основные кнопки

С заливкой
С обводкой
При наведении
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить в Telegram
Получить в Telegram
Получить в Telegram
Получить в WhatsApp
Получить в WhatsApp
Получить в WhatsApp
Получить консультацию
Получить консультацию
Получить консультацию

Дополнительные кнопки

Кнопка Play

Дефолтная
При наведении
Получить консультацию
Стать партнёром
Получить консультацию
Стать партнёром

Формы

Горизонтальная
Вертикальная

Карточки с кейсами

6 колонок, 1 аудио-дорожка
4 колонки
6 колонок, 1 аудио-дорожка

Pop-up

Узнаете, как сделать продажи предсказуемыми
Познакомитесь с новыми инструментами
Найдете новое сообщество по интересам
Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных
За время вебинара:
Оставьте заявку на посещение вебинара с CCO Tomoru
Никита Архипов
CCO Tomoru
Узнаете, как сделать продажи предсказуемыми
Познакомитесь с новыми инструментами
Найдете новое сообщество по интересам
Нажимая кнопку, вы соглашаетесь
с политикой обработки персональных данных
За время вебинара:
Оставьте заявку на посещение вебинара с CCO Tomoru
Никита Архипов
CCO Tomoru

Хедер

Основные кнопки

С заливкой
С обводкой
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить в Telegram
Получить в Telegram
Получить в WhatsApp
Получить в WhatsApp
Получить консультацию
Получить консультацию

Текстовая кнопка

Кнопка Play

Получить консультацию

Формы

Горизонтальная
Вертикальная

Карточки с кейсами

Более 2х аудио-дорожек +метрики
1 аудио-дорожка +метрики
1 аудио-дорожка, без метрик

Pop-up

Узнаете, как сделать продажи предсказуемыми
Познакомитесь с новыми инструментами
Найдете новое сообщество по интересам
Нажимая кнопку, вы соглашаетесь
с политикой обработки персональных данных
За время вебинара:
Оставьте заявку на посещение вебинара с CCO Tomoru
Никита Архипов
CCO Tomoru

Хедер

Основные кнопки

С заливкой
С обводкой
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить в Telegram
Получить в Telegram
Получить в WhatsApp
Получить в WhatsApp
Получить консультацию
Получить консультацию

Текстовая кнопка

Кнопка Play

Получить консультацию

Формы

Карточки с кейсами

Более 2х аудио-дорожек +метрики
1 аудио-дорожка +метрики
1 аудио-дорожка, без метрик

Pop-up

Узнаете, как сделать продажи предсказуемыми
Познакомитесь с новыми инструментами
Найдете новое сообщество по интересам
Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных
За время вебинара:
Оставьте заявку на посещение вебинара с CCO Tomoru
Никита Архипов
CCO Tomoru
Хедер

Основные кнопки

С заливкой
С обводкой
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить консультацию
Получить в Telegram
Получить в Telegram
Получить в WhatsApp
Получить в WhatsApp
Получить консультацию
Получить консультацию

Текстовая кнопка

Кнопка Play

Получить консультацию
Горизонтальная

Формы

Вертикальная

Карточки с кейсами

Форма

Более 2х аудио-дорожек +метрики
1 аудио-дорожка +метрики
1 аудио-дорожка, без метрик

Pop-up

Узнаете, как сделать продажи предсказуемыми
Познакомитесь с новыми инструментами
Найдете новое сообщество по интересам
Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных
За время вебинара:
Оставьте заявку на посещение вебинара с CCO Tomoru
Никита Архипов
CCO Tomoru
Блок на подложке
Блок на подложке
Блок на подложке
Карточка с информацией в блоке на подложке
Карточка с информацией в блоке на подложке
Карточка с информацией в блоке на подложке
Карточка с кейсом
Карточка с кейсом
Карточка с кейсом
Карточка с информацией
Карточка с информацией
Карточка с информацией

08. Стилистика

Голосовые волны отражают основное направление компании — умные голосовые роботы. Используем с фирменным градиентом и размытостью
Цвета образуют волнообразные градиенты, которые отсылают к голосовым волнам — их используем на светлой подложке, чтобы добавить эффект «объёма»
Ключевые текстовые пункты выделяем
c помощью гласморфизма
Используем фигуры с эффектом Background blur,
если текст плохо читается
У всех фото удаляем фон, приглушаем слишком яркие элементы, которые создают визуальный шум. Следим за тем, чтобы все фотографии были хорошего качества
Тень используем для карточек с информацией, чтобы визуально обособить их от фона
Performance
Вы знаете всё о трафике в B2B и умеете расти х3 от месяца к месяцу
А среди йогуртов вы растишка
Параметры:
Color: A6A8AC
X: 0
Blur: 48
Opacity: 10%
Y: 48
Spread: 0
Фирменные элементы
Голосовые волны отражают основное направление компании — умные голосовые роботы. Используем с фирменным градиентом и размытостью
Фон
Цвета образуют волнообразные градиенты, которые отсылают к голосовым волнам — их используем на светлой подложке, чтобы добавить эффект «объёма»
Акценты
Ключевые текстовые пункты выделяем
c помощью гласморфизма
Подложки
Используем фигуры с эффектом Background blur, если текст плохо читается
Фотографии
У всех фото удаляем фон, приглушаем слишком яркие элементы, которые создают визуальный шум. Следим за тем, чтобы все фотографии были хорошего качества
Тень
Тень используем для карточек с информацией, чтобы визуально обособить их от фона
Performance
Вы знаете всё о трафике в B2B и умеете расти х3 от месяца к месяцу
А среди йогуртов вы растишка
Параметры:
Color: A6A8AC
X: 0
Blur: 48
Opacity: 10%
Y: 48
Spread: 0