Єдине джерело правди щодо візуальної та комунікаційної ідентичності TM ResQ. Для вебдизайнерів, верстальників, копірайтерів, контент-менеджерів і підрядників: будь-хто з цим файлом починає роботу без додаткових пояснень. Першочергове застосування — сайт на платформі Webium, українською та англійською.
Дев'ять глав — один бренд
Бренд TM ResQ
Місія, позиціонування, аудиторія, tone of voice, меседжинг-фреймворки
→Логотип
Wordmark, монограма Q, охоронна зона, фавікони, OG-image, заборони
→Кольорова палітра
Корал + теплі сірі + акценти станів. HEX/RGB/HSL, контраст, пропорції
→Типографіка
Playfair Display + Manrope, розмірна шкала, мобільні правила
→Дизайн-система блоків
13 блоків, 4 акти: сітки, прев'ю, мобайл, анімації, відео
→Стиль зображень
Фаза 1: фірмові AI-ілюстрації · Фаза 2: документальні фото. Промпти і шот-лист
→UI та інтерактив
Кнопки, форми, іконографіка, мікроанімації, cookies-банер
→SEO і мета-дані
Title/description, OG-теги, hreflang uk/en, канонічні URL
→Юридичний блок
Політика конфіденційності, тексти cookies-банера, вимоги футера
Бренд TM ResQ: хто ми і як говоримо
TM ResQ — центр навчання домедичної допомоги за міжнародними стандартами. З 2011 року — офіційний представник Європейської Ради Реанімації (ERC) в Україні. Вчимо звичайних людей робити те, що вирішує перші 4 хвилини — до приїзду швидкої.
Місія та позиціонування
Рятуємо через навчання. Кожна навичка, яку ми передаємо, — це потенційно врятоване життя.
Не «курси першої допомоги», а готовність команди діяти. B2B-фокус: пілотний тренінг → річний контракт → системне перенавчання. Бренд — провідник, клієнт — герой. Ми не хвалимо себе — показуємо трансформацію клієнта.
Продукти (повний скоуп — лише 4)
| Продукт | Що це | Стандарт | Роль у маркетингу |
|---|---|---|---|
| BLS | Basic Life Support — серцева зупинка, CPR, AED | ERC | Базовий продукт |
| STB | Stop the Bleed — зупинка масивної кровотечі | ACS | Базовий продукт |
| BLS + STB | Серце + кров в один день, −10% | ERC + ACS | Флагман. Завжди featured-позиція |
| PBLS | Педіатрична базова підтримка життя | ERC | Для освіти та медперсоналу, окрема програма |
Правило: жодних інших продуктів у комунікації не існує. Не вигадуємо курси, модулі чи «програми під запит» — лише ці чотири позиції.
Цільова аудиторія
Пріоритет — B2B: річні рамкові контракти з компаніями. Лендінг і вся комунікація звертаються до ОПР, який «продає» рішення далі всередині компанії (CEO, CFO). Кожен блок контенту — аргумент для цього внутрішнього продажу.
| Сегмент | Типовий біль | Пакет |
|---|---|---|
| Виробництво | Втрата свідомості оператора, опік, защемлення | BLS + STB |
| Будівництво | Падіння з висоти, артеріальна кровотеча, струм | STB + BLS |
| IT / Офіс | Інфаркт на планерці, подавився за ланчем, інсульт | BLS + AED |
| Освіта | Дитина подавилася, перелом, анафілаксія | PBLS для педагогів |
| Логістика | ДТП на маршруті, поранення при розвантаженні | STB для водіїв |
| Банки, охорона, HoReCa | Серцеві випадки клієнтів і персоналу, конфлікти, опіки | BLS + STB |
ОПР: до кого говоримо
HRD / Head of L&D
Мотивація: турбота про команду, employer brand, бюджет навчання. Боїться формальності, що не дає результату.
Safety / HSE-менеджер
Мотивація: реальна готовність + закриття вимог Держпраці. Потрібні документи, звітність, сертифікати з верифікацією.
CEO / Operations Director
Мотивація: відповідальність керівника, ризики, репутація. Рахує час команди і вартість. Переконують цифри і простий план.
Драйвери рішення: емоція + раціональність
«Я відповідальний керівник, що дбає про команду» · «Моя компанія готова діяти в критичній ситуації» · «Ми не просто виконуємо норми — ми реально готові рятувати» · «Безпека — частина нашої культури» · «Я можу врятувати життя колеги».
Міжнародні стандарти ERC/ACS · сертифікати з QR-верифікацією · 80% практики · Закон «Про охорону праці» + Наказ МОЗ №1627 · цінність для employer brand · масштабованість і річна системність.
Формула бренду: емоція + довіра + експертність + доказовість + дія. Кожен емоційний блок підкріплюється раціональним: сценарій → цифри, трансформація → сертифікати, відчуття → доказ.
Tone of voice
Бренд працює з болючою темою — екстрена допомога, безпека, стрес. Комунікація тепла, людяна, близька. Без клінічної холодності, без героїчного пафосу, без залякування. Експертно і впевнено, але по-людськи: короткі речення, дієслова дії, конкретика замість абстракцій.
Шість принципів меседжингу
1 · Клієнт — герой
Історія — про ОПР та його команду. TM ResQ — провідник з планом, не герой оповіді. Мінімум «ми», максимум «ваша команда».
2 · Сценарій замість тези
Не «навчання важливе», а «колега тихо зісковзує зі стільця». Читач має опинитись всередині ситуації, а не дивитися збоку.
3 · Реальність, не страх
Показуємо факти і фізіологію («4 хвилини живе мозок»), а не катастрофізацію. Після тривоги завжди даємо вихід — план дій.
4 · Руки, не папери
Мова конкретних дій: компресії, турнікет, AED на стіні. Протиставлення «папка в шафі HR» vs «руки, які тренувались».
5 · Без тиску
CTA — природний наступний крок, не «купуй зараз». Перший крок безкоштовний і легкий. «Тільки після пілота — розмова про контракт. Не до.»
6 · Емоційна дуга
Кожна сторінка веде читача: спокій → впізнавання → тривога → полегшення → довіра → впевненість → дія.
Як бренд НЕ говорить vs як говорить
✕Так не говоримо
«Ми — лідери ринку навчання першої допомоги з багаторічним досвідом» (самовихваляння)
«Здійснюється проведення навчання згідно з вимогами законодавства» (канцелярит)
«Щодня в Україні помирають люди, яких можна було врятувати. Не дайте трагедії статися у вас!» (залякування)
«Станьте героєм! Рятуйте життя як супергерой!» (пафос, рятувальні метафори)
«Унікальна пропозиція! Тільки сьогодні знижка!» (токсичний sales pressure)
✓Так говоримо
«Вчимо людей робити те, що рятує. Без театру. За 1 день.» (конкретика + скромна впевненість)
«Один день у вашому офісі. Решту вирішують руки, які встигли потренуватись.» (жива мова)
«Фізіологія не радиться з вашим календарем.» (факт замість страшилки)
«Усі знали, що робити, бо вже це робили. На манекенах. Місяць тому.» (сценарій, буденна готовність)
«До кінця тренінгового дня ви знаєте дві речі: чи це працює і чи ми ваші люди.» (чесний оффер)
Меседжинг-архітектура (для копірайтерів)
| Фреймворк | Роль | Де застосовується |
|---|---|---|
| StoryBrand (SB7) | Скелет: герой → проблема → провідник → план → дія → ставки → успіх | Структура сторінок, блоки «провідник», «план», «failure» |
| PASTOR | Двигун емоційної глибини: Problem → Amplify → Story → Transformation → Offer → Response | Розвилка реальностей, цифри, Before/After, оффер |
| Empathy Journey | Ритм: кожен екран = один емоційний стан | Наскрізно; порядок секцій і анімаційні переходи |
| Scenario Immersion | Гачок: занурення у конкретну ситуацію замість заголовка-тези | Hero, перші екрани, рекламні креативи |
Відкинуті моделі (не використовувати як основу): AIDA, PAS, BAB, PRESTO, AIDCA — лінійний тиск, який B2B-аудиторія зчитує як маніпуляцію. Контраст «до/після» з BAB та каскад соціальних доказів — лише допоміжні елементи всередині архітектури.
Логотип: wordmark + монограма
Основна версія — текстовий wordmark «TM ResQ» з підписом Team Rescue. Для фавіконів та малих іконок — монограма «Q». Логотип існує лише як векторний файл (SVG, текст у криві) — ніколи як живий текст, що залежить від шрифтів сторінки.
Основна версія та варіації
Основна — на світлому. «TM» — #1A1A1A, «ResQ» — корал #D85A30.
Інверсія — на темному. «TM» — білий, «ResQ» — корал (не змінюється).
Монохром — для одноколірних носіїв: повністю #1A1A1A або повністю білий.
Конструкція wordmark
| Параметр | Специфікація |
|---|---|
| Накреслення | Plus Jakarta Sans ExtraBold (800), переведений у криві. Latin-гліфи — кирилиця не потрібна |
| Трекінг | −1px на 56px кеглі (−1.8%); пробіл між «TM» і «ResQ» — стандартний |
| Кольори | «TM» — Dark #1A1A1A (або білий на темному); «ResQ» — Coral #D85A30 завжди |
| Підпис | «TEAM RESCUE», верхній регістр, Manrope Medium, трекінг +4px, колір Gray-400; кегль ≈ 20% від висоти wordmark |
| Без підпису | У хедері сайту, дрібних розміщеннях (<140px ширини), поруч із партнерськими логотипами |
Охоронна зона
З усіх боків — вільний простір не менший за висоту великої літери «R» wordmark. Усередині зони — жодних текстів, ліній, графіки чи країв макета. Мінімальна ширина: digital — 96px (без підпису), 140px (з підписом); друк — 25 мм.
Монограма «Q»
Літера «Q» з «ResQ» — носій сенсу бренду (rescue) — на квадратному тайлі зі скругленням 24% від сторони. Основна: білий гліф на Coral. Інверсія: кораловий гліф на Dark. Гліф ≈ 55% висоти тайла, оптично відцентрований.
Призначення монограми: favicon, іконки додатків, аватари соцмереж, дрібні носії, де wordmark не читається. Монограма не замінює wordmark у хедері сайту, презентаціях чи друці.
Favicon, іконки, OG-image
OG-image 1200×630: темний фон #1A1A1A із radial-світінням коралу, wordmark з підписом, тейглайн Playfair Italic кораловим. Без фотографій. Окремий файл на кожну мову (og-main-uk.png / og-main-en.png).
Заборонені варіанти
✕Ніколи
Розтягувати, стискати, нахиляти, обертати wordmark
Міняти кольори: «ResQ» іншим кольором, «TM» кораловим, градієнти
Додавати тіні, обводки, світіння, ефекти
Набирати логотип іншим шрифтом або «від руки» в тексті
Додавати графічні елементи: хрести, серця, краплі, ЕКГ-лінії
Ставити на кораловий або низькоконтрастний фон
✓Завжди
Використовувати лише затверджені SVG/PNG-файли з кривими
Зберігати пропорції та охоронну зону
«ResQ» — корал #D85A30 у кольорових версіях
Перевіряти контраст із фоном (мінімум 3:1)
На фото — лише з напівпрозорою темною підкладкою
Поведінка логотипа на сайті
| Розміщення | Специфікація |
|---|---|
| Хедер | Wordmark без підпису, висота 22–24px, ліворуч. У sticky-хедері не змінюється. Клік — скрол угору / на головну |
| Футер | Wordmark з підписом або без, висота 22px, колір за фоном футера (Gray-50 → основна версія) |
| Мобільний хедер (≤768px) | Wordmark без підпису, висота 20px. Якщо разом із CTA не вміщується на 375px — монограма 28×28px |
Теплий ґрунт, кораловий акцент
Палітра свідомо уникає «аптечних» синьо-білих схем і червоного медичного коду. База — теплі сірі та графіт, головний акцент — корал: енергія дії без агресії тривоги. Три додаткові акценти кодують емоційні стани сторінки. Клік по будь-якому кольору копіює HEX.
Головний колір
Правила головного акценту
CTA, акценти, цифри-удари, «ResQ» у логотипі. 5–10% площі макета — не більше. Контраст на білому 3.9:1 — дрібний кораловий текст (<18px) набирається Coral Dark #993C1D (6.9:1). Текст на коралі — лише білий, від 14px semibold. Якщо корал перестав «вистрілювати» — його забагато.
Сімейство коралу та графіт
Теплі сірі (нейтральна шкала)
Акценти емоційних станів
Teal #1D9E75
rgb(29 158 117) · hsl(161 69% 37%)
Light #E1F5EE · Dark #0F6E56
Семантика: позитивна реальність, «після», успіх, чекмарки. Блоки «Дубль 2», after-бік трансформації. Не для CTA.
Purple #534AB7
rgb(83 74 183) · hsl(245 43% 50%)
Light #EEEDFE
Семантика: довіра, докази, акт 3. Іконки proof-карток, акцентні дрібниці. Дозовано — ніколи як фон великої секції.
Blue #185FA5
rgb(24 95 165) · hsl(210 75% 37%)
Light #E6F1FB
Семантика: дія, процес, акт 4. Службові акценти, схеми. Без «корпоративно-банківського» домінування синього.
Пропорції використання
Світла тепла база тримає людяність, темні секції створюють драматургійні паузи (цифри-удар, failure, лід-магніт), корал з'являється точково — і тому працює.
Правила накладання
| Комбінація | Правило |
|---|---|
| Текст на білому | Заголовки — Dark; текст — Gray-900/700; описи — Gray-600. Кораловий текст дрібніше 18px — лише Coral Dark #993C1D |
| Текст на Dark | Заголовки — White; текст — Gray-200; підписи — Gray-400; акценти — Coral (3.9:1 — лише від 18px або 14px bold) |
| Текст на Coral | Лише білий, від 14px semibold (кнопки). Жодного темного тексту на коралі |
| Coral на білому | Кнопки, плашки, цифри від 24px, іконки. Не для суцільних абзаців |
| Light-відтінки | Coral/Teal/Purple/Blue Light — лише фони плашок і карток із темним текстом; ніколи як колір тексту |
| Заборонено | Корал + червоний поруч; teal як CTA; синьо-білі «аптечні» комбінації; понад 2 «стерильні» білі екрани поспіль без теплого підтону |
Приклади застосування у веб-блоках
Фон Gray-50 + radial-світіння rgba(216,90,48,.08). Заголовок Dark з курсивним кораловим акцентом. Візуал — Dark-тайл із кораловим таймером.
Фон #1A1A1A, картки rgba(255,255,255,.03) із бордером .08. Цифри — Coral 800. Заголовок білий. Для пауз-ударів.
Фон Teal Light, заголовок Teal Dark, текст Gray-900, чекмарки Teal. Завжди в парі з контрастним «до»-блоком.
Playfair Display + Manrope
Емоційна антиква для заголовків і сучасний гуманістичний гротеск для тексту. Обидва шрифти безкоштовні (Google Fonts) і мають повну кирилицю — критично для україномовного сайту.
Важлива зміна щодо MVP: Plus Jakarta Sans з ранніх макетів не має кирилиці — на українській версії текст падав би у системний фолбек. У продакшені основний шрифт — Manrope (найближчий за характером). Plus Jakarta Sans лишається тільки в логотипі — як векторні криві, без підключення шрифту.
<!-- Один лінк на обидві мови --> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400;1,700&display=swap" rel="stylesheet"> --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --serif: 'Playfair Display', Georgia, serif;
Розмірна шкала
Уся шкала — через clamp(): плавна адаптація без стрибків. Перше значення — мобайл (375px), друге — десктоп (1280px+).
Інтервали та відступи
| Параметр | Значення |
|---|---|
| Міжрядковий | Заголовки 1.1–1.25 · лід 1.55–1.6 · body 1.6–1.65 · капшени 1.45–1.5 |
| Після заголовка | h2 → лід: 14px · лід → контент: 40–60px (clamp) |
| Між абзацами | 12–16px; без відступів першого рядка |
| Вертикальний ритм | База 4px; усі відступи кратні 4 (8/12/16/24/32/48/64) |
| Акценти | strong — Manrope 600–700 Dark; курсив у заголовках — Playfair Italic + Coral; підкреслення — лише лінки |
Поведінка на мобільних (≤768px / 375px)
| Правило | Деталі |
|---|---|
| Мінімум body | 16px — менше не опускати (iOS-зум полів, читабельність) |
| h1 на 375px | 30px / 1.1; ls −0.5px; не більше 4 рядків — скорочувати текст, а не кегль |
| Display-цифри | На 375px — до 72–84px; tabular-nums обов'язково (таймер не «стрибає») |
| Довжина рядка | Падінги контейнера 20px; жодного тексту впритул до краю |
| Переноси | hyphens: none; <br> вручну в ключових заголовках; перевіряти кожен h1/h2 на 375px |
13 блоків, 4 акти, одна емоційна дуга
Сайт верстається у Webium з фокусом на авторські, нешаблонні рішення рівня веб-трендів 2026: тепла мінімалістика, драматургія скролу, великі цифри, м'які скруглення. Лендінг побудований як фільм: кожен акт веде від «мене це не стосується» до «я хочу це для своєї команди». Поруч із кожним блоком — схематичне прев'ю композиції.
Критерій приймання: прокрутіть готову сторінку зверху вниз. Має зчитуватися ритм станів. Якщо два сусідні екрани викликають однакове відчуття — один із них переробляється.
Загальна сітка та канва
| Параметр | Значення |
|---|---|
| Контейнер | max-width 1180px; бічні падінги clamp(20px, 4vw, 60px) |
| Брейкпоінти | 1280px — повна сітка · 768px — колапс у 1–2 колонки, ховається меню · 375px — одна колонка, повноширинні CTA |
| Вертикаль секцій | padding clamp(64px, 9vw, 120px); чергування фонів: White → Gray-50 → Dark → White… |
| Скруглення | Великі контейнери 18–20px · картки 12–14px · кнопки/поля 10px · плашки 100px (pill) |
| Тіні | М'які: 0 12px 32px −8px rgba(0,0,0,.08); кораловий glow лише для primary CTA і featured-картки |
| Вирівнювання | Багатоколонкові блоки — center по вертикалі; текст — ліворуч, центр лише для заголовків секцій-вітрин |
Принципи анімації (наскрізні)
Вхід елементів
Scroll-trigger: fade + translateY(24px→0), 500–600ms ease-out, stagger 80–100ms. Кожен елемент — один раз.
Hover
120–200ms: кнопки translateY(−1px); картки translateY(−4px) + тінь. Без масштабувань понад 1.03 і обертань.
Лічильники
Цифри-удари і counter анімуються від 0 у в'юпорті, 1.2–1.6s, ease-out, tabular-nums.
Емоційні переходи
Зміна фону секцій (світла → темна) — різка, без перетікань: це монтажна склейка, драматургійна пауза.
Доступність
prefers-reduced-motion: reduce — анімації вимкнено, контент видимий одразу, автоплей-відео на паузі.
Заборонено
Каруселі з автопрокруткою, паралакс, конфеті, анімовані градієнти, лоадери понад 300ms, зсуви CLS.
Відео та GIF як медіа
| Місце | Формат |
|---|---|
| Блок 6 «Як це виглядає» | Єдине повноцінне відео: 60 сек, скорочений день тренінгу. Autoplay muted loop у в'юпорті або постер + play. MP4/H.264 ≤ 6MB + WebM |
| Hero | Без відео. Статичний таймер «04:00» з JS-відліком (старт через 2с, один цикл) — деталь, що зупиняє скрол |
| Картки галузей / продукти | За потреби — GIF/WebP 2–3с loop (руки: компресії, турнікет), без звуку, не більше 2 на екран |
| Фолбек | Кожне відео має постер-кадр; на повільному з'єднанні — лише постер |
Принцип: не оффер, а занурення. Заголовок-сценарій (Playfair, курсивний кораловий тригер), підзаголовок-вихід на продукт, два CTA, рядок довіри з трьома чекмарками.
Сітка: grid 1.15fr / 1fr, gap clamp(32–64px), align center. Праворуч — Dark-тайл 1:1 (radius 20px): таймер 04:00, кутовий маркер «ВІКНО ДІЇ» з пульсуючою крапкою.
Мобайл: 768px — одна колонка, тайл 16:11 під текстом; 375px — CTA на всю ширину, таймер 84px.
Анімація: stagger-вхід тексту, пульс крапки 1.6s, JS-відлік таймера. Sticky-хедер із CTA — завжди видимий.
Принцип: серце лендінгу. Split «Дубль 1 / Дубль 2»: темна картка (ніхто не тренувався) проти teal-light (команда тренувалась). 4–5 коротких рядків наростання + вердикт Playfair Italic. Під сплітом — теги мікро-сценаріїв п'яти сегментів.
Сітка: дві рівні колонки, gap 24px, картки radius 20px, падінг clamp(28–44px). Заголовок секції — по центру.
Мобайл: стовпчик («Дубль 1» завжди перший), gap 16px; теги — wrap по центру або горизонтальний скрол.
Анімація: картки в'їжджають з різних боків (±32px); рядки — stagger 100ms; hover тегів — підсвітка.
Принцип: перша темна секція — монтажна склейка. Три картки: 4 хвилини / 15 хвилин / 11 хвилин коридору. Елеваторний pitch, який ОПР перекаже CEO за 10 секунд.
Сітка: 3 колонки, gap 16px; картки rgba(255,255,255,.03) з верхнім кораловим індикатором 3px; цифри Manrope 800 clamp(60–110px).
Мобайл: одна колонка, цифри 80px; порядок 4 → 15 → 11 зберігається (логіка наростання).
Анімація: лічильники від 0 (1.2s); фон статичний — це секція ваги.
Принцип: емпатія + авторитет. Маніфест-заголовок, емпатична цитата з лівим кораловим бордером, сітка 2×2 кредензіалів (ERC · ACS · МОЗ · практики-реаніматологи). Праворуч — візуал 4:5: на запуску — фірмова ілюстрація сцени тренінгу, після фотосесії — живе фото інструкторів у дії (глава 06, замінюється першим).
Сітка: grid 1fr/1fr, gap clamp(40–80px), align center; фото-тайл 4:5 radius 20px; кредензіали — білі картки 12px.
Мобайл: текст → фото → кредензіали (2 колонки до 480px, далі одна).
Анімація: фото — fade + scale 1.02→1; кредензіали — stagger.
Принцип: три картки — BLS, STB, BLS+STB (featured, бейдж «7 із 10 беруть саме цей пакет»). Усередині — «флоу» дії (Колапс → CPR → AED → людина рухається), ціна, метадані. Під сіткою — абзац-місток на PBLS.
Сітка: 3 колонки, gap 20px; featured — кораловий бордер 1.5px, градієнт #FFF8F5→White, glow-тінь, бейдж-pill над карткою.
Мобайл: 768px — 2 колонки, featured на всю ширину знизу; 375px — стовпчик у порядку BLS → STB → BLS+STB («два інгредієнти → сума»).
Анімація: hover — підйом 4px + тінь; featured без додаткового hover (вже виділена).
Принцип: зняти страх невідомого. Відео-фрейм 16:9 (max-width 900px, по центру) + три піктограми-факти: 80% практики · 12–16 людей · 100% обладнання наше.
Сітка: відео по центру; фічі — 3 колонки під ним, gap 16px.
Мобайл: відео на всю ширину контейнера; фічі в стовпчик.
Анімація: кнопка play — ringPulse (коралове кільце 2s loop) — єдина перманентна анімація сторінки.
Принцип: «Два понеділки» — поточний і той, який ще не призначено. Сірий блок «до» (маркери ×) → коралова стрілка → teal-блок «після» (чекмарки ✓), вердикти Playfair Italic. Нижче — відгук HRD (плейсхолдер до першого пілота).
Сітка: grid 1fr auto 1fr, gap 28px; стрілка по центру 32px.
Мобайл: стовпчик; стрілка 90°, коралова.
Анімація: «до» першим, «після» — із затримкою 200ms (ефект відповіді).
Принцип: «Аргументи для CFO» — нашарування довіри: animated counter навчених → 6 логотипів клієнтів → 3 proof-картки (сертифікат із QR-верифікацією; Закон + Наказ МОЗ №1627; employer brand).
Сітка: counter по центру (Playfair 700, clamp 72–140px, корал); логотипи — 6 колонок 2:1; картки — 3 колонки.
Мобайл: логотипи 4 → 3 колонки; картки в стовпчик; counter 72px.
Анімація: counter від 0; логотипи — stagger fade; сірі версії логотипів, колір на hover.
Принцип: друге впізнавання. Таблиця 5 рядків: Де працюєте / Що ламається / Який пакет. Хедер темний; рядки з hover-підсвіткою.
Сітка: рядки grid 1fr/1.4fr/1.4fr; radius контейнера 18px; бордери Gray-100.
Мобайл: таблиця стає картками: хедер ховається, кожен рядок — вертикальна картка з CSS-лейблами «Біль:» / «Рішення:».
Анімація: hover рядка — фон Gray-50; вхід — stagger 60ms.
Принцип: без плану людина не діє. Залишаєте → Проживаєте → Підписуєте: номери Playfair 64px, по одному абзацу. Перший крок максимально легкий.
Сітка: grid 1fr auto 1fr auto 1fr (картки + стрілки), max-width 1080px.
Мобайл: стовпчик, стрілки 90° кораловим.
Анімація: stagger 150ms зліва направо — підкреслює послідовність.
Принцип: друга темна секція. Заголовок з кораловим курсивом + механізм («мінус 10% шансів щохвилини») + юридична плашка з лівим кораловим бордером. Тон серйозний і людяний: показуємо реальність, не лякаємо.
Сітка: grid 1fr/1.2fr — заголовок ліворуч, текст праворуч.
Мобайл: стовпчик; плашка зберігає лівий бордер.
Анімація: лише fade. Це секція ваги, не руху.
Принцип: пілот як найкоротший шлях. Ліворуч — оффер і перелік «Не вам…» (зняття тертя), праворуч — біла картка форми: 3 поля (ім'я, компанія, телефон), кнопка, мікрокопі «Передзвонюємо протягом 2 годин. Без скриптів» + іконка замка.
Сітка: grid 1.1fr/1fr; фон — градієнт Coral Light → White; форма radius 20px з виразною тінню.
Мобайл: оффер → форма; поля та кнопка на всю ширину; без автофокуса.
Анімація: focus-перехід бордера в корал 150ms; помилки — текст під полем, без трясіння.
Принцип: хто не готовий — отримує чекліст «10 питань безпеки вашого офісу» (email-форма на темному тайлі) → FAQ 6 питань у 2 колонки → футер: бренд, курси, контакти, юридичні посилання.
Сітка: лід-магніт — grid 1.2fr/1fr на темному тайлі radius 20px; FAQ — 2 колонки; футер — 2fr/1fr/1fr.
Мобайл: усе в стовпчик; FAQ — акордеон на ≤768px (перше питання розгорнуте).
Анімація: акордеон 250ms ease; решта — стандартний fade.
Візуальний стиль: ілюстрації → фотографії
Візуальний контент живе у двох фазах. Фаза 1 (запуск): згенеровані ілюстрації у фірмовому стилі — швидко, консистентно, без чужих стокових облич. Фаза 2 (після фотосесій): документальні фото реальних тренінгів TM ResQ. Сюжети обох фаз ідентичні — кожна ілюстрація з самого початку проєктується як майбутній фото-кадр і замінюється 1:1. Головний принцип незмінний: сайт не повинен асоціюватися з лікарнею, клінікою чи страховою.
Фазова модель
AI-ілюстрації у фірмовому стилі «тепла редакційна графіка» (специфікація нижче). Закривають усі image-слоти лендінгу: hero, провідник, галузеві кадри, трансформація. Перевага: повний контроль кольору під палітру бренду, жодних чужих облич і стокового вигляду, готовність за дні.
Документальні фото реальних тренінгів за шот-листом, що дзеркалить сюжети ілюстрацій. Фото поступово замінюють ілюстрації у ключових блоках доказовості. Реальні інструктори і реальні клієнти працюють на довіру сильніше за будь-яку графіку.
Правила переходу між фазами
| Правило | Деталі |
|---|---|
| Заміна 1:1 | Кожна ілюстрація має «фото-двійника» у шот-листі: той самий сюжет, ракурс і композиція. Заміна не ламає верстку — однакові пропорції кадру (4:5, 16:9) |
| Не змішувати | В межах однієї секції — лише один тип візуалу. Перехідний період: фото у блоках доказовості (4, 6, 7), ілюстрації — у решті. Ніколи фото та ілюстрація поруч в одному блоці |
| Порядок заміни | 1) блок 4 «Провідник» — обличчя інструкторів найважливіші для довіри · 2) блок 6 — відео/кадри тренінгу · 3) блок 7 «Трансформація» · 4) hero — останнім, коли є по-справжньому сильний кадр |
| Що лишається назавжди | Ілюстрації безстроково: схеми і пам'ятки, обкладинка чекліста (лід-магніт), email-розсилки, сторінка 404, OG-image (за специфікацією глави 02 — без фото) |
Фаза 1 · Фірмовий стиль ілюстрацій: «тепла редакційна графіка»
Орієнтир — сучасна журнальна (editorial) ілюстрація: плоскі форми з зернистою текстурою, реалістичні пропорції людей, кінематографічні композиції. Не «корпоративний клipart», а тихі драматичні сцени у кольорах бренду.
Схема композиції: графітові фігури у реалістичних пропорціях, тепле тло Gray-100, один кораловий акцент (AED-шафка), teal — тренувальний прилад, зерниста текстура поверх. Фінальні ілюстрації — детальніші, але з цією логікою кольору і світла.
Шість принципів стилю
1 · Форма
Плоскі заливки без контурних ліній, м'які скруглені силуети. Деталізація середня: видно дію і позу, не видно пор шкіри. Легка асиметрія — «рука художника», не векторна стерильність.
2 · Текстура
Зерно (grain/noise) у тінях і на великих площинах — фірмова ознака стилю. М'які зернисті тіні замість чітких. Матовість: жодного глянцю, градієнтних сяйв, 3D-об'єму.
3 · Палітра
Тільки кольори бренду: фони Gray-100/50 і Coral Light; люди — Gray-900/700; один кораловий акцент на кадр (AED, жилет інструктора, деталь); teal — обладнання і позитивні стани; темні сцени — Dark із кораловим світлом.
4 · Люди
Реалістичні пропорції — НЕ гумові кінцівки corporate-стилю. Прості риси обличчя (крапки-очі, лінія брів — достатньо для емоції). Різні статури, вік 30–55, звичайний робочий одяг. Емоція через позу і жест.
5 · Світло
Одне тепле джерело (вікно, лампа), довгі м'які тіні. Світло будує драматургію кадру так само, як у фото-фазі: тепла половина / прохолодна половина, фігура у промені.
6 · Композиція
Кінематографічні кадри «зсередини сцени», як у документальній зйомці: рівень очей учасника, обрізані краї фігур, негативний простір під текст. Ілюструємо момент дії, не «концепцію».
Сюжети (однакові для обох фаз)
| Категорія | Зміст |
|---|---|
| Тренінг | Руки на манекені під час компресій; інструктор поправляє позицію рук учня; група навколо манекена; турнікет на тренажері; тренувальний AED |
| Середовища | Опен-спейс IT-компанії, виробничий цех, будмайданчик, шкільний клас, склад — упізнавані, живі, трохи неприбрані |
| Люди | 30–55 років, різні статури й ролі, без модельності; емоції: концентрація, рішучість, полегшення після успішної вправи |
| Деталі | Сертифікат із QR-кодом у руках; AED на стіні офісу; аптечка з турнікетом; пам'ятка трьох кроків CPR у переговорці |
Промпти для генерації ілюстрацій (фаза 1)
Промпти англійською. Суфікс стилю — обов'язковий для кожного. Перші 2–3 вдалі генерації зафіксувати як референс-сет (seed / image reference) — усі наступні тягнути до нього, інакше сайт розсиплеться на різні стилі.
flat editorial illustration, subtle grain texture, muted warm palette: warm off-white #F1EFE8 background, graphite #2C2C2A figures, single coral #D85A30 accent object, muted teal #1D9E75 secondary, soft long shadows from one warm light source, realistic human proportions, minimal facial features, cinematic eye-level composition, matte, no outlines — no corporate memphis style, no exaggerated limbs, no 3d render, no isometric, no clipart, no red crosses, no hospital, no medical uniforms --ar 4:5
ordinary office scene frozen mid-moment: one person slumping quietly on a chair, a colleague rising in alert concern, others still unaware at desks, plants and coffee mugs, tension told through posture only, wide cinematic frame with negative space on the left for text
training scene: person kneeling performing chest compressions on a CPR manikin, instructor crouching beside guiding their hand position, three colleagues watching closely, bright training room with tall warm window, coral AED trainer device on the floor as the single accent
factory workers in dark workwear practicing tourniquet application on a training limb simulator, instructor demonstrating, industrial hall hinted by simple background shapes, warm light from tall windows, coral safety vest on instructor as the single accent
calm office wall with a mounted coral AED cabinet, small framed three-step CPR reminder beside it, one person walking past mid-stride, quiet everyday atmosphere, sense of quiet preparedness, lots of warm negative space
close view of hands holding an international certificate with a QR code, two colleagues in soft conversation blurred-style in background shapes, CPR manikin resting on the floor behind, warm end-of-day light from window
Контроль якості генерацій: перевіряти кожну за чеклістом заборон нижче + за палітрою (піпеткою: фон ≈ Gray-100, фігури ≈ Gray-900, один корал на кадр). Якщо генератор дає «корпоративний» стиль із гумовими кінцівками — додати до негативу «no alegria style, no big tech illustration» і підкріпити промпт референс-зображенням.
Фаза 2 · Фотографії після фотосесій
Тепла документальність: кадри, ніби зняті колегою на хорошу камеру під час реального тренінгу. Зосередженість замість усмішок у камеру. Рух і дотик: руки на манекені, пальці на турнікеті, AED, що відкривається. Звичайний робочий одяг. Простори, де люди справді працюють.
Природне або тепле штучне світло; золотисто-теплий баланс білого. М'який контраст без HDR-перешарпу. Легкий теплий grade: трохи коралу в півтінях, приглушені сині. Невелика глибина різкості — фокус на руках і обличчях у дії. Один пресет обробки на всі фото сайту.
Шот-лист фотосесії (дзеркалить ілюстрації)
| № | Кадр | Замінює |
|---|---|---|
| 1 | Інструктор поправляє руки учня на манекені, група навколо, світло від вікна — горизонталь і вертикаль 4:5 | Блок 4 «Провідник» + блок 6 |
| 2 | Великий план: руки на манекені під час компресій, AED-тренажер у кадрі | Блок 6, соцмережі, статті |
| 3 | Турнікет на тренажері — руки у спецівках (виробничий/будівельний клієнт) | Блок 9, галузеві креативи |
| 4 | AED на стіні офісу клієнта + пам'ятка CPR поруч, людина проходить повз | Блок 7 «після» |
| 5 | Сертифікат із QR-кодом у руках, тренінг-кімната на тлі, вечірнє світло | Блок 8 «Докази» |
| 6 | Група 12–16 людей у роботі — загальний план зали, рух, без поз у камеру | Hero (фінальна заміна) + відео-постер |
| 7 | Портрети інструкторів у дії (не статика на тлі логотипу) | Блок 4, сторінка «Про нас», LinkedIn |
Юридичне: письмові дозволи на використання облич усіх, хто в кадрі (працівники клієнта — через HR клієнта). Без дозволу — кадр не публікується, яким би сильним не був.
Чого уникати (обидві фази)
✕Заборонено
Червоні хрести у будь-якому вигляді
Медперсонал у білих халатах і формі, стерильні інтер'єри клінік
Іконки серця з лінією ЕКГ, кардіограми
Синьо-білі «аптечні» кольорові схеми
Кров, реальні травми, шок-контент, сирени, ноші
Постановочні усмішки в камеру, рукостискання, «бізнес-сток»
Corporate Memphis / Alegria: гумові гіпертрофовані кінцівки, безликі фіолетові чоловічки
3D-рендери, ізометрія, кліпарт, emoji-стиль, героїчний пафос
✓Натомість
Теплі робочі простори зі звичайними людьми
Навчальне обладнання: манекени, тренувальні AED, турнікети
Момент злагодженої дії команди, емоція через позу і жест
Палітра бренду: теплі сірі, графіт, один кораловий акцент
Кадри «зсередини сцени», очима учасника
Один стиль ілюстрацій / один пресет фото на весь сайт
UI та інтерактив: деталі, що тримають характер
Усі демо нижче — живі: наведіть, натисніть, поставте фокус. Це самі компоненти сайту, не їх зображення.
Кнопки
| Стан / тип | Специфікація |
|---|---|
| Primary default | Фон Coral, текст White 600 14–15px, padding 13/22px (large 16/28px), radius 10px, тінь 0 4px 12px rgba(216,90,48,.18) |
| Primary hover | Фон Coral Dark + translateY(−1px), 120ms |
| Primary active | translateY(0), тінь зменшена — ефект натискання |
| Primary focus | outline 2px Coral, offset 2px (клавіатурна навігація обов'язкова) |
| Secondary | Прозорий фон, бордер 1.5px Gray-200, текст Dark; hover — бордер Dark. На темному: бордер rgba(255,255,255,.2), текст White |
| Disabled | Фон Gray-100, текст Gray-400, cursor not-allowed, без тіні |
| Правила | Один primary на екран. Текст — дієслово дії; ніколи «Дізнатися більше» для головного CTA. Мобайл: повна ширина, мін. висота 48px |
Форми та поля
| Параметр | Специфікація |
|---|---|
| Поле | Бордер 1.5px Gray-200, radius 10px, padding 13/16px, текст 15–16px Dark, плейсхолдер Gray-400 |
| Focus | Бордер Coral, 150ms; без тіней і світінь |
| Label | 12.5px Manrope 600 Gray-700, над полем, відступ 6px |
| Помилка | Бордер #C03A2B + текст 12.5px під полем тим самим кольором. Без анімацій-трясіння |
| Склад форм | Головна форма — максимум 3 поля (ім'я, компанія, телефон). Лід-магніт — 1 поле (email). Кожне додаткове поле = втрачені ліди |
| Мікрокопі | Під кнопкою завжди: «Передзвонюємо протягом 2 годин у робочий час. Без скриптів.» + іконка замка |
Іконографія
| Параметр | Специфікація |
|---|---|
| Стиль | Outline (лінійні), без заливки; скруглені кінці ліній (round cap/join) |
| Товщина | 1.75–2px на сітці 24×24px; не масштабувати товщину при ресайзі |
| Розміри | 16 / 20 / 24px у тексті та UI; 36px — у плитках proof-карток (підкладка Coral Light, radius 10px) |
| Кольори | Gray-600 нейтральні, Coral акцентні, Teal — чекмарки успіху |
| Бібліотека | Lucide / Feather (узгоджена геометрія). Кастомні — у тій самій сітці |
| Заборонено | Серця з ЕКГ, хрести, краплі крові, emoji замість іконок, заливні «жирні» іконки |
Мікроанімації — живі демо
Натяк на серцебиття без жодної ЕКГ-графіки. Hero та кутові маркери.
Єдина перманентна анімація сторінки — кнопка відео у блоці 6.
Від 0 при появі у в'юпорті, 1.2–1.6s ease-out, tabular-nums. Блоки 3 і 8.
| Деталь | Специфікація |
|---|---|
| Таймер hero | 04:00 → відлік до 03:47 за перші ~13с перегляду, далі стоп. Одна делікатна демонстрація «час іде» |
| Hover-картки | translateY(−4px) + тінь, 200ms; лише на пристроях з hover (media hover:hover) |
| Скрол-вхід | fade + translateY(24px), 500–600ms, stagger 80–100ms. Вимикається при prefers-reduced-motion |
Cookies-банер
| Параметр | Специфікація |
|---|---|
| Розташування | Фіксований знизу: десктоп — картка ліворуч (max-width 420px, radius 14px, тінь); мобайл — на всю ширину з відступами 12px |
| Кнопки | «Прийняти всі» (primary) + «Лише необхідні» (secondary) — рівноцінні за помітністю, без dark patterns |
| Поведінка | З'являється через 1.5с (slide-up 300ms), не блокує контент, вибір зберігається 12 міс. Аналітика (GA4, Meta Pixel) — лише після згоди |
SEO і мета-дані: uk + en
Українська версія — основна (корінь домену), англійська — /en/. Кожна сторінка має канонічний URL і повний набір hreflang. Title — за формулою [Цінність] — [Продукт/Стандарт] | TM ResQ, до 60 символів.
Title і description
| Сторінка | Title (≤60 зн.) та description (≤155 зн.) |
|---|---|
| Головна (uk) | Title: TM ResQ — Команда, яка рятує. Навчання BLS, STB для бізнесу Description: Корпоративне навчання домедичної допомоги за стандартами ERC та ACS. BLS, PBLS, STB за 1 день. Виїзд по всій Україні. Сертифікати з QR-верифікацією. |
| Головна (en) | Title: TM ResQ — Corporate First Aid Training. BLS, STB | Ukraine Description: Corporate first aid training to ERC and ACS standards. BLS, PBLS, STB in one day, on-site across Ukraine. Certificates with QR verification. |
| Внутрішні (шаблон uk) | Title: [Назва курсу] — [результат за 1 день] | TM ResQ Приклад: Курс BLS — серцево-легенева реанімація та AED за 1 день | TM ResQ Description: [що навчиться команда] + [стандарт і сертифікат] + [формат: 1 день, виїзд] + CTA |
| Політика (uk/en) | Політика конфіденційності | TM ResQ · Privacy Policy | TM ResQ |
OG-теги та шеринг
<meta property="og:type" content="website"> <meta property="og:site_name" content="TM ResQ"> <meta property="og:title" content="TM ResQ — Команда, яка рятує"> <meta property="og:description" content="Навчання BLS, PBLS, STB за стандартами ERC та ACS. 1 день. Виїзд до вас. Сертифікати з QR-верифікацією."> <meta property="og:image" content="https://tmresq.ua/og/og-main-uk.png"> <!-- 1200×630, специфікація у главі 02 --> <meta property="og:url" content="https://tmresq.ua/"> <meta property="og:locale" content="uk_UA"> <meta property="og:locale:alternate" content="en_US"> <meta name="twitter:card" content="summary_large_image">
Канонічні URL та hreflang
<link rel="canonical" href="https://tmresq.ua/"> <link rel="alternate" hreflang="uk" href="https://tmresq.ua/"> <link rel="alternate" hreflang="en" href="https://tmresq.ua/en/"> <link rel="alternate" hreflang="x-default" href="https://tmresq.ua/"> <!-- На англійській — той самий блок, canonical = /en/ -->
| Правило | Деталі |
|---|---|
| Структура URL | uk — корінь (/), en — префікс /en/. Дзеркальна структура сторінок між мовами |
| x-default | Українська версія (основний ринок) |
| Canonical | Кожна мовна версія канонічна сама на себе; ніколи uk ↔ en між собою |
| html lang | lang="uk" / lang="en" відповідно до версії |
| Schema.org | Organization (logo, contactPoint, sameAs LinkedIn) на всіх сторінках + Course для продуктових секцій + FAQPage для FAQ. JSON-LD |
| Технічне | Одна h1 на сторінку (hero); alt-тексти мовою сторінки; sitemap.xml з обома версіями; постер замість важких відео на повільному з'єднанні |
Конфіденційність і cookies
Стандартні тексти-основи для адаптації юристом перед публікацією. Верстка футера обов'язково містить юридичні посилання обома мовами.
Футер: обов'язкові елементи
| Елемент | Вимога |
|---|---|
| Юридичні посилання | «Політика конфіденційності» + «Налаштування cookies» (повторне відкриття банера) — нижній рядок футера, 12.5px Gray-600 |
| Копірайт | © [рік] TM ResQ. Усі права захищені. Рік оновлюється автоматично |
| Реквізити | Юридична назва (ФОП/ТОВ) — після підтвердження юристом; обов'язкова для прийому онлайн-оплат |
| Контакти | Телефон, email, LinkedIn, «Київ + вся Україна» |
Політика конфіденційності — каркас тексту
1. Хто ми. TM ResQ ([юридична назва], Україна) — оператор персональних даних, зібраних через сайт tmresq.ua. Контакт із питань даних: hello@tmresq.ua.
2. Які дані збираємо. Дані форм: ім'я, назва компанії, телефон, email — те, що ви самі залишаєте у заявці або підписці на чекліст. Технічні дані: cookies, IP-адреса, тип пристрою, поведінка на сайті (через інструменти аналітики, лише за вашою згодою).
3. Навіщо. Звʼязок щодо вашої заявки; надсилання запитаних матеріалів (чекліст); покращення сайту на основі знеособленої аналітики. Ми не продаємо і не передаємо ваші дані третім особам, окрім сервісів, які технічно забезпечують роботу сайту (хостинг, email-розсилка, аналітика) на підставі договорів обробки.
4. Підстава та строк. Обробка — на підставі вашої згоди (форма, банер cookies) та законного інтересу відповідати на звернення. Дані заявок зберігаються до 3 років або до вашого запиту на видалення.
5. Ваші права. Ви можете запросити доступ до своїх даних, їх виправлення або видалення, відкликати згоду на розсилку (лінк відписки у кожному листі) — напишіть на hello@tmresq.ua, відповідаємо протягом 30 днів.
6. Cookies. Необхідні cookies забезпечують роботу сайту і не потребують згоди. Аналітичні та маркетингові — лише після вашого вибору в банері; змінити вибір можна будь-коли через «Налаштування cookies» у футері.
7. Зміни. Оновлення політики публікуються на цій сторінці із зазначенням дати останньої редакції.
Обов'язково перед запуском: текст адаптує юрист під фактичну юрособу, перелік сервісів (CRM, аналітика, email-платформа) та вимоги чинного законодавства України про захист персональних даних. Англійська версія — переклад фінального тексту, не окрема редакція.
Текст cookies-банера (фінальний)
Cookies на цьому сайті
Використовуємо cookies для роботи сайту та аналітики. Жодних продажів даних — лише розуміння, що вам корисно. Політика конфіденційності
[Прийняти всі] [Лише необхідні]
Cookies on this site
We use cookies to run this site and understand what's useful to you. We never sell your data. Privacy Policy
[Accept all] [Essential only]