Quiet-Dark B2B платформа для обмена сообщениями

Дизайн-система с репрессированным голосом: один сплошной primary-акцент, одна signature-тень, один gradient, который раскрывается только по наведению. Внешне тёмная маркетинговая страница, по смыслу — документ «продукта для серьёзных людей», где композиция не кричит, а проговаривает.

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

Суперсилы (8 штук)

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

Создай dark marketing-лендинг, исповедующий quiet-dark discipline: background #0D0D0D, single primary #630EFF solid, tri-stop signature gradient linear-gradient(97deg, #01C5C8, #046EF4, #572DFF) появляется ТОЛЬКО как reveal на hover через ::before opacity 0→1 (300ms ease). Header — floating glass pill с 16px inset от трёх краёв, radius 24px, rgba(40,29,58,0.8) + backdrop-blur 15px + signature shadow rgba(0,0,0,0.05) 0 40 25, rgba(0,0,0,0.10) 0 5 10. Все внутренние карточки — 28px pill-radius, bg #281D3A, hover #34264B, asymmetric padding 16/60/16/24 с резервом 60px справа под chevron. Typography: Inter, weight 400 body + 500 headings (никогда 700+), binary size scale (body 14-32, display 48-72, НЕТ 40-44). H1 hero 72px/500/1.0 с tracking -0.64px, первое слово через gradient text-clip. Section padding 80px top & bottom (строгий ритм). 1-2 conic-rainbow brand-icon boxes на страницу (not more) с conic-gradient(from 132deg, #00CCFF 85deg, #0026FF 180deg, #A500C6 340deg). Bottom sticky CTA-bar с backdrop-blur и permanent gradient (без reveal). Left-align everything desktop, center mobile. Minimum 4 product-feature sections с device-mockup + violet ambient glow.

Палитра — бинарная дисциплина

Единственный solid primary + один signature motion gradient. Никакого secondary accent. Вся диагностическая сила через tri-stop gradient, который появляется только в трёх контекстах (button-hover, sticky-CTA, QR-reveal).

Surface

Primary + gradients

Signature motion gradient (появляется только на hover)

