ads-stories/creative-direction.md

🎨 Creative Direction — Stories Series

Статус: Foundation v1.0 (2026-07-05)
Проект: Серия рекламных Stories-роликов (WhatsApp / Instagram / Telegram / VK)
Формат: Вертикальное видео 1080×1920 (9:16)
Стиль: Bauhaus + Apple Fusion — минимализм, функциональность, технологичность

---

1. BRAND DNA

1.1 Архетип бренда: The Architect / The Sage

Строим системы. Не продаём услуги.
Наш бренд — это инженерная точность, структурная ясность, технологическая глубина.

Характер:

• Уверенный, но не хвастливый
• Говорит фактами, не эмоциями
• Решения, не обещания
• Прозрачность > мистификация

Не:

• Не "креативное агентство"
• Не "инновационные AI-решения"
• Не "трансформируем ваш бизнес"
• Не клише, не buzzwords

---

2. VISUAL IDENTITY

2.1 Цветовая система

Роль	Hex	Usage
Canvas	#050508	Фон (deep space black)
Surface	#0D0D14	Карточки, панели
Ink	#FFFFFF	Основной текст
Ink-muted	rgba(255,255,255,0.55)	Вторичный текст
Accent-primary	#0F62FE	IBM Carbon B2 — CTA, акценты
Accent-cyan	#00B8D4	AI/tech elements
Accent-purple	#8A2BE2	Инновации, градиенты
Warning	#E34850	Pain-элементы, штрафы, ошибки
Success	#18A55A	Результаты, решения, метрики
Divider	rgba(255,255,255,0.08)	Линии, разделители

AI Gradient (для AI-продуктов):

