Брендбук Каталоги.ру

Единые правила внешнего вида и текстов Каталоги.ру: логотип, цвет, шрифт, элементы сайта, письма клиентам, голос. Для сотрудников, подрядчиков и партнёров, чтобы не придумывать заново то, что уже решено.

Что это за бренд

ТемаПравило
Кто мыБайер-сервис: выкуп и доставка в Россию из Европы товаров из интернет-магазинов.
НазванияВ логотипе: CATALOGI.RU или КАТАЛОГИ.РУ (см. «Два написания»). В тексте всегда «Каталоги.ру».
Возраст компанииКомпания работает с 2001 года. Возраст числом («столько-то лет») в текстах не пишется: на сайте он считается автоматически от года основания на дату сервера.
Как заказатьВставить ссылку на товар, проверить данные (название, артикул, цвет, размер, цена в евро), оформить заказ, оплатить российской картой.
ОплатаПосле поступления товара на склад в Германии.
Сроки и ценаСервисный сбор и доставка считаются автоматически, сумма видна до оформления заказа. Подробно в разделе «Стоимость в текстах».
Связь+7 (495) 540-4949, info@catalogi.ru. Пн-Пт 11-20, Сб 11-18, Вс выходной. Чат и мессенджеры: Telegram, WhatsApp, MAX.

Что делает бренд узнаваемым

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

1. Градиент

#EF01A9#F08219

От магенты к оранжевому, сверху вниз. Фирменный цвет логотипа.

2. Флаг-закладка

Вертикальный флаг с вырезом снизу, внутри «RU» или «РУ».

3. Montserrat

Aa Бб 123

Единственный шрифт сайта и материалов. Запасной Arial.

Цвет

Основные

Магента логотипаHEX #EF01A9
RGB 239 1 169
CMYK 0 100 29 6
Верх градиента
Оранж логотипаHEX #F08219
RGB 240 130 25
CMYK 0 46 90 6
Низ градиента
Коралл действияHEX #F35C50
RGB 243 92 80
CMYK 0 62 67 5
Кнопки, счётчики, галочки
Коралл ссылокHEX #F24537
RGB 242 69 55
CMYK 0 71 77 5
Ссылки
Магента чатаHEX #E00098
RGB 224 0 152
CMYK 0 100 32 12
Виджет «Чат с менеджером»
Золото писемHEX #C09742
RGB 192 151 66
CMYK 0 21 66 25
Конфетти и лента в письмах

Нейтральные

ГрафитHEX #333333
RGB 51 51 51
CMYK 0 0 0 80
Заголовки, тёмные блоки
ТёмныйHEX #2E2E2E
RGB 46 46 46
CMYK 0 0 0 82
Футер, подписка
МенюHEX #222222
RGB 34 34 34
CMYK 0 0 0 87
Меню, телефон
ТекстHEX #767676
RGB 118 118 118
CMYK 0 0 0 54
Основной текст
раньше #777777
ПодписьHEX #757575
RGB 117 117 117
CMYK 0 0 0 54
Подписи, ссылки футера
раньше #999999
Светло-серыйHEX #F3F4F6
RGB 243 244 246
CMYK 1 1 0 4
Подложки
ЛинииHEX #F2F2F2
RGB 242 242 242
CMYK 0 0 0 5
Разделители
РамкиHEX #ECECEC
RGB 236 236 236
CMYK 0 0 0 7
Рамки карточек

CMYK пересчитан из RGB как ориентир, перед печатью свериться по пробе. Цвет действия на сайте один: коралловый #F35C50. Градиент логотипа в интерфейсе не используется, он только у логотипа и в оформлении.

Шрифт

Один шрифт на весь сайт: Montserrat, начертания от 300 до 700, запасной Arial (font-family: Montserrat, Arial, sans-serif). Кириллица и латиница.

Montserrat
Абвгдеёжз ИЙКЛМНОП 0123456789 € ₽

Как используется