--md3-gradient-motion:
  linear-gradient(97deg, #01C5C8 0.32%, #046EF4 44.6%, #572DFF 62.16%);

Deep primary gradient (альтернативный solid)

--md3-gradient-deep:
  linear-gradient(135deg, #161F8A 0px, #2D085F 100%);

Conic brand rainbow (только 1-2 раза на viewport)

--md3-gradient-conic:
  conic-gradient(from 132deg, #00CCFF 85deg, #0026FF 180deg, #A500C6 340deg);

Subtle violet wash (иконки-контейнеры)

Secondary button wash (тихий grey drift)

Текстовая иерархия

Голос бренда — профессионально-тихий

Inter (free-замена для проприетарной геометрики источника). Бинарная шкала размеров: body 14–32, display 48–72, без mid-tier 40/48. Три веса: 400 / 500 / 600. Никогда 700+.

80 px — основной пульс

Base unit 8 px. Section padding top & bottom — 80 px, повторяется в 6 из 8 секций страницы-источника. Container max-width 1196 px. Mobile-first брейкпоинты с нестандартным десктопом 1060 px.

Брейкпоинты (mobile-first)

Нестандартные 1060 / 744 вместо типичных 1024 / 768 — смещение −24 px создаёт более ранний переход к desktop.

28 px signature + одна тень на весь сайт

Radii

Signature shadow

Используется только на 2 элементах: glass-header и sticky-CTA-bar. Все остальные pill-cards — flat. Иерархия бинарная: plane vs floating, не шкала.

Медленно и дисциплинированно

Default transition — 600 ms ease для transform, 300 ms ease для color. Вдвое медленнее типичного marketing-dark. Эффект: «вещи движутся нехотя, но предсказуемо».

Keyframes

@keyframes fadeIn  { 0% { opacity: 0; } }
@keyframes slideIn { 0% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
@keyframes slideUp { 0% { transform: translateY(60px);  } 100% { transform: translateY(0); } }
@keyframes rotate  { 0% { transform: rotate(0);  } 100% { transform: rotate(360deg); } }
@keyframes scale   { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } }

Пять минимальных движений. Нет parallax, нет glitch, нет SVG-morph. Консервативное движение.

Кнопки, pill-cards, icon-grid, header

Кнопки — primary · secondary · deep

Наведите курсор — ::before раскроет tri-stop gradient. Нажмите — scale(0.97) + opacity 0.8.

Pill-card (signature 28 px)

Icon grid (hero 2×2)

States matrix

Восемь приёмов ДНК

Primary button: solid violet background (#630EFF) in rest. На hover/focus-visible — reveal cyan→blue→violet linear-gradient через ::before pseudo с opacity: 0 → 1, transition: opacity 300ms ease. Gradient: linear-gradient(97deg, #01C5C8 0.32%, #046EF4 44.6%, #572DFF 62.16%). Active: transform: scale(0.97); opacity: 0.8; transition 300ms. Isolation: isolate — обязательно. Эффект — button оживает только при касании.

Header как floating glass pill: position: fixed; top: 16px; right: 16px; left: 16px; z-index: 10. Контейнер: border-radius: 24px на всех углах, background: rgba(40, 29, 58, 0.8), backdrop-filter: blur(15px), box-shadow: rgba(0,0,0,0.05) 0 40px 25px 0, rgba(0,0,0,0.10) 0 5px 10px 0, min-height: 64px, padding: 0 16px. На mobile при открытии меню pill расширяется на весь viewport.

Все внутренние карточки — pill-cards с border-radius: 28px. Padding asymmetric: 16px 60px 16px 24px (резерв 60px справа под chevron-иконку с абсолютным позиционированием). Background: #281D3A; hover #34264B. Transition: background-color 600ms ease, transform 200ms ease. Active: scale(0.99). Max-width: 1196px.

Для brand-moments — conic-gradient(from 132deg, #00CCFF 85deg, #0026FF 180deg, #A500C6 340deg). Радиус контейнера 16px, padding 8px, icon 35×35 внутри. Контейнер isolation: isolate; position: relative; с ::before { inset: 0; z-index: -1; backdrop-filter: blur(10px); }. ПРАВИЛО: не больше 1-2 conic-иконок на viewport.

Typography doctrine — weight economy: используйте ТОЛЬКО font-weight: 400 для body и font-weight: 500 для headings и buttons. Никогда не 600, 700, 800, 900. H1 72px/500/1.0 tracking -0.64px. H2 56px/500/1.0 tracking -0.64px. Body 16.8px/400/1.5/color #B5B5B5.

Size scale — бинарная. BODY: 14, 16, 16.8, 18, 20, 24, 28, 32 — UI, buttons, card titles, body. DISPLAY: 48, 56, 72 — hero + section headings. ЗАПРЕЩЕНО: 36, 40, 44, 52, 60, 64, 68 на desktop.

В hero H1 — первое слово через gradient text-clip, остальные слова плоский белый. HTML: <h1><span class="hero__grad">{FIRST_WORD}</span><br>{rest}</h1>. CSS для .hero__grad: background: linear-gradient(97deg, #01C5C8 0.32%, #046EF4 44.6%, #572DFF 62.16%); -webkit-background-clip: text; background-clip: text; color: transparent. ПРАВИЛО: только одно слово, только в H1 hero, только на странице.

ТОЛЬКО одна тень на весь сайт: rgba(0, 0, 0, 0.05) 0px 40px 25px 0px, rgba(0, 0, 0, 0.10) 0px 5px 10px 0px. Применяется ТОЛЬКО к 2 floating элементам (header-pill + sticky-CTA-bar). Все остальные cards, buttons, sections — flat, без теней. Иерархия глубины бинарная.

Запуск в новой сессии

В следующей сессии вызывай библиотеку командой:

/design-book generate "[ваш бриф]"

Meta-скилл подберёт подходящие буки по тегам суперсил. Чтобы явно использовать marketing-dark-3, добавьте в бриф слова-триггеры: «quiet-dark», «weight-500», «glass-pill-header», «signature-gradient reveal».

Пример брифа

/design-book generate "Лендинг B2B-платформы интеграций (webhook / API-шлюз / ETL для enterprise), русскоязычный. Стиль quiet-dark, как marketing-dark-3. Hero с floating glass pill header, signature 28px pill-cards, single solid violet primary + tri-stop motion gradient reveal на hover buttons. Weight 500 only. 4 product-feature секции с device-mockup. Sticky CTA-bar."

Анти-паттерны · Что нельзя

1. Не использовать weight 700+. Quiet-dark ломается.
2. Не размножать conic-gradient logo-box. 1–2 на viewport, не больше.
3. Не ставить shadow на pill-cards. Shadow бинарный — либо floating, либо flat.
4. Не делать signature gradient всегда видимым на buttons. Reveal = дефицит.
5. Не округлять 28 px до 24 или 32.
6. Не добавлять mid-tier 40–48 px на desktop display.
7. Не ускорять дефолтные 300 / 600 ms ease. Это часть characterа.
8. Не добавлять secondary accent. Дисциплина — solid violet + один gradient.
9. Не делать header full-width. Pill с 16 px inset — это визуальный контракт page frame.
10. Не центрировать desktop display headings. Left-align — хребет композиции.