vignetim.

Брендбук · Основи

Версія 1.0 · Вересень 2026

БрендбукОснови

Логотип, колір і типографіка. Усе, що потрібно для правильного використання бренду vignetim.

Завантажити PDFЗавантажити логотипи
01 · ЛоготипВільне поле та розмір

Вільне поле та мінімальний розмір

Простір навколо логотипа й розміри, що зберігають читабельність

Залишайте щонайменше 0.5 X вільного поля з кожного боку логотипа. X це висота символу (або значка) у цій композиції. Жоден текст, зображення, лінія, інший логотип чи край сторінки не можуть заходити в цю зону.

Пунктир = межа логотипа · Затінена зона = вільне поле
Пунктир = межа логотипа · Затінена зона = вільне поле
Вертикальна композиція · X = висота символу
Вертикальна композиція · X = висота символу
Значок · X = висота значка
Значок · X = висота значка

Мінімальні розміри

ЕлементЦифрові носіїДрук
Горизонтальна композиція · символ140 px30 mm
Горизонтальна композиція · значок160 px34 mm
Вертикальна композиція · символ72 px16 mm
Вертикальна композиція · значок80 px18 mm
Символ (окремо)20 px5 mm
Значок (окремо)44 px8 mm

Значення вказано за шириною. Якщо розмір менший, використовуйте символ або значок окремо замість композиції.

Два винятки

  • Іконка застосунку: правило вільного поля не діє. Значок заповнює всю рамку, а платформа заокруглює кути.
  • Favicon (16 до 32 px): значок стає нечитабельним; використовуйте лише бірюзовий символ на прозорому фоні.

Поруч з іншими логотипами

Залишайте щонайменше 1 X між двома логотипами й вирівнюйте їх за однаковою оптичною висотою.

02 · КолірКолірна палітра

Колір

Один фірмовий колір, одна нейтральна шкала

Фірмовий колір це Teal 500 · #049CB9. Додаткового фірмового кольору немає; глибину створюють відтінки бірюзової шкали та нейтральні сірі.

Vignetim teal

Нейтральні

Технічні значення

HEX
#049CB9
RGB
4 · 156 · 185
CMYK (довід.)
98 · 16 · 0 · 27
PANTONE (прибл.)
313 C до 314 C

CMYK це розрахункове довідкове значення; конвертуйте його за допомогою ICC-профілю друкарні.

Пропорції використання

70%
20%
10%
Білий / Neutral 50
Простір
Neutral 600 до 900
Текст і структура
Teal
Акцент і дія

На кожному екрані рівно одна основна дія в бірюзовому кольорі.

Стани кнопок

Звичайний · Teal 500
Наведення · Teal 600
Натискання · Teal 700
Другорядна

Три правила контрасту

  1. Teal 500 не є кольором тексту (3.25:1 на білому). Для тексту й посилань використовуйте Teal 700.
  2. Білий текст на Teal 500 має бути щонайменше 18 px / 14 pt жирним; для меншого тексту використовуйте фон Teal 700.
  3. У темному режимі акцентом є Teal 300 до 400; Teal 500 недостатньо на темному фоні.
03 · ТипографікаInter

Типографіка

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. Ніколи не змінюйте гарнітуру для іншої мови.

01 · ЛоготипНеправильне використання

Неправильне використання

Чого ніколи не можна робити з логотипом

Цей список не вичерпний: будь-яка зміна логотипа, що відрізняється від наданого файлу, вважається неправильним використанням.

Неправильно: Спотворення пропорцій
Спотворення пропорцій
Неправильно: Поворот
Поворот
Неправильно: Зміна кольору
Зміна кольору
Неправильно: Застосування градієнта
Застосування градієнта
Неправильно: Додавання контуру
Додавання контуру
Неправильно: Тіні та ефекти
Тіні та ефекти
Неправильно: Перестановка елементів
Перестановка елементів
Неправильно: Малоконтрастний фон
Малоконтрастний фон
Неправильно: Перенабір словесного знака
Перенабір словесного знака
Неправильно: Зміна форми значка
Зміна форми значка
Неправильно: Порушення вільного поля
Порушення вільного поля
Неправильно: Розміщення в зайвій рамці
Розміщення в зайвій рамці
Неправильно: Застосування прозорості
Застосування прозорості
Неправильно: Великі літери та міжлітерний інтервал
Великі літери та міжлітерний інтервал
Неправильно: Перетворення у відтінки сірого
Перетворення у відтінки сірого

Якщо потрібен одноколірний друк, використовуйте затверджену одноколірну темну версію, а не відтінки сірого.

Коротка довідкаУсе на одній сторінці

Коротка довідка

Увесь брендбук з одного погляду

Картка кольорів

  • 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