# Design DNA: marketing-dark-4

## Контекст сайта

**Тип:** marketing-dark / marketplace-aggregator-landing (B2B AdTech-маркетплейс, RU)
**Аудитория:** маркетинг-руководители (CMO, performance leads, медиа-байеры) и full-service/performance агентства; средний-крупный российский бизнес; tech-savvy с владением AdTech-жаргоном (post-view, требования по маркировке рекламы РФ)
**Цель:** lead-capture (sales-led demo + заявка), MOFU→BOFU funnel, no free-trial. Hybrid: персональный менеджер + self-serve store browsing
**Захвачено:** 2026-04-26

---

## Первое впечатление

Чёрный экран с одной жёлтой кнопкой и одним жёлтым словом. На дрифтующих карточках партнёров — пастельные радуги. Никаких glow, glass, gradient hero — это **честный B2B**, который намеренно отказался от silicon-valley полосы 2024-2026 и вместо этого довёл flat-dark до утверждения.

---

## Визуальная метафора

Этот бук — **выключатель в темноте, на котором единственная подсветка**. Чёрный холст не давит, а служит фоном для одного решения. Жёлтый CTA — не «привлекательная кнопка», а индикатор «здесь действие». Когда курсор её касается, она **инвертируется в чистый white** — это не стандартный hover-darken, это переключение света. Жёлтый ушёл — но действие осталось видимым на белом против чёрного.

Поверх чёрного парят **белые карточки** — пакеты офферов с округлыми кругами логотипов крупных RU-партнёров (телеком, рекламные платформы, e-commerce, банки). Карточки сами по себе светлые, но сидят на тёмном — будто зажжённые табло. Внутри каждой — мягкая **пастельная радужная полоса** (голубой → розовый → фиолетовый → оранжевый), которая занимает место классического жёлтого `% SCALE`-значка. Это **дефицит цвета через избыток**: вокруг чёрно-бело-жёлтое, а здесь, в одном месте на блоке, разрешена вся палитра как декоративный «ярлык».

В углах hero — **тонкие белые штрихи doodle-орнаментов** (звёздочка, волна, арка, точки). Это «человеческий слой» поверх корпоративной сетки — как если бы кто-то от руки оставил пометки на тёмной стене. Они не функциональны, но без них пустота становилась бы агрессивной.

В чём парадокс: сайт **B2B AdTech-маркетплейс** — должен был выглядеть как «панель управления», но он намеренно выбирает **marketing-формат** с эмоциональным CTA и юмористическими ornament. Бренд продаёт инфраструктуру через тон, а не через скриншоты дашбордов.

---

## Характер и настроение

**Цвет:** холодный (basic-black имеет slight cyan tint hue 180°), с **одним warm spot** — жёлтый. Цвет управляет вниманием максимально дисциплинированно: ты видишь только то, что бренд хочет, чтобы ты увидел. Если жёлтый убрать — сайт не «станет хуже», он **перестанет работать как продающий**: исчезнет единственная команда «тыкни сюда».

UI-палитра (focus rings, label chips, status badges) — спрятана: 25 цветов системы видны только в кабинете. На marketing — 7 цветов: чёрный, белый, три серых, жёлтый, плюс 4-цветная пастельная радужная полоса используется один раз. Это ультра-сдержанность.

**Типографика:** один Inter, без serif-display, без mono. Веса — только три (400/700/800), причём 800 живёт только в H1. Никакого letter-spacing — никаких -0.02em трюков на хедерах, доверие шрифтовой метрике. Заголовки не «авторские», они «корпоративные»: 46/64 weight 800 центрированный — это presentation-style, а не editorial. Single brand-word в H1 жёлтым — единственная типографическая «фишка».

**Тон:** friendly-professional B2B. Короткие декларативные фразы вида «Решение одно. Сложности много.» Insider-жаргон без расшифровки (post-view, маркировка, трасты) — рассчитано на инсайдера, не на «всех». Тёплые цитаты клиентов с эмодзи (❤️) разбавляют сухой B2B-ритм.

