Брендбук нашої власної агенції (жовтень 2026): ті самі правила, які ми пишемо для клієнтів, діють і для нас. Бренд живе на темній сцені, з помаранчевою крапкою над «i» і світлом «свічки»: ми знаємо, що і де підсвітити в бренді.
Обсяг: брендбук на 17 сторінок трьома мовами (DE, RU, UA) і пакет файлів – логотип у чотирьох варіантах, іконка «it» для аватарки й фавікона, палітра із сайту, Montserrat як єдиний шрифт, компоненти сайту, SMM-концепт на 3–4 пости на тиждень із чотирма рубриками, п’ять хайлайтів на один екран телефона, шаблони для Instagram і наші гарантії: ліцензійний контент і PageSpeed 95+.
Брендбук – наш робочий інструмент: кожен пост, звіт і сторінка it-stadt.de робляться за цими правилами.
Як влаштований брендбук
Наш власний бренд – за тими самими правилами
Усі 17 сторінок брендбуку IT-Stadt, розділ за розділом, у наших кольорах і шрифті: логотип, палітра, Montserrat, сайт, SMM-концепт на 3–4 пости на тиждень, хайлайти, шаблони для Instagram і наші гарантії.
Брендбук · версія 1.2 · жовтень 2026
Діджитал-агенція
у Гьоттінгені.
Розробка сайтів · SEO · Google Ads · соцмережі · UI/UX
it-stadt.de · @it_stadt · DE · RU · UA
Про бренд
Що це за бренд
Діджитал-агенція в Гьоттінгені: сайти, SEO, Google Ads, соцмережі й UI/UX з одних рук і з одним контактом. Бренд точний, технологічний і спокійний: темна сцена, світло «свічки», помаранчева крапка над «i».
- Обличчя бренду
- Serhii Kolisnyk – засновник; SEO з 2010 року, мережа фахівців з 2013-го
- Обіцянка
- „Websites und SEO, die Kunden bringen.“ – з одним сталим контактом
- Свічка
- Ми пройшли довгий шлях лабіринтами просування і знаємо, що і де підсвітити в бренді
- Принцип
- „Schriftlich. Damit nichts verloren geht.“
- Мова і тон
- Німецька на «Sie», RU / UA – окремими текстами. Коротко, конкретно, з цифрами
Зміст
- 01Основний логотип03
- 02Кольорові варіанти логотипа04
- 03Правила використання логотипа05
- 04Іконка «it» і фавікон06
- 05Графічні елементи07
- 06Кольори08
- 07Шрифт09
- 08Сайт і веб-компоненти10
- 09SMM-концепт: 3–4 пости на тиждень11
- 10Хайлайти і профіль12
- 11Instagram: приклади13
- 12Система слайдів14
- 13Фото, ШІ і тексти15
- 14Ключові факти для контенту16
- 15Файли17
Оригінал: PNG 561 × 208 і 1142 × 398. Векторного файлу поки немає – для великого друку підготувати окремо.
01 · Основний логотип
Wordmark „it-stadt“
Рядок 1 · wordmark
it-stadt
Малі літери з дефісом, гротеск, сірий #71706F. Над «i» – помаранчева крапка #F47920: світло бренду.
Рядок 2 · дескриптор
DIGITAL AGENCY
Великі літери з широкою розрядкою, по центру під wordmark. У повній версії не прибирається.
Де стоїть
Ліворуч угорі / ліворуч унизу
Шапка сайту – ліворуч. Звіти – 110 px заввишки. Креативи 1080 – ліворуч унизу, 72–90 px.
02 · Кольорові варіанти
Чотири варіанти під різні фони
Форма й пропорції однакові. Помаранчева крапка лишається помаранчевою скрізь, крім Mono.
- Grey
- основний: темна сцена – сайт, звіти, креативи
- White
- поверх фото, сірих і кольорових фонів
- Ink
- білий папір: рахунки, договори, друк
- Mono White
- одноколірний друк, плівка, гравіювання
03 · Правила
Як поводитись із логотипом
Так
- Вільне поле – не менше висоти літери «t» з усіх боків.
- Мінімальний розмір: 30 мм у друці, 120 px на екрані.
- Фіксована висота, ширина – auto. Тільки готові файли з 01_Logo.
- Темний фон за замовчуванням; на світлому – лише версія Ink.
Ні
- Не набирати wordmark шрифтом. У тексті бренд пишеться «IT-Stadt».
- Не розтягувати, не нахиляти, не повертати.
- Не перефарбовувати крапку; без тіней, обведень, неону.
- Не ставити сірий wordmark на середньо-сірий фон.
04 · Іконка
„it“ – аватарка і фавікон
Іконка – перші дві літери wordmark із тією самою крапкою. Вона замінює логотип лише там, де повний логотип не вміщується.
- Instagram · Facebook
- аватарка, коло
- WhatsApp Business · Google
- аватарка, коло
- Сайт
- фавікон, значок закладки
- Скриншоти проєктів
- водяний знак
- Сторіс
- підвал, якщо повний логотип не влазить
Масштаби
96 px64 px48 px32 px16 pxСвічка – наш досвід. Ми пройшли довгий шлях лабіринтами просування і знаємо, що і де підсвітити в бренді. Одне джерело світла на макет; на сайті воно йде за курсором.
05 · Графічні елементи
Сцена, світло і тонкі лінії
- Контурні слова
- DIGITAL, AGENCY, it-stadt – великі літери лише контуром 1 px. Слово завжди цілком у кадрі. Це фон, а не текст.
- Eyebrow „// “
- Надзаголовок над кожною секцією: Montserrat 700, ВЕЛИКІ, розрядка. Колір за рівнем: Accent → Gold → Dim.
- Пігулка-статус
- Прозора, обведення 0,75 px, радіус 100. Лише статуси, теги, платформи.
- Нумерація кроків
- Лише для справжньої послідовності. Номер у колі з хейрлайном, без заливки.
- Хейрлайни замість рамок
- Секції й рядки ділимо лініями 1 px. Без рамок, тіней і карток з обведенням.
06 · Кольори
Одна темна тема, один акцент
≈ 85 % Ink · 12 % текст · 3 % Accent. Gold і Good – точково. Світлої теми немає; виняток – друк на білому папері (логотип Ink).
- Ink#08090DRGB 8, 9, 13CMYK ca. 38 31 0 95Фон усього: сайт, звіти, креативи
- Ink 2#0E1016RGB 14, 16, 22CMYK ca. 36 27 0 91Єдина піднята поверхня: меню, шапка
- Foreground#EDEEF2RGB 237, 238, 242CMYK ca. 2 2 0 5Основний текст і заголовки
- Muted#8A8D9ARGB 138, 141, 154CMYK ca. 10 8 0 40Текст абзаців, другий рядок H1
- Dim#80848FRGB 128, 132, 143CMYK ca. 10 8 0 44Підписи, футер (WCAG AA)
- Accent#FF6A3DRGB 255, 106, 61CMYK ca. 0 58 76 0Кнопки, посилання, цифри, eyebrow
- Gold#FFC857RGB 255, 200, 87CMYK ca. 0 22 66 0Другий рівень: «важливо»
- Good#33C481RGB 51, 196, 129CMYK ca. 74 0 34 23Тільки «OK» / позитивна зміна
- Grey логотипа#71706FRGB 113, 112, 111CMYK ca. 0 1 2 56Лише wordmark логотипа
- Orange логотипа#F47920RGB 244, 121, 32CMYK ca. 0 50 87 4Лише крапка в логотипі й іконці
Токени – з CSS сайту it-stadt.de. Кольори логотипа виміряно з оригінального PNG. CMYK орієнтовний.
07 · Шрифт
Montserrat – і більше нічого
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz äöüß
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФ
0123456789 € % „“
Змінний шрифт 100–900, латиниця й кирилиця. SIL Open Font License; на сайті лише self-hosted (DSGVO). Інших гарнітур не використовуємо.
- 800 ExtraBoldWebsites, die Kunden bringen.Заголовки, hero-цифри
- 700 BoldLEISTUNGEN · PROJEKTEМітки, eyebrow, кнопки
- 600 SemiBoldKostenlose BeratungПідзаголовки, пункти
- 500 MediumWebsite-Entwicklung, SEO und AdsОсновний текст
- 400 RegularGefunden werden, besonders lokal.Довгі тексти, примітки
| Слайд 1080 × 1350 | Розмір | Насиченість |
|---|---|---|
| Заголовок обкладинки | 96–104 px | 800 |
| Заголовок слайда | 64–66 px | 800 |
| Hero-цифра | 300–380 px | 800 |
| Основний текст | 28–36 px | 500 |
| Eyebrow / лічильник | 22–26 px | 700 |
| Кнопка | 30–32 px | 700 |
08 · Сайт
Веб-компоненти it-stadt.de
Ink скрізь; Ink 2 – лише меню й липка шапка. Заголовок секції: eyebrow «// » → H2 800 → за потреби контурне слово на фоні.
LEISTUNGEN ▾PROJEKTEÜBER UNSKONTAKTKostenlose Beratung ↗Картка послуги
Цифри досвіду
CTA-блок
09 · SMM-концепт
3–4 публікації на тиждень, без шуму
Чотири рубрики: наше в роботі, наші клієнти, досягнення і життєві моменти. Не більше 4 постів на тиждень – кожен має бути вартий уваги. Немає приводу – немає поста.
#IN ARBEIT30 %
Наше в роботіМакети, код, заміри PageSpeed, правки, робоче місце. У кожному пості – одна практична порада.#KUNDEN30 %
Наші клієнтиХто клієнт, яке завдання, що зробили, який результат; відгуки. Лише з письмової згоди клієнта.#ERFOLGE15 %
ДосягненняLighthouse 100, запуски сайтів, позиції, рейтинги, сертифікати. Лише перевірені цифри з датою заміру.#MOMENTE25 %
Життєві моментиЛюди за студією: Serhii, команда, Göttingen, події, наш відпочинок. Приватне – лише за згодою людей у кадрі.Тиждень · заливка – пост або Reel · пунктир – за потреби · контур – сторіс
- MoСторіс: старт тижня, опитування
- Di#IN ARBEITReel 15–30 s
- MiСторіс: процес наживо
- Do#KUNDENКарусель: кейс або відгук
- Fr#ERFOLGEопційно, коли є привід
- Sa#MOMENTEФото або Reel
- Soпауза
Місяць ≈ 14 постів: 4–5 In Arbeit · 4 Kunden · 2–3 Erfolge · 4 Momente. Сторіс 3–5 на тиждень. Пости німецькою на «Sie»; раз на тиждень – Reel або карусель RU / UA.
10 · Хайлайти і профіль
Меню профілю, яке продає
5 хайлайтів – рівно один екран телефона, без прокрутки. Послуги, команда й контакт – на сайті за посиланням у біо.
- ProjekteКейси коротко: до / після, посилання на сайт проєкту
- In ArbeitПроцес і бекстейдж: макети, код, заміри
- KundenВідгуки клієнтів: скрини Google, відео (зі згодою)
- ErfolgePageSpeed 100, запуски, Top 20, сертифікати
- FreizeitНаш відпочинок: команда поза роботою, Göttingen, поїздки, свята
- Name
- IT-Stadt | Webagentur Göttingen · SEO
- Link
- it-stadt.de/kontakt
- Закріпити
- #KUNDEN Haarentfernung Göttingen · #ERFOLGE PageSpeed 100 · #MOMENTE Хто ми
11 · Instagram
Пости й сторіс: як це виглядає
Обкладинка → 3–5 слайдів → фінальний CTA. Hero-цифра – замість графіка, коли висновок – одне число.
- Ритм
- Сітка майже вся темна – ритм дає світло: свічка то праворуч, то ліворуч.
- Мова
- Німецька на «Sie». RU / UA – окремі пости, мови в одному слайді не змішуємо.
- Сторіс
- 1080 × 1920: верхні 250 і нижні 360 px вільні
12 · Система слайдів
Будова слайда і рубрики
- Формат
- Пости 1080 × 1350 (4:5). Сторіс / Reels 1080 × 1920
- Поля
- 80 px з боків; eyebrow і лічильник – 72 px зверху
- Обкладинка
- «// РУБРИКА» → двоколірний заголовок 96–104 px → підзаголовок → свічка або контурне слово
- Внутрішні слайди
- Заголовок 66 px → рядки з хейрлайнами → блок «// WICHTIG»
- Лічильник
- «2 / 5» праворуч угорі
- Підвал
- Хейрлайн, логотип Grey 80 px ліворуч, сайт праворуч
Шаблон за рубрикою
13 · Фото, ШІ і тексти
Що ми гарантуємо і чого не робимо
Фото, відео, музика
- Лише ліцензійні фото, відео й музика, куплені спеціально для вашого проєкту: сайт, SMM, реклама.
- Ви захищені від претензій щодо авторських прав – на фото, відео і музику.
- Власні матеріали: скриншоти й мокапи реальних проєктів, процес, команда.
Штучний інтелект
- ШІ прискорює окремі процеси: чернетки, варіанти, обробку, аналіз.
- Просто генерацією без контролю ми не займаємось.
- Кожен результат перевіряє і доводить людина.
Тексти
- Німецька на «Sie», коротко і конкретно; RU / UA – окремими текстами, не машинним перекладом.
- Цифри – лише перевірені й з датою заміру.
- Не обіцяємо позицій у Google.
14 · Факти
Що завжди під рукою
Контакт
com@it-stadt.de · WhatsApp +49 160 4511849 · Instagram @it_stadt
Студія
IT-Stadt · Inhaber Serhii Kolisnyk · Fröbelweg 18, 37081 Göttingen
Як стати клієнтом
Перша консультація безкоштовна · бриф → пропозиція за 3 дні · домовленості письмово
Досвід
15+ років SEO і веброзробки · до 25 людей у команді Union-Studio (2013–2023)
Гарантії
PageSpeed 95+ (де можливо – 100) · лише ліцензійні фото, відео, музика
Мови і регіон
DE · RU · UA · Göttingen, Niedersachsen, Kassel, Hannover – і онлайн
Послуги: 5 напрямів, 34 підпослуги
- Website-Entwicklung9 підпослуг
- SEO10 підпослуг
- Google Ads7 підпослуг
- Social Media4 підпослуг
- UI/UX & Webdesign4 підпослуг
Перед публікацією звіряти з it-stadt.de – сайт є джерелом правди. Стан на 14.10.2026.
15 · Файли
Що де лежить
| Файл | Що це |
|---|---|
| IT-Stadt-Logo_grey | Основний логотип для темних фонів |
| IT-Stadt-Logo_white | Логотип поверх фото й кольорових фонів |
| IT-Stadt-Logo_ink | Логотип для білого паперу |
| IT-Stadt-Logo_mono-white | Одноколірна версія |
| IT-Stadt-Icon_512 | Іконка «it»: аватарки, фавікон |
| Montserrat (variable) | Єдиний шрифт |
| Brandbook_IT-Stadt_DE / RU / UA.pdf | Брендбук, 17 сторінок |
Ваш бренд – так само продумано?
Логотип, кольори, шрифти, шаблони для соцмереж і правила в одному брендбуку, з яким ви та ваша команда зможете працювати самі.