РольРазмер / интерлиньяжНачертаниеЦвет
H1 страницы34400#333
Заголовок формы заказа36 / 37,8400#FFF на #333
Заголовок промо-блока24 / 30400#333
Заголовок раздела20–24400#333
Основной текст15 / 25400#767676
Меню13 / 25, трекинг 1,2400, заглавные#222
Кнопка11, трекинг 0,8400, заглавные#FFF или #333
Метка над заголовком10 / 13, трекинг 0,8400, заглавные#767676
Название товара13 / 18400#333
Цена14 / 21400, в карточке «79,95 €»#333
Подписи и ссылки футера13 / 20400#757575

Заголовки обычного веса, жирное начертание используется редко.

Сетка

Контейнер

Ширина 1380 при окне 1440: боковые поля 30. На узких экранах одна колонка.

Шапка

Высота 90, разделитель 1 px #F2F2F2. Слева логотип, потом меню, справа телефон, поиск, профиль, избранное, корзина.

Главный баннер

1380 × 500, на десктопе фото слева, текст и кнопки справа.

Плитки

Три в ряд, 447 × 220, зазор 20.

Подложки

Светло-серый #F3F4F6 под текстом, тёмный #333 под формой заказа.

Футер

Тёмный #2E2E2E, четыре колонки ссылок и колонка контактов.

Кнопки и компоненты

Кнопки

ПосмотретьЗаказать по ссылкеЗагрузить ещё
Смотреть коллекцию

Наведите курсор и нажмите: так ведут себя кнопки на сайте.

ВидПараметры
Все кнопки11 px, заглавные, трекинг 0,8, поля 12 × 21 × 11, скругление 3, смена цвета за 0,3 с
ОсновнаяФон #F35C50, текст белый. При наведении светлее: #F5776D
Белая с каймойФон белый, текст и рамка #F35C50. При наведении заливка #F35C50, текст белый
ПрозрачнаяТекст #F35C50, рамка 35% прозрачности. При наведении заливка #F35C50
На фотоФон белый, текст #333
Нажатие (ripple)От точки нажатия расходится белый круг и гаснет за 0,6 с
Блик на картинкахПри наведении по картинке проходит скошенный белый блик за 0,5 с

Блик на картинке

наведите курсор

Счётчик корзины и избранного

Круг #F35C50, белая цифра, на иконке корзины и избранного.

0 3

Форма заказа по ссылке

Форма заказа

Тёмный блок #333: заголовок 36 px, белое поле, кнопка со стрелкой, ссылка «Не знаете, где взять ссылку? Мы поможем»

Главный компонент продукта. Подсказка в поле: «Например: https://www.zara.com/de/…». Если ссылка не распознана, открывается форма: название, артикул, цвет, размер, цена в евро.

Cookie-панель

Мы используем cookie. Хорошо

Одна строка внизу экрана, не закрывает содержимое.

Чат с менеджером

Виджет поддержки стоит слева внизу на каждой странице. Закрытый вид: пилюля с двумя белыми «глазами», глаза медленно «осматриваются». Над ним иногда появляется подсказка. По нажатию раскрывается панель с каналами связи и главной кнопкой.

Подсказка
Поддержка Каталоги.ру

Поможем оформить заказ, рассчитать доставку или ответим по вашему заказу.

Telegram
WhatsApp
MAX
Чат с менеджером
ЭлементПараметры
Цвет виджета#E00098 (пилюля и главная кнопка)
ПилюляСлева внизу, отступ 22 и 24 от краёв, две белые точки, осмотр глазами 20 с по кругу
ПанельШирина 330, поля 22, скругление 20, рамка 12% тёмной, мягкая тень
КаналыTelegram, WhatsApp, MAX: круги 50 с подписью 12 px
Главная кнопкаФон #E00098, текст белый 15 px, вес 500, скругление 12, поля 13
ПодсказкаТёмная #101828, белый текст 13 px, скругление 20

Карточка товара

Как выглядит

фото 3 : 4
МагазинНазвание товара
79,95 €