---

## Пространство и ритм

**Section padding 80/100/44px** — sections дышат, но не зияют. Hero/CTA-band получают 100px, дефолтные секции — 80px, плотные секции — 44px. **Ритм асимметричный:** hero и CTA-band «выпуклые», content sections подстригнуты. Это создаёт ощущение, что страница не «лонгрид», а серия «слайдов».

**Container** жёстко прибит на `min-width: 1280px` — desktop-first hard floor. На мобиле страница перерисовывается через CSS Modules-ные responsive classes, но declared design system не учитывает плавный fluid scaling. Hero text capнут на 970px — узкий читабельный столбец в пустом dark canvas.

**Зебра по секциям** (не по строкам): hero dark → trust light → tier cards section light → audience alt-grey → features carousel dark → process light → advantages light → FAQ light → events dark → partners light → CTA-band dark → footer dark. Около 5 dark sections и 7 light, не строго 50/50, а распределено по смыслу: всё что про действие — dark; всё что про доказательство — light.

---

## Движение

**Скорость дисциплинированная:** 250ms по умолчанию, 100ms для inputs, 150ms для tooltips, 1500ms для cookie-out (умышленно медленный «спасибо, мы поняли»). Easing — linear для cookie animations и cubic для остального. Никаких spring/elastic, никаких scroll-driven параллаксов.

**Анимации, которые есть:**
- `Loading__rotation` — стандартный spinner (универсальный)
- `swiper-preloader-spin` — для слайдеров
- `RunningString_anim` — **infinite marquee** для бегущей строки партнёров (translateX 0 → -50%)
- `DemoStretching_mobile_fadeIn` — мобильный fade-in демо-блока (opacity 0→1 + translateY -10px→0)
- `PopupCookies__cookies-animation` — slide-in 500ms + slide-out 1500ms (длинный, осознанный)

Что **отсутствует:** scroll-reveal stagger, hover-lift cards, parallax, gradient text animations. Сайт намеренно `snappy + linear`, не `cinematic + elastic`. Это **корпоративная сдержанность движения** — функция важнее впечатления.

Hover-эффекты:
- Primary CTA: bg-color invert (yellow→white) — единственная сигнатура движения
- Secondary CTA: border darkens
- Datepicker day: border 50% radius
- Link hover: color shift muted→strong

---

## Суперсилы

### 💫 SP1: Acid-Yellow Hover Inversion (Signature CTA)

**Что это:** единственный CTA электрически-жёлтым `#effd37` (HSL 65°/99%/60%) на dark canvas, который на hover **переключается в чистый white** вместо стандартного darken/lighten.

**Почему работает:** yellow→white — не косметический эффект, а семантический сигнал «свет переключился». Пользователь чувствует не «hover-state», а «контакт». Yellow максимально выделяется на чёрном (контраст 16.67:1), white сохраняет тот же контраст — рука не теряет кнопку, но получает feedback.

**Параметры:**
```css
.btn-primary {
  background: #effd37; color: #181a1a;
  border-radius: 26px; height: 52px; padding: 14px 44px;
  font-weight: 700; line-height: 24px; font-size: 16px;
  transition: background-color 250ms linear;
}
.btn-primary:hover  { background: #ffffff; }   /* yellow → white inversion */
.btn-primary:focus  { outline: 2px solid #6871e1; border-color: #181a1a; }
.btn-primary:active { background: #d0cfcf; }
.btn-primary:disabled { background: #757575; }
```

**Встречается:** ~4 раза на странице (hero × 1, advantages × 1, footer-CTA × 1, sticky × 1).

**Теги:** `#bold` `#energetic` `#dark-theme` `#high-contrast` `#dual-accent` `#pill-buttons` `#snappy` `#micro-interactions` `#конверсия` `#b2b`

**Подходит для:** B2B SaaS / marketing-dark лендингов где нужна одна доминирующая команда. Любые сценарии «единственный CTA на тёмном».

