# Patterns — marketing-light-6

Каталог конкретных композиционных и интерактивных паттернов. Архетип: playful B2B SaaS GTM platform (2026-04-26).

## Hero Patterns

- **Hero archetype: product-page** — full-bleed deep navy `#1d2849`, white H1 64px geometric sans/600, ls -0.04em. Mascot claymation иллюстрация справа от текста (или ниже), 12px CTA bg `#000`. Пример: страницы конкретных feature-продуктов в роли "intense product".
- **Hero archetype: company-page** — full-bleed mid-saturated solid (зелёный `#2c5d3f` для company-archetype, или другой mid-sat hue), white H1 64px/600. Ниже — secondary copy weight 400 alpha 0.85.
- **Hero archetype: solution-page** — white outer + inner rounded card-as-page container `1111×1112px` radius `40px` bg oat-200, oat-950 `#1b1a18` H1 56px/600. Внутреннее padding 80px. Подкреплено маскотом или текстурным claymation-объектом.
- **Hero archetype: pricing-page** — white substrate `#ffffff` + grid из 3-4 tier-cards, **один** highlighted tier-card на blueberry `#5b6cf4` (единственный structural цвет). Все остальные tier-карточки — белые с oat-100 borders.
- **Hero archetype: home** — white + oat-100 `#faf9f5` zebra alternation секций, neutral H1 80px/600 (peak size, эксклюзив для home), без single accent — цветовое разнообразие через testimonial pop-cards ниже.

## Layout Patterns

- **FAT mega-section**: 2000-2400px высота, 5+ feature-children внутри одного контейнера с unified bg + 120px top/bottom padding. Internal grid 2- или 3-колоночный. Все children разделяют visual vocabulary (один тип карточек, один цветовой sub-palette).
- **Compact one-message section**: 600-800px высота, single message, single focal point (один image OR один stat OR один citation). Используется как breath между fat sections.
- **Mega-footer with illustrated landscape**: единая claymation-landscape сцена шириной full-bleed, ~600-800px высота, идентичная на всех страницах сайта. Несколько маскотов в композиции. Над сценой — finalCTA блок "Turn your growth ideas into reality today" (repeated anchor, см. ниже).
- **Trust-bar logo strip**: горизонтальная полоса 80-120px высотой, 6-8 client-логотипов, **grayscale 60% opacity, hover full color** (transition 0.3s primary easing). Обычно сразу под hero.
- **Card-as-page wrapper** (solution-archetype only): см. SP4 — outer white, inner 1111×1112 oat-200 radius 40 — занимает первый viewport.
- **Zebra alternation (home only)**: white #ffffff и oat-100 #faf9f5 чередуются между sections, контраст минимальный (substrate breath).
- **Per-page chromatic identity wayfinding**: каждый page-archetype знаком hero-цветом (см. Hero Patterns) — пользователь идентифицирует страницу до прочтения H1.

## Component Patterns