Правила

  • Фото вертикальное, пропорции 3 : 4 (на сайте 450 × 600). Горизонтальное фото не используется.
  • Белая карточка, тонкая рамка #ECECEC, название 13 px, магазин серым #757575, цена 14 px.
  • Цена одним написанием: «79,95 €», с запятой и знаком евро.
  • Пустых карточек быть не должно. Если фото нет, показывается заглушка.

Заглушка

Если у товара нет фото, вместо пустого поля показывается заглушка: серый линейный рисунок, футболка, выглядывающая из коробки с сердечком. Файл /images/no_photo.png, 450 × 450, он стоит по центру вертикальной карточки 3 : 4.

Заглушка: нет фото
МагазинНазвание товара
79,95 €

Hero-изображения писем

Hero это картинка вверху письма клиенту. Одна на каждое событие, она сразу показывает, о чём письмо. Сейчас на сервере доступны четыре, лежат в /images/.

hero-order-place
hero-order-place.png
Галочка в круге: заказ оформлен, подтверждение заказа.
hero-order-status
hero-order-status.png
Грузовик в круге: изменился статус заказа, доставка.
hero-user-login
hero-user-login.png
Ключ: доступ в личный кабинет, вход, смена пароля.
hero-user-welcome
hero-user-welcome.png
Ракета: приветствие нового клиента, регистрация.
ПараметрЗначение
ФорматPNG 700 × 440 px, прозрачный фон, один файл на событие, лежит в /images/hero-….png
Главный значокЧёрный линейный значок, в круге диаметром 198 px (центр 348 × 263) или отдельно (ключ)
Золотое конфеттиТочки, кольца и крестики золотого цвета #C09742 (оттенки #B5974B, #B9913F). Расположение одинаковое во всех hero, меняется только значок
Золотая лентаТонкая пунктирная линия внизу, 2 px, от x 80 до 615, четыре отрезка
ЦветаЧёрный #000000 и золото. Градиент логотипа в hero не используется
ПравилоОдно событие равно одному значку. Конфетти и лента остаются теми же

Баннеры главной

Слайдер главной страницы: пять баннеров 1700 × 500 (телефон 760 × 500) с фото партнёрского бренда и его логотипом. Заголовок и кнопки накладываются сайтом, в картинку не вшиты. Баннеры периодически обновляются, поэтому здесь описаны только размеры и принцип.

Подчёркивание: золотая лента и змейка

В письмах два приёма подчёркивания. Золотая пунктирная лента стоит под значком в hero. Змейка, нарисованная от руки чёрная волнистая линия, подчёркивает заголовок блока и кнопки действия.

Змейка из письма (оригинал)

Следуйте за нами в социальных медиа

Оригинальный GIF из писем, 600 × 72 px, показан в половину размера. Под заголовком «Следуйте за нами в социальных медиа». Чёрная линия толщиной около 3 px, концы скруглены, рисунок от руки. Анимация: 6 кадров по 0,2 с, бесконечный цикл. Линия лежит ровно, затем волнится и успокаивается.

Змейка под кнопкой

Посмотреть заказ

Так змейка подчёркивает кнопку действия: тот же GIF, без изменений.

Золотая лента

Перейти в заказ

Золото #C09742, толщина 2 px, четыре отрезка разной длины.

Файл змейки: mail/snake.gif в архиве. Это оригинал из писем: его нельзя перерисовывать и растягивать больше исходных 600 px по ширине.

Письма клиентам

Письма с сайта (подтверждение заказа, смена статуса, доступ в кабинет) собираются в одном формате: шапка с логотипом, hero, таблица заказа, кнопка, блок соцсетей со змейкой, подвал со ссылками. Шрифт писем системный: Arial / Helvetica (почтовые клиенты не загружают Montserrat).

Таблица заказа

Стоимость товаров00.00 EUR
Сервисный сбор00.00 EUR
Доставка по России00.00 EUR
Итого00.00 EUR