**НЕ подходит для:** sites с множественными равнозначными actions (e-commerce checkout с многими CTAs), light-theme, premium luxury (acid-yellow читается «budget-bold», не «premium-elegant»).

**На мобиле:** работает full-width (`button` растягивается до 350px height 44px). Hover trigger исчезает — заменяется `:active` инвертированием на короткое время (touch feedback).

**▶ ПРОМПТ-СНИППЕТ:**
> "Сделай одну primary CTA-кнопку acid-yellow #effd37 на dark canvas #181a1a. Hover должен инвертировать background в чистый white #ffffff (не darken). Радиус 26px, height 52px, padding 14px 44px, font-weight 700, transition 250ms linear только для background-color. Focus outline 2px solid #6871e1 без shadow. Это единственный сигнатурный CTA — никаких дополнительных primary actions того же стиля."

---

### 💫 SP2: Section-Inversion Zebra (Dark↔Light Alternation by Section)

**Что это:** страница построена не как «dark hero + light body», а как **последовательность зебра-секций** — действие живёт на dark, доказательство на light. 5 dark sections и 7 light/alt чередуются по смыслу.

**Почему работает:** альтернация даёт **двойной ритм** — пользователь чувствует переходы как смену сцен, а не как монотонный скролл. Dark sections подсознательно ассоциируются с CTAs (где жёлтый светит), light sections — с trust signals (где партнёры читаются).

**Параметры:**
```css
.section--dark  { background: #181a1a; color: #ffffff; padding: 80px 0; }
.section--dark.section--hero,
.section--dark.section--cta-band { padding: 100px 0; }
.section--light { background: #ffffff; color: #181a1a; padding: 80px 0; }
.section--alt   { background: #f5f5f5; color: #181a1a; padding: 80px 0; }
```

Pattern: hero(dark) → trust-logos(light) → tier-cards(light) → audience(alt) → features(dark) → process(light) → advantages(light) → faq(light) → events(dark) → partners(light) → cta-band(dark) → footer(dark)

**Встречается:** на всю страницу — 12 секций, 5/7 dark/light split.

**Теги:** `#sandwich-dark-light` `#section-contrast` `#vertical-rhythm` `#dark-theme` `#cold` `#bold` `#serious` `#marketing` `#single-page` `#b2b`

**Подходит для:** B2B marketing landings со смесью «здесь действие — здесь доказательство» (pricing pages, tier comparisons, testimonials с CTA-bands).

**НЕ подходит для:** editorial / blog / docs (дроби читателю flow), apps / dashboards (требуется единая поверхность).

**На мобиле:** сохраняется один-в-один (vertical stack секций), просто padding уменьшается до 44px.

**▶ ПРОМПТ-СНИППЕТ:**
> "Построй marketing landing как зебру по секциям: dark sections (#181a1a / white text) для hero, features-showcase, events, CTA-band, footer; light sections (#ffffff) для trust logos, tier cards, advantages, FAQ; alt-grey (#f5f5f5) для audience persona block. Действие живёт на dark, доказательство на light. Section padding 80px по умолчанию, 100px для hero/CTA-band, 44px только для очень плотных. НЕ строй gradient transitions между секциями — резкий контраст это часть приёма."

---

### 💫 SP3: Brand-Word H1 Accent (One Yellow Word)

**Что это:** единственное слово в H1 (обычно brand name) подсвечивается signature yellow внутри белого заголовка. Не gradient text, не underline, просто `color: #effd37` на одном `<span>`.

**Почему работает:** focus-attention одной точкой, без излишеств. Brand становится визуально узнаваем без логотипа сверху. Парадокс: яркий цвет используется не на CTA а на тексте — сразу даёт «что это» прежде чем «что делать».

**Параметры:**
```html
<h1>
  <span class="h1__brand">Brand</span> —
  маркетплейс рекламных площадок, сервисов и услуг
</h1>
```
```css
h1 { font-size: 46px; line-height: 64px; font-weight: 800; color: #ffffff; text-align: center; max-width: 970px; margin: 0 auto; }
.h1__brand { color: #effd37; }
```

**Встречается:** 1 раз (hero H1).