- **Primary CTA**: bg `#000` pure, text white, padding ~14px 24px, radius `12px`, geometric sans 14-16px weight 600. Hover: bg shift (например к oat-950 #1b1a18) duration 0.3s primary easing. Никакого shadow, никакого gradient.
- **Secondary CTA**: transparent bg, border 1px oat-950 `#1b1a18`, text oat-950, radius `12px`, тот же padding. Hover: bg fill oat-100 0.3s primary easing.
- **Pill CTA / chip variant**: radius `1584px` (full pill), используется для inline-chips, badges и компактных action-кнопок в плотных layouts.
- **Pricing tier card**: white bg, radius 0 (sharp), border 1px oat-200. Highlighted tier — bg blueberry `#5b6cf4`, white text, тот же 0 radius. Внутри: tier-name uppercase eyebrow ls +0.1em, цена 48-56px/600, feature list weight 400.
- **Testimonial poster card (own pop-color)**: каждая карточка отзыва получает свой pop-color из reserve sampler (3 декоративных swatches). Bg solid pop-color, text oat-950 или white в зависимости от lightness. Radius `0`, без shadow. Mascot или citation portrait сверху.
- **Inline metric chip / KPI bubble**: pill 1584px, bg green/blueberry, white text 14px/600 ls +0.1em uppercase. Используется как micro-stat вкрапление в long-form copy.
- **Mascot-character illustration slot**: 3D claymation persona в едином matte-tactile стиле (sculpted, lit from above-left), ~400-600px размер, размещается справа от hero text или ниже H1. Каждая feature-страница имеет своего маскота с агентивным именем (-ent/-or/-er).
- **Trust-bar logo cell**: grayscale 60% по умолчанию, hover полноцветный 0.3s primary easing. Уровни прозрачности: default opacity 0.6, hover opacity 1.
- **Eyebrow / kicker**: uppercase, 12-14px weight 600, ls +0.1em, color oat-950 или muted oat-700, размещается над H1/H2.

## Motion Patterns

- **Primary easing** `cubic-bezier(0.075, 0.82, 0.165, 1)` (slow-snap quartic) — для bg-color transition, emerge/scroll-reveal, modal-enter.
- **Secondary easing** `cubic-bezier(0.165, 0.84, 0.44, 1)` (smooth quart) — для transform, opacity, hover-shifts.
- **Duration ladder**:
  - `0.1s` — color flick (link hover text-color shift)
  - `0.2s` — transform micro (translateY(-2px), scale(1.02))
  - `0.3s` — bg-color (button bg shift, card bg, trust-bar logo color)
  - `0.4s` — emerge (scroll-reveal fade+rise, modal enter)
- **Hover micro-interactions**: translateY(-2px) или scale(1.02) maximum. Никаких больших jumps, rotates или flips.
- **Scroll-reveal**: assumed IX2-style scroll-trigger lib + GSAP ScrollTrigger. Pattern: fade-in (opacity 0→1) + rise (translateY 24-32px → 0), duration 0.4s, primary easing, trigger при 80% viewport.
- **CTA hover**: bg-color transition 0.3s primary easing (slow-snap), без shadow appearance, без scale.
- **Trust-bar logo hover**: opacity 0.6 → 1.0 + filter grayscale(1) → grayscale(0), duration 0.3s primary easing.
- **No bounce, no overshoot, no spring physics**. No `ease`, no `ease-in-out`, no `linear` для UI. Durations cap at 500ms.

## Repeated Anchors

- **Footer-CTA section** "Turn your growth ideas into reality today" — на каждой странице, прямо над mega-illustrated footer. Тот же текст, та же композиция, та же CTA-пара (primary black + secondary outline).
- **Mega-illustrated landscape footer** — единая claymation-сцена с маскотами, идентичная во всех роутах сайта. Brand anchor, signing closure.
- **Trust-bar logo strip** — обычно повторяется в hero-area и в mid-page, с одинаковыми логотипами в одинаковом порядке.
- **Eyebrow uppercase ls +0.1em** — встречается над каждым major heading, structural rhythm-marker.
- **Body text color #1b1a18 (oat-950 warm)** — never deviates, единое значение на весь сайт.
- **CTA radius 12px** — единственное место, где появляется 12px на всём сайте; зарезервированный signature.
- **Solution card-as-page radius 40px** — единственное место, где появляется 40px; archetype marker.

## Anti-Patterns (9 forbid rules)

1. **No glassmorphism** — никаких `backdrop-filter: blur()`, semi-transparent floating panels.
2. **No shadow** — `box-shadow: none` по умолчанию для всех cards / buttons / containers.
3. **No gradient CTA** — solid `#000` only, никаких `linear-gradient` на action-buttons.
4. **No bold 700+ for headings** — H1/H2 weight maximum `600`. geometric sans никогда не идёт в 700/800/900.
5. **No pure black body text** — body всегда `#1b1a18` (oat-950, warm, sat 8%), НЕ `#000`.
6. **No mid-radii** — запрет `4 / 6 / 8 / 10 / 14 / 16 / 20 / 24 / 28 / 32`. Только `0 / 12 / 40 / pill 1584`.
7. **No single-accent monodiscipline** — палитра обязательно sampler из 8 семей, не "один primary blue".
8. **No cool grey** — все нейтрали тёплые (oat hue 40-60°), запрет hue 200-240° (синеватый grey).
9. **No urgency-banner** — никаких "Limited offer", countdown timers, red-alert полос, FOMO-bars.