Левая колонка: название 15 px #21374E. Правая: сумма, прижата вправо. Между строками линия 1 px #F3F3F3. «Итого» крупнее и жирнее (19 px, 700).

Блок получателя и кнопка

ПОЛУЧАТЕЛЬ:Имя Фамилия Отчество+7 ХХХ ХХХ-ХХ-ХХпочта@пример.ruАДРЕС ДОСТАВКИ:Город, улица, домСогласие с офертой: ДА
Посмотреть заказ

Подписи заглавными 13 px #5C6672, значения по центру: имя жирным #21374E. Ссылки #1D6EC9 с подчёркиванием. Кнопка: фон #F1187A, текст белый жирный заглавный 16 px, скругление 4, высота 52, ширина около 230.

Блок соцсетей

Значки соцсетей в письме
Следуйте за нами в социальных медиа

Круглые цветные значки Facebook, YouTube, Telegram, Instagram, ВКонтакте разного размера в один ряд, под ними заголовок и змейка. Выше и ниже блока линия 1 px #A69B8A.

Подвал письма

Каталоги.ру - доставляем из Германии:
Madeleine | OTTO | YOOX | H&M | NIKE | Uniqlo
и еще более 80 интернет-магазинов

Доставка | Оферта | Возврат

Написать в WhatsApp: +7 (495) 540-49-49
info@catalogi.ru
Позвонить: +7 (495) 540-49-49
ПН-ПТ 11-20
СБ 11-18

© CATALOGI.RU
годы считаются автоматически

Текст по центру, серый #909090, ссылки подчёркнуты. Состав: магазины-партнёры, ссылки на доставку, оферту и возврат, связь (WhatsApp, почта, телефон), часы работы, копирайт. Годы в копирайте считаются автоматически.

Параметр письмаЗначение
ЦветаТекст и суммы #21374E, подписи #5C6672, ссылки #1D6EC9, заголовок блока #2E2E2E, подвал #909090, линии таблицы #F3F3F3, разделители блоков #A69B8A, кнопка #F1187A
ШрифтArial / Helvetica, Montserrat в письмах не используется
ТоварВ каждой позиции: фото, название, размер, цвет, артикул, магазин, цена без сервисного сбора
ДеньгиСуммы в евро в виде «00.00 EUR». Сервисный сбор в итоговой таблице показывается строкой, в списке товаров цены без него

Корзина и форма заказа

Все данные клиента о товаре и заказе принимает блок «Форма заказа по ссылке» (на странице он тёмный, под заголовком «Вставьте ссылку со страницы товара, который хотите заказать»). Дальше данные идут в корзину и оформление заказа. Ссылка на сам модуль в материалах не указывается.

ШагЧто делает
1. Форма заказа по ссылкеПринимает ссылку на карточку товара из европейского магазина, сам подставляет фото, название, магазин, артикул, доступные размеры, цену. Если ссылка не распознана, показывает «Не удалось распознать товар автоматически. Заполните данные вручную».
2. Данные о товареКлиент проверяет поля: название, артикул (нет артикула: прочерк), цвет (нет цвета: прочерк; для двух одинаковых вещей «2 x чёрный»), размер (немецкий, если нет выбора: 0), цена в евро (цена товара плюс платная доставка по Германии).
3. Добавление в корзинуКнопка «Добавить в корзину», затем сообщение «Товар добавлен»: «Перейти в корзину» или «Добавить ещё». На иконке корзины в шапке счётчик.
4. КорзинаСписок позиций, итог, «Отложенные». Пустая корзина: тёмный блок формы, «Ваша корзина пуста» и видео-инструкция.
5. Оформление заказаДанные получателя, паспортные данные (для таможенного оформления, хранятся по закону о персональных данных), способ доставки (пункт выдачи, постамат, курьер, отделение почты), оплата российской картой, предоплата 100%. Согласие с офертой и соглашением на обработку персональных данных.
6. Личный кабинетСтатус заказа и уведомления: когда посылка приходит в пункт выдачи. Письма о событиях приходят с hero-картинкой.

