marketing-light-1

Светлый SaaS-лендинг с dark-островками. Большая чёрная H1, кнопки-пилюли radius 12px, bento-grid, inset 1px outline вместо drop-shadow. Акценты magenta/blue/violet — только на pricing-tiers.

Открыть demo-прототип →

Цвета

Фон — белый. Dark-полосы (nav, footer, feature cards) — `rgb(25,30,40)` и `rgb(15,20,30)`. Text primary — near-black `rgb(25,30,40)`. Secondary — cool navy-greys, не neutral.

base#FFFFFF
dark primaryrgb(25,30,40)
dark deeprgb(15,20,30)
surface coolrgb(235,239,245)
surface deeperrgb(217,224,236)
text primaryrgb(25,30,40)
secondary on lightrgb(110,130,170)
secondary on darkrgb(160,175,200)
tertiaryrgb(85,105,150)

Акценты — только для pricing-tiers

Триада magenta / blue / violet появляется ТОЧЕЧНО — 71 раз на /pricing как tier-label, и ноль раз в primary CTA. Signature restraint.

magenta — Custom tierrgb(255,15,135)
blue — Free tierrgb(50,135,255)
violet — Pro tierrgb(125,50,255)
Free Custom Pro

Типографика

Golos Text — open-source гротеск как нейтральная замена проприетарного sans источника. 4 ступени display (66/47/30/20) + 16px body. Weight 800 на display, 400 на body, 500 на CTA. LH 0.976 на H1 — отрицательный leading, дисплейная плотность.

h1 / 66px / 800
Большая чёрная H1
h1-mobile / 32.125px / 800
Мобильный H1
h2 / 46.97px / 800
Секция-заголовок
h3 / 29.74px / 800
Подзаголовок
lead / 17px / 400
Lead-параграф над CTA. Полуторный body для вступлений.
body / 16px / 400
Базовый body-текст, 1.5 line-height = baseline 8×3.
dense / 15px / 400
Pricing-карточки — плотнее, меньше LH.
pill / 13.33px / 400 / ls 1%
PILL-микротекст с letter-spacing 1%
micro / 12px / 400
Meta / copyright / legal

Радиусы (6-step semantic)

Каждый радиус — отдельный компонент. 8 → pagination, 12 → CTA (signature!), 16 → dropdown, 20 → pricing, 24 → bento, 32 → pill.

8 — pagination
12 — CTA
16 — dropdown
20 — pricing
24 — bento
32 — pill
40 — industry
100% circle

Outlines (вместо теней)

Signature: никаких drop-shadow. Только 1px inset outline — либо белый на dark, либо dark на light.

inset white 1px
rgb(255,255,255) 0 0 0 1px inset
inset dark 1px
rgb(25,30,40) 0 0 0 1px inset

Кнопки — 5 вариантов

Primary = чёрный pill radius 12, height 48, font 16 weight 500. Остальные — secondary / ghost / outlined / fade. Цветные варианты отсутствуют, signature — всегда монохром.

На dark-фоне — инверсные:

Pill / chips / language switch

Compact line — radius 32, height 32, font 13.33, letter-spacing 1%, padding 0 8 0 12 (асимметрия). Для lang-switch, feature chips, filter badges.

Инпуты

Hover/focus = смена цвета бордера (1px), без ring. Focus-visible (keyboard) — дополнительно outline 2px solid + offset 2px.

Bento-grid: 3×372 = 1140 ровно

Мат-привязка: 3 × 372 + 2 × 12 (gap) = 1140px (container max). Varying height: 208 → 400px. Одна карта может span 2 колонки.

Сквозная продуктовая аналитика

130+ метрик, retention, LTV, DAU/MAU — всё на одном экране. 3D-illustration angle справа.

Узнать →

Push-кампании

Сегментированные рассылки с A/B-тестом.

Монетизация

Подписки, IAP, ad revenue.

Атрибуция

Антифрод встроенный.

Crash-reporting

Стэк-трейсы, session replay, алерты.

3D-illustration placeholder

Pricing cards

Три тира: Free (blue) / Custom (magenta) / Pro (violet). Единственное место, где появляется акцентная триада.

Free
0 ₽
до 30M событий в месяц
  • Базовая аналитика
  • Атрибуция
  • 1 приложение
Custom
По запросу
для enterprise и больших команд
  • SLA 99.95%
  • Dedicated support
  • SSO, SAML, audit logs
Pro
от 50 000 ₽
без лимитов на события
  • Unlimited events
  • Custom dashboards
  • API / export

Hero split — 684 / 456

Композиция: text-block 684px (60%), visual-spot 456px (40%). H1 = 66px weight 800 lh 0.976 (negative leading). Под CTA — chips row из 4 pill-бейджей (teaser-navigation).

Опирайтесь на точные данные и принимайте лучшие решения

Единый стек продуктовой и маркетинговой аналитики для приложений и веб-сервисов.

3D-illustration
placeholder 456×320

Альтернатива — dark hero (zebra-pattern начинается с dark):

Управляйте данными приложения на уровне продукта

Глубокая сегментация, LTV, churn-predictions и push-кампании в едином интерфейсе.

3D-illustration
placeholder 456×320

Dual-theme «зебра»

Signature: dark navbar + light/dark чередующиеся секции + dark footer. Dark занимает 40-50% полотна длинной страницы. Без этого ритма бук воспринимается как обычный light SaaS.

▸ Navbar (dark, 56px)
▸ Hero / Stats / Bento features (dark deep)
▸ Role blocks / Industry cards (light)
▸ Trust bar / Blog carousel (cool surface)
▸ Pricing (dark + colored header-bands)
▸ Testimonial + Final CTA (light)
▸ Footer 7-col mega-menu (dark, 636px)

Accordion FAQ

Inline, без card-wrapper. Divider 1px snug. Hover — цветом в secondary. Chevron rotates на open.

Сколько событий в бесплатном плане?+
Можно ли экспортировать данные через API?+
Как подключить аттрибуцию?+

Switch

Transform-based animation 0.3s ease-in-out. Focus-visible: outline 2px solid + offset 2px.

Pagination

Единственное место с radius 8px. Size 32×32, transition 0.2s на цвет.

  • <
  • 1
  • 2
  • 3
  • 4
  • >