Одно имя — много продуктов
АссортиZ — зонтичный бренд: платформа, внутри которой живут самостоятельные продукты. Слово «ассорти» означает набор, коллекцию — и бренд честно это отражает.
Суффикс .AZ — носитель идентичности продукта. Имя продукта набирается нейтральным цветом, суффикс окрашивается в его фирменный цвет: Эфир.AZ голубой, ЗБС.AZ хвойный, ИИ.AZ фиолетовый, BI.AZ янтарный, Tasker.AZ шалфейный, PSA-Control.AZ индиго, Фолиант.AZ терракотовый. По цвету суффикса пользователь мгновенно понимает, где находится. Та же роль у финальной Z в написании «АссортиZ», когда речь о платформе целиком.
На главной assortiz.ru, где продукты собраны списком, Z остаётся нейтральной либо принимает градиент из всех продуктовых акцентов — это «витрина ассорти».
Единство
Один шрифт, одна сетка, одни нейтральные цвета. Продукты узнаются как семья.
Различимость
Каждый продукт получает собственный акцент — он один (или пара, как у ЗБС), но применяется последовательно.
Масштабируемость
Новый продукт = новое имя перед суффиксом .AZ + новый акцент. Что именно изменить — чек-лист в разделе 12.
«Продукт».AZ
Формула нейминга едина: имя продукта плюс суффикс платформы .AZ. В брендовых материалах — сайт, брендбук, презентации — суффикс окрашивается в акцент продукта. Внутри рабочего интерфейса продукта он приглушается до вторичного текста (--ink-2): человек уже внутри, и платформа не должна спорить с названием.
| Полное имя | Короткое имя | URL | Акцент |
|---|---|---|---|
| Эфир.AZ | Эфир | assortiz.ru/efir/ | Голубой |
| ЗБС.AZ | ЗБС | assortiz.ru/crm/ | Хвоя + медь |
| ИИ.AZ | ИИ | assortiz.ru/ii/ | Фиолетовый |
| BI.AZ | BI | assortiz.ru/bi/ | Янтарный |
| Tasker.AZ | Tasker | assortiz.ru/tasker/ | Шалфейный (тил) |
| PSA-Control.AZ | PSA | assortiz.ru/psa/ | Индиго |
| Фолиант.AZ | Фолиант | assortiz.ru/foliant/ | Терракота |
Правила написания
«АссортиZ» — прописная А, две «с», латинская Z в конце. Всегда одним словом, без пробелов.
Имя продукта плюс суффикс .AZ без пробелов: Эфир.AZ, ЗБС.AZ, ИИ.AZ, BI.AZ, Tasker.AZ, PSA-Control.AZ, Фолиант.AZ.
Внутри продукта допустимо короткое имя: «Эфир», «ЗБС», «ИИ», «BI», «Tasker», «PSA», «Фолиант». Для ЗБС допустим подзаголовок Закупки · Бюджет · Склад.
Суффикс в акценте продукта — на сайте, в брендбуке, в презентациях. В рабочем интерфейсе продукта — приглушённым, токеном --ink-2 (пример: шапка Эфира).
Нельзя: «Ассортиз» (латинская z), «AssortiZ» кириллицей+латиницей вперемешку, «Ассорти Z» с пробелом, «Эфир AZ» без точки, «.az» строчными.
Нельзя называть продукт «CRM» — он называется ЗБС.AZ. CRM допустимо только как обозначение класса систем («это наша CRM»), но не как имя.
Текстовый логотип
Основной знак — словесный, шрифт Unbounded Bold. Цветной элемент один: суффикс .AZ у продукта либо финальная Z у платформы. Переключите продукт и тему на панели сверху, чтобы увидеть варианты.
Охранное поле
Со всех сторон — свободное поле не меньше высоты прописной буквы в имени продукта. Минимальный размер словесного знака: 24 px на экране, 8 мм в печати. Мельче суффикс .AZ уже не читается — там ставьте иконку продукта.
Фавикон и аватар
В малых размерах словесный знак не используется — берите готовую иконку продукта из раздела Иконки: она нарезана под все размеры, от вкладки браузера до домашнего экрана.
Знак + слово
У каждого продукта свой графический знак — для иконки приложения, аватара и узких мест интерфейса. Готовые файлы всех размеров, от вкладки браузера до домашнего экрана, лежат в разделе Иконки.
Эфир.AZ
Мессенджер. Вихрь-сигнал с хвостом речевого пузыря, голубой #2298DD.
ЗБС.AZ
Закупки, бюджет, склад. Обвязанный ящик, хвоя #1D5C4D и медь #B4633A.
ИИ.AZ
Помощник. Мозг с нейросетью, фиолетовый #7C5CE6.
BI.AZ
Аналитика. Растущие линии графика, янтарный #E08A00.
Tasker.AZ
Задачник. Канбан-доска с карточками, шалфейный #3E8E8A.
PSA-Control.AZ
Приёмка и расценка продукции. Слитки с ценником, индиго #3B5BDB.
Фолиант.AZ
Читалка и библиотека. Раскрытая книга со строками текста, терракота #9E4A34.
АссортиZ · зонтик
Общий знак платформы — на главной, в презентациях и там, где продукт не указан.
Правила использования знаков
Знак живёт в своей скруглённой плашке — это часть рисунка. Не обрезайте её в круг и не добавляйте свою рамку: платформы скругляют иконку сами, поверх.
В интерфейсе продукта — знак этого продукта. На витрине — зонтичный знак или набор всех шести.
Не растягивать и не наклонять — соотношение сторон всегда 1:1. Не перекрашивать: цвет продукта и есть опознавательный знак. Не брать мелкий файл и увеличивать — берите нужный размер из раздела Иконки.
Три темы, шесть акцентов
Нейтральная база общая для всех продуктов. Акцент — один на продукт (у ЗБС — пара: хвоя + медь). В тёмной и серой темах акцент светлее, чтобы сохранить контраст.
Нейтральная база
Светлая тема
Серая тема
Тёмная тема
Эфир · Голубой
лёгкость, воздух, скорость общенияСветлая тема
Тёмная тема
ЗБС · Хвоя + медь
надёжность, дело, тёплый порядок — как в рабочем ЗБССветлая · основной (хвоя)
Светлая · вторичный (медь)
Тёмная · основной
Тёмная · вторичный
ИИ · Фиолетовый
интеллект, будущее, глубинаСветлая тема
Тёмная тема
BI · Янтарный
данные, ясность, тёплая аналитикаСветлая тема
Тёмная тема
Контраст: светлая — белый текст на амбере (#E08A00); тёмная — ТЁМНЫЙ текст (#101114) на светлом амбере (#F5B542). Статусы BI: успех #1D8A5B, ошибка #C4453A, внимание — медь #B4633A.
Tasker · Шалфейный
спокойствие, фокус, поток задач — комфортно для долгой работыСветлая тема
Тёмная тема
Спокойный сине-зелёный — акцент читается только на действиях (кнопка «Новая задача», буква Z, полоса-поток стадии, выбранная карточка). Контраст: светлая — белый текст на шалфее (#3E8E8A); тёмная и серая — ТЁМНЫЙ текст (#101114/#1E1F22) на светлом тиле (#6FC3BE). Отличается от хвои ЗБС: тил холоднее и голубее, хвоя — глубокая зелёная.
PSA-Control · Индиго
точность, счёт, финансовая надёжность — «стальной» характер учётной системыСветлая тема
Тёмная тема
Глубокий индиго — про счёт до копейки: акцент на кнопках действий, ссылках и числовых итогах, но НЕ на статусах (успех, ошибка и внимание берут свои семантические цвета). Контраст: светлая — белый текст на индиго (#3B5BDB); тёмная и серая — ТЁМНЫЙ текст (#101114/#1E1F22) на светлом индиго (#5C7CFA). Отличается от голубого Эфира: индиго темнее и уходит в синий, голубой Эфира светлее и «воздушнее».
Фолиант · Терракота
кожаный переплёт, тёплая бумага, спокойное чтениеСветлая тема
Тёмная тема
Терракота — цвет переплёта и тёплой бумаги: акцент достаётся кнопке «Читать», прогрессу чтения, корешку обложки и активной полке. Сам текст книги остаётся нейтральным — читалка не должна спорить с тем, что в ней читают. Контраст: светлая — белый текст на терракоте (#9E4A34); тёмная и серая — ТЁМНЫЙ текст (#101114/#1E1F22) на светлой терракоте (#D9795E). Отличается от янтарного BI: терракота краснее и глуше, янтарь — жёлтый и звонкий; от меди ЗБС — тем, что медь у ЗБС вторичная, а здесь терракота основная.
Правила применения цвета
Акцент — для действий: главные кнопки, ссылки, активные состояния, суффикс .AZ, прогресс.
Tint — для мягких подложек: бейджи, выделения, фоновые блоки. Текст на тинте — цвет Deep.
В тёмной теме текст на акцентных кнопках — тёмный (#101114), в светлой — белый.
Нельзя смешивать акценты двух продуктов на одном экране (исключение — витрина на главной).
Нельзя красить акцентом длинный текст, фоны целых страниц и второстепенные элементы.
Три шрифта, три роли
Все шрифты бесплатные, с полной кириллицей, доступны в Google Fonts — одинаково работают на сайте и в интерфейсах продуктов.
Заголовки, логотип, крупные цифры. Используется дозированно — не ниже 17 px.
Основной текст интерфейса и сайта. Manrope спокоен, отлично читается в обоих режимах и держит мелкие кегли: подписи, таблицы, навигацию, кнопки. Насыщенность 400 для текста, 600–700 для интерактивных элементов.
Шкала размеров
Иконки, тени, отступы, доступность
То, что раньше жило только в коде и передавалось на словах. Без этих правил каждый новый экран собирается «на глаз» и через полгода расходится с остальными.
Иконки интерфейса — штриховые, не залитые. Сетка 24×24, толщина линии 2 px, концы и углы скруглённые. Размер в интерфейсе — 18–20 px, в плотных списках 16 px. Цвет наследуется от текста (currentColor), акцентом красим только активное состояние. Не смешивайте наборы: залитая иконка рядом со штриховой сразу видна.
Тени — две, обе нейтральные. --shadow-1 для карточек и полей в покое, --shadow-2 для всплывающего: меню, подсказки, модальные окна. Третьей ступени нет. Тень всегда серая — цветной тени под акцентом не бывает.
Отступы кратны 4: 4, 8, 12, 16, 24, 32, 48. Внутри карточки — 16 или 24 px, между карточками — 16 px, между разделами — 48 px. Ширина колонки с текстом не больше 1120 px, читаемая строка — до 70 символов.
Состояния обязательны все четыре: покой, наведение (фон на тон темнее), фокус с клавиатуры (outline: 2px solid var(--accent) с отступом 2 px — убирать нельзя, это единственный способ навигации для части людей), нажатие. Плюс отключённое: прозрачность 0.5, курсор обычный.
Доступность — не опция. Контраст текста к фону не ниже 4.5:1, крупного — 3:1. Область нажатия не меньше 44×44 px даже у мелкой иконки. Анимации выключаются при prefers-reduced-motion. У каждой картинки осмысленный alt, у декоративной — пустой.
Не заводите новых теней, радиусов и ступеней отступов «для этого экрана». Если чего-то не хватает — это разговор про систему, а не про экран.
Как мы говорим
Тон один для всей экосистемы, но акценты разные: Эфир — живее, ЗБС и PSA-Control — деловитее и суше (там считают деньги), ИИ — точнее, BI и Tasker — нейтрально-рабочие, Фолиант — спокойнее и тише, там читают. Без канцелярита и без панибратства.
Спокойные, уверенные, по делу. Объясняем сложное простыми словами. Не продаём агрессивно — показываем пользу.
Не используем «инновационный», «революционный», «лучший на рынке». Не кричим caps lock'ом. Не шутим там, где пользователь теряет деньги или сроки.
✓ «Заявка отправлена на согласование» · ✓ «Период сбора открыт до 15 числа» · ✕ «Ваша заявка успешно зарегистрирована в системе!»
Живая витрина UI
Компоненты на токенах — при переключении темы или продукта перекрашиваются автоматически. Так устроена вёрстка на assortiz.ru и в продуктах.
assortiz.ru — список продуктов
Единственное место, где все акценты встречаются на одном экране. Каждая карточка ведёт на свой раздел и несёт свою окрашенную Z.
Нажмите карточку — откроется гайд продукта с живыми компонентами, темами и примерами на токенах.
Эфир.AZ
Быстрое общение команды: чаты, каналы, звонки.
Гайд Эфира →
ЗБС.AZ
Закупки, бюджет и склад — три контура в одном продукте.
Гайд ЗБС →
ИИ.AZ
Умный помощник внутри всех продуктов платформы.
Гайд ИИ →
BI.AZ
Платформа дашбордов и аналитики: данные под контролем.
Гайд BI →
Tasker.AZ
Задачи и канбан-доски: планирование работы команды.
Гайд Tasker →
PSA-Control.AZ
Приёмка и расценка продукции: акты, план-факт, баланс долгов.
Гайд PSA →
Фолиант.AZ
Читалка и библиотека компании: общие полки, каталог, чтение с синхронизацией.
Гайд Фолианта →На примерах
Типичные ошибки, которые ломают узнаваемость. Сравнивайте визуально — так проще передать подрядчикам.
✓ Правильно
Z в акценте продукта, остальные буквы нейтральные, шрифт Unbounded.
Один акцент на экране, кнопка на токене --accent.
✕ Неправильно
Градиент на всём слове внутри продукта — только на витрине.
Градиентная кнопка и смешение акцентов двух продуктов.
Что нужно изменить, чтобы добавить восьмой
Имя и акцент — только начало. Ниже полный список: пропустите пункт — получите разнобой, который потом ищется по всему брендбуку.
Выберите акцент. Он должен читаться на светлом и тёмном фоне и не сливаться с занятыми: голубой, хвойный, фиолетовый, янтарный, шалфейный, индиго, терракотовый. Контраст текста на акценте — не ниже 4.5:1. К акценту нужны ещё три оттенка: hover (темнее примерно на 12%), tint (очень светлая подложка), deep (для текста на светлом, темнее примерно на 40%). В тёмной теме акцент берётся светлее основного.
Пропишите токены в tokens.css и в блоке :root этой страницы — по четыре значения на каждую из трёх тем.
Добавьте продукт в скрипты: brandbook.js (имя и токены для экспорта) и icons/icons.js (карточка со скачиванием).
Нарежьте иконку во все размеры и положите в brandbook/icons/имя/ — какие размеры нужны, смотрите в разделе Иконки.
Заведите страницу-гайд по образцу любого существующего и добавьте пункт в навигацию — на всех страницах брендбука, иначе меню разъедется.
Добавьте карточку в витрину продуктов ниже и на главную сайта.
Не заводите под продукт новые шрифты, скругления или нейтральные цвета. Отличается только акцент — всё остальное общее, в этом и смысл системы.
Коротко: как не сломать бренд
Одна тема — один нейтральный набор. Один продукт — один акцент (ЗБС: хвоя + медь). Суффикс .AZ всегда в акценте продукта.
Unbounded — только заголовки и логотип. Manrope — всё остальное.
Скругления: 12 px для кнопок и полей, 16–20 px для карточек. Сетка кратна 4 px.
Никаких градиентов на кнопках, теней цветом акцента и произвольных оттенков «на глаз».
Не вводить новые шрифты и цвета для отдельного лендинга — новый продукт получает только новый акцент.