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

"Выключатель в темноте, на котором единственная подсветка. Чёрный холст не давит, а служит фоном для одного решения. Жёлтый CTA — индикатор «здесь действие»."

Источник в одном абзаце

B2B AdTech-маркетплейс рекламных площадок (RU). Объединяет 500+ инвентаря (publishers, platforms, services, tools, bloggers) в едином окне. Маркировка под требования РФ. Целевая аудитория — медиа-агентства и in-house маркетинг крупных брендов с бюджетом от 10 000 ₽/мес до многомиллионных пакетов. Friendly-professional B2B тон с insider-жаргоном (post-view, post-click, маркировка, трасты).

Design DNA — 7 суперсил

Каждая суперсила — самодостаточный приём с готовым промпт-сниппетом. Кликни «Копировать» чтобы передать суперсилу в следующую сессию.

Сделай одну 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 того же стиля.

Построй 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 между секциями — резкий контраст это часть приёма.

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

В углах 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.

Внутри 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 — нигде больше его не использовать.

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

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.

Цвета

Бимодальная палитра: 7 цветов на marketing-страницах + 25 для UI (label-chips, focus-rings, status — невидимы на лендинге).

Primary signature

Нейтрали

Pastel rainbow strip (4 цвета — single-use декор)

Status (UI-only, не появляется на marketing)

Типографика

Один шрифт Inter с system fallback. 7 размеров (12-46), 3 веса (400/700/800 — никогда 500/600). Letter-spacing везде normal — доверие шрифтовой метрике.

Иерархия размеров

Веса (минимум-жизнеспособный набор)

Спейсинг и Layout

База 4px, эффективная шкала 10 живых значений (4/8/12/16/24/32/36/44/48). Объявленных --size-2..64 в 2px шагах — 32, но 22 «мертвы» на marketing-страницах.

Эффективная шкала

★ Primary unit — 16px. Section padding 80px (default) / 100px (hero, CTA-band) ВНЕ декларированной шкалы.

Container

Breakpoints

Формы — радиусы и тени

Радиус-paradox: 0 доминирует 89% (sharp default). Buttons имеют свою прогрессию 16/22/26. Cards 26 (signature). НЕТ shadow-системы — единственная тень для popup.

Радиусы

★ Signature card radius 26px — отличает бук от соседей (24/28).

Тени

Это единственная тень в системе. Marketing dark canvas намеренно flat — никаких glow, никаких multi-layer dropshadows.

Focus rings (signature accessible)

Движение

Дисциплинированная корпоративная сдержанность. 250ms default, никаких scroll-reveal/parallax/spring-easing. Только linear для cookie + cubic для всего остального.

Duration шкала

Marquee — running-string ticker (live)

Linear infinite, translate 0 → -50%. Duration зависит от количества элементов.

Компоненты

Кнопки — 3 размера × 7 видов

Primary (signature dark — yellow CTA)

Primary (light — dark CTA на светлом)

Secondary dark (outline на dark)

Input

Focus → border белый + 3px halo (--md4-shadow-focus-dark).

Tier Card (signature pricing)

Notifications (4 status variants)

Как использовать этот Design Book

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

Сделай 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). Анимации snappy 250ms linear, никаких scroll-reveal/parallax. Tone: insider B2B, friendly-professional, короткие декларативные фразы.

Anti-patterns (что НЕ делать)

1. НЕ превращай acid-yellow в gradient. Только solid #effd37.
2. НЕ добавляй glow к жёлтой CTA. Только bg-color invert на hover.
3. НЕ умножай акцент-слова в H1. Одно. Только одно.
4. НЕ используй rainbow strip больше одного раза на секцию.
5. НЕ делай всё border-radius: 16. Sharp 0 доминирует, кнопки 16/22/26 — намеренные различия.
6. НЕ убирай outline-doodles думая «они корявые». Без них hero становится корпоративной авторизацией.
7. НЕ делай zebra-секции через градиенты. Резкий переход — часть приёма.
8. НЕ используй font-weight 500 / 600. Только 400/700/800.
9. НЕ добавляй letter-spacing на H1. Trust the typeface.
10. НЕ делай hover на CTA через darken/brighten. Только bg: white инверсия.

Файлы Design Book