**Теги:** `#bold` `#big-type` `#display-font` `#dark-theme` `#dual-accent` `#minimal` `#brand` `#единый-приём` `#конверсия` `#b2b`

**Подходит для:** sites где brand name можно органично вставить в H1 как часть фразы (Brand is X / Notion is Y / Stripe handles Z).

**НЕ подходит для:** brand names, которые не вмещаются в H1 как существительное (длинные названия, generic words).

**На мобиле:** H1 уменьшается до 28px line-height 32-36, акцент-слово сохраняется. Эффект менее выражен но работает.

**▶ ПРОМПТ-СНИППЕТ:**
> "Сделай H1 hero centered weight 800 size 46/64 max-width 970px white #ffffff. Подсвети ОДНО ключевое слово (brand name или существительное-якорь) signature accent color через `<span>`. Никаких gradient text, underline, italic — только color. Это единственная типографическая фишка на странице — больше акцент-слов нигде нет."

---

### 💫 SP4: Outline Doodle Constellation (Anti-Corporate Hero Ornaments)

**Что это:** в углах hero разбросаны **тонкие SVG-doodle орнаменты** (звёздочка, волна, арка, точки) — белые, stroke 1.5px, opacity 0.5. Это «человеческий слой» поверх корпоративного dark canvas.

**Почему работает:** dark canvas без декора становится «панелью авторизации». Doodles разбавляют его, не отвлекая — opacity 0.5 + тонкий stroke + позиционирование в углах вне зрительного фокуса. Намекают на «здесь думают руками», что снижает корпоративную холодность.

**Параметры:**
```css
.hero { position: relative; background: #181a1a; padding: 100px 0; }
.hero__doodle { position: absolute; opacity: 0.5; pointer-events: none; }
.hero__doodle svg { stroke: #ffffff; stroke-width: 1.5px; fill: none; }

.hero__doodle--star { top: 8%; left: 12%; width: 32px; }
.hero__doodle--wave { top: 8%; right: 14%; width: 48px; }
.hero__doodle--arc  { bottom: 14%; left: 18%; width: 40px; }
.hero__doodle--dots { bottom: 18%; right: 16%; width: 36px; }
```

SVG примеры: пятиконечная звезда (один path), волнистая линия (3 cresting curves), арка (полуокружность с точками внутри), 5 точек в созвездии.

**Встречается:** 4 элемента в hero. Опционально 1-2 элемента в больших dark sections.

**Теги:** `#playful` `#flat` `#dark-theme` `#minimal` `#layered` `#friendly` `#единый-приём` `#asymmetric` `#marketing` `#b2b`

**Подходит для:** B2B где нужно снять корпоративную тяжесть, но без явного playful (стартапы, маркетплейсы, финтех с человеческим лицом).

**НЕ подходит для:** премиум-сегмент (luxury / enterprise legal — doodles читаются «несерьёзно»). Не подходит для секций кроме hero — на content sections выглядят странно.

**На мобиле:** оставлять только 1-2 doodle, остальные скрыть `display: none` (они становятся шумом на узком экране).

**▶ ПРОМПТ-СНИППЕТ:**
> "В углах hero (dark canvas) разбросай 4 outline-doodle SVG ornaments: звёздочка (top-left), волна (top-right), арка (bottom-left), 5 точек-созвездие (bottom-right). Stroke 1.5px white, fill none, opacity 0.5, размер 32-48px. Position absolute, top/bottom/left/right в процентах от 8% до 18%. Pointer-events none. На мобиле скрывай через display:none все кроме одного. Никакого ASCII-арт, никаких эмодзи — это рисованные SVG paths."

---

### 💫 SP5: Pastel Rainbow Discount Strip (Anti-Badge Discount Indicator)

**Что это:** soft 4-цветная пастельная gradient-полоса (голубой → розовый → фиолетовый → оранжевый) внутри pricing/tier card как **визуальный индикатор скидки** вместо классического `% OFF` badge.

