Рекомендации по ресурсам бренда White Label

В White Label Lite предусмотрены отдельные поля для светлого и темного логотипов, фавикона, основного и акцентного цветов. Это руководство поможет подготовить понятный комплект фирменных материалов, использовать принимаемые формой файлы и проверить результат до того, как его увидят клиенты.

Загрузка логотипов

Предусмотрены две загрузки: светлый логотип для светлого фона и темный логотип для темного. По возможности загрузите оба, а затем убедитесь в предпросмотре Branding, что каждый остается читаемым в предназначенной для него теме.

Поддерживаемые типы файлов:

• PNG: лучший вариант для прозрачности, рекомендуемый в большинстве случаев.
• JPG / JPEG: подходит для логотипов со сплошным фоном; прозрачность не поддерживается.
• SVG: пока не поддерживается, поскольку мы работаем над безопасным отображением встроенных скриптов.

Максимальный размер: 1 MB на файл. Файл большего размера сожмите через TinyPNG или pngquant. Обычный логотип можно сжать до размера менее 50 KB без заметной потери качества.

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

Фон:

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

Фавикон

Для фавикона предусмотрена отдельная загрузка, и он не создается автоматически из логотипа. Используйте простой квадратный значок PNG, JPG или ICO размером до 1 MB. При размере вкладки браузера монограмма или символ обычно выглядят лучше полной словесной марки.

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

Выбор цветов

Предусмотрены два цветовых поля:

• Основной цвет: главный цвет кнопок, ссылок и активных состояний.
• Акцентный цвет: вспомогательный цвет для выделения.

Вводите шестнадцатеричные значения, например #3b82f6. Перед сохранением проверьте результат в интерактивном предпросмотре.

Выбор основного цвета

Основной цвет посетители видят чаще всего. Учтите три момента:

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

Выбор акцентного цвета

Акцентный цвет дополняет основной. Он должен:

• Заметно отличаться от основного, без двух почти синих оттенков
• Дополнять основной, а не конкурировать с ним
• Четко восприниматься рядом с основным

Удачное сочетание: основной цвет является глубоким насыщенным фирменным цветом, а акцентный представляет собой более светлый дополнительный тон. Пример: основной #2563eb (indigo-600), акцентный #10b981 (emerald-500).

Контраст и доступность

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

Для проверки сочетания текста и фона подойдет инструмент WebAIM. Окончательно оцените цвет в предпросмотре, поскольку окружающий интерфейс также влияет на восприятие.

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

Отображаемое имя

Отображаемое имя используется в брендированной панели, веб-почте и поддерживаемых почтовых элементах. Подходят три шаблона:

• «Почта ВашегоБренда»: ясно указывает на почтовую службу. Профессиональный вариант для реселлеров.
• «ВашБренд»: только название бренда. Более лаконичный вариант, если почта входит в широкий набор продуктов.
• «Панель ВашегоБренда»: подчеркивает интерфейс. Полезно для четкого обозначения нескольких фирменных продуктов.

Имя должно узнаваться с первого взгляда. Вместо ограничения по символам проверьте предпросмотр на узком экране и в обеих темах.

Отображаемое имя появляется в:

• Навигации панели и веб-почты
• Брендированной странице входа и заголовках браузера
• Поддерживаемых элементах транзакционных писем

Перед сохранением

До нажатия Save changes убедитесь, что файлы меньше 1 MB, оба логотипа читаются в соответствующем предпросмотре, фавикон представляет собой простой квадратный значок, основной цвет дает достаточный контраст, а отображаемое имя естественно звучит как имя отправителя.

После сохранения откройте активный брендированный хост в приватном окне браузера. Так вы не примете изображение или фавикон из кеша за текущую версию.

Простой процесс подготовки ресурсов

1. Начните с исходных файлов логотипа, а не со снимка экрана или файла, скопированного с сайта.
2. Экспортируйте одну версию для светлого и одну для темного фона.
3. Создайте отдельный квадратный фавикон из самой узнаваемой части знака.
4. Добавьте название и цвета в Branding, затем сравните предпросмотр письма и веб-почты.
5. Сохраните, проверьте активный хост на телефоне и в настольном браузере и храните исходники там, где команда сможет их обновить.

Последующее обновление

Фирменные ресурсы можно обновить, не заменяя DNS-запись существующего брендированного хоста. После визуального изменения всегда проверяйте активный хост заново.

Если вы загрузили неверный ресурс или выбрали нечитаемый цвет, исправьте его в Branding и снова сохраните. При проверке замены учитывайте обычное кеширование браузера.

Автоматизация через API и MCP

Если у интеграции есть необходимые разрешения, REST API или MCP позволяют управлять настройками и ресурсами бренда. Действуют те же типы файлов и ограничение 1 MB. Для окончательной визуальной проверки используйте панель и предпросмотр.

Поддерживаемые операции описаны в руководстве по White Label Branding API и MCP.

Частые ситуации

«В боковой панели логотип выглядит хорошо, а на телефоне размыто». Загрузите более четкий оригинал с высоким разрешением, сохраните и проверьте активный хост на телефоне. Не полагайтесь только на предпросмотр в настольном браузере.

«Основной цвет подходит для панели, но текст кнопки трудно читать». Выберите более темный или насыщенный оттенок и проверьте его в предпросмотре и на активном хосте.

«Цветной фон логотипа не совпадает с панелью». Если логотип позволяет, экспортируйте прозрачную PNG-версию. Сравните светлый и темный варианты на предназначенном фоне.

«Можно ли использовать разные логотипы в письмах и панели?» Используйте светлый и темный варианты из Branding. Проверьте поддерживаемый предпросмотр писем и активные клиентские элементы, прежде чем обещать определенный вид.

«Что насчет темного режима?» Панель поддерживает светлую и темную темы, и для каждой загружается отдельный логотип. Светлый логотип отображается на светлом фоне, темный на темном. Поэтому можно использовать темный рисунок на светлом и белый или светлый логотип на темном фоне.

«Можно ли загрузить фавикон отдельно от логотипа?» Да. У фавикона есть отдельное поле (PNG, JPG или ICO, максимум 1 MB), и он не создается из логотипа. Загрузите простой узнаваемый значок для вкладки браузера.

Что дальше

• Настройка White Label Lite: активация и настройка DNS.
• Что остается с брендом TrekMail: где клиенты еще могут увидеть TrekMail.
• Частые вопросы о ценах White Label Lite: вопросы об оплате и валюте.
• Руководство по White Label Branding API и MCP: загрузка логотипов и настройка бренда через REST или MCP.