Как устроена форма заказа по ссылке

ЭлементПараметры
БлокВо всю ширину страницы, фон #333, поля 34 × 32 × 56
ЗаголовокБелый, 24–36 px (по ширине окна), вес 500, по центру
Поле ссылкиШирина до 520, высота 49, белое, рамка 1 px #E2E2E2, скругление 3, текст 16 px, подсказка #707070. В фокусе рамка #F35C50. Справа крестик очистки
КнопкаКвадрат 49 × 49, фон #F35C50, белая стрелка, скругление 3. Пока ссылка не введена, полупрозрачная
Подсказка и помощьПод полем ссылка «Не знаете, где взять ссылку? Мы поможем» и всплывающая справка
Ошибка и загрузкаСообщение об ошибке ссылки и индикатор загрузки пока сайт разбирает товар

Страница магазина и корзина

Страницы, на которые приходит клиент. Пример: страница магазина ZARA.COM и корзина.

Страница магазина

Плашка условий и калькулятор

Тёмная плашка с четырьмя условиями и калькулятор стоимости

Сервисный сбор включает

Розовый блок «Сервисный сбор включает» с девизом «Оплатили — Расслабились»

БлокКак сделан
Заголовок«Купить на ZARA.COM с доставкой из Германии в Россию»: крупный, чёрный, вес 600. Слева текст, справа фото
АбзацСерый текст, ключевая фраза выделена жирным
Кнопка«Перейти в магазин», основная коралловая
Плашка условийТёмно-серая #4A4A4A, белый текст, четыре пункта с коралловой галочкой: стоимость доставки по Германии, бесплатная доставка от суммы, срок доставки, условия возврата
КалькуляторБелая карточка на светло-сером поле: цена товара в евро, сервисный сбор, доставка, курс евро, итого. Кнопка «Рассчитать стоимость»
Сервисный сбор включаетРозовая плашка, шесть шагов с коралловыми галочками (выкуп за 24 часа, уведомления о каждом шаге, приём на склад в Германии, проверка и упаковка, таможенная декларация, доставка из Германии) и подпись «Оплатили — Расслабились» с сердечком

Корзина

Корзина

Пустая корзина: тёмный блок «Вставьте ссылку…», значок корзины, «Ваша корзина пуста», ниже видео-инструкция

Каналы связи

Официальные каналы Каталоги.ру. Других адресов в материалах не использовать.

КаналСсылка
Telegramt.me/CatalogiRU
Бот Telegramt.me/CatalogiRU_bot
ВКонтактеvk.com/catalogi_ru
Яндекс.Дзенdzen.ru/catalogi
YouTubeyoutube.com/user/CatalogiRU
Одноклассникиok.ru/group/55666432016403
TikToktiktok.com/@catalogi.ru
Twitterx.com/catalogi_ru
Facebookfacebook.com/Catalogi.ru
Instagraminstagram.com/catalogi.ru
MAX (бот, только для сообщений)max.ru/id7733150641_bot
Телефон+7 (495) 540-4949
Почтаinfo@catalogi.ru

Мессенджеры поддержки

Telegram, WhatsApp, MAX: «Поможем оформить заказ, рассчитать доставку или ответим по вашему заказу».

Оплата

Знаки Mastercard, Visa, МИР, ЮKassa внизу футера.

Футер

Футер: подписка, колонки ссылок, контакты, соцсети, платёжные знаки

Официальные документы

Где брать официальную информацию. В любых текстах, расчётах и обещаниях клиенту опираться на эти страницы, а не на пересказ.