**Почему работает:** yellow `% OFF` стикер выглядит «дёшево». Pastel gradient strip — премиальная альтернатива: те же 10/15/20% становятся «этим спецусловием» а не «распродажей». Цвета — единственный rainbow в палитре, что делает их «событием».

**Параметры:**
```html
<div class="tier-card">
  <div class="tier-card__logos">...</div>
  <h3>Tier-1</h3>
  <div class="tier-card__strip"></div>
  <div class="tier-card__discount">15% скидка</div>
  ...
</div>
```
```css
.tier-card__strip {
  height: 12px;
  background: linear-gradient(90deg, #89c3f8 0%, #f693ab 33%, #6871e1 66%, #ffa665 100%);
  border-radius: 100px;
  margin: 16px 0;
}
```

**Встречается:** 3 раза в hero (3 tier cards).

**Теги:** `#dual-accent` `#playful` `#layered` `#marketing` `#pricing` `#единый-приём` `#warm` `#cold` `#элегантно` `#b2b`

**Подходит для:** SaaS pricing с tier-cards, marketing landings с «спецпредложениями», fintech с promo offers.

**НЕ подходит для:** монохромные dark themes (gradient strip конфликтует), e-commerce flash-sales (там нужен прямой "SALE" badge для срочности).

**На мобиле:** strip сохраняется, может уменьшиться до 8px height для экономии места.

**▶ ПРОМПТ-СНИППЕТ:**
> "Внутри pricing/tier card вместо классического `15% OFF` badge добавь горизонтальную gradient-полосу 12px height с radius 100px. Gradient линейный 90deg, 4 пастельных цвета: blue #89c3f8 → pink #f693ab → violet #6871e1 → orange #ffa665. Полоса разделяет header card (логотипы + tier name) от body (описание + CTA). Это единственное место на сайте где появляется multi-color rainbow — нигде больше его не использовать."

---

### 💫 SP6: Tier-Card Brand-Logo Cluster (Overlapping Avatars Above Tier Name)

**Что это:** на каждой pricing-карточке сверху — **кластер из 3-5 круглых brand-аватарок партнёров** (узнаваемые крупные бренды: телеком, e-commerce, банки, рекламные платформы), частично перекрывающих друг друга (margin-left: -8px). Вместо абстрактного логотипа продукта показаны **реальные логотипы интегрированных партнёров**.

**Почему работает:** instant social proof с первого экрана. Пользователь видит «эти бренды уже здесь работают» прежде, чем читать описание тарифа. Перекрытие создаёт визуальную связку («они вместе»), а не разрозненность.

**Параметры:**
```css
.tier-card__logos { display: flex; padding: 16px 0; }
.tier-card__logos img {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #ffffff;
  object-fit: contain;
  margin-left: -8px;
}
.tier-card__logos img:first-child { margin-left: 0; }
```

**Встречается:** 3 раза (по карточкам трёх тарифов).

**Теги:** `#доверие` `#layered` `#marketing` `#pricing` `#brand` `#enterprise` `#b2b` `#единый-приём` `#trust-signal` `#energetic`

**Подходит для:** B2B где partners/clients узнаваемы (рекламные платформы, payment processors, integration marketplaces).

**НЕ подходит для:** consumer-products где имена партнёров неизвестны / нерелевантны. Не использовать с многими (>6) логотипами — overlap станет нечитаемым.

**На мобиле:** уменьшать avatar size до 32px, оставить overlap, ограничить до 4 visible логотипов.

**▶ ПРОМПТ-СНИППЕТ:**
> "На каждой pricing/tier card сверху размести кластер из 3-5 кружковых brand-логотипов партнёров (40px diameter, border-radius 50%, белая 2px рамка вокруг каждого). Логотипы overlap через margin-left: -8px (первый — 0). Это идёт ПЕРЕД названием тарифа, как «proof partners». Использовать только реальные узнаваемые brand-логотипы (Apple/Microsoft/Stripe/etc), не абстрактные иконки-шейпы."

---

### 💫 SP7: Honest Flat Anti-Trend (Refusal of Glassmorphism / Glow / Blur / Multi-Shadows)

