Brand Guide v1.1
Чернігів Європейський / Chernihiv European

Веб-гайд використання логотипу та іконок

Інструкція для коректного використання повних версій логотипу (UA/EN) та скорочених (Icon/Mark).

1) Система логотипів

UA/EN Wordmark + Icon/Mark

Повна версія (Wordmark)

Використовується, коли текст має читатися. Є локалізації UA та EN.

  • UA Wordmark — основний для українських матеріалів.
  • EN Wordmark — для міжнародних матеріалів та англомовних сторінок.
  • Візуальні відмінності (ширина/кернінг) допустимі через різну довжину слів.
Ключове правило: UA та EN — це локалізація одного бренду. Незмінні: кольори, стиль літер, логіка "верхній рядок синій / нижній жовтий", охоронне поле.
UA Wordmark UA Wordmark (Full Color)
EN Wordmark EN Wordmark (Full Color)
Icon UA Vertical Icon UA Vertical
Icon UA Horizontal Icon UA Horizontal
Icon EN Icon EN
Версія Коли використовувати Формат носія
UA Wordmark Основні комунікації українською, сайт UA, документи Презентації, постери, веб-сторінки, друк
EN Wordmark Міжнародні матеріали, англомовні сторінки, проєкти/гранти Презентації, one-pager, звіти, веб
UA Icon Vertical Дуже малий розмір або квадрат/коло Аватар, фавікон, бейдж, іконка застосунку
UA Icon Horizontal Малі розміри у вузьких по висоті блоках Хедер, плашка, навігація
EN Icon Малий розмір для англомовних носіїв Аватар, фавікон, обкладинка, бейдж

2) Кольори

Офіційна палітра (HEX / RGB / CMYK)
Primary Blue#0033A0
RGB0 / 51 / 160
CMYK*100 / 68 / 0 / 37
Primary Yellow#FFCC00
RGB255 / 204 / 0
CMYK*0 / 20 / 100 / 0
White#FFFFFF
ВикористанняФон / інверсія
ПриміткаДля темних фонів — White-версія

* CMYK — орієнтовні значення. Для друку бажано робити пробний відбиток (proof), бо папір/друкарня можуть змістити відтінок.

3) Яку версію коли використовувати

Читабельність → Wordmark, малий розмір → Icon

Коли обирати Wordmark (повний логотип)

  • Є достатньо місця і текст має читатися.
  • Офіційні документи, презентації, постери, сайт.
  • UA або EN — залежно від мови носія.

Коли обирати Icon (скорочена версія)

  • Малий розмір (іконка, аватар, фавікон).
  • Квадратний/круглий контейнер.
  • Тісні блоки навігації або плашки.
Не змішувати UA та EN одночасно в одному носії "просто так". Двомовні макети робити свідомо: один основний логотип + другий як допоміжний, з чіткою ієрархією.

4) Охоронне поле (Clear space)

Щоб логотип "дихав" і не конфліктував з іншими елементами

Як вимірювати

Позначимо X = висота символу верхнього рядка (або висота Ч в іконці). Мінімальне охоронне поле навколо логотипу: 0.5X.

Clear space = 0.5X Для іконок можна 0.75X

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

Коли переходити з Wordmark на Icon
Версія Digital Print Порада
Wordmark (UA/EN) ≥ 220 px (ширина) ≥ 35 мм (ширина) Нижче — переходити на Icon
Icon / Mark ≥ 24 px (краще 32+) ≥ 10 мм Для фавікону тестувати читабельність
Правило: не стискаємо Wordmark до нерозбірливого стану — перемикаємось на Icon.

6) Фони та контраст

Full Color / Monochrome залежно від фону

Full Color (синій + жовтий)

  • Рекомендовано: білий або дуже світлий фон.
  • Не рекомендується: фото/патерни без підкладки.
  • Жовтий елемент не ставити на світлий/жовтий фон.

Монохром / інверсія

  • Monochrome light bg — для ч/б документів і друку на світлому фоні.
  • Monochrome black bg — для темних фонів (без обводок/тіней).
  • На фото — тільки через темну плашку/затемнення під логотипом.
Light background — UA Monochrome light bg UA
Light background — EN Monochrome light bg EN
Dark background — UA Monochrome black bg UA
Dark background — EN Monochrome black bg EN

7) Do / Don't

Найчастіші помилки та правильні альтернативи

Do (робіть так)

  • Використовуйте офіційні файли (SVG/PDF для вектору).
  • Масштабуйте тільки пропорційно.
  • Full Color — на світлому; Monochrome — на темному.
  • На малих розмірах — використовуйте Icon.
  • Дотримуйтесь охоронного поля (мінімум 0.5X).

Don't (не робіть так)

  • Не змінюйте відтінки синього/жовтого.
  • Не додавайте тіні, обводки, градієнти, 3D.
  • Не розтягуйте по ширині/висоті.
  • Не міняйте кернінг/міжряддя у готовому логотипі.
  • Не ставте на шумні фони без підкладки.

8) Файли пакету (рекомендація)

Що передати замовнику

Vector (must-have)

  • UA Wordmark (Full Color).svg
  • EN Wordmark (Full Color).svg
  • Icon UA vertical.svg
  • Icon UA horizontal.svg
  • Icon EN.svg
  • Monochrome light bg UA.svg / EN.svg
  • Monochrome black bg UA.svg / EN.svg

PNG / Web

  • Basic logo.png — базова растрова версія
  • Wordmark UA/EN: 512px, 1024px (transparent)
  • Icons: 128px, 256px, 512px
  • Favicons: 32, 48, 180 (Apple)
  • Опційно: WebP для сайту
Папка Вміст Для чого
01_Source Figma link / AI (якщо є) / редаговані джерела Майстер-файли
02_Vector SVG, PDF (UA/EN wordmark + icons + monochrome) Друк і веб
03_PNG PNG transparent + PNG на білому (за потреби) Швидке використання
04_Web favicons, webp, meta assets Сайт/веб-додатки
05_Guide Цей гайд (HTML/PDF) Правила використання

Дисклеймер: шрифт та авторство

При створенні логотипу «Чернігів Європейський / Chernihiv European» було використано шрифт Chernihiv Free Font — авторський декоративний шрифт, натхненний архітектурними та культурними символами міста Чернігів.

Авторка шрифту — @daraxatum. Шрифт є вільним для використання.

Chernihiv Free Font на Behance @daraxatum в Instagram