Бренд-дизайн
Брендбук СТАРГРАДД
Руководство по визуальному стилю цифровой экосистемы СТАРГРАДД. Фирменные цвета, логотипы, типографика, иконки продуктов и правила их использования.
Палитра
Основные цвета
Цветовая гамма экосистемы СТАРГРАДД построена на контрасте тёплого фона, тёмно-синего текста и контрастного акцентного красного.
Логотип
Основная версия (с подсветкой и 2D)
Логотип представляет собой квадратный знак со скруглёнными углами. Для усиления визуального эффекта на тёмном фоне используется мягкая неоновая подсветка (свечение).
Масштабирование логотипа
128px
64px
32px
16px (Favicon)
Wordmark
Логотип + текст
СТАРГРАДД
СТАРГРАДД
СТАРГРАДД
Типографика
Шрифты экосистемы
Иконки продуктов
Иконки экосистемы СТАРГРАДД
Иконки для всех продуктов экосистемы. Стиль — минималистичный геометрический, с использованием акцентного красного и контрастных цветов. Каждая иконка отражает основную функцию продукта.
Бренд-дизайн
Логотип «СтарГрадд CRM» — облако над бизнесом
Облако с надписью CRM парит над деловым районом: киоск → магазин → высотка — три масштаба бизнеса, три тарифа платформы. Данные стекаются в облако, окна горят — бизнес живёт. Домен платформы cloud.stargrd.ru зашит в сам знак.
Варианты иконки
Основные решения
Три тарифа — одно облако CRM.
Рекомендуемый
Двери зданий — вырезы фона.
Читается даже в 16px.
Favicon
Для мелких размеров
и водяных знаков.
Основной знак
Живая версия (анимированная)
Три тихих цикличных эффекта. Двери статичны: вход в бизнес — постоянная величина, работа — процесс.
Дыхание облака
- translateY ±4px, цикл 3.4s
- платформа «живая», но стабильная
Поток данных
- пунктир бежит снизу вверх, 0.9s
- сделки и документы идут в CRM
Окна бизнеса
- три группы мигают, сдвиг 1s
- киоск, магазин и высотка работают
Масштабирование
Вариант A на всех размерах
Прогрессивное упрощение: ручки и второй ряд окон — с 64px, двери — с 36px (обязательны у всех зданий), 24px — чистые силуэты. Анимированная версия — от 96px, ниже подставляется статичная.
Контрастные фоны
Проверка читаемости
На светлых фонах линия земли и потоки затемняются (#00A9C7). На красном — знак полностью белый, двери, окна и надпись CRM становятся вырезами цвета фона.
Wordmark
Иконка + текст «СТАРГРАДД CRM»
Горизонтальный (основной)
С дескриптором
CRM-платформа от СТАРГРАДД · cloud.stargrd.ru
Применение
Favicon во вкладке браузера
Конструкция
Геометрия сцены
Тарифная ось
Правила построения сцены
- → Базовая линия зданий — одна, читается рост: киоск → магазин → высотка (слева направо)
- → Облако = 3 круга (r15/19/14) + капсула-основание 68×18, r9
- → Надпись CRM — белым Russo One, letter-spacing 1.5, по центру облака
- → Двери у всех трёх зданий — приглушённый белый rgba(255,255,255,.5), до земли
- → Козырьки киоска и магазина — #F4A261 (цвет пламени ракеты Лаунчера)
- → Потоки данных #00E5FF идут от зданий вверх в облако (пунктир 3/5)
- → Линия земли rgba(255,255,255,.14) на тёмном, rgba(26,43,76,.18) на светлом
- → Охранное поле: 0.25× ширины знака с каждой стороны
Палитра
Цвета логотипа
Гайдлайн
Правила использования (СтарГрадд CRM)
Допустимо
- Анимированный лого — на тёмном фоне, от 96px, только 3 заявленных эффекта
- Статичный лого — документы, презентации, печать (min 64px)
- Иконка — плитки, меню, UI (min 24px, на 24px — версия-силуэт)
- Favicon — бейдж от 16px, PNG 180×180 для Apple
- Инверсия на красном: двери, окна и CRM — вырезы цвета фона
- Светлые фоны — с тёмной землёй и потоками #00A9C7
Запрещено
- Рисовать здание без двери (с 36px дверь обязательна у всех)
- Делать двери ярче окон или использовать контрастные ручки
- Менять надпись CRM, шрифт, регистр или язык
- Нарушать порядок роста: киоск → магазин → высотка
- Анимировать что-либо помимо облака, потоков и окон
- Использовать анимацию на светлом фоне и в печати
- Логотип ниже 64px, иконка ниже 24px (использовать упрощения)
Бренд-дизайн
Логотип «Калинка»
Три варианта иконки, wordmark, масштабирование, проверка на контрастных фонах и конструктивная сетка.
Варианты иконки
Основные решения
с бликами и листочками.
Рекомендуемый
Чистая геометрия,
хорошо читается в 16px.
Акцент на безопасность
и защиту пользователя.
Масштабирование
Вариант A на всех размерах
Вариант B на всех размерах
Контрастные фоны
Проверка читаемости
На красном фоне иконка инвертируется в белую версию.
Wordmark
Иконка + текст «КАЛИНКА»
Горизонтальный (основной)
С дескриптором
Браузер от СТАРГРАДД
Применение
Favicon во вкладке браузера
Конструкция
Геометрия логотипа
Вариант A — Сетка
Вариант B — Сетка
Палитра
Цвета логотипа
Гайдлайн
Правила использования (Калинка)
Допустимо
- Использование на тёмном фоне (оригинал)
- Использование на светлом фоне (оригинал)
- Инверсия в белую на красном фоне
- Масштабирование от 16px до 256px
- Отступ вокруг иконки ≥ 0.25× размер
Запрещено
- Изменение пропорций и skew-трансформации
- Замена цветов ягод на не из палитры
- Добавление теней, обводок, свечения
- Размещение на сложных фонах без подложки
- Использование меньше 16px (потеря деталей)
Бренд-дизайн
Логотип «Телеграф»
Варианты иконки, масштабирование, wordmark, favicon, конструкция, цвета и правила использования.
Варианты иконки
Телеграфный ключ (морзистский)
с азбукой Морзе и искрой.
Рекомендуемый
только точки.
Чистая геометрия.
и динамичными линиями сигнала.
Новинка
с азбукой Морзе и искрой.
Рекомендуемый
только точки.
Чистая геометрия.
и динамичными линиями сигнала.
Новинка
Масштабирование
Вариант A (Классический ключ) на всех размерах
Wordmark
Иконка + текст «ТЕЛЕГРАФ»
Горизонтальный (основной)
С дескриптором
Мессенджер от СТАРГРАДД
Применение
Favicon во вкладке браузера
Конструкция
Геометрия логотипа (Вариант A и B)
Вариант A и B — Сетка
Вариант A и B — Пропорции
Палитра
Цвета логотипа
Гайдлайн
Правила использования (Телеграф)
Допустимо
- Использование на тёмном фоне (оригинал)
- Использование на светлом фоне (оригинал)
- Инверсия в белую на акцентном фоне
- Масштабирование от 16px до 256px
- Отступ вокруг иконки ≥ 0.25× размер
Запрещено
- Изменение пропорций и skew-трансформации
- Замена цвета акцента на другой
- Добавление теней, обводок, свечения
- Размещение на сложных фонах без подложки
- Использование меньше 16px (потеря деталей)
Гайдлайн
Правила использования бренда СТАРГРАДД
Допустимо
- Использование логотипа на тёмном или светлом фоне (рекомендуемые версии).
- Инверсия в белый цвет на красном фоне (акцентный баннер).
- Масштабирование иконки от 16px до 256px (пропорции строго соблюдать).
- Использование с отступом вокруг не менее 25% от ширины иконки.
- Использование акцентного красного (#D42A3B) для кнопок, ссылок и заголовков.
Запрещено
- Изменять пропорции, растягивать или наклонять логотип.
- Заменять акцентный красный цвет на другие произвольные цвета.
- Размещать логотип на сложных, "шумных" фонах без подложки.
- Использовать логотип в размере меньше 16px (теряет читаемость).
- Применять подложки с градиентами для основного логотипа (подложка только сплошная).
- Использовать шрифт Russo One для набора длинных текстов.