ДокументСсылкаО чём
Публичная офертаcatalogi.ru/include/offer_detail.phpГлавный документ: условия заказа, оплаты, возврата, минимальная стоимость заказа. ДТС описан в пункте 3.14: catalogi.ru/include/offer_detail.php#dts
Условия оплатыcatalogi.ru/help/payment/Способы оплаты, сервисный сбор, ДТС
Условия доставкиcatalogi.ru/help/delivery/Доставка по России
Возврат товараcatalogi.ru/help/returns/Сроки и порядок возврата
Вопросы и ответыcatalogi.ru/info/faq/Как заказать, как считается стоимость, ДТС с примерами
Таблица размеров, текстильные терминыcatalogi.ru/help/termins/Справочные страницы
Соглашение на обработку персональных данных (в футере «О персональных данных»)catalogi.ru/include/licenses_detail.phpСогласие клиента на обработку персональных данных
Контактыcatalogi.ru/contacts/Телефон, почта, режим работы

Голос

1. Обращаемся на «вы», командой

«Вставьте ссылку со страницы товара, который хотите заказать».

2. Бренд называем по имени

Название магазина или марки стоит в заголовке: «Топ-подборка Balenciaga».

3. Структура промо

Метка (РАСПРОДАЖА, НОВЫЕ МАГАЗИНЫ), заголовок, одна строка пояснения, кнопка.

4. Честные условия сразу

«Оплата производится после поступления товара на склад в Германии.»

5. Блог пишут авторы от первого лица

Живой личный голос: «…пять трендов, которые я проверила в примерочной». Авторы блога пишут от себя, без канцелярита и без сравнения с другими магазинами.

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

Словарь

ТерминГдеПримечание
Интернет-магазиныМеню, футер, витринаТак называем магазины-партнёры
Заказать по ссылкеКнопка на баннерахГлавное действие
Как заказатьМенюИнструкция
Склад в ГерманииУсловие оплатыОплата после поступления товара
Сервисный сборКалькулятор, оплатаСчитается автоматически
ДТСУсловия оплатыДополнительный транспортный сбор за тяжёлые и габаритные товары
Таблица размеров, Текстильные терминыФутер, «Помощь»Справочные страницы
Публичная оферта, Условия оплаты, Условия доставки, Возврат товараФутерЮридические страницы
ЦенаКарточки, форма«79,95 €»: запятая и знак евро
ДатыБлогДень, месяц словом, год

Стоимость в текстах

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

ЧтоКак пишем
Сервисный сборСчитается автоматически и виден до оформления заказа. Процент в текстах не называем.
Цена товараЦена в евро плюс платная доставка по Германии, если она есть. Блузка 10 € и доставка 2,95 € дают в поле «Цена, €» 12,95.
Дешёвые товарыЕсли товар стоит меньше 10 €, за обработку артикула начисляется 2 €. Оплата после поступления товара на склад в Германии.
ДТСДополнительный транспортный сбор для тяжёлых и габаритных товаров. Как правило, не относится к одежде и обуви дороже 50 €, заказанным в одном экземпляре. Точную сумму заранее назвать нельзя: она зависит от фактического веса и размеров упаковки, счёт приходит после поступления товара на склад.
Доставка по РоссииПо тарифам службы доставки, сумма видна при оформлении заказа.
Минимальный заказМинимальная итоговая стоимость заказа указана в публичной оферте.
Возраст компанииЧислом не пишем. Считается автоматически от 2001 года на дату сервера.

Файлы

  • logo/: логотип CATALOGI.RU и КАТАЛОГИ.РУ в SVG: градиент, одноцветный, белый; шесть вариантов анимации превращения (диагональ, лифт вниз, лифт вверх, волна, дождь, переворот); оригинальный файл с сайта.
  • seasons/: анимированные праздничные варианты обоих написаний в габарите логотипа: Новый год, Рождество, 23 февраля, 8 марта, День матери, День России, Пасха, Чёрная пятница.
  • mail/: оригинальная змейка из писем: snake.gif.
  • favicon/: favicon.svg, favicon.ico, PNG 16–512, apple-touch-icon, значок брендбука для футера.

Всё одним архивом: katalogi-brandbook-files.zip.

Контакты

+7 (495) 540-4949, info@catalogi.ru. Пн-Пт 11-20, Сб 11-18, Вс выходной.