**Что это:** **отказ** от всего marketing-dark «sugar» 2024-2026: нет glassmorphism, нет glow на CTA, нет backdrop-blur, нет multi-layer dropshadows, нет noise/grain texture, нет gradient hero, нет conic logos. Единственная box-shadow в системе — `0 6px 12px rgba(0,0,0,0.12)` для tooltips/notifications.

**Почему работает:** anti-trend сам становится trend. На фоне всех «glassy» SaaS этот сайт читается как «честный продукт без мишуры». B2B-аудитория уважает — это сигнал «мы потратили деньги на функционал, а не на дизайн-фейерверки».

**Параметры:**
```css
/* Что НЕ делать */
/* ❌ backdrop-filter: blur(12px); */
/* ❌ box-shadow: 0 0 40px rgba(yellow, 0.5); */
/* ❌ background: linear-gradient(135deg, ...); на всю секцию */
/* ❌ background-image: noise.png; */

/* Что МОЖНО */
.popup, .tooltip, .notification--toast {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);  /* единственная тень */
}
.section--dark { background: #181a1a; }  /* solid, не gradient */
.btn-primary  { background: #effd37; }   /* solid, без glow */
```

**Встречается:** **по всему сайту как философия**, не точечный приём.

**Теги:** `#flat` `#minimal` `#dark-theme` `#cold` `#serious` `#authoritative` `#reliable` `#anti-trend` `#b2b` `#enterprise` `#monochrome`

**Подходит для:** B2B продукты, fintech, infrastructure SaaS, enterprise tools — где «trustworthy» важнее «exciting».

**НЕ подходит для:** consumer entertainment, gaming, streaming, creative tools, любые «emotional» категории. Не подходит для startup pitch decks (они продают «магию», а не «честность»).

**На мобиле:** философия не меняется. Если что-то добавлять — это будет нарушением.

**▶ ПРОМПТ-СНИППЕТ:**
> "Marketing-dark landing БЕЗ glassmorphism, БЕЗ backdrop-blur, БЕЗ glow на кнопках, БЕЗ multi-layer dropshadows, БЕЗ noise/grain texture, БЕЗ gradient hero. Единственная box-shadow на всю систему — `0 6px 12px rgba(0,0,0,0.12)` для popups/tooltips. Sections — solid colors (dark #181a1a / light #ffffff / alt #f5f5f5), переходы резкие. Единственный gradient — pastel rainbow strip (см. SP5) ровно один раз внутри tier card. Это анти-trend подход: refusal of marketing sugar = trust signal для B2B."

---

## Анти-паттерны (что НЕ делать при воспроизведении)

1. **Не превращайте acid-yellow в gradient.** `linear-gradient(yellow, gold)` убивает identity. Только solid `#effd37`.
2. **Не добавляйте glow к жёлтой CTA.** `box-shadow: 0 0 40px rgba(yellow, 0.5)` — это «standard marketing-dark». Этот бук намеренно отказался.
3. **Не множьте акцент-слова в H1.** Одно. Только одно. Всё остальное white.
4. **Не используйте rainbow strip больше одного раза на секцию.** Дефицит делает её событием — повторение делает её декорацией.
5. **Не делайте всё `border-radius: 16` чтобы выглядело «модерн».** Радиус-paradox: `0` доминирует 89%, кнопки имеют свою прогрессию 16/22/26, cards 26 — это намеренные различия, не баг.
6. **Не убирайте outline-doodles думая «они корявые».** Без них hero становится корпоративной авторизацией. Они — anchor «здесь живут люди».
7. **Не делайте zebra-секции через градиенты.** Резкий переход dark → light часть приёма. Smooth gradient transitions смажут ритм.
8. **Не используйте font-weight 500 / 600.** В системе они есть (legacy), но на marketing они мёртвые. Только 400/700/800.
9. **Не добавляйте letter-spacing на H1.** `letter-spacing: -0.02em` стандартный editorial трюк — здесь он сломает «честную типографику».
10. **Не делайте hover на CTA через `darken/brighten`.** Только `bg: white` инверсия. Это **сигнатура движения**.

