#1Brand visual language
Финальное решение
Performante = «Soft 3D Editorial». Базовая эстетика — uprock white-cards (D15 канон) + Stripe/Linear минимализм + Mailchimp/Intercom SMB-warmth. Recurring motif — «glow pill»: округлый mint-500 pill с soft glow-aura mint-500/30, символизирует AI-присутствие, появляется в hero (floating), illustration-cards (вместо квадратной иконки), section dividers. Аналог Vercel triangle, Stripe parallelogram, Notion cubes.
Обоснование. Проект работает на двух фронтах одновременно: ICP-1 (владелец салона/кафе/клиники) хочет «спокойного и уверенного как Тинькофф», ICP-2 (таргетолог) хочет «современный SaaS уровня Linear». Anti-AI-эстетика ToV запрещает 3D-роботов, нейросети-узлами, сине-фиолетовый «AI-вайб» — это режет половину обычных SaaS ref'ов.
3 якоря: Uprock (D15 канон, white-cards + photography-centric), Intercom + Mailchimp (SMB-friendly approachable, не techy-cold), Stripe + Linear (credibility, real product/creative screenshots вместо абстракций).
Анти-якоря: Vercel (AI-вайб «узлы»), Framer (3D-glassmorphism), Notion full hand-drawn (слишком playful), PromoPult/eLama (РФ-конкуренты — НЕ хотим выглядеть как они).
Uprock.ru
D15 канон. White-card pattern, Ellipse decorative shapes, photography-centric. Забираем — основу cards и whitespace ритм.
Intercom
White + cyan + pastel. Calm, optimistic, AI без киберпанка. Забираем — мягкие fills между секциями, low-density rhythm.
Mailchimp
Black/white/teal, flat + real photography of business owners. Approachable без corporate. Забираем — real-people photo, low-decoration.
Stripe
White + parallelogram brand mark embedded в каждое image. Reliability без cold. Забираем — recurring motif principle (один знаковый shape).
Linear
Nearly-monochrome + status colors, real product screenshots. Premium function-first. Забираем — real UI > абстракции, high-density done right.
Brand visual language — 7 характеристик для design-system.md:
1Иллюстрации
— semi-flat с soft depth. Не fully flat (вяло), не photo-3D (запрещено ToV). Geometric shapes + subtle inner gradient + soft shadow. Для героев/людей — real photography (Mailchimp pattern), не stock smiles, не cartoon.
23D или нет
— soft 3D только в
одном элементе: glow-pill motif. Остальное — flat. Wow без киберпанка.
3Палитра
— mint-500 primary + ink-900 secondary + amber-400 единичный accent. Декоративные (rose-400, sky-400, purple-400) — точечно в иллюстрациях, не одновременно.
Gradients как фон — запрет, только soft glow-auras вокруг point elements.
4Wow-эффект
— glow auras вокруг mint-pill и accent buttons (shadow-xl shadow-mint-500/30) + soft float animation (3-4s up/down translateY 4-6px) на recurring motif в Hero.
NO particles, NO sparkles bouncing, NO rotating shapes.
5Recurring motif
— «
glow pill»: pill 120-200px шириной, mint-500 fill, soft glow blur-20px вокруг, внутри белая микро-иконка lucide + 1-2 слова. Появление: hero (floating), illustration-cards (вместо квадратной иконки), section dividers. Аналог Vercel triangle.
6Density
— moderate-low. Большие padding (p-6 sm:p-8 cards / py-16 sm:py-20 sections). Чередование white/ink-50 секций (D15). Один-два иллюстративных элемента на секцию, не больше.
7Mood
— спокойный профессионализм (ICP-1 Тинькофф-вайб) + approachable warmth (Mailchimp SMB) + SaaS credibility (Stripe/Linear) + anti-инфобиз (нет gradient mesh, 3D-роботов, neon, восклицательных, «революционный»).
#2Floating creatives — две локации
Финальное решение
Локация A — mosaic-texture фон 12-18 креативов с opacity 0.10 + blur(8px), slow-pan CSS-only анимация 60s linear, в секции «Что меняется когда AI ведёт кампанию». Локация B — horizontal-scroll carousel 9-12 креативов с snap-scroll, full opacity, в секции «Кейсы» (функциональное demo, не декор). НЕ в Hero / footer / pricing / final CTA.
A — «Что меняется» mosaic-фон. Самое визуальное место воронки, где demонстрируется ценность. Mosaic с opacity 0.10 + blur — визуальная метафора «множество креативов работают на тебя» без шумных счётчиков (D15 «убраны мета-подписи»). НЕ парallax (D15 anti-pattern), только slow-pan для life-feel.
B — «Кейсы» carousel. Сейчас кейсы текстовые («Студия маникюра: 47 записей, CPL 380 ₽»). Реальный креатив рядом с цифрой = двойное доказательство (ICP-1 trigger «реальные цифры + скрины»). Touch-snap carousel — стандарт, Тимур уже использует в dashboard.
┌──────────────────────────────────────────────────────────────┐
│ [section bg-white] │
│ │
│ [eyebrow] AI РАБОТАЕТ КАЖДЫЙ ДЕНЬ │
│ [h2] Что меняется когда AI ведёт кампанию │
│ │
│ ╔══════════════════════════════════════════════════════╗ │
│ ║ [creative][creative][creative][creative] ║ │
│ ║ [creative][creative][creative][creative] ║ │ ← mosaic
│ ║ [creative][creative][creative][creative] ║ │ opacity-10
│ ║ [creative][creative][creative][creative] ║ │ blur-md
│ ╚══════════════════════════════════════════════════════╝ │ slow-pan 60s
│ │
│ ╔════════════════════════════════╗ ╔════════════════╗ │
│ ║ [glow-pill] AI создаёт креа.. ║ ║ [stat number] ║ │
│ ║ [body text] ║ ║ 12 креативов ║ │
│ ╚════════════════════════════════╝ ║ в неделю ║ │
│ ╚════════════════╝ │
└──────────────────────────────────────────────────────────────┘
Performance. Mosaic 1 spritesheet WebP (~200-300 KB) lazy + CSS-only animation. Carousel — каждый креатив 50-80 KB lazy, intersection observer. Slow float — CSS transform на GPU, не JS.
#3Ниши — 6 × 3 archetype = 18 креативов
Финальное решение
3 уже в pipeline + 3 новых: BrightSmile / Zoomdent / Smile-lab (medical) + Blossom Beauty МСК / Local-kitchen Алматы / Borodach МСК (beauty / F&B / services). Бюджет генерации: 18 × $0.135 = ~$2.43 через gemini-3-pro-image.
| # | Ниша | Тип | Гео | Mood | Gender | Статус |
|---|
| 1 | BrightSmile | medical | Алматы | clinical | mixed | в pipeline |
| 2 | Zoomdent | medical aesthetic | МСК | premium | feminine | в pipeline |
| 3 | Smile-lab | medical family | МСК | warm friendly | parents | в pipeline |
| 4 | Blossom Beauty | beauty | МСК | warm feminine | feminine | добавить brief |
| 5 | Local-kitchen | F&B | Алматы | appetizing | universal | добавить brief |
| 6 | Borodach | services | МСК | industrial | masculine | добавить brief |
Гео-баланс: 4 МСК / 2 Алматы — отражает Performante ICP (KZ-стартап с РФ-рынком). Gender: 3 feminine + 2 universal + 1 masculine — соответствует icp-owner.md «в beauty/edu 55-65% женщины, в B2B/F&B 60% мужчины». Visual variety: 6 разных moods (clinical / premium / warm family / warm feminine / appetizing / industrial) — даёт mosaic с настоящей diversity.
Risk-mitigation для dental-overweight (3 из 6 = medical): в Hero/carousel показываем 1 dental + 5 non-dental, в mosaic-фоне смешиваем чтобы взгляд не упирался в одну категорию.
Skip-list: фитнес/yoga (overlap с beauty), автосервис (низкий IG-engagement), edu-курсы (anti-trigger от инфоцыган), клининг (визуально слабый). Phase 2 можно добавить.
#4Hero illustration card — гибрид
Финальное решение
Сохраняем preview-card с analysis cards (Niche/Audience) + StatusPill + floating chips (D14 контракт-ответ нельзя ломать). Добавляем brand wrapper: glow-aura за card (shadow-2xl shadow-mint-500/20 + soft ambient), один floating glow-pill сбоку с animate-float-slow, blurred mosaic из 4-6 креативов за card (opacity 0.12 + blur 24px). НЕ заменяем на абстрактную иллюстрацию.
Принцип D14 (continuity). Hero — контракт-ответ на FB-крео. Юзер кликнул потому что увидел обещание «AI делает рекламу». Preview-card с реальными analysis cards — это подтверждение «вот что я получу». Замена на абстрактную illustration — conversion drop 15-25% по pattern «Linear доказывает скриншотами, не abstract-3D».
D26. Hero уже перегружен (dark badge + mint-pill + H1 + sub + InstaInput). Добавление абстрактной картинки = pricing-overload anti-pattern.
Что даёт гибрид. Visual premium через glow-aura + floating pill (wow-эффект). Brand recognition (glow-pill motif появляется в Hero первым, повторяется дальше — Vercel/Stripe principle). Mosaic background depth — намёк на «много креативов» создаёт curiosity → юзер скроллит → находит локацию A в «Что меняется». Funnel pull через визуальную intrigue.
┌──────────────────────────────────────────────────────────────┐
│ [Hero section] │
│ [dark badge] В РФ это есть только у нас (D26) │
│ [H1] AI-таргетолог. │
│ [H1] Ведёт рекламу в Instagram и TikTok сам. │
│ [Sub] Сам анализирует, делает креативы, запускает. │
│ │
│ ┌───────────┐ ┌────────────────────────────────────┐ │
│ │ [Input │ │ ░░ blurred mosaic ░░ ← background │ │
│ │ Insta] │ │ ░░ 4-6 creatives ░░ opacity 0.12 │ │
│ │ │ │ │ │
│ │ [Button] │ │ ╔══════════════════════════════╗ │ │
│ │ │ │ ║ [preview-card] существующий ║ │ │
│ │ │ │ ║ Niche: beauty ║ │ │
│ │ │ │ ║ Audience: 28-45 ж ║ │ │
│ │ │ │ ║ [chips: trigger1, trig.2] ║ │ │
│ │ │ │ ╚══════════════════════════════╝ │ │
│ │ │ │ └─ glow-aura mint-500/20 │ │
│ │ │ │ │ │
│ │ │ │ ╭───────────────╮ │ │
│ │ │ │ │ ◉ AI смотрит │ ← float │ │
│ │ │ │ ╰───────────────╯ glow-pill │ │
│ │ │ │ motif │ │
│ └───────────┘ └────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
z-0section gradient background
z-1blurred mosaic ::before pseudo (4-6 креативов opacity 0.12 blur 24px)
z-2glow-aura ::after pseudo (mint-500/20 radial gradient)
z-3preview-card (existing)
z-4floating glow-pill (recurring motif, animate-float-slow)
z-5floating chips with triggers (existing)