landing-2 → Demo

landing-2 — Design Book

Direct-response long-form landing в стиле русского инфомаркетинга. Dual-accent violet + orange с жёсткой ролевой асимметрией, warm dual-layer shadow, pill-radii extremes, 25000 px scroll с 10 content-блоками.

Цвета

Dual-accent с жёсткой ролевой асимметрией: violet = action, orange = navigate, green = KPI. Peach и tan — третий warm-tone для чекбоксов и hero-капсул.

ink-primary#0D0D10body text (1371×)
violet#5E4ABBprimary / action
violet-muted#8E84B5decorative
orange#FF8A00secondary / navigate
orange-deep#EB3B00vivid CTA (1×)
peach#FFC887checkbox warm
tan#DFB888hero capsule
success#76BE71KPI inline (17×)
danger#E85D54alert / urgency
bg-dark#222222accent-section (rare)
bg-cream#FCFBFAsubtle surface
neon-dormant#E3FE39reserved, not used
Dormant variable. Neon-yellow зарезервирован в :root оригинала как --color-pg, но ни разу не применён в рендере. Возможно заготовка под редизайн. В демо — не использовать как активный акцент.

Типографика

Inter (open-source) — 98% текста на weight 400. Иерархия через размер (50/30/20/15), не через вес. Body 15/22 — не 16/24 — уплотнение для long-form. Letter-spacing 0.4 px pervasive — подпись бренда даже на body.

fs-55 hero mega · weight 400 · lh 62 Стабильный поток клиентов
fs-50 hero · weight 400 · lh 62 Здравствуйте, меня зовут…
fs-30 h3 · weight 400 · lh 35 Система из 4 Landing Page
fs-20 subheading · weight 400 · lh 25 Вы будете получать любое количество заявок со всех рекламных площадок
fs-15 body · weight 400 · lh 22 · ls 0.4 Не секрет, что клиенты редко хотят купить сразу. Поэтому мы прогреваем аудиторию умными авторассылками с откликом до 40%.
accent italic — point highlight (Playfair Display Italic, 1 occurrence!) «произведением искусства»

Радиусы

Pill-dominant: ВСЕ CTA капсулы 100 px, tags 1000 px. Инпуты flat (0 px) — role contrast. Dual-direction 10/25 — signature-асимметрия для hero-капсул.

0
input
5
20
card
30
40
100
CTA ★
1000
tag ★
20/0
tab-top
0/26
banner-btm
10/25
capsule-tl

Тени

Signature — warm dual-layer drop (orange-tint 0.05). Не упрощать в single. Inset 30 px horizontal — side-light surface (17×). Violet glow hover — экономно, максимум 1-2 раза на viewport.

card rgba(13,13,16,0.1) 0 35 70, rgba(255,138,0,0.05) 0 15 75

SIGNATURE · 57 occurrences

card-strong rgba(13,13,16,0.35) 0 0 70, rgba(255,138,0,0.05) 0 15 75

Emphasis card · 7 occurrences

inset-side rgba(13,13,16,0.1) 30 25 60 -10 inset, orange 0.05 inset

30 px horizontal side-light · 17 occurrences

orange-drop rgba(255,138,0,0.2) 0 25 35

Accent-only · subtle

glow-violet (hover) rgba(94,74,187,0.9) 0 30 100

DRAMATIC · только play/add buttons

dark-drop rgba(30,27,30,0.3) 0 30 60

Dark-section variant

Кнопки

Primary — violet pill, hover shadow rgba(94,74,187,0.25). Orange variant для CTA с urgency. Play — круглая, единственный драматичный violet glow 100 px на hover.

Записаться на практикум Получить доступ Узнать больше Small CTA

Инпуты

Инпуты FLAT (radius 0) + inset shadow rgba(30,30,30,0.1) 1.414 1.414 6. Letter-spacing 1 px на инпутах. Select — pill 100 px, parallel asymmetry с flat input.

Карточки

Три варианта shadow: signature warm dual-layer, усиленная, inset side-light.

Primary card

Signature warm dual-layer shadow. 57 occurrences в оригинале — базовый surface.

Emphasis card

Усиленная drop-shadow для ключевых блоков (pricing, hero). 7 occurrences.

Side-lit card

30 px horizontal inset shadow — ощущение света сбоку. Редкий signature.

CTA book-it card

Повторяется по скроллу 3-5 раз — DR-классика. Не DRY-рефакторить в одну section-wide — каждое повторение закрывает вопрос читателя на этом scroll-моменте.

Inline-accents: KPI & highlights

Зелёные KPI-капсулы и оранжевые word-highlights встроены в текстовый поток. Не отдельная stats-section — signature direct-response.

Наши студенты увеличили прибыль в 2 раза за первый квартал — причём отклик лендинга вырос с 2% до 8% благодаря системе из 4 связанных страниц. Мы документируем это открыто и называем «системным методом».

Chips / tags

Radius 1000 px (full-capsule). Neutral-outline по умолчанию, filled violet/orange/peach — акценты.

Маркетинг Воронки Основной модуль Бонус Запись в подарок

Tabs

Default opacity 0.5. Hover/active — opacity 1 + orange color. Active получает orange bottom-border. Навигация внутри mega-section program.

  • Модуль 1. Введение
  • Модуль 2. Лендинги
  • Модуль 3. Воронки
  • Модуль 4. Авторассылки
  • Модуль 5. Масштабирование

Checkbox / Radio

Checkbox: hover/checked → peach (третий warm-tone). Radio checked → violet-link filled.

Scroll-reveal (two-speed)

Блоки — 0.8s fadeDown (KitAnimate-style). Контент внутри блоков — 0.6s opacity+transform (Intersection Observer). Две скорости — signature кинематография, не унифицировать.

Блок #1

Появляется с transition var(--ld2-t-reveal-block) — 0.8s ease-out.

Блок #2

Появляется следом. Задержка через intersection-order.

Блок #3

Внутри контент может получить ещё один reveal 0.6s.