landing-1 design book → Демо-прототип

landing-1

Дизайн-система типа Agency Long-Form Landing — узнаваемая по signature green pill CTA с diagonal glow, pill-инпутам с inset shadow и airy vertical rhythm 90-150 px между секциями. Light body + 2 финальные dark-секции для контраста.

Цвета

Light palette — body, white sections, dark финал. Green — signature accent.

Фоны

bg-base#F4F5F6
bg-white#FFFFFF
bg-cream#F9F7F4
bg-dark#232425
bg-dark-elev#2E2F30

Текст

text#292929
text-secondary#2D2D2D
text-subtle#999999
text-mutedrgba(102,102,102,.75)

Акценты

accent-green ★rgba(108,183,98,.99)
green-hover#5CA653
accent-orange#FF613F
accent-blue#5C9FFB
accent-indigo#39467A

Типографика

Manrope (free Cyrillic, замена commercial MuseoSansCyrl). Базовый вес 300, BASE 15 px.

H1 / 45px / 300
Приведём целевые заявки
H2 / 40px / 700
Создаём сайты, которые работают
H3 / 30px / 700
Заполните форму ниже
H4 / 25px / 700
Узнайте точную стоимость проекта
Body / 15px / 300
Обычный body-текст с line-height 22.5 px (1.5×). Используется для большинства параграфов на странице.
Small / 12px / 300
Privacy-disclaimer: нажимая на кнопку, вы даёте согласие…
Eyebrow / 12px / 500 / UPPER
Среди клиентов

Радиусы

Signature: pill 38 px (CTA) и 37 px (inputs). Карточки — 8-11 px.

radius-sm4px
radius-md8px
radius-lg11px
radius-xl ★38px (pill CTA)
radius-input ★37px (pill inp)
radius-round100%

Тени

Signature glow на CTA — diagonal, зелёный. Card-lift — глубокая мягкая. Inset для inputs.

shadow-cta-glow ★
shadow-card-lift
shadow-input-inset

Кнопки

Pill (38 px), uppercase, letter-spacing 1.54 px, signature green glow.

8 (999) 100-20-30

Hover на primary — фон темнее на ~10%, тень не меняется. Onclick: фон ещё темнее.

Инпуты

Pill (37 px), cream fill, inset shadow, padding-left 65 px под decorative icon.



Формы

3 поля + CTA + privacy-text. Центрированы по форме.

Заполните форму ниже,

чтобы получить индивидуальное коммерческое предложение

Нажимая на кнопку, вы даёте согласие на обработку своих персональных данных и соглашаетесь с Политикой конфиденциальности

Карточки

Case card — белая на сером, с глубокой диффузной тенью.

Кейс №1

Производство мебели

Сократили стоимость заявки в 2.4 раза за 4 месяца. Запустили 3 landing page и собственную CRM-аналитику.

+183%
заявок
−58%
CPL
Кейс №2

Сеть автосервисов

Увеличили выручку без роста рекламного бюджета. Подключили сквозную аналитику и оптимизировали воронку.

×2.1
выручка
5 мес
срок

Метрики

Большое число + лейбл. Используется в кейсах и социальных доказательствах.

7260
заявок
8897
лидов
×4.6
рост выручки
90%
точность прогноза

Numbered steps

Большая цифра + подзаголовок. 50px круг с green glow.

1
Маркетинговая стратегия
на 12 месяцев вперёд
2
Расчёт стоимости
количества заявок и unit-экономики
3
Разработка сайтов
и продающих презентаций
4
Реклама и CRM
внедрение web-аналитики

Dark sections

Финальные блоки страницы (gantt-chart реализации, команда). Контраст создаёт «весомость».

Над вашим проектом

будет работать вся команда

Иван
Руководитель
Анна
Копирайтер
Сергей
Project-менеджер
Алексей
Трафик-менеджер

Layout / spacing

Container 960 px, vertical rhythm 90-150 px между секциями.

--ld1-container-max = 960 px (узкий, reading-friendly)

--ld1-content-narrow = 720 px (для текстовых параграфов)

--ld1-space-section = 120 px (типичное между секциями)

--ld1-space-section-lg = 150 px (для крупных hero)

⚠ Mobile (375 px): container = full-viewport, hero H1 scaling с 45 px → 29 px, sections stacking без burger-menu.