linear-gradient(135deg, #00B8D4 0%, #8A2BE2 50%, #0F62FE 100%)

Gradient Warm (для ROI/money-контента):

linear-gradient(135deg, #18A55A 0%, #0F62FE 100%)

2.2 Типографика

Элемент	Шрифт	Вес	Размер	Tracking
Hero Text	Inter	900 (Black)	110px	-0.03em
Headline	Inter	800	68px	-0.02em
Subheadline	Inter	700 (Bold)	48px	-0.01em
Body	Inter	500 (Medium)	40px	0
Monospace (data)	JetBrains Mono	400	32px	-0.02em
CTA Button	Inter	800	52px	0.05em uppercase
Small label	Inter	600	28px	0.08em uppercase

2.3 Компоновка кадра (1080×1920)

┌──────────────────────────┐
│  ▄▄▄▄ SAFE ZONE 280px   │  ← Не трогать (WhatsApp/IG UI overlay)
│  [Logo / Brand mark]     │
│                          │
│                          │
│     ┌──────────────┐     │
│     │  HOOK TEXT   │     │  ← Hero 110px
│     │   (макс 2    │     │      Центр-верх
│     │    строки)    │     │
│     └──────────────┘     │
│                          │
│     ┌──────────────┐     │
│     │   BODY TEXT  │     │  ← Pain/Solution 40-48px
│     │   (макс 3    │     │      Центр
│     │    строки)    │     │
│     └──────────────┘     │
│                          │
│                          │
│  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  │  ← Не трогать (IG/Telegram UI)
│  [CTA Button]  [Link]    │      Низ 1240-1920px
└──────────────────────────┘

Safe area: Y=280px → Y=1540px (доступно 1260px высоты для контента)

2.4 Элементы дизайна

Карточки данных:

• Фон: rgba(255,255,255,0.04)
• Border: 1px solid rgba(255,255,255,0.08)
• Border-radius: 16px
• Padding: 40px

Графические маркеры:

• Тонкие линии (1px rgba(255,255,255,0.15))
• Точки/индикаторы (6px circles)
• Горизонтальные акцент-линии (2px accent)

Декоративные элементы:

• Минимальные сетки/линии на фоне (опционально)
• Градиентные блобы на заднем плане (opacity 0.03–0.06)
• Без текстур, без шумов, без паттернов

---

3. MOTION DESIGN

3.1 Анимационные принципы

1. Функция > Форма — каждая анимация должна помогать понимать контент
2. Меньше = больше — не более 2 одновременных анимаций на сцене
3. Физика реального мира — ease-in-out, инерция, вес
4. Последовательность — элементы появляются строго по таймлайну
5. Читаемость > Красота — если анимация мешает прочитать, убери анимацию

3.2 Библиотека анимаций

Имя	Тип	Вход	Выход	Длительность	Easing
fade-up	Entrance	opacity:0, y:60	opacity:1, y:0	0.6s	power3.out
scale-up	Entrance	opacity:0, scale:0.8	opacity:1, scale:1	0.7s	back.out(1.7)
slide-left	Entrance	opacity:0, x:80	opacity:1, x:0	0.5s	power3.out
fade-in	Entrance	opacity:0	opacity:1	0.4s	power2.out
count-up	Entrance	value:0	value:N	1.2s	power2.inOut
pulse	Hold	—	scale 1.0→1.05→1.0	0.8s	sine.inOut yoyo×2
wipe-out	Exit	—	opacity:0, y:-30	0.25s	power2.in

3.3 Timing rules

• Hook entrance: 0.3s delay от начала сцены
• Body entrance: stagger +0.15s относительно предыдущего элемента
• Scene transition: crossfade 0.15s (предыдущая сцена уходит, новая появляется)
• CTA hold: минимум 2 секунды видимости
• Total scene duration: 3–5s (hook), 4–6s (solution), 3–4s (CTA)

---

4. CONTENT FRAMEWORK

4.1 Рубрикатор (контентные категории)

Категория	Цель	Формула	Частота
🔥 Pain	Попасть в боль	Факт/цифра/вопрос → узнавание	40%
💡 Solution	Показать продукт	Проблема → решение → выгода	30%
📊 Proof	Доверие	Цифра кейса → социальное доказательство	15%
⚡ Quick Win	Польза	Лайфхак/инсайт за 10s	10%
🎯 Brand	Позиционирование	Философия, миссия, видение	5%

4.2 Формула ролика (15s standard)

┌────────────────────────────────────────────────┐
│ 0–2s  HOOK     │ Цепляющий вопрос или факт    │ ← Остановка скролла
│ 2–7s  PAIN     │ Проблема, которую узнаёт ЦА  │ ← Эмоциональный крючок
│ 7–12s SOLUTION │ Продукт как ответ            │ ← Рациональное решение
│ 12–15s CTA     │ Конкретное действие           │ ← Что делать дальше
└────────────────────────────────────────────────┘

Правило 3-х секунд: Если до 3-й секунды нет HOOK — ролик провалился.

4.3 Template-система

Template A — Pain/Agitate/Solve (15s)

• Hook: Шокирующий факт/вопрос
• Pain: Проблема × контекст
• Solution: Продукт → выгода
• CTA: Действие

Template B — How It Works (20s)

• Hook: "Как [X] решает [Y]"
• Steps: 3 визуальных шага
• Result: Конкретная метрика
• CTA: Ссылка

Template C — Before/After (15s)

• Hook: "До / После"
• Before: Ручная рутина, потери
• After: Автоматизация, результат
• CTA: Попробуй

Template D — Number Fact (10s)

• Hook: Крупная цифра
• Context: Что она значит
• CTA: Узнай больше

---

5. PRODUCT MESSAGING

5.1 ROI24 — Автоматизация маркетинга

Элемент	Текст
Одно предложение	Платформа автоматизации маркетинга на 7 площадках с AI-генерацией
Hook (pain)	"Сколько лидов утекает пока вы спите?"
Solution	"AI-боты обрабатывают лиды 24/7. Вы — только закрываете сделки."
Proof	"10 000+ компаний уже автоматизировали"
CTA	"Попробуй бесплатно →"

5.2 Call24 — AI-аналитика звонков

Элемент	Текст
Одно предложение	Каждый звонок — аналитика. Не мнение.
Hook (pain)	"Ваш менеджер врёт. И вы это знаете."
Solution	"AI анализирует 100% звонков. Реальные инсайты для роста продаж."
Proof	"Средний рост конверсии +34% после внедрения"
CTA	"Слушай демо →"

5.3 152-fz Checker

Элемент	Текст
Одно предложение	Проверка сайта на 152-ФЗ за 5 секунд. Не за 500K ₽.
Hook (pain)	"Штраф за 152-ФЗ: до 6 000 000 ₽ за один сайт"
Solution	"Автосканирование за 5 секунд. Полный чек-лист соответствия."
Proof	"500+ проверок в день. 0 пропущенных нарушений."
CTA	"Проверь свой сайт →"

5.4 Локальный AI

Элемент	Текст
Одно предложение	LLM на своём сервере. Данные не уходят в облако.
Hook (pain)	"Облачный ИИ — это данные третьей стороны."
Solution	"Qwen3.6 на своём железе. Полный контроль. API совместим с OpenAI."
Proof	"2×RTX 3080 Ti · 140 tok/s · Без подписок"
CTA	"Собери свой AI-кластер →"

---

6. AUDIO STRATEGY

6.1 Звуковой дизайн

Голос (TTS):

• Если нарратив нужен: мужской, спокойный, уверенный тембр
• Скорость: 1.1× (чуть быстрее естественного — удерживает внимание)
• Акцент: нейтральный российский

Музыка (BGM):

• Mood: технологичный, минималистичный, не отвлекающий
• BPM: 90–110 (спокойный, не агрессивный)
• Инструменты: синтезаторы, ambient pads, минимальный beat
• Volume: -20dB относительно голоса (фон, не доминанта)

SFX (звуковые эффекты):

• Transition whoosh: мягкий, короткий (0.15s)
• Click/tap: для появления элементов (0.08s)
• Subtle bass drop: для акцентных моментов (1.2s)

6.2 Правила аудио

1. 85% Stories смотрятся БЕЗ звука → текст на экране обязателен
2. Если есть нарратив — дублировать субтитрами
3. Без звука ролик должен быть ПОЛНОСТЬЮ понятен
4. Музыка не должна перекрывать голос (sidechain compression)

---

7. PRODUCTION PIPELINE

7.1 Процесс создания ролика

1. BRIEF          → Выбрать рубрику + продукт + template
2. SCRIPT         → Написать текст по формуле (Hook/Pain/Solution/CTA)
3. STORYBOARD     → Описать визуал каждого кадра
4. FRAME DESIGN   → Создать HTML-композицию в HyperFrames
5. ANIMATION      → Настроить GSAP timeline
6. VALIDATE       → lint → validate → inspect → snapshot
7. DRAFT RENDER   → npx hyperframes render --quality draft
8. REVIEW         → Просмотр, правки, итерации
9. FINAL RENDER   → npx hyperframes render --quality high
10. OPTIMIZE      → Оптимизация под платформы (размер, битрейт)
11. PUBLISH       → Загрузка на платформы

7.2 Quality Gates

• npx hyperframes lint — 0 ошибок
• npx hyperframes validate — 0 console errors
• npx hyperframes inspect — 0 errors
• npx hyperframes snapshot — текст в safe zone
• Контраст текста ≥ 4.5:1
• Текст читаем при просмотре на телефоне (не меньше 36px)
• Нет ошибок в текстах (орфография, цифры, факты)
• CTA виден ≥ 2 секунды

7.3 Оптимизация для платформ

Платформа	Max size	Bitrate	Codec
Instagram Stories	30s / 4GB	8–12 Mbps	H.264
WhatsApp Status	16 MB	6–8 Mbps	H.264 baseline
Telegram Stories	10 MB	6–8 Mbps	H.264
VK Клипы	5 min	10–15 Mbps	H.264

WhatsApp constraint (самый ограничивающий): 16MB, ≤30s. Целимся ≤10MB для запаса.

---

8. CONTENT CALENDAR (План серии)

Wave 1: Foundation (неделя 1–2)

#	Продукт	Рубрика	Template	Цель
1	ROI24	Pain	A	Остановка скролла фактом
2	Call24	Pain	A	Эмоциональный hook
3	152-fz	Pain	D	Шоковая цифра
4	Local AI	Brand	B	Позиционирование
5	All	Solution	A	Общий охват

Wave 2: Proof (неделя 3–4)

#	Продукт	Рубрика	Template	Цель
6	ROI24	Proof	C	Социальное доказательство
7	Call24	Solution	B	Как это работает
8	152-fz	Solution	A	Простота использования
9	Local AI	Proof	D	Технические метрики
10	All	Quick Win	D	Быстрая польза

---

9. DESIGN TOKENS (для повторного использования)

# Colors
canvas: "#050508"
surface: "#0D0D14"
ink: "#FFFFFF"
ink-muted: "rgba(255,255,255,0.55)"
accent-primary: "#0F62FE"
accent-cyan: "#00B8D4"
accent-purple: "#8A2BE2"
warning: "#E34850"
success: "#18A55A"
divider: "rgba(255,255,255,0.08)"

# Gradients
ai-gradient: "linear-gradient(135deg, #00B8D4, #8A2BE2, #0F62FE)"
warm-gradient: "linear-gradient(135deg, #18A55A, #0F62FE)"

# Typography
font-primary: "Inter"
font-mono: "JetBrains Mono"
hero-size: "110px"
headline-size: "68px"
body-size: "40px"
small-size: "28px"

# Layout
safe-top: "280px"
safe-bottom: "380px"
content-height: "1260px"
card-radius: "16px"
card-padding: "40px"

# Animation
ease-out: "power3.out"
ease-in: "power2.in"
ease-back: "back.out(1.7)"
ease-sine: "sine.inOut"
transition-duration: "0.6s"
stagger: "0.15s"

---

Creative Direction Foundation — living document. Обновляется по мере разработки роликов и получения данных о вовлечённости.