Бренд Статут · Brand Guidelines · Демонстраційна версія v3.0
БРЕНД СТАТУТ «ПІДРОЗДІЛ»
[Назва підрозділу] — повна документація бренду (шаблон)
Inter · 25.7° Slant Identity · Демонстраційна версія · Red Cats Agency
01 / Бренд-платформа
Сутність бренду та позиціонування
[Назва підрозділу] — [коротка характеристика підрозділу: рік формування, профіль, ключова спеціалізація]. Цей розділ — шаблон: замініть текст у квадратних дужках власними даними, збережіть структуру та логіку блоків.
Бренд будується навколо однієї ідеї — [Слоган підрозділу]: спокійна впевненість без зайвих слів. Ми не кричимо про досягнення — ми робимо свою роботу тихо, професійно та ефективно. Формулювання слогана має бути коротким, фактичним і придатним для повторення в усіх каналах.
Місія
[Місія підрозділу — одне речення]
Що підрозділ робить і для кого. Професіоналізм, порядок, людяність — приклад формулювання.
Комунікаційний слоган
[СЛОГАН ПІДРОЗДІЛУ]
Не кричить — робить. Факти замість епітетів. Спокійна впевненість.
Архетип
[Архетип, напр. Мудрий Герой]
Сила через стриманість і професіоналізм. Не хаос — порядок.
Девіз підрозділу
[Офіційний девіз]
Офіційний девіз. Шеврони, церемонії, документи.
Ключовий актив
[Унікальна перевага №1]
Техніка, підрозділ чи компетенція, яка відрізняє вас від інших.
Позиціонування
[Формула позиціонування]
Одне речення: хто ми, у чому сильні, чим відрізняємось.
Ієрархія слоганів
| Рівень | Слоган | Де використовується | Пріоритет |
|---|---|---|---|
| Рівень 1 | [Слоган рівня 1 — загальний] | Спільне гасло з вищою структурою / родом військ | Тло |
| Рівень 2 | [Слоган рівня 2 — девіз підрозділу] | Шеврони, церемонії, офіційні документи | Офіційне |
| Комунікаційний | [СЛОГАН ПІДРОЗДІЛУ] | Біо каналів, хештеги, відео, CTA, рекрутинг | Основне |
Цінності та тон
Цінність 01
Професіоналізм
Висока якість підготовки, компетентність у кожній дії. Стандарти — не слова, а щоденна практика.
Цінність 02
Порядок
Дисципліна, чіткість виконання наказів, не хаос. Структура — основа ефективності.
Цінність 03
Людяність
Повага до гідності, турбота про особовий склад. Ми люди, а не машини.
Комунікаційний підхід
Стратегія
- Факти замість пафосу — конкретні результати, не героїчні епітети
- Стриманість — сила через мовчання, а не крик
- Порядок — чіткість меседжу, один ключовий акцент
- OPSEC першим — перевірка перед публікацією
Ключові USPs
| Актив | Що дає |
|---|---|
| [USP 1] | [Яку перевагу це дає підрозділу] |
| [USP 2] | [Яку перевагу це дає підрозділу] |
| [USP 3] | [Яку перевагу це дає підрозділу] |
| [USP 4] | [Яку перевагу це дає підрозділу] |
02 / Система логотипу · Детально
Чотири типи · П'ять кольорів
Логотип — паралелограм зі скосом 25.7°. Чотири типи: з шевроном, горизонтальний, короткий і марка. Кожен у 5 кольорових варіантах. Нічого не змінюй — використовуй готові файли.
Тип A — Лого + Шеврон (повний знак) ОСНОВНИЙ
Офіційне представлення підрозділу. Містить герб-шеврон, ключовий знак та повну назву. Для обкладинок, банерів, офіційних матеріалів.
ОСНОВНИЙ
Teal + Gold
Знак — золото, фон Teal. Основна версія для всіх носіїв.
АЛЬТЕРНАТИВНИЙ
Navy + Gold
Знак — золото, фон Navy. Нагороди, офіційні заходи.
АЛЬТЕРНАТИВНИЙ
Navy + White
Всі елементи білі на Navy. Facebook, документи.
АЛЬТЕРНАТИВНИЙ
Teal + White
Всі елементи білі на Teal. Відео, Reels, Stories.
МОНОХРОМ
Black + White
Чорно-білий. Одноколірний друк, нічний режим.
Тип B — Горизонтальний (без шеврона)
Компактна горизонтальна версія без шеврона. Для вузьких банерів, підписів до постів, нижніх рядків відео.
ОСНОВНИЙ
Teal + Gold
Основна версія без шеврона. Найшироше застосування.
АЛЬТЕРНАТИВНИЙ
Navy + Gold
Navy-фон, золотий знак. Офіційні матеріали, нагороди.
АЛЬТЕРНАТИВНИЙ
Navy + White
Мінімалістична. Вузькі банери, нижній рядок відео.
АЛЬТЕРНАТИВНИЙ
Teal + White
Teal-фон, все біле. Stories, підписи, Shorts.
МОНОХРОМ
Black + White
Чорна підкладка. Нічний режим, одноколірний друк.
Тип C — Короткий («[Назва]»)
Скорочена версія для малих форматів: аватари каналів, шапки в Telegram, підписи в рядок.
ОСНОВНИЙ
Teal + Gold
Основна версія. Шапки, аватари, обкладинки.
АЛЬТЕРНАТИВНИЙ
Navy + Gold
Navy-фон, золото. Офіційні публікації, церемонії.
АЛЬТЕРНАТИВНИЙ
Navy + White
Мінімалістичний варіант для темних фонів.
АЛЬТЕРНАТИВНИЙ
Teal + White
Тілова версія для відеоконтенту і Reels.
МОНОХРОМ
Black + White
Чорно-білий. Night Stories, одноколірний друк.
Тип D — Марка (мінімальна форма)
Тільки знак у паралелограмі. Favicon, іконка додатка, водяний знак на фото, аватар у форматі 1:1.
ОСНОВНИЙ
Teal + Gold
Знак — золото на Teal. Аватар, favicon, іконка.
АЛЬТЕРНАТИВНИЙ
Navy + Gold
Знак — золото на Navy. Офіційні та нагородні матеріали.
АЛЬТЕРНАТИВНИЙ
Navy + White
Знак білий на Navy. Підписи, водяні знаки.
АЛЬТЕРНАТИВНИЙ
Teal + White
Знак білий на Teal. Відео-підписи, Stories-обкладинки.
МОНОХРОМ
Black + White
Знак білий на чорному. Ч/Б друк, нічний режим.
Який тип і коли використовувати
| Тип логотипу | Де використовувати | Коли НЕ використовувати |
|---|---|---|
| A — Лого + Шеврон | Обкладинки, банери, афіші, офіційні матеріали, преса | Дрібні формати менше 200px шириною |
| B — Горизонтальний | Підписи до постів, нижній рядок відео, Telegram-канал | Квадратні формати, Story |
| C — Короткий («[Назва]») | Аватари каналів, шапки, підписи в рядок, вотермарки | Великі формати (>50% ширини) |
| D — Марка | Favicon, іконка додатку, вотермарк на фото, аватар 1:1 | Офіційні документи, преса |
Охоронна зона: висота знака-шеврона з усіх боків · Мін. ширина типу A: 200px · Мін. ширина типу C/D: 80px
03 / Охоронна зона логотипу
Охоронна зона та мінімальні розміри
Мінімальний вільний простір навколо логотипу, де заборонено розміщувати будь-які інші графічні елементи. Одиниця виміру 1× = висота знака-шеврона у логотипі.
1× = висота знака-шеврона — мінімальний відступ з кожного боку логотипу. Жодних елементів у цій зоні.
Мінімальні розміри
| Носій | Мінімальний розмір |
|---|---|
| Digital / Screen | 120 px ширини |
| Print / Офсет | 30 mm ширини |
| Favicon / Аватар | Тільки марка (Тип D) |
| Гравіювання / PVC | 25 mm ширини |
✗ Заборонено
✗ Розтягувати / стискати
✗ Змінювати кут (≠ 25.7°)
✗ Перефарбовувати
✗ Лого = колір фону
✗ Строкатий фон без підкладки
✗ Додавати тіні / ефекти
Логотип поруч з іншими знаками
Логотип підрозділу може розміщуватися поруч з офіційними знаками (вищої структури, роду військ, партнерів). Завжди дотримуйся охоронних зон обох логотипів.
✓ Тип A + Тип C
Повний знак ліворуч, короткий праворуч. Розділювач між елементами.
Повний знак ліворуч, короткий праворуч. Розділювач між елементами.
✓ Шеврон + Тип B
Герб домінує (більший), лого Тип B доповнює. Gap ≥ 1×.
Герб домінує (більший), лого Тип B доповнює. Gap ≥ 1×.
[НАЗВА]
Повна назва
підрозділу
підрозділу
✓ Лого + текстовий блок
Логотип ліворуч, текст праворуч. Текст не входить в охоронну зону лого.
Логотип ліворуч, текст праворуч. Текст не входить в охоронну зону лого.
[НАЗВА]
✗
✗ Текст в охоронній зоні
✗
✗ Лого менше за шеврон
✗ Розтягнутий логотип
✗
✗ Змінений кут нахилу
04 / Лого на фонах
Як розміщувати лого на фонах і фото
Логотип завжди розміщується на фоні, який забезпечує чіткий контраст. Вибирай варіант лого залежно від кольору підкладки.
✓ Правильно — офіційні монотонні фони
✓ Правильно — лого на фото (імітація)
Для розміщення на фото — завжди додавай темну підкладку під лого або розміщуй у кутку на однотонній зоні. Варіант Teal+Gold або Teal+White для темних фото.
Лого внизу ліворуч · Тип A
Темний градієнт знизу. Teal+Gold на темному фото.
Темний градієнт знизу. Teal+Gold на темному фото.
По центру · Офіційний фон
Градієнт Teal→Navy. Для обкладинок та банерів.
Градієнт Teal→Navy. Для обкладинок та банерів.
Лого внизу ліворуч · Тип C
Компактний варіант для постів та відео.
Компактний варіант для постів та відео.
✗ Неправильно — як не треба
05 / Водяний знак
Водяний знак · Watermark
Watermark захищає авторський контент і підсилює впізнаваність підрозділу на фото та відео. Всі варіанти мають ~25% opacity — знак помітний, але не перекриває зміст кадру.
Горизонтальний · Основний
Широкий знак вздовж краю кадру — розміщується у верхній або нижній смузі фото.
Горизонтальний · З партнерською маркою
Варіант із маркою вищої структури або партнера поруч зі знаком підрозділу — для офіційних публікацій та спільних матеріалів.
Вертикальний · Banner
Компактніший знак з ширшими пропорціями — підходить для Instagram Stories, Reels та вертикальних кадрів.
Правила накладання
✓ Розміщення
Верхній або нижній край кадру. Відступ від краю — не менше 24px. Горизонтальний — по всій ширині.
✓ Розмір та прозорість
Мінімальна ширина — 30% ширини кадру. Opacity фіксована (~25%) — не змінювати.
✗ Заборонено
Не повертати, не обрізати, не змінювати opacity, не накладати поверх облич або ключових елементів фото.
Приклади · Landscape
Реальні приклади накладання watermark на горизонтальні фотографії підрозділу.
Приклади · Instagram Stories
Вертикальний формат 9:16 — watermark розміщено у верхній частині Stories.
Шаблон · без фото
Приклади · накладання на фото
06 / Шеврон · Герб
Герб-шеврон — анатомія
Герб-шеврон підрозділу — геральдичний щит із загостреним низом. Ліве поле Teal, праве Navy. Центральна фігура — [головний символ підрозділу]; у цьому демонстраційному зразку її замінено узагальненим подвійним шевроном (V-подібним знаком). Опишіть тут, що символізує кожен елемент вашого герба: щит, поля, центральну фігуру, акцентні деталі.
ПропорціїВисота : Ширина ≈ 1.15 : 1 · Safe Area = 10% від висоти
Елементи герба
| # | Елемент | Колір | Символізм |
|---|---|---|---|
| 01 | Щит (ліве поле) | ■ Teal #055C6D | [Символізм лівого поля] |
| 02 | Щит (праве поле) | ■ Navy #122046 | [Символізм правого поля] |
| 03 | Центральна фігура | ■ Steel #A9A9AB | Сталь — незламність та стійкість (приклад) |
| 04 | Другорядний елемент | ■ Steel #A9A9AB | [Символізм елемента] |
| 05 | Атрибут | ■ Steel #A9A9AB | [Символізм атрибута] |
| 06 | Акцент | ■ Gold #F4A929 | Золотий акцент — честь і слава |
| 07 | Обрамлення щита | ■ Steel | Захист та єдність підрозділу |
Кольорові коди
#055C6D
#122046
#F4A929
#A9A9AB
Варіації шеврона
5 офіційних варіантів для різних носіїв та контекстів. Використовуй готові файли — ніколи не перефарбовуй вручну.
ОСНОВНИЙ
Main · Teal + Navy
Повнокольоровий. Двокольоровий щит — для всіх офіційних матеріалів.
↓ SVG⧉ SVG↓ PNG
АЛЬТЕРНАТИВНИЙ
Navy
Монотонний Navy. Для офіційних документів, церемоній, нагород.
↓ SVG⧉ SVG↓ PNG
АЛЬТЕРНАТИВНИЙ
Gray · Transparent
Сірий напівпрозорий. Для водяних знаків, підкладок, деколу.
↓ SVG⧉ SVG↓ PNG
АЛЬТЕРНАТИВНИЙ
White
Білий для темних фонів. Відео, нічні Stories, темна тема.
↓ SVG⧉ SVG↓ PNG
МОНОХРОМ
Black
Чорний монохром. Одноколірний друк, штампи, гравіювання.
↓ SVG⧉ SVG↓ PNG
Охоронна зона основного логотипу
Шеврон (герб) є невід'ємною частиною основного логотипу. Мінімальний вільний простір навколо логотипу, де заборонено розміщувати будь-які інші графічні елементи. Одиниця виміру X = висота шеврона ÷ 10.
X = висота шеврона ÷ 10 — мінімальний відступ з кожного боку. В зоні X заборонено: текст, інші лого, ілюстрації, лінії, QR-коди. Шеврон є частиною основного логотипу і завжди використовується у складі lock-up.
Правила охоронної зони
| Параметр | Значення |
|---|---|
| Одиниця X | Висота шеврона ÷ 10 |
| Зверху | ≥ 1X |
| Знизу | ≥ 1X |
| Зліва / Справа | ≥ 1X |
| Мін. розмір (digital) | 80px висоти шеврона |
| Мін. розмір (print) | 20mm висоти шеврона |
✗ В охоронній зоні заборонено
✗ Текст або підписи
✗ Інші логотипи
✗ Декоративні лінії
✗ Фотографії / ілюстрації
✗ QR-коди
✗ Рамки та бордери
Логотип у різних комбінаціях
Основний логотип (шеврон + текст) може комбінуватися з іншими типами логотипів. Нижче — правильні та неправильні приклади.
✓ Основний логотип (Тип B)
Шеврон + текстовий блок — єдиний lock-up. Не розділяти елементи.
Шеврон + текстовий блок — єдиний lock-up. Не розділяти елементи.
✓ Тип B + Тип C
Основний логотип ліворуч, розділювач, скорочена версія праворуч. Дотримання охоронних зон.
Основний логотип ліворуч, розділювач, скорочена версія праворуч. Дотримання охоронних зон.
✓ На фото
Navy+White версія на фото. Темний градієнт знизу для контрасту.
Navy+White версія на фото. Темний градієнт знизу для контрасту.
[НАЗВА]
✗
✗ Саморобний lock-up
Не створюй власні комбінації шеврона з текстом. Використовуй офіційний лого.
✗
✗ Розтягнутий логотип
Ніколи не змінюй пропорції. Тільки пропорційне масштабування.
✗
✗ Зливається з фоном
Teal-лого на Teal-фоні. Використай Navy+White або Navy+Gold версію.
✗
✗ Обертання
Ніколи не повертай логотип. Завжди горизонтально.
07 / Колірна система
Кольорова палітра та застосування
Кольорова система DS складається з 4 базових кольорів та розширеної палітри відтінків. Палітра-приклад виведена з кольорів герба-шеврона підрозділу (замініть на власну) та пройшла перевірку WCAG 2.1.
Основна палітра
#055C6D
Teal
Основний бренд-колір · 30% балансу
RGB 5, 92, 109
CMYK 95, 16, 0, 57
HSL 192°, 91%, 22%
Pantone 3155 C
CMYK 95, 16, 0, 57
HSL 192°, 91%, 22%
Pantone 3155 C
#122046
Navy
Фони, хедери · 25% балансу
RGB 18, 32, 70
CMYK 74, 54, 0, 73
HSL 226°, 59%, 17%
Pantone 2766 C
CMYK 74, 54, 0, 73
HSL 226°, 59%, 17%
Pantone 2766 C
#F4A929
Gold
Акценти, CTA · 15% балансу
RGB 244, 169, 41
CMYK 0, 31, 83, 4
HSL 38°, 90%, 56%
Pantone 1225 C
CMYK 0, 31, 83, 4
HSL 38°, 90%, 56%
Pantone 1225 C
#DAAF67
Heraldic Gold
Геральдичний відтінок · девіз + декоративні деталі на шевроні · 8% балансу
RGB 218, 175, 103
CMYK 0, 20, 53, 15
HSL 38°, 60%, 63%
Pantone 7407 C
CMYK 0, 20, 53, 15
HSL 38°, 60%, 63%
Pantone 7407 C
#A9A9AB
Steel
Вторинний текст · 12% балансу
RGB 169, 169, 171
CMYK 1, 1, 0, 33
HSL 240°, 1%, 67%
Pantone Cool Gray 7 C
CMYK 1, 1, 0, 33
HSL 240°, 1%, 67%
Pantone Cool Gray 7 C
Чим відрізняється Heraldic Gold від основного GoldОсновний #F4A929 Gold — яскравий, насичений, для CTA, кнопок, акцентів у digital. #DAAF67 Heraldic Gold — приглушений, теплий, історичний — використовується тільки у геральдичних елементах: девіз на шевроні, декоративні деталі герба, орнаментика на офіційних регаліях. У digital — для відтворення шеврону з фотореалістичним відчуттям. Не плутати в кнопках/CTA.
Технічна специфікація кольорів · Повна таблиця відповідностей
| Назва | HEX | RGB | CMYK · Coated | CMYK · Uncoated | Pantone C | Pantone U | RAL | HSL |
|---|---|---|---|---|---|---|---|---|
| Teal | #055C6D |
5, 92, 109 | C95 M16 Y0 K57 | C92 M14 Y6 K62 | 3155 C | 3155 U | RAL 6004 | 192°, 91%, 22% |
| Navy | #122046 |
18, 32, 70 | C74 M54 Y0 K73 | C70 M52 Y5 K77 | 2766 C | 2766 U | RAL 5022 | 226°, 59%, 17% |
| Gold | #F4A929 |
244, 169, 41 | C0 M31 Y83 K4 | C0 M28 Y80 K2 | 1225 C | 1225 U | RAL 1004 | 38°, 90%, 56% |
| Heraldic Gold | #DAAF67 |
218, 175, 103 | C0 M20 Y53 K15 | C0 M18 Y50 K17 | 7407 C | 7407 U | RAL 1002 | 38°, 60%, 63% |
| Steel | #A9A9AB |
169, 169, 171 | C1 M1 Y0 K33 | C0 M0 Y0 K35 | Cool Gray 7 C | Cool Gray 7 U | RAL 7040 | 240°, 1%, 67% |
| Sand | #F4F2EF |
244, 242, 239 | C0 M1 Y2 K4 | C0 M0 Y2 K5 | 9184 C | — | RAL 9001 | 36°, 20%, 94% |
| Black | #0D0D0F |
13, 13, 15 | C13 M8 Y0 K99 Rich: C60 M40 Y40 K100 |
C0 M0 Y0 K100 | Black C | Black U | RAL 9005 | 240°, 7%, 6% |
Примітка для поліграфіїУсі CMYK значення відкалібровані для Coated FOGRA39 (ISO 12647-2). Для невкритого паперу (Uncoated) використовуйте колонку «CMYK · Uncoated». Pantone® відповідники верифіковані у Pantone Color Bridge Coated. Rich Black (#0D0D0F) в друці = C60 M40 Y40 K100.
Баланс кольорів у матеріалах
Розширена палітра (відтінки та функціональні)
#0B1530
Deep Navy
Фони сторінок
#1D3470
Navy Mid
Вторинні блоки
#0A7A8F
Teal Light
Hover-стани
#1A9DB5
Teal Pale
Текст на темному
#E4F2F5
Teal BG
Підкладки, note
#C1A736
Gold Dark
Hover Gold
#FFCC5C
Gold Light
Active Gold
#B4B5B9
Steel Mid
Рамки, divider
#F4F2EF
Sand
Фон сторінок
#27AE60
Success
OK, confirm
#C0392B
Danger
Error, cancel
#E8A838
Warning
Увага, OPSEC
Відтінки Teal (тінти)
100
90
80
70
60
50
40
30
20
10
Контрастність WCAG 2.1
| Поєднання | Приклад | Коефіцієнт | AA (4.5:1) | AAA (7:1) | Застосування |
|---|---|---|---|---|---|
| White on Teal | Текст | 6.1:1 | ✓ AA | ✓ AAA | Основний текст |
| White on Navy | Текст | 14.2:1 | ✓ AA | ✓ AAA | Будь-який текст |
| Gold on Navy | Текст | 6.8:1 | ✓ AA | ✓ AAA | Акценти, CTA |
| Navy on Gold | Текст | 6.8:1 | ✓ AA | ✓ AAA | Кнопки Gold |
| White on Teal Light | Текст | 4.8:1 | ✓ AA | ✗ AAA | Hover-стани |
| Steel on White | Текст | 2.8:1 | ✗ AA | ✗ AAA | Тільки ≥18pt large |
Доступність · Accessibility
Окрім контрастності, Бренд Статут DS дотримується базових принципів доступності для всіх інтерактивних елементів.
Focus Ring
Усі інтерактивні елементи (кнопки, посилання, інпути) мають видимий фокус-індикатор при навігації клавіатурою:
/* Focus ring — DS standard */
:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(5,92,109,0.3);
}
Використовуємо :focus-visible замість :focus, щоб ring з'являвся тільки при клавіатурній навігації.
Touch Target
Мінімальний розмір зони натискання для мобільних пристроїв — 44×44px (WCAG 2.5.5 Target Size). Це стосується кнопок, посилань у навігації, чекбоксів та інших інтерактивних елементів.
44px
Мінімальна зона натискання для будь-якого інтерактивного елементу
Reduced Motion
Для користувачів, які вимкнули анімації в системних налаштуваннях, всі переходи та анімації вимикаються:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Правило
Кожна анімація на сайті підрозділу повинна коректно працювати з вимкненим motion. Перевіряй у DevTools: Rendering → Emulate CSS media feature → prefers-reduced-motion: reduce.
Темна тема · Dark Context
Більшість інтерфейсів підрозділу використовують темний контекст (Navy Deep фон). Нижче — порівняння як компоненти адаптуються між світлою та темною темами.
Light Theme
Заголовок секції
Текст контенту у світлій темі використовує темні відтінки для максимальної читабельності на світлому фоні.
ПідрозділСтандарт
Dark Theme
Заголовок секції
Текст контенту у темній темі використовує білий та напівпрозорі відтінки для комфортного читання на темному фоні.
ПідрозділСтандарт
Таблиця відповідності Light → Dark
| Властивість | Light | Dark |
|---|---|---|
| Background | #FAF9F7 | #0B1530 |
| Text | #1A1A1E | #FFFFFF |
| Accent | #055C6D | #F4A929 |
| Border | #E4F2F5 | #1D3470 |
| Muted text | #6B6B78 | rgba(255,255,255,0.55) |
CSS Custom Properties Override
.dark-ctx {
--bg: var(--navy-deep);
--text: var(--white);
--accent: var(--gold);
--border: var(--navy-mid);
--muted: rgba(255,255,255,0.55);
}
08 / Типографіка
Шрифтова система: Inter
Єдиний шрифт — Inter (Google Fonts, variable font). Для заголовків — ExtraBold Italic (800–900). Для тексту — Regular/Medium (400–600). Нахил Inter перегукується з кутом 25.7° айдентики.
Гарнітура Inter — всі накреслення
Regular (400)
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
Medium (500)
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
SemiBold (600)
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
Bold (700)
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
ExtraBold (800)
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
900 Italic · Brand
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789
Ієрархія типографіки
Типова шкала — всі рівні
ГОЛОВНИЙ ЗАГОЛОВОК
[Назва підрозділу]
Навчання та підготовка
Підрозділ · спеціалізація
За місяць опанували програму, на яку зазвичай витрачають півроку.
Підрозділ провів навчання за новою програмою підготовки. Результати занять підтвердили високий рівень злагодженості особового складу.
Дата публікації: 01.01.2026 · Відділення комунікацій підрозділу
Бойовий звіт · Категорія
ДОЛУЧИТИСЬ
CSS змінні
/* ══ Шрифтова шкала DS ══ */
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--text-xs: 0.62rem; /* 10px — Caption, Label */
--text-sm: 0.78rem; /* 12.5px — Small */
--text-base: 1rem; /* 16px — Body */
--text-lg: 1.05rem; /* 17px — Lead */
--text-xl: 1.4rem; /* 22px — H4 */
--text-2xl: 1.85rem; /* 30px — H2 */
--text-4xl: 3.5rem; /* 56px — H1/Hero */
--weight-bold: 700;
--weight-extrabold: 900;
Акцентний шрифт: EUROSTILE CYR
Eurostile (Aldo Novarese, 1962) — геометричний sans-serif з військово-аеро-космічною естетикою. Прямокутні форми, мінімум кривих, чіткий силует — ідеально для соціальних мереж, технічних підписів, цифрових носіїв. NASA, Star Trek, Alien — усі використовували Eurostile як «стандарт майбутнього».
Версія Eurostile Cyr — підтримує повну українську кирилицю (АБВГҐДЕЄЖЗИІЇЙ...). Файл шрифту вшитий у брендбук — завантажуй і встановлюй на маршрут.
Де використовувати
- Соц мережі — заголовки в Stories / Reels / Posts
- Технічні написи — лейбли техніки, маркування обладнання
- Постери / банери — крупні написи з військово-технічним тоном
- Інфографіка — числа, метрики, статистика
- Цифрові інтерфейси — таймери, лічильники, HUD
Inter vs Eurostile Cyr
| Ситуація | Шрифт |
|---|---|
| UI, тіло тексту, читабельність | Inter |
| Заголовки сайту, lead-тексти | Inter 900 Italic |
| SMM-візуали, постери, числа | Eurostile Cyr |
| Technical / digital tone | Eurostile Cyr |
| Документи, договори, друк | Inter |
Накреслення
Regular
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ
Latin
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Numbers + Symbols
0123456789 · ! ? @ # % & * ( ) — ° ½ ¼ ™ ©
SMM Display
[НАЗВА] · [СЛОГАН] · ПІДГОТОВКА · ТЕХНІКА · ЦИФРИ
Великі образки — alphabet panel
А Б В Г Ґ Д Е Є Ж З
И І Ї Й К Л М Н О П
Р С Т У Ф Х Ц Ч Ш Щ
Ь Ю Я
И І Ї Й К Л М Н О П
Р С Т У Ф Х Ц Ч Ш Щ
Ь Ю Я
0 1 2 3 4 5 6 7 8 9
Приклади SMM-візуалів з Eurostile Cyr
Правило використання: Eurostile Cyr — тільки великими літерами (UPPERCASE), тільки для акцентів (SMM, постери, числа, лейбли). НЕ для UI, НЕ для тіла тексту, НЕ для договорів/документів. Якщо є сумнів — використовуй Inter.
CSS підключення
/* @font-face з локального файлу */
@font-face {
font-family: 'Eurostile Cyr';
src: url('/assets/brandbook/fonts/eurostyle-cyr.ttf') format('truetype');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
/* Використання — accent / SMM / постери */
.smm-headline {
font-family: 'Eurostile Cyr', 'Eurostile', sans-serif;
text-transform: uppercase;
letter-spacing: 0.02em;
}
09 / Система нахилу
Принцип 25.7° — серце айдентики
Кут 25.7° — фірмовий нахил, який підрозділ обирає як своє візуальне «підпис». Значення 25.7° тут — приклад: оберіть власний кут і застосовуйте його послідовно. Він стає системним елементом: кнопки, плашки, декоративні лінії, підкладки на фото, хештеги — всі похилені на однаковий кут, створюючи впізнаваний «підпис» бренду.
Geometry / Форма
Базовий паралелограм. 25.7° skewX від вертикалі.
CTA Button
ДОЛУЧИТИСЯ
transform: skewX(-25.7deg) + text counter-skew
Hashtag / Tag
#[Хештег]
Navy background, Gold text, italic counter-skew
Decorative Line
Розділювачі секцій та акцентні лінії
Photo Overlay
Teal overlay 60–85% opacity на фото
Section Header
ЗВЕДЕННЯ
Navy-dark блок-плашка для заголовків секцій
Технічна реалізація
/* CSS змінні */
:root {
--slant: -25.7deg;
--slant-pos: 25.7deg;
}
/* CTA кнопка */
.btn {
transform: skewX(var(--slant));
font-style: italic;
font-weight: 900;
}
.btn > span {
display: inline-block;
transform: skewX(var(--slant-pos));
}
/* Декоративна лінія */
.accent-line {
width: 80px; height: 3px;
background: var(--gold);
transform: skewX(-25.7deg);
}
/* Photo overlay */
.overlay-block {
position: absolute;
transform: skewX(-25.7deg);
background: var(--teal);
opacity: 0.7;
}
/* Hashtag badge */
.ht {
transform: skewX(var(--slant));
}
10 / Сітка та компоновка
Модульна сітка
Система побудована на 12-колонковій сітці з базовою одиницею 8px. Всі відступи кратні 8. Margin X = 64px, гатер = 20px. Safe Area для логотипу = 10% від краю.
Параметри сітки
| Параметр | Значення |
|---|---|
| Колонки | 12 |
| Гатер | 20px |
| Margin X | 64px |
| Margin Y | 40px |
| Base unit | 8px |
| Max-width | 1280px |
| Safe area (logo) | 10% від краю |
| Content area | Max 72ch (основний текст) |
Відстані (spacing scale)
4px — мікро (padding іконки, gap маленький)
8px — xs (gap, padding-inline)
16px — sm (padding cards, gap)
24px — md (внутрішній padding)
32px — lg (margin між блоками)
48px — xl (padding секцій)
64px — 2xl (margin sections, hero padding)
Типові компоновки
| Макет | Колонки | Використання |
|---|---|---|
| Full | 12/12 | Hero, банери |
| 2 col | 6+6 | Порівняння, факти |
| Sidebar | 8+4 | Контент + сайдбар |
| 3 col | 4+4+4 | Картки, цінності |
| 4 col | 3+3+3+3 | Іконки, мерч |
12-колонкова сітка — візуалізація
1
2
3
4
5
6
7
8
9
10
11
12
Margin
CTA / Primary Zone
Responsive Breakpoints
| Breakpoint | Name | Columns | Usage |
|---|---|---|---|
| 600px | Mobile | 1 col | Narrow phones |
| 768px | Tablet | 2 col | Tablets, large phones |
| 900px | Desktop-sm | 3 col | Small laptops |
| 1024px | Desktop | 4 col | Standard screens |
| 1400px | Wide | Max-width | Large monitors |
Breakpoint Map
Mobile · 1 col
Tablet
Sm
Desk
Wide
10b / Spacing
МАСШТАБ ВІДСТУПІВ
Усі відступи в DS побудовані на базовій одиниці 8px. Крок × 0.5 дає мікро-відступ 4px, подвоєння — 16, 32, 64 тощо. Це забезпечує візуальну ритміку та послідовність на всіх платформах.
Шкала відступів
0.25rem4px — micro gaps
0.5rem8px — inner padding
0.75rem12px
1rem16px — base
1.5rem24px — card padding
2rem32px — section gap
3rem48px
4rem64px — section padding
6rem96px — hero padding
| Token | rem | px | Використання |
|---|---|---|---|
| --space-1 | 0.25rem | 4px | Micro gaps (іконки, inline елементи) |
| --space-2 | 0.5rem | 8px | Inner padding (теги, бейджі) |
| --space-3 | 0.75rem | 12px | Gap між дрібними елементами |
| --space-4 | 1rem | 16px | Base — стандартний gap, padding |
| --space-6 | 1.5rem | 24px | Card padding, gap у grid |
| --space-8 | 2rem | 32px | Section gap, margin між блоками |
| --space-12 | 3rem | 48px | Великий gap між секціями |
| --space-16 | 4rem | 64px | Section padding (top/bottom) |
| --space-24 | 6rem | 96px | Hero padding, великі секції |
Адаптивні формули clamp()
Ключові responsive-значення використовують clamp() для плавного масштабування між мобільним та десктопним розміром:
/* Font sizes — responsive */
font-size: clamp(4rem, 12vw, 10.5rem); /* Hero heading */
font-size: clamp(2rem, 4.5vw, 3.6rem); /* Section h2 */
/* Spacing — responsive */
padding: clamp(3rem, 6vw, 6rem) 2rem; /* Section padding */
gap: clamp(1rem, 2vw, 2rem); /* Grid gap */
Container Max-Widths
| Контекст | Max-width | Використання |
|---|---|---|
| Brandbook | 1100px | Документація, стайлгайд |
| Site | 1200px | Основний контент сайту |
| Landing | 1400px | Hero-секції, широкі лендінги |
11 / UI-компоненти
Компонентна бібліотека
Кнопки
Превью
Код
Стани
Правило кнопокtransform: skewX(-25.7deg) на контейнері + skewX(25.7deg) на тексті. Шрифт: Inter ExtraBold Italic, Uppercase. Ніякого border-radius.
.btn { transform: skewX(-25.7deg); font-weight:900; font-style:italic; text-transform:uppercase; padding: 0.75rem 1.75rem; }
.btn > span { display:inline-block; transform: skewX(25.7deg); }
<!-- Кнопка HTML -->
<button class="btn btn-teal"><span>ОСНОВНА</span></button>
<button class="btn btn-gold"><span>АКЦЕНТ</span></button>
<button class="btn btn-navy"><span>ОФІЦІЙНА</span></button>
<button class="btn btn-outline"><span>КОНТУРНА</span></button>
<button class="btn btn-teal" disabled><span>НЕАКТИВНА</span></button>
Normal
Hover (simulated)
Active (simulated)
Disabled
Правило станівHover — освітлення фону. Active — затемнення + scale(0.97). Disabled — opacity:0.5, pointer-events:none. Ніяких інших ефектів.
Бейджи та теги
Підрозділ
Стандарт
Офіційно
Архів
Підтверджено
OPSEC
<!-- Бейджи -->
<span class="badge-ds badge-teal">Підрозділ</span>
<span class="badge-ds badge-gold">Стандарт</span>
<span class="badge-ds badge-danger">OPSEC</span>
Картки
Звіт
Звіт про виконання завдання
Підрозділ виконав завдання за планом. Результати підтверджені, роботу продовжено.
Рекрутинг
Долучайся до кращих
Відкритий набір на технічні спеціальності. Стандартизована програма підготовки. Чіткі умови служби.
Підготовка
Навчальний курс
Інструктори відзначили рівень підготовки. Відпрацювання тактичних завдань на навчальному полігоні.
<!-- Картка -->
<div class="card-ds">
<div class="c-eyebrow">Категорія</div>
<div class="c-title">Заголовок</div>
<div class="c-body">Опис картки...</div>
<div class="c-footer">Дата · Автор</div>
</div>
Форми та поля вводу
✓ Коректний формат email
✗ Невірний формат номера телефону
Введіть назву регіону або міста
Сповіщення (Alerts)
ІнформаціяРеєстрацію відкрито. Заявки приймаються до 31 березня 2026 року.
УвагаПеревірте дані перед відправкою. Після підтвердження зміни неможливі.
OPSECПублікуючи матеріали, переконайтесь що в кадрі немає геолокацій, тактичних карт та незахищених обличь.
ПідтвердженоВашу заявку прийнято. Очікуйте на зворотний зв'язок протягом 5 робочих днів.
Індикатори прогресу
Укомплектованість 78%
Готовність 92%
Навчено 100%
Декоративні елементи-плашки
[СЛОГАН]
ЗРАЗОК ПЛАШКИ
EST. 2023
[СЛОГАН]
Таблиця компонентів DS
| Компонент | Клас | Фон | Акцент | Застосування |
|---|---|---|---|---|
| Primary Button | .btn-gold | #F4A929 | Navy text | Головний CTA |
| Secondary Button | .btn-teal | #055C6D | White | Дії 2-го рівня |
| Ghost Button | .btn-outline | transparent | Teal border | Скасування |
| Hashtag | .ht | Navy | Gold text | SMM теги |
| Card | .card-ds | White | 4px left border | Контент-блоки |
12 / Іконографія
Система іконок
Іконки використовуються мінімально — лише для навігації та утилітарних дій. Стиль: outline, stroke 1.5–2px, без fill, без rounded corners. Колір: Teal або Steel залежно від контексту.
Іконки бренду · Emoji
Клікни — скопіюється у буфер обміну.
🛡Герб
⚓Якір
🌊Море
🦅Птах
🎯Ціль
⚡Звіт
🏆Нагорода
📋Документ
🗺Карта
🚁БпЛА
🔭Розвідка
💬Зв'язок
📡Сигнал
🔐OPSEC
📌Позиція
🚨Тривога
🧭Компас
📣Оголошення
🏳Прапор
📸Фото
ПриміткаEmoji — тільки для неофіційних цифрових матеріалів. Для офіційних документів — vector SVG outline icons у кольорах DS.
Бібліотека SVG-іконок DS
Клікни — скопіює SVG-код у буфер. Lucide Icons (MIT) · stroke 1.75 · fill:none · кольори DS.
Бібліотека: Lucide Icons (MIT) · lucide.dev · Stroke-width: 1.75 · var(--teal) для дій, var(--navy) для навігації, var(--gold) для акцентів · 16/20/24/32px.
13 / Фото-стиль
Стиль фотографії та відео
Фотографії підрозділу — це документальна точність з кінематографічним відчуттям. Темна палітра, тіл-блакитна корекція, глибокі тіні. Ніякого яскравого HDR або пестрявих кольорів. Сила — в стриманості.
Приклади фотостилю
ПРАВИЛЬНО
Тактична сцена · темна палітра · teal корекція
ПРАВИЛЬНО
Техніка в русі · динамічний ракурс · drama
ПРАВИЛЬНО
Аеровид · силуети · драматичне світло
Правила photo treatment
Color Grading
| Параметр | Значення |
|---|---|
| Shadows | +10 Teal cast (HLS shift -5) |
| Highlights | Нейтральні або -warm |
| Exposure | -0.5 до -1 (темніше) |
| Contrast | +15–25 |
| Clarity | +10–15 (деталі) |
| Vibrance | -5 (знебарвити) |
| Saturation | -10 (стриманість) |
| Film grain | 15–25 (аутентичність) |
Правила композиції
- Правило третин — головний об'єкт у точках перетину
- Діагональна динаміка — лінії під кутом ~25° (ехо айдентики)
- Темне небо — Navy/Deep blue верхня частина кадру
- Ніяких обличь — без особистої згоди або з blur/silhouette
- OPSEC фільтр — ретушувати номери, карти, координати
⚠ OPSEC CHECKLIST□ Геотеги видалено (EXIF) □ Бортномери ретушовані □ Обличчя — з дозволу або blur □ Тактичних карт немає □ Пізнаванних будівель немає
Overlay системи для фото
Teal overlay 50–70% · Основний стиль
Navy gradient знизу · Для підпису
Повний overlay 60% · Нічні матеріали
Технічні специфікації зображень
| Контекст | Aspect Ratio | object-fit | Розмір |
|---|---|---|---|
| Hero banner | 16:9 | cover | 1920×1080 |
| News card | 4:3 | cover | 600×450 |
| Story card | 3:4 | cover | 400×533 |
| Instagram post | 1:1 | cover | 1080×1080 |
| Instagram story | 9:16 | cover | 1080×1920 |
| Avatar | 1:1 | cover | 200×200 |
Overlay gradient pattern
.hero-gradient {
background: linear-gradient(
to bottom,
rgba(11,21,48,0.3) 0%,
rgba(11,21,48,0.85) 100%
);
}
Image fallback pattern
<!-- Fallback якщо зображення не завантажилось -->
<img src="/assets/images/photo.jpg"
onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
alt="...">
<div class="photo-ph" style="display:none">Фото</div>
16 / Друк та зовнішня реклама
Print-система
Білборди та сітілайти
Зовнішня реклама підрозділу (зразки макетів). Темний фон Navy/Teal, золоті акценти, гасло [Слоган підрозділу]. Всі матеріали відповідають друкарським стандартам CMYK Fogra39.
Білборди · 6×3 м
Сітілайти · 1.2×1.8 м
ЗРАЗОК БІЛБОРДА
Зовнішній білборд 6×3м · Teal + Navy
ЗРАЗОК СІТІЛАЙТА
Сітілайт 1.2×1.8м · підсвічений · вечірнє місто
Білборд горизонтальний · 3000×6000 mm · CMYK Coated Fogra39
[СЛОГАН]
ПІДРОЗДІЛУ!
[ДЕВІЗ] · [НАЗВА]
| Параметр | Значення |
|---|---|
| Масштаб | 1:10 |
| DPI | 300 dpi |
| Bleed | 20 mm |
| Safe Area | 5% від краю |
| Колір | CMYK Fogra39 |
Флаєр A5 · Рекрутинг
[НАЗВА] · РЕКРУТИНГ 2026
ДОЛУЧАЙСЯ
ДО КРАЩИХ
[Назва підрозділу] запрошує фахівців. Стандартизована підготовка. Чіткі умови служби.
[НАЗВА] · [телефон]
[email підрозділу]
Рекрутинговий центр · [Місто]
[СЛОГАН ПІДРОЗДІЛУ]
Технічна специфікація
| Параметр | Значення |
|---|---|
| Розмір | 148×210 mm (A5) |
| Bleed | +3 mm з усіх боків |
| Колір | CMYK / Coated FOGRA39 |
| DPI | 300 PPI (мінімум) |
| Формат | PDF/X-1a:2001 |
| Папір | 150–250 gsm Matte |
| Safe zone | 5mm від краю |
Pre-press checklist□ Шрифти в контури □ Зображення embedded □ Rich Black: C60 M40 Y40 K100 □ Safe zone 5mm
Брендування транспорту
Темно-синій фургон (зразок) · Navy + Teal stripe · Oracal 8500 плівка
Бокові двері Wordmark · 700–900 mm
Задні двері · 900–1200 mm
П
Капот шеврон · 200–300 mm · Oracal/3M
17 / Digital Assets
Цифрові активи
Email підпис
П
Ім'я Прізвище
Начальник відділення комунікацій
[Назва підрозділу]
[СЛОГАН]
Специфікація: width 600px fixed · Logo 48×48px · Fonts system-safe (Arial fallback) · HTML email
Презентаційні шаблони
Wallpapers та цифровий мерч
Mobile 1080×2400
Desktop 2560×1440
П
Zoom/Teams BG 1920×1080
Sticker Pack 512×512
18 / Мерч-система
Мерч та фізичні носії
Одяг — Apparel
Аксесуари та спорядження
Прапор підрозділу
90×135 / 120×180cm
Navy #122046 полотно · Герб по центру · Девіз внизу · Inter 900i
П
ПІДРОЗДІЛ
Блокнот A5 / Папка
PU Leather Navy
148×210mm (A5) · Blind Embossing · Navy / Teal кольори
19 / Патерн-система
Паттерни та текстури
Система паттернів DS базується виключно на формі паралелограма 25.7°. Повторювані геометричні елементи створюють упізнавану текстуру для фонів, упаковки, тканин і цифрових ресурсів.
Базові паттерни
Teal Grid · Клітка 25.7° · Темний фон · Упаковка, банери
Stripe Lines · Смуги 25.7° · Фон документів, презентацій
Block Bands · Широкі блоки · Мерч тканина, прапори, банери
SVG-паттерни −25.7° · готові до використання
Кут rotate(-25.7) = напрям паралелограма DS (/). Сумісні з Figma, Illustrator, вебом. Копіювати код або завантажити SVG.
Teal Thin · 3px · Dark
Stripe · Navy + Gold · Light
Block Bands · Teal + Gold · Dark
Double Stripe · Navy-Mid
Gold Accent · Teal BG
Fine Grid · 1px · Subtle
Правила застосування паттернів
| Паттерн | Використовується | Не використовується | Opacity |
|---|---|---|---|
| Teal Grid | Упаковка, фони банерів, Dark бекграунди | Поверх тексту, офіційні документи | 5–15% |
| Stripe Lines | Презентації, документи, обкладинки | Templ. складний фон, поверх фото | 8–20% |
| Block Bands | Тканина, прапори, великий друк | Цифровий інтерфейс, малий розмір | 6–15% |
20 / Навколишнє середовище
Environmental Branding · Фізичне середовище
Система для оформлення фізичних просторів: рекрутингових центрів, виставкових стендів, командних приміщень, подій.
Офіс та командний простір
Стіна пошани · Navy BG · Teal overlay 10% · Gold акценти
Елементи оформлення простору
| Елемент | Розмір | Матеріал |
|---|---|---|
| Стіна пошани | 2400×1200 mm | PVC Dibond Navy |
| Директивний банер | 800×2000 mm | Rollup сатин/ламінат |
| Навігаційні таблички | 200×60 mm | Алюміній анодований |
| Підлоговий декал | 1000×1000 mm | Антіслиз вініл |
| Оформлення входу | 3000×2500 mm | Вініл на стекло |
| Виставковий стенд | 3000×2500 mm | SEG натяжний ткан. |
Виставковий стенд · Головна панель
П
[НАЗВА]
[РІД ВІЙСЬК]
[СЛОГАН ПІДРОЗДІЛУ]
[КЛЮЧОВІ АКТИВИ ПІДРОЗДІЛУ]
Параметри виставкового стенду
| Елемент | Розмір | Матеріал |
|---|---|---|
| Back wall | 3000×2500mm | Тканина + алюм. профіль |
| Side panels | 1000×2500mm | Composit / ПВХ 3mm |
| Counter | 1000×500×1100mm | MDF + wrap |
| Стійки | 600×600×2000mm | Алюмінієвий профіль |
| Roll-up | 850×2000mm | Алюмінієва касета |
Виставковий стенд · Event Booth
SIDE PANEL
Місія
[Місія підрозділу]
[Місія підрозділу]
Підготовка
[Програма підготовки]
[Програма підготовки]
Стенд QR
[посилання на анкету]
[посилання на анкету]
СПЕЦИФІКАЦІЯ СТЕНДУ
Загальна площа: 6–9 м²
Конструкція: SEG алюм. профіль
Підсвічування: LED 3000K–4000K
Фасадний банер: 3000×2500mm
Бічні панелі: 800×2500mm ×2
Стіл: Navy ламінат + логотип
Медіастійка: iPad/планшет
Додатки: roll-up ×2 ззовні
Конструкція: SEG алюм. профіль
Підсвічування: LED 3000K–4000K
Фасадний банер: 3000×2500mm
Бічні панелі: 800×2500mm ×2
Стіл: Navy ламінат + логотип
Медіастійка: iPad/планшет
Додатки: roll-up ×2 ззовні
21 / Motion та анімація
Принципи анімації
Анімація DS — динамічна але стримана. Жодної клоунади. Easing: cubic-bezier(0.22, 1, 0.36, 1) — швидкий старт, плавне гальмування. Тривалість: 200–600ms. Hover-стани — 200ms. Появи — 400–600ms.
Loading Bar
Hover для demo · Teal → Gold
Slant Appear
[СЛОГАН]
Hover · fade + translateY
Shape Scale
Hover · scale + color change
Ring Rotate
Hover · scale + rotate 45°
Slide Extend
Hover · scaleX expand
Pulse
Hover · pulse + color
Принципи Motion Design
| Параметр | Значення | Застосування |
|---|---|---|
| Easing (UI) | cubic-bezier(0.4, 0, 0.2, 1) | Hover, transitions, dropdowns |
| Easing (Enter) | cubic-bezier(0.22, 1, 0.36, 1) | Поява елементів, scroll-in |
| Easing (Exit) | cubic-bezier(0.4, 0, 1, 1) | Зникнення елементів |
| Duration Micro | 100–200ms | Hover, toggle button |
| Duration Base | 250–400ms | Modal, drawer, tooltip |
| Duration Complex | 400–600ms | Page transition, hero appear |
| Slant Transition | transform + opacity | Завжди разом, не окремо |
Scroll Reveal — Поява при скролі
Елементи з'являються при скролі через IntersectionObserver.
/* ══ Scroll Reveal CSS ══ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
// ══ Scroll Reveal JS ══
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
22 / Голос та тон
Tone of Voice — Голос бренду
Голос підрозділу — спокійний, впевнений, конкретний. Ми не пишемо заради красивих слів. Ми пишемо заради результату. Кожне слово — навмисне.
Тон 01
Конкретний
Факти, числа, результати. Ніяких порожніх слів. «Виконано 3 завдання за добу» — не «успішно виконали важливу роботу».
Тон 02
Стриманий
Без героїчного пафосу та клише. Сила у мовчанні. Ми показуємо роботу, а не розповідаємо як вона важка.
Тон 03
Впевнений
Ніяких «можливо» та «намагаємося». «Виконали. Перевірили. Захистили.» Перформатив, а не декларатив.
Правила написання
ПРАВИЛЬНО — конкретно та по суті
⚡ Підрозділ виконав 12 завдань за добу. Усі результати підтверджені. Продовжуємо роботу.
🎖 Підрозділ отримав відзнаку за результати року. Заслужено. Дякуємо всім, хто поруч.
Відкрито набір на технічні спеціальності. Умови: навчання перед початком служби, стандартизована програма підготовки. Анкета за посиланням.
УНИКАТИ — пафос та кліше
Наші доблесні воїни-герої знов вийшли на передову захищати рідну землю від підлого ворога!
Ми пишаємося нашими хоробрими бійцями які кожного дня несуть свій тяжкий хрест!
Запрошуємо усіх бажаючих розпочати неймовірну пригоду в рядах найкращого підрозділу!
Структура постів по платформах
| Платформа | Структура | Довжина | Emoji |
|---|---|---|---|
| Telegram | Заголовок Bold + Тіло + Disclaimer | 200–700 знаків | 1–2 в заголовку |
| Instagram Caption | Хук 1 рядок + Тіло + Заклик + Теги | 150–300 знаків | 0–1 |
| Instagram Reels | Хук 2сек + Контент + CTA наприкінці | 15–30 сек відео | Без emoji |
| =Instagram, + більше тексту | 150–400 знаків | 0–2 | |
| YouTube Descr. | Резюме + Тімкод + Посилання + Теги | 500–1500 знаків | Без emoji |
Обов'язкові хештеги
23 / Правила використання
Do's & Don'ts — Правила бренду
✓ DO / Можна та потрібно
- Охоронна зона 1× навколо логотипу
- Тільки затверджені HEX: #055C6D · #122046 · #F4A929
- Inter ExtraBold Italic для H1–H3
- Inter Regular/Medium для body тексту
- Кут нахилу строго −25.7° (skewX)
- WCAG AA мінімум для всього тексту
- OPSEC перевірка перед публікацією
- Blur обличь або силуети замість осіб
- Ретуш бортових номерів на фото
- Відповідний логотип для фону (контраст)
✗ DON'T / Заборонено
- Розтягувати або деформувати логотип
- Змінювати кут нахилу (≠ −25.7°)
- Перефарбовувати елементи герба
- Градієнти у самому логотипі
- Логотип на фоні того ж кольору
- Сторонні шрифти замість Inter
- Публікувати геотеги (EXIF + пости)
- Тактичні карти та координати
- Обличчя без письмової згоди
- Яскравий HDR та пестряві кольори
⚠ OPSEC — Операційна безпека — ПРІОРИТЕТ №1
Перед кожною публікацією: 1) Видалити EXIF-геотеги з фото. 2) Переконатися що в кадрі немає локацій, орієнтирів, тактичних карт. 3) Ретушувати бортові номери та ідентифікуючі маркери. 4) Обличчя бійців — тільки з письмовою згодою або blur/silhouette. 5) Перевірити фон кадру.
23b / Безпека
OPSEC
OPSEC — пріоритет №1. Жоден контент не може порушувати безпеку особового складу.
Кожна публікація, фото, відео або текст проходить обов'язкову OPSEC-перевірку перед оприлюдненням. Порушення загрожує життю бійців.
Фото / Відео
☐ Геодані (EXIF) з файлу видалено
☐ Фони перевірено — немає карт, позицій, орієнтирів
☐ Обличчя бійців — є письмова згода або blur/силует
☐ Позивні не видно на шевронах/екранах
☐ Техніка без ідентифікуючих маркувань та бортових номерів
☐ Немає тактичних карт або схем позицій
☐ Метадані відео очищено
☐ Фони перевірено — немає карт, позицій, орієнтирів
☐ Обличчя бійців — є письмова згода або blur/силует
☐ Позивні не видно на шевронах/екранах
☐ Техніка без ідентифікуючих маркувань та бортових номерів
☐ Немає тактичних карт або схем позицій
☐ Метадані відео очищено
Текст / Публікації
☐ Немає координат, геолокацій, найменувань позицій
☐ Немає планів і дат майбутніх операцій або ротацій
☐ Немає чисельності бійців або підрозділів
☐ Маршрути переміщення / логістика не розкриті
☐ Позивні не ідентифікують особу
☐ Інформація офіційно підтверджена
☐ Схвалено відповідальним офіцером або командиром
☐ Немає планів і дат майбутніх операцій або ротацій
☐ Немає чисельності бійців або підрозділів
☐ Маршрути переміщення / логістика не розкриті
☐ Позивні не ідентифікують особу
☐ Інформація офіційно підтверджена
☐ Схвалено відповідальним офіцером або командиром
Процедура перед публікацією
1) Автор готує матеріал → 2) OPSEC-перевірка (геодані, обличчя, маркери) → 3) Схвалення командира/офіцера → 4) Публікація. Жоден крок не може бути пропущений.
24 / Новини · Сайт
Стандарт новин на сайті
Новини на сайті підрозділу — офіційна хроніка підрозділу. Кожна публікація формує імідж. Єдиний стандарт фото, тексту та структури карток обов'язковий для всього контенту.
Верстка сторінки — реальний вигляд
↓ ПОТОЧНИЙ ВИГЛЯД НА САЙТІ · news-layout grid
↓ ВСІ МАТЕРІАЛИ · news-cards grid 3col
Бейджі категорій · .rub
Бейдж нахилений −25.7° (skewX), текст всередині компенсує кут. Чотири варіанти під різні категорії:
ПОЛІГОН
.rub--tealПідготовка · Навчання
НАГОРОДА
.rub--goldНагороди · Офіційне
РЕКРУТИНГ
.rub--navyНабір · Оголошення
ПАРТНЕРИ
.rub--steelМіжнародне · Партнери
Обов'язкові поля
| Поле | Формат | Ліміт | Обов'язково |
|---|---|---|---|
| Заголовок | Inter ExtraBold Italic · білий · font-size:1.1–1.3rem | 65 символів | ✓ Так |
| Опис | Inter Regular · rgba(255,255,255,.38–.4) | 160 символів | ✓ Так |
| Дата | DD місяць YYYY · «01 лютого 2026» | — | ✓ Так |
| Бейдж | .rub--teal/gold/navy/steel · текст uppercase | 15 символів | ✓ Так |
| Фото (featured) | JPG · aspect-ratio 16:8 · opacity .7 | Мін 1376px | ✓ Так |
| Фото (картка) | JPG · aspect-ratio 16:9 · opacity .75 | Мін 1200px | ✓ Бажано |
| Featured flag | 1 активна одночасно · ліва велика картка | — | 1 на сторінку |
Стандарт фото
✓ ПРАВИЛЬНЕ ФОТО
- Landscape (горизонтальне) · мін. 1376×768px
- Featured: 16:8 ratio (1376×688+) · Grid: 16:9
- Темна обробка: Navy/Teal grade · −0.5 EV · opacity .7–.8
- Контент: силуети, техніка, тактика, нагороди
- OPSEC: без геотегів EXIF · бортномери ретушовані
- Обличчя: blur або силует — без письмової згоди
✗ НЕПРИПУСТИМО
- Фото менше 800px по ширині або portrait
- Яскравий HDR, пересвічений, кольоровий
- Скріншоти з телефону з метаданими геолокації
- Обличчя бійців без письмової згоди
- Видимі бортові номери, тактичні карти
- Стокові/нейтральні фото — тільки власний контент підрозділу
Правила заголовків та текстів
ПРАВИЛЬНО — дієслово + факт + число
Інструктори відзначили високий рівень підготовки підрозділу на навчальному полігоні
Підрозділ відкриває набір операторів БпЛА та інженерів
Підрозділ отримав відзнаку за результати року
УНИКАТИ — пафос та кліше
«Наші героїчні воїни знову показали ворогу!» — емоції замість фактів
«Чудовий результат бойової роботи» — без конкретики
«УВАГА! ВАЖЛИВО! ТЕРМІНОВО!» — клікбейт заборонено
📋 Чеклист перед публікацією новини:
□ Заголовок ≤ 65 символів
□ EXIF-геотеги видалено з фото
□ Опис ≤ 160 символів
□ Бортномери ретушовано
□ Бейдж вибрано з 4 варіантів (.rub)
□ Обличчя — blur або письмовий дозвіл
□ Дата: «DD місяць YYYY»
□ Фото ≥ 1376px · правильний ratio
25 / Вакансії · Сайт
Стандарт вакансій на сайті
Сторінка вакансій — перший контакт кандидата з підрозділом. Вакансія — це не оголошення, це конкретна пропозиція з умовами. Строгий стандарт викладки обов'язковий.
Приклади вакансій на сайті
Узагальнені зразки — для копіювання формату викладки.
ГАРЯЧА ВАКАНСІЯ
Оператор БпЛА
Вимоги:
— Бажання вчитися і покращувати навички
— Уважність і відповідальність
— Дбайливе ставлення до обладнання
— Бажання вчитися і покращувати навички
— Уважність і відповідальність
— Дбайливе ставлення до обладнання
Вітаються:
— Досвід ігор на телефоні/ПК
— Винахідливість
— Досвід збирання конструкторів
— Досвід ігор на телефоні/ПК
— Винахідливість
— Досвід збирання конструкторів
ПОДАТИ ЗАЯВКУ →
Оператор відеоспостереження
Вимоги:
— Уважність (вміння помічати дрібні деталі)
— Здатність багато годин дивитися в екран
— Вміння орієнтуватися на мапі
— Уважність (вміння помічати дрібні деталі)
— Здатність багато годин дивитися в екран
— Вміння орієнтуватися на мапі
Вітаються:
— Досвід роботи з симуляторами
— Налагодження радіозв'язку/інтернету
— Туризм
— Досвід роботи з симуляторами
— Налагодження радіозв'язку/інтернету
— Туризм
ПОДАТИ ЗАЯВКУ →
Стандартний вигляд картки
↓ ПОТОЧНИЙ ВИГЛЯД · vac-card
ГАРЯЧА ВАКАНСІЯ
Оператор БпЛА
[Локація]
·
Контракт / Мобілізація
Шукаємо досвідчених операторів БпЛА. Навчання за стандартною програмою. Чіткі умови служби з першого дня.
ПОДАТИ ЗАЯВКУ →
Стрілець / 1-й батальйон
[Локація]
Опис вакансії: вимоги, умови служби, локація.
Категорії та монохромні іконки
Всі іконки — монохромний SVG stroke, колір #fff opacity .65–.8, розмір 20×20px.
Стрілецькі
Бойові підрозділи
БпЛА
Оператори дронів
Техніка
Механіки · водії
Розвідка
Спостереження · Arty
Зв'язок · Сигнал
Радіо · IT · Cyber
Медицина
Медики · парамедики
Штаб · Забезпечення
Логістика · управління
Вогнева підтримка
Артилерія · Міномети
Бейджі пріоритетності · .vac-badge
ГАРЯЧА ВАКАНСІЯ
Критична нестача · набір активний зараз · border-left: var(--gold)
ПРІОРИТЕТ
Підвищена важливість · закрити швидко
БЕЗ БЕЙДЖУ
Стандартна вакансія · відкритий набір
Обов'язкові поля вакансії
| Поле | Формат | Ліміт | Обов'язково |
|---|---|---|---|
| Назва посади | Inter ExtraBold Italic · білий · font-size:1rem | 50 символів | ✓ Так |
| Категорія + SVG-іконка | З таблиці вище · монохром stroke | — | ✓ Так |
| Локація | Напрямок або область | 40 символів | ✓ Так |
| Тип контракту | «Контракт» · «Мобілізація» · «Обидва» | — | ✓ Так |
| Короткий опис | Що робить, умови · rgba(255,255,255,.42) | 200 символів | ✓ Так |
| Featured / Badge | ГАРЯЧА · ПРІОРИТЕТ або без | — | По потребі |
Правила тексту вакансій
ПРАВИЛЬНО — конкретні умови
Оператор БпЛА — чітко, без зайвих слів
«Навчання перед початком служби, контракт, соціальний пакет» — факти умов
Вимоги: досвід керування БПЛА від 6 міс., громадянство України, вік 18–40
УНИКАТИ
«Шукаємо патріотів з горящими серцями!» — без конкретики
«Приходь і ти створиш щось велике» — маркетингова мова недоречна
Умови без локації або типу контракту
📋 Чеклист перед публікацією вакансії:
□ Назва ≤ 50 символів, без пафосу
□ Категорія та SVG-іконка вибрані
□ Опис ≤ 200 символів · факти умов
□ Локація вказана (напрямок/область)
□ Вимоги: 3–6 пунктів · конкретно
□ Тип: Контракт / Мобілізація / Обидва
□ Бейдж відповідає реальному пріоритету
□ Форма подачі заявки активна
26 / Проявлення
Проявлення бренду
Контакти відділу комунікацій
| Контакт | Значення |
|---|---|
| Сайт | [адреса сайту] |
| [сторінка підрозділу] | |
| Telegram | @[канал підрозділу] |
| YouTube | [канал підрозділу] |
| Email ЗМІ | [email protected] |
| Відповідальний | Нач. відд. комунікацій |
Версії брендбуку
Версія для друку
A4 Landscape · PDF-ready · за запитом (недоступно в демо)
Design System для веб
CSS токени · Компоненти · за запитом (недоступно в демо)
SMM система · Шаблони та правила
Повна система комунікацій в соціальних мережах. Кожна платформа має свій шаблон, але всі об'єднані єдиним DS стилем: Navy/Teal фон, Gold акценти, 25.7° елементи, Inter ExtraBold Italic заголовки.
Instagram Posts · 1080×1080 та 1080×1350
ПІДРОЗДІЛ НА ЧЕРГУВАННІ
ДОЛУЧАЙСЯ ДО КРАЩИХ
ПІДГОТОВКА ПІДРОЗДІЛУ
РЕЗУЛЬТАТИ ТИЖНЯ
ВІДЗНАКА ПІДРОЗДІЛУ
Instagram Stories та Reels · 1080×1920
МЕХАНІК-ВОДІЙ
РЕЗУЛЬТАТИ ТИЖНЯ · ПІДРОЗДІЛ БпЛА
ВІДКРИТО НАБІР НА ТЕХНІЧНІ СПЕЦІАЛЬНОСТІ
НАГОРОДА ПІДРОЗДІЛУ
Telegram канал · Пости
Сьогодні підрозділ виконав заплановане завдання. Результати підтверджено, роботу продовжено.
Працюємо. #Слоган
[Назва підрозділу] оголошує набір на технічні та тактичні спеціальності.
Умови:
— Навчання перед початком служби
— Стандартизована програма підготовки
— Чіткі умови контракту
Заповни анкету: [посилання на анкету]
YouTube · Превʼю та титри
РЕЗУЛЬТАТИ РОБОТИ ПРОТЯГОМ ТИЖНЯ | [НАЗВА]
ПІДГОТОВКА НА НАВЧАЛЬНОМУ ПОЛІГОНІ | ДОКУМЕНТАЛЬНЕ
ВРУЧЕННЯ НАГОРОД ПІДРОЗДІЛУ | ЦЕРЕМОНІЯ
Специфікації форматів
Обов'язкові елементи кожного поста