---

## Матрица совместимости (mix-and-match с другими буками)

| Стиль | Совместимость | Заметки |
|---|---|---|
| **marketing-light-3** (whisper-fintech) | ⭐⭐⭐⭐ | Идеальный pair: light marketing pages + dark CTA-bands от md4. Whisper-300 хорошо контрастирует с md4 weight 700/800. |
| **landing-2** (long-form direct-response) | ⭐⭐⭐ | Можно взять honest-flat от md4 и добавить scroll-reveal/sticky-CTA от landing-2. Но dual-accent от landing-2 (violet+orange) конфликтует с single-yellow от md4. |
| **saas-panel-1** (внутренний продукт) | ⭐⭐⭐⭐⭐ | Прямая совместимость. Tokens из tokens.css можно использовать в /account/* — основная палитра уже общая (basic-* / status-* / label-*). |
| **marketing-dark-3** (quiet-dark monodisciplined) | ⭐⭐ | Слишком близко философски, но конфликтуют веса (mDark-3 refuses 700+, mDark-4 demands 800). Не миксовать на одной странице. |
| **gaming-dark-1** (sci-fi HUD) | ❌ | Полная несовместимость: gaming требует neon glow, geometry, conic gradients — всё то, что md4 отвергает. |
| **marketing-light-5** (editorial Anthropic-style) | ⭐⭐⭐ | Можно взять editorial typography (Fraunces serif body) и положить на dark canvas — получится «honest-but-warm». Но md4 намеренно ограничивает себя одним Inter. |

**Самая универсальная суперсила:** SP1 (Acid-yellow hover-inversion). Применима как accent CTA на любом сайте где нужен «один яркий action».

**Самая нишевая суперсила:** SP6 (Tier-card brand-logo cluster). Работает только в B2B marketplaces с реальными узнаваемыми партнёрами.

---

## Быстрый промпт для генерации

> "Сделай B2B marketing-dark landing в стиле «honest-flat». Единственный signature accent — acid-yellow #effd37 на CTA, hover-инвертируется в чистый white. Section zebra: dark #181a1a (hero, features-showcase, events, CTA-band, footer) + light #ffffff (trust-logos, tier-cards, advantages, FAQ) + alt-grey #f5f5f5 (audience). H1 46/64 weight 800 centered max-width 970px, white text с одним brand-word жёлтым. Hero окружить 4 outline-doodle SVG (1.5px stroke white opacity 0.5) в углах. Pricing tier-cards с overlapping brand-logo cluster (40px circles, margin-left -8px) и pastel rainbow strip (4 цвета: blue→pink→violet→orange) вместо классического % badge. Шрифт — единственный Inter, веса только 400/700/800 (никогда 500/600). Letter-spacing везде normal, line-height в px. Радиус: 0 dominant, кнопки 16/22/26 (sm/md/lg), card-large 26, pill 100. **Ни одного** glassmorphism / backdrop-blur / glow / multi-shadow / gradient hero / noise — единственная box-shadow на всю систему `0 6px 12px rgba(0,0,0,0.12)` для tooltips/notifications. Анимации snappy 250ms linear, никаких scroll-reveal/parallax. Cookie banner с slide-in 500ms / slide-out 1500ms (long acknowledge). Datepicker для events с radial day cells (border-radius 50% on hover). Container min-width 1280px desktop-first. Tone: insider B2B, friendly-professional, короткие декларативные фразы. Refuses marketing sugar = trust signal."

---

## Метаинформация

- Полный набор tokens: [tokens.css](tokens.css) + [tokens.md](tokens.md)
- Компонентный инвентарь: [components.md](components.md)
- Композиция: [patterns.md](patterns.md)
- Дополнительные данные: `screenshots/_data/*.json`
- Скриншоты: `screenshots/pages/{01-home,02-pricing,03-store-product,04-event}.jpeg` + `screenshots/mobile/01-home-mobile.jpeg`