Брендбук · Основы
Версия 1.0 · Сентябрь 2026
БрендбукОсновы
Логотип, цвет и типографика. Всё, что нужно для правильного использования бренда vignetim.
Логотип
Композиции и цветовые варианты
Четыре утверждённые композиции
Горизонтальный · символ
Основной вариант. Веб, документы, презентации, подписи в email.
Вертикальный · символ
Квадратные и вертикальные форматы, соцсети, ролл-апы.
Горизонтальный · значок
Заголовки в приложении, визуалы для магазинов приложений.
Вертикальный · значок
Заставки, рекламные креативы.
Три цветовые версии
Бирюзовый / светлый фон
Белый, Neutral 50, Teal 50.
Белый / бирюзовый фон
От Teal 500 до 800.
Белый / тёмный фон
От Neutral 800 до 900, поверх фотографий.
Также доступно
Для одноцветной печати есть одноцветная тёмная версия. Используйте этот файл вместо перевода в оттенки серого.
Одноцветный тёмный
- Словесный знак всегда пишется строчными буквами и с точкой: vignetim. Никогда не делайте первую букву заглавной и не добавляйте трекинг.
- Никогда не размещайте бирюзовый значок на бирюзовом фоне. Он теряется. На бирюзовом фоне используйте только белый символ.
- Используйте символ или значок отдельно только если название бренда присутствует где-то ещё на той же поверхности: иконка приложения, favicon, фото профиля.
- Никогда не собирайте композиции вручную. Всегда используйте предоставленный файл; никогда не переставляйте элементы.
Охранное поле и минимальный размер
Пространство вокруг логотипа и размеры, сохраняющие читаемость
Оставляйте не менее 0.5 X охранного поля с каждой стороны логотипа. X это высота символа (или значка) в данной композиции. Никакой текст, изображение, линия, другой логотип или край страницы не должны заходить в эту зону.
Минимальные размеры
| Элемент | Цифровые носители | Печать |
|---|---|---|
| Горизонтальная композиция · символ | 140 px | 30 mm |
| Горизонтальная композиция · значок | 160 px | 34 mm |
| Вертикальная композиция · символ | 72 px | 16 mm |
| Вертикальная композиция · значок | 80 px | 18 mm |
| Символ (отдельно) | 20 px | 5 mm |
| Значок (отдельно) | 44 px | 8 mm |
Значения указаны по ширине. При меньших размерах используйте символ или значок отдельно вместо композиции.
Два исключения
- Иконка приложения: правило охранного поля не действует. Значок заполняет всю рамку, а платформа скругляет углы.
- Favicon (от 16 до 32 px): значок становится нечитаемым; используйте только бирюзовый символ на прозрачном фоне.
Рядом с другими логотипами
Оставляйте не менее 1 X между двумя логотипами и выравнивайте их по одинаковой оптической высоте.
Цвет
Один фирменный цвет, одна нейтральная шкала
Фирменный цвет: Teal 500 · #049CB9. Дополнительного фирменного цвета нет; глубину создают оттенки бирюзовой шкалы и нейтральные серые.
Vignetim teal
Нейтральные
Технические значения
- HEX
- #049CB9
- RGB
- 4 · 156 · 185
- CMYK (справ.)
- 98 · 16 · 0 · 27
- PANTONE (прибл.)
- от 313 C до 314 C
CMYK является расчётным справочным значением; конвертируйте его с помощью ICC-профиля типографии.
Пропорции использования
- Белый / Neutral 50
- Воздух
- Neutral 600 до 900
- Текст и структура
- Teal
- Акцент и действие
На каждом экране ровно одно основное действие бирюзового цвета.
Состояния кнопок
Три правила контраста
- Teal 500 не является цветом текста (3.25:1 на белом). Для текста и ссылок используйте Teal 700.
- Белый текст на Teal 500 должен быть не меньше 18 px / 14 pt полужирным; для текста меньшего размера используйте фон Teal 700.
- В тёмном режиме акцентом служит Teal 300 до 400; Teal 500 недостаточно на тёмном фоне.
Типографика
Inter: одна гарнитура, четыре начертания
Inter является единственной гарнитурой бренда. Используются только начертания 400, 500, 600 и 700. Если Inter не удаётся загрузить, используйте системный шрифт, а затем Arial.
Aa Bb Cc Çç Ğğ Iı İi Şş Öö Üü 0123456789
Aa
Regular · 400
Основной текст, длинные тексты.
Aa
Medium · 500
Подписи, заголовки таблиц, выделения.
Aa
SemiBold · 600
Заголовки, кнопки, надзаголовки.
Aa
Bold · 700
Только заголовки рекламных кампаний.
H1 32 / 38 px · 600 · -0.020em
Ваша виньетка готова ещё до границы
H2 24 / 30 px · 600 · -0.016em
Как работает электронная виньетка?
H3 20 / 26 px · 600 · -0.012em
Введите госномер вашего автомобиля
Body 16 / 26 px · 400
Приложение пришлёт вам напоминание, когда до границы останется 30 км.
Body S 14 / 22 px · 400
Цены основаны на официальных тарифах на виньетки в каждой стране.
Overline 11 / 14 px · 600 · +0.11em · CAPS
Страны · Цены · FAQ
Межстрочный интервал: от 1.10 до 1.25 для заголовков, от 1.50 до 1.65 для основного текста. Длина строки от 60 до 75 символов. Всегда выключка влево.
- Не набирайте основной текст прописными. Прописные только для надзаголовков и коротких подписей.
- Не добавляйте трекинг в основной текст и не набирайте его бирюзовым.
- Не растягивайте и не наклоняйте текст; никакого искусственного курсива или искусственного полужирного.
- Используйте не более четырёх уровней на одной поверхности.
Ловушка турецких прописных
При автоматическом преобразовании “i” должна становиться İ. Указывайте lang="tr" в HTML и используйте toLocaleUpperCase('tr') в коде. Иначе “istanbul” превратится в “ISTANBUL”.
Верно и обратное: английскому тексту нужен lang="en", иначе “Size” превратится в “SİZE”.
Языки: наборы latin-ext для TR и RO, cyrillic для UA, latin для DE и EN. Все они входят в Inter. Никогда не меняйте гарнитуру для другого языка.
Недопустимое использование
Чего никогда нельзя делать с логотипом
Этот список не исчерпывающий: любое изменение логотипа, отличающееся от предоставленного файла, считается недопустимым использованием.
Если нужна одноцветная печать, используйте утверждённую одноцветную тёмную версию, а не оттенки серого.
Краткая справка
Весь брендбук с одного взгляда
Карточка цветов
- Teal 500 · бренд#049CB9
- Teal 700 · текст / ссылки#046B80
- Teal 300 · акцент тёмного режима#5FCEE2
- Neutral 900 · заголовки#161B1E
- Neutral 600 · второстепенный текст#565E64
- Neutral 50 · поверхность#F7F8F9
Пять правил
- Используйте логотип из предоставленного файла.
- Оставляйте 0.5 X охранного поля с каждой стороны.
- Teal 500 не является цветом текста. Используйте Teal 700.
- Одна гарнитура: Inter, 400 / 500 / 600 / 700.
- Бирюзовый занимает не более 10% любой поверхности.
Список файлов
- Все логотипыZIP
- vignetim-horizontal-tealPNG
- vignetim-horizontal-whitePNG
- vignetim-horizontal-single-colour-darkPNG
- vignetim-vertical-tealPNG
- vignetim-badge-horizontalPNG
- vignetim-badge-verticalPNG
- vignetim-badgePNG
- vignetim-symbol-teal / whiteПо запросу
- vignetim-appicon-1024По запросу
- vignetim-favicon-16/32/48По запросу
Для печати и широкоформатных носителей запрашивайте векторные файлы (SVG или EPS). PNG только там, где вектор не поддерживается.
Иконка приложения
- App Store (iOS)
- 1024 × 1024 px, без прозрачности
- Google Play
- 512 × 512 px, 32-bit PNG
- Play · баннер приложения
- 1024 × 500 px
- Профиль в соцсетях
- 1000 × 1000 px
Загружайте квадрат на всю площадь без скруглённых углов. Операционная система скруглит их сама.
CSS-переменные
:root {
--brand-500: #049CB9;
--brand-600: #03849E;
--brand-700: #046B80;
--brand-300: #5FCEE2;
--brand-50: #EAF8FB;
--ink-900: #161B1E;
--ink-600: #565E64;
--ink-200: #DDE1E4;
--ink-50: #F7F8F9;
--font-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}Вопросы и согласования
По любому использованию, не описанному в этом брендбуке, или чтобы запросить новый файл, обращайтесь к владельцу бренда.
Версия 1.0 · Сентябрь 2026