# Design DNA: marketing-light-5

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

- **Тип:** marketing-light
- **Подтип:** editorial AI-frontier-lab corporate
- **Аудитория:** policy makers, researchers, enterprise trust-buyers (B2B+institutional), developers и mass-market вторичны
- **Цель:** trust-building / TOFU — позиционирование через institutional authority, не через конверсию
- **Tone:** mission-driven + academic + sober
- **Референсы:** Stripe Press, OpenAI, substack-editorial

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

За 3 секунды: «Это не стартап и не SaaS. Это издательство, которое публикуется». Cream-paper фон вместо белого, H1 sans с solid-thick подчёркиванием избранных слов (как правка редактора), рядом body параграф serif — два голоса в комнате. Dark inset «картина в галерее» с огромной italic drop-cap. Ни одного яркого digital-акцента — только тёплая глиняная точка где-то в углу.

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

Разворот академического квартальника на толстой кремовой бумаге с шершавой фактурой. Рассеянный дневной свет из северного окна мастерской, падающий на тёплый ручной лён. Не стекло Silicon Valley, а рисовая бумага, музейный картон, переплётный ледерин. Редакционный Playfair-drop-cap читается как фронтиспис монографии MIT Press.

История — не «стартап» и не «платформа». Это институция, которая публикуется, и коллектив исследователей, которые предпочли бы, чтобы их читали медленно, как эссе, а не сканировали. Инверсия привычного digital-паттерна (serif в body, sans в заголовке) — сознательная декларация: текст важнее интерфейса.

Парадокс: AI-лаборатория на переднем крае капиталоёмкой технологии, которая одевается как независимое издательство полувековой давности. Frontier vs craft, infinite compute vs finite attention, machine learning vs humanities voice.

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

**Цвет как персонаж.** Все нейтралы в узком тёплом hue 40-60°, никогда не уходят на синюю ось. Ивори-поверхности (49°/38% на 97% L) — небелёный лён и ненабелённая акварельная бумага Arches. Насыщенность приглушённая студия художника: ивори 20-38%, cloud 4-6%, slate 3-4%. Ни одного цвета ярче 62% — и даже clay (единственный такой) приглушён терракотой.

`slate-dark #141413` (hue 60°, sat 3%) — **не чёрный, а тёплый deep brown-black**. Sumi-ink на рисовой бумаге, не `#000` цифрового мира. Разница на глаз ~2 пункта, семантически огромна: `#141413` материален, `#000` цифровой.

**Clay #d97757 — распорядитель внимания.** Hue ~15° orange-red sat 62% — глиняно-терракотовый, не digital-orange. Появляется 1-2 раза на viewport максимум: nav-hover bg, редкий underline в dropdown, cookie `Accept all cookies`. Дефицит — риторика: здесь не кричат, доверяют вниманию.


**Типографика как голос.** Властный, не-хайповый, academic. H1 sans 700 — заявление миссии, не growth-hack. Рядом body serif 400 — longread-журнал. Копирайтинг без emoji, без восклицаний, без «Unlock» / «Supercharge»: «build», «serve», «research», «frontier». Weight 400 доминирует 88-89% — quiet-authority, не визуальный крик.

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

Editorial-щедрый. DOMINANT `--ml5-section-main` (88-160px) между 90% секций — один метроном, не арпеджио. Перебив один — Flagship Initiative dark inset, которая тормозит скролл через инверсию фона.

**Dark-on-cream inset — НЕ full-width.** `max-width: 89.5rem`, `border-radius: 16px`, `padding: 48-80px`. «Картина в галерее», не «dark mode секция». Эта granular-разница — один из ключевых signatures: dark не заливает всю секцию.

**1432px grid — шире индустриального стандарта 1200-1280px.** +150-230px воздуха для editorial long-form. `paragraph-m` 18-20px serif читается комфортнее при колонке 640-680px. Edge-margin `clamp(32-80px)` делает контейнер floating, не приклеенным к краю. Растёт с viewport без media-query скачков.

## Движение

**Sober / editorial-paced / respectful / nothing flashy.** Motion-budget: только color / opacity / transform (≤1.02), никаких rotation / skew / massive scale.

Характер — пульс сайта через **микро-цветовые transition** (`color 0.2s` — 155× в home, топовый). Элементы не движутся — цвета меняются. `fadein` keyframe `opacity 0→1` без slide-up, без scale-bounce: whispered arrival, не theatrical.

Два easings с жёстким role-разделением:
- `cubic-bezier(0.77, 0, 0.175, 1)` — для opacity/menu (film-reveal)
- `cubic-bezier(0.165, 0.84, 0.44, 1)` — для hover transforms (капля касается поверхности)

**Signature motion — `menuOpen` curtain.** `clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) → polygon(0 0, 100% 0, 100% 100%, 0 100%)`, 400ms, `--ml5-ease-default`. Мобильное меню раскрывается как театральный занавес сверху вниз. Единственная «сложная» анимация системы.

---

## Суперсилы

### 💫 1. Dual-Voice Typography Inversion

**Что это:** Serif в body-параграфах + Sans в display/UI/CTA, пропорция ~50/50. Инверсия индустриального digital-стандарта (где sans=body, serif=headlines).

**Почему работает:** Serif body сигнализирует «это текст для чтения, не интерфейс». Sans display заявляет authority без декоративности. Два голоса в комнате: архитектор произносит тезис, писатель разворачивает мысль. Если H1 поставить в serif — сайт станет editorial blog; если body пустить sans — станет SaaS-продуктом. Инверсия уникально обозначает «AI-lab как институция, не стартап».

**Параметры:**
- `--ml5-font-serif: "Fraunces", Georgia, serif` — body paragraphs + editorial section-H2
- `--ml5-font-sans: "Inter", Arial, sans-serif` — hero-H1 weight 700, nav, CTA, eyebrow, footer
- Hero H1: `--ml5-font-display-xxl` (clamp 44-72px) weight 700 ls -0.02em lh 1.05
- Body paragraph: `--ml5-font-paragraph-m` (clamp 18-20px) weight 400 serif ls -0.005em lh 1.4
- Frequency на home: serif 333 / sans 328 (50/50 split)

**Встречается:** каждый параграф body + каждый H1/H2 на всех страницах. Инверсия — структурное, не локальное решение.

**Теги:** #typography #editorial #inversion #dual-voice #authority #longform #institutional

**Подходит для:** research orgs, think tanks, AI labs, editorial publications, law firms, NGO, policy consultancies, longform magazines.

**НЕ подходит для:** SaaS dashboards, e-commerce (fashion/retail), gaming, kids/education, dev-tools с code-first vibe, fintech consumer apps.

**На мобиле:** работает полностью. Dual-voice сохраняется в вертикальном стеке (H1 sans сверху → body serif ниже). При reflow никаких изменений ролей.

**▶ ПРОМПТ-СНИППЕТ:**
> "Применяй dual-voice typography inversion: все body-параграфы набирай serif (Fraunces через Google Fonts, weight 400, line-height 1.4, letter-spacing -0.005em). Все hero-H1 и page-headers — sans (Inter, weight 700, line-height 1.05, letter-spacing -0.02em). Section-H2 editorial — serif 400 display-xl. UI-H2 — sans 600. НЕ используй serif в H1 и НЕ используй sans в body — это разрушит инверсию. Копирайтинг должен поддерживать голос: formal, academic, без emoji и growth-hack-лексики."

---

### 💫 2. Cream-over-White Warm-Earth Substrate

**Что это:** Body background `#faf9f5` (warm cream) вместо `#fff`, все нейтралы в узком hue 40-60°. Slate-dark `#141413` — не чёрный, а тёплый deep brown-black (sat 3%).

**Почему работает:** Cream активирует «paper / editorial / material world» восприятие. Pure white активирует «digital / interface / screen». Разница 2 пункта на глаз, радикальная разница в voice. Тёплые нейтралы объединяют палитру в одно поле — никаких cold neutrals рядом с warm accents, всё единый visual ecosystem.

**Параметры:**
- `--ml5-color-ivory-light: #faf9f5` (body bg, HSL 49°/38%/97%)
- `--ml5-color-ivory-medium: #f0eee6` (secondary bg, alternation)
- `--ml5-color-slate-dark: #141413` (text + dark inversion, HSL 60°/3%/8%)
- `--ml5-color-cloud-medium: #b0aea5` (caption, HSL 51°/6%/67%)
- Все нейтралы: hue 40-60°, sat ≤38% на light, ≤6% на slate/cloud
- WCAG: slate-dark on ivory-light = 18.4:1 ✅

**Встречается:** 100% поверхности. Структурное решение.

**Теги:** #warm-palette #cream #substrate #paper #earth #muted #desaturated

**Подходит для:** editorial, academic, institutional, longform, NGO, law firms, research.

**НЕ подходит для:** fintech consumer (нужен cleaner-digital trust), gaming (нужен high-energy), kids (нужен bright).

**На мобиле:** работает полностью, cream substrate не меняется.

**▶ ПРОМПТ-СНИППЕТ:**
> "Используй cream substrate `#faf9f5` для body-background (не `#fff`). Все нейтралы строго в hue 40-60°: slate-dark `#141413` для текста и dark-inversion блоков (НЕ `#000000`, НЕ `#0a0a0a`). Секции могут чередоваться `#faf9f5 / #f0eee6 / #e8e6dc` (ivory light/medium/dark). Никаких cold-neutrals, никакого `#f5f5f5` серого — всегда тёплые ivory с warm tint. Проверь HSL: hue должен быть 40-60°, saturation ≤38% на light surfaces, ≤6% на slate/cloud. Text на cream — `#141413` (hue 60° sat 3%), не `#000`."

---

### 💫 3. Whisper-Shadow Monodiscipline

**Что это:** Одна-единственная тень на весь сайт, три слоя с opacity 0.01 / 0.02 / 0.04 — почти невидимы отдельно, вместе дают мягкую дымку. Триггерится ТОЛЬКО на hover карточек-ссылок.

**Почему работает:** Типичный SaaS имеет shadow-шкалу `sm/md/lg/xl + glow + focus` — визуальный шум, constant weight даже в статике. Whisper-monodiscipline: в статике плоско, на hover — мягкий «вдох» без перемещения элемента. Дефицит теней подчёркивает каждый случай её появления. Anti-noise стратегия.

**Параметры:**
```css
--ml5-shadow-whisper:
  rgba(0,0,0,0.01) 0 2px  2px 0,
  rgba(0,0,0,0.02) 0 4px  4px 0,
  rgba(0,0,0,0.04) 0 16px 24px 0;
```
Триггер: только `.card:hover` или эквивалент (карточка-ссылка). Duration: `--ml5-duration-fast 200ms`, easing `--ml5-ease-out-circ`. Никаких цветных теней. Никаких других уровней шкалы.

**Встречается:** hover на release-cards, article-cards, featured-tiles. ~5-10 мест на типичной странице.

**Теги:** #shadow #monodiscipline #whisper #minimal #hover-only #anti-noise

**Подходит для:** любой minimal-design с focus на content-first (editorial, brand-site, institutional, portfolio).

**НЕ подходит для:** dashboard UI с многоуровневым layering (nested modals, panels), gaming (нужен dramatic shadow), 3D product visualisation (нужен realistic shadow).

**На мобиле:** hover не работает → можно триггерить на `:active` или просто не показывать. Не критично — карточки на мобиле разделены spacing'ом.

**▶ ПРОМПТ-СНИППЕТ:**
> "Используй ОДНУ тень на весь сайт: `box-shadow: rgba(0,0,0,0.01) 0 2px 2px, rgba(0,0,0,0.02) 0 4px 4px, rgba(0,0,0,0.04) 0 16px 24px` (triple-layer whisper). Применяй ТОЛЬКО на `:hover` карточек-ссылок (release-cards, article-tiles), transition 200ms ease-out-circ. В статике — никакой тени. НЕ добавляй shadow-md/lg/xl, НЕ используй цветные тени. Если хочешь depth — используй border `rgba(20,20,19,0.10)` (slate-faded-10) как whisper-divider."

---

### 💫 4. Clay Accent Deficit

**Что это:** Единственный warm accent `clay #d97757` (hue 15° orange-red, sat 62% — глиняно-терракотовый, НЕ digital-orange). Появляется 1-2 раза на viewport максимум. CTA default — `slate-dark`, clay — исключительный акцент.

**Почему работает:** Типичный marketing-сайт: primary accent как background для primary CTA + использование на иконках, highlights, charts → accent теряет смысл частоты. Здесь: 99% UI держится на slate-dark monochrome, clay появляется как «вспышка тепла» в одном месте — hover на nav-кнопках, cookie Accept. Дефицит делает clay заметным без агрессии.

**Параметры:**
- `--ml5-color-clay: #d97757` (HSL 15°/62%/60%)
- `--ml5-color-clay-deep: #c6613f` (darker hover variant)
- `--ml5-color-cta-accent-bg: var(--ml5-color-clay)` (semantic alias)
- Frequency: **max 2 per viewport**
- Типичные места: (1) `.btn.is-nav:hover` background, (2) cookie-modal Accept CTA, (3) редкий underline в dropdown-link hover
- **Запрещено:** clay как primary CTA default-bg, clay в иллюстрациях как dominant, clay на теле параграфа

**Встречается:** 1-2 раза на viewport. Структурный дефицит.

**Теги:** #accent-deficit #clay #terracotta #warm-orange #hover-only #scarcity #signature

**Подходит для:** editorial, academic, institutional — где авторитет важнее конверсии. Любой дизайн с «quiet signal» воля.

**НЕ подходит для:** direct-response landing (нужен primary-CTA-bg), e-commerce (нужны яркие sale-tags), consumer apps (нужны frequent affordances).

**На мобиле:** работает полностью. Hover-variants редуцируются до `:active` или выводятся в always-visible (cookie accept остаётся clay-bg).

**▶ ПРОМПТ-СНИППЕТ:**
> "Используй clay `#d97757` (HSL 15°/62%/60%) как единственный warm accent. Правило: максимум 1-2 появления на viewport. Primary CTA дефолт — `slate-dark #141413` bg + `ivory #faf9f5` text, hover → `slate-medium #3d3d3a`. Clay появляется только на (а) специальном nav-variant кнопок при hover, (б) одном специальном CTA (например cookie Accept или финальный section-CTA). НЕ делай clay как primary-CTA-background по умолчанию. НЕ используй clay в иллюстрациях как dominant. НЕ добавляй secondary accent (blue/purple/green) — warm earth должен быть единственным accent-полем."

---

### 💫 5. Binary-Biased Radius

**Что это:** Доминирует `0` (609× в home) и `pill 100vw` — два полюса. Средние 4/8/16 редки. 6/10/12/14/20px — запрещены.

**Почему работает:** Role-contrast: секции квадратные (0), кнопки pill (100vw) — автоматическое визуальное разделение структурных и интерактивных элементов. Промежуточные радиусы `10-14px` создают «SaaS-шум», где всё выглядит одинаково-округлённым. Бинарность даёт чёткую семантику: квадратное = контент, округлое = действие.

**Параметры:**
- `--ml5-radius-none: 0` — dominant (секции, блоки, типографика, containers)
- `--ml5-radius-pill: 100vw` — CTA buttons, chips
- `--ml5-radius-md: 8px` — cards, inputs (редко, accent)
- `--ml5-radius-lg: 16px` — large cards, dark-inset block (редко)
- `--ml5-radius-xl: 24px` — prominent tiles (очень редко)
- **Запрет:** 2/6/10/12/14/18/20px — не в оригинале, создают noise

**Встречается:** 0 — 609× в home, pill — 10-15× (все CTA), 8/16 — 26+5× (cards).

**Теги:** #radius #binary #role-contrast #anti-noise #pill-cta

**Подходит для:** editorial, institutional, minimal-design. Любое окружение где «чистота системы» важнее «friendly-roundedness».

**НЕ подходит для:** playful brands (kids/gaming — нужны round-rectangles), soft-consumer apps.

**На мобиле:** работает полностью, pill-buttons остаются pill, секции остаются flat.

**▶ ПРОМПТ-СНИППЕТ:**
> "Radius строго binary: `0` (секции, containers, блоки) и `100vw` pill (CTA buttons, chips). Средние `4/8/16/24px` используй только для cards и specific tiles. **Запрещено** применять `6/10/12/14/18/20px` — они создают SaaS-шум. Hero-card, release-card, article-card — все получают `radius 16px`. Buttons primary/secondary/tertiary — все `100vw pill`. Секции, containers, hero, footer — `0`. Input fields — `8px`."

---

### 💫 6. Editorial Underline-as-Editing

**Что это:** Подчёркивание избранных слов в H1 solid-thick (НЕ wavy, НЕ hyperlink). «Research» и «products» в hero: `AI research and products that put safety at the frontier` — подчёркнуты ключевые слова, как рукописная правка редактора.

**Почему работает:** Семантический выбор: подчёркивается **что делает компания**, не идеалы. Читатель бессознательно воспринимает это как "authorial emphasis" — голос редактора. Не hyperlink (цвет не меняется), не wavy (не spell-check), не highlight (не marker). Solid thick offset — stylus-mark на корректуре.

**Параметры:**
```css
.h1-editorial em {
  font-style: normal;
  color: inherit;  /* НЕ link-color */
  text-decoration: underline;
  text-decoration-thickness: var(--ml5-underline-thickness);  /* 0.06em */
  text-underline-offset: var(--ml5-underline-offset);         /* 0.1em */
  text-decoration-color: currentColor;
  text-decoration-style: solid;  /* НЕ wavy, НЕ dotted */
}
```
Применяется **только** в H1 hero (1 раз на страницу максимум) на 1-2 словах.

**Встречается:** 1-2 слова в H1 hero. Очень редкий, signature жест.

**Теги:** #typography #underline #editorial #emphasis #signature #hand-mark

**Подходит для:** editorial-hero, manifesto statements, long-headline academic copy. Везде где длинный H1 нуждается в акценте без цвета/размера.

**НЕ подходит для:** короткие H1 (≤5 слов — некуда выделять), marketing-lift headlines с одним глаголом, CTA-стиль.

**На мобиле:** работает полностью. При reflow H1 на несколько строк — подчёркивание переходит на новую строку естественно (text-decoration wrap).

**▶ ПРОМПТ-СНИППЕТ:**
> "В hero-H1 выдели 1-2 ключевых слова через `<em class='underline-edit'>research</em>` с CSS: `font-style: normal; color: inherit; text-decoration: underline solid; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; text-decoration-color: currentColor`. Подчёркивай **действия / глаголы / существительные-действия**, не abstract-слова. Не используй wavy, не hyperlink-color, не highlight. Только solid thick stylus-mark. Применять только в одном H1 на страницу — иначе превратится в декоративный шум."

---

### 💫 7. Typographic Wordmark Signature

**Что это:** Бренд представлен типографикой + одной диакритической/пунктуационной модификацией (slash, dot, underscore, ligature), НЕ отдельным glyph-логотипом. Плюс asymmetric header↔footer: full wordmark сверху → reduced single-char glyph снизу.

**Почему работает:** Логотип-икона требует визуальной компетенции для распознавания; логотип-wordmark с одной типографической модификацией работает как literal pronunciation. `BRAND\X` = читается, запоминается, воспроизводится чистой типографикой. Header/footer asymmetry — «разговорное представление наверху → подпись внизу», как в официальных письмах.

**Параметры:**
- **Header:** full wordmark, `font-family: --ml5-font-sans`, `font-weight: 700` / 600, `letter-spacing: 0.02em` uppercase, с одной модификацией (`\\`, `·`, `_`, или `ᴬ→ʙ` ligature между двумя glyphs).
- **Footer:** reduced к single-char или monogram, monochrome ivory на slate-dark bg.
- Никаких gradient-логотипов, никаких photographic-марков, никаких glyph-ов с цветной заливкой.

**Встречается:** 2 раза на странице (header + footer), ≥1 раз в каждой документной странице.

**Теги:** #logo #wordmark #typography #signature #asymmetric #minimal

**Подходит для:** институты, research-org, editorial-publisher, law/consulting firms, author-blogs. Везде где бренд = текст, а не визуальный продукт.

**НЕ подходит для:** consumer product brands (нужен memorable glyph для app-icons, favicons), e-commerce retail (нужен логотип-щит), gaming (нужен характерный mascot).

**На мобиле:** работает полностью. Header wordmark может сократиться до monogram на <479px, footer остаётся monogram.

**▶ ПРОМПТ-СНИППЕТ:**
> "Вместо traditional logo-glyph создай typographic wordmark: имя бренда набранное sans-700 uppercase, letter-spacing 0.02em, с ОДНОЙ диакритической модификацией внутри: backslash, mid-dot, underscore, или ligature между двумя буквами. Пример: `BRAND\\X`, `NOVA·LAB`, `CORE_CO`. В header — полный wordmark. В footer — reduced single-char glyph или monogram той же типографики, monochrome на dark-bg. НЕ используй photographic logo, gradient-fill, shield-logo. Бренд = текст с одним signature-знаком."

---

## Анти-паттерны

Что НЕЛЬЗЯ делать при воспроизведении — каждое ломает конкретный signature:

1. **Serif в H1.** Разрушает dual-voice инверсию. H1 = sans 700, всегда.
2. **Pure white `#fff` substrate.** Cream `#faf9f5` — якорь warm-earth. White превращает в SaaS-dashboard.
3. **Clay как primary CTA default-bg.** Дефицит исчезает — clay становится «ещё один orange SaaS». Primary = slate-dark, clay — исключительный accent.
4. **Shadow-шкала `sm/md/lg/xl + glow`.** Whisper-monodiscipline сломан. Одна тень, на hover-only.
5. **Editorial underline вне H1.** Копирование декорации на H2/cards/CTA превращает авторский editor-gesture в декоративный glitch.
6. **Media-query для font-size.** Fluid clamp покрывает все viewports. `@media (max-width: 768px) { h1 { font-size: 32px } }` = нарушение.
7. **Radius 6/10/12/14/20px.** SaaS-шум. Binary 0/pill + accent 4/8/16/24. Промежуточные — disqualify.
8. **Swatch-art в UI-ролях.** Olive/cactus/sky/heather/fig/coral/manilla/kraft/oat — только для illustrations. Использование как фона кнопок/секций = playful, не editorial.
9. **Hero-video / animated gradient background.** Motion budget — color/opacity/transform ≤1.02. Static typographic hero — якорь editorial-voice.
10. **Dark inset full-bleed (на всю ширину).** «Картина в галерее» превращается в «dark mode секцию» → teryaetsya editorial tension. Dark inset всегда `max-width: 89.5rem` + `border-radius: 16px`.
11. **Trust-row / logo-garden «As seen in…».** НЕТ partner logos, НЕТ social-proof рядов. Authority через собственный голос, не borrowed credibility. Редкая, сильная негативная суперсила.
12. **Colored social icons в footer.** Соцсети в monochrome ivory на slate-dark, не в brand-colors. Иначе разрушается monochrome footer.
13. **Logo как primary image-hero.** Бренд = wordmark, не glyph-центричная композиция.
14. **Category tags как colored chips с иконками.** Metadata tabular (DATE · CATEGORY), uppercase mono. Никаких цветных bedge-ей.

---

## Матрица совместимости

| Бук | Совместимость | Что брать / что ломает |
|---|---|---|
| `marketing-light-3` (fintech, whisper 300, indigo) | ⚠️ частично | ✅ whisper typography 300 + dual-layer shadow концепт. ❌ indigo `#533AFD` ломает warm-earth. Swap «quiet-indigo → quiet-clay» возможен. |
| `marketing-light-4` (AI SaaS, dual accent blue+red, warm sandstone) | ⚠️ частично | ✅ warm sandstone neutrals (~35°) совместимы. ✅ alpha-layered text rgba. ❌ dual accent blue+red ломает clay monodiscipline. ❌ bento-grid против editorial воздуха. |
| `marketing-dark-3` (B2B, quiet-dark, monodiscipline violet) | ⚠️ идея, не форма | ✅ концепт monodiscipline-accent (violet ↔ clay). ✅ weight economy. ❌ dark substrate, glass pill, conic gradients — чужое. |
| `landing-1` (agency, airy 120-150px, green pill) | ⚠️ форма, не цвет | ✅ airy vertical spacing. ❌ green pill CTA ломает clay monopol. |
| `marketing-light-1` (zebra, bento, triada) | ❌ | Multi-accent triada + bento — полная несовместимость. |
| `landing-2/3` (direct-response) | ❌ | High-energy 25000px vs editorial voice — разные жанры. |
| `saas-panel-1` | ❌ | Panel UI ≠ marketing site, разные контексты. |
| `gaming-dark-1` | ❌ | HUD sci-fi vs editorial — противоположности. |

**Конфликты (что уничтожает DNA):**
- Яркие digital accents (neon, electric blue, hot pink, lime).
- Heavy shadow hierarchy (multi-tier).
- Multi-accent палитры (2+ primary cores).
- Brutalist typography (all-caps massive no-serif).
- Glassmorphism / backdrop-blur как signature.

**Идеальные use-cases:**
- ✅ Research orgs, think tanks, academic institutions
- ✅ AI labs / deep-tech с trust-building messaging
- ✅ Editorial/longform publications (Substack Pro, NYT Magazine style)
- ✅ Law firms, policy consultancies, NGOs
- ✅ Author blogs, academic personal sites

**НЕ подходит:**
- ❌ E-commerce fashion/retail
- ❌ Gaming/entertainment
- ❌ Kids/education с playful vibe
- ❌ Dev-tools для массовой аудитории (code-first)
- ❌ Fintech consumer (cleaner digital trust)

**Универсальная суперсила (если взять ОДНУ):**
**Dual-Voice Typography Inversion.** Портируется в любой warm marketing-сайт, мгновенно меняет характер на editorial, работает даже при сохранении остальной палитры/spacing. Требует: Fraunces в body 400, Inter в H1 700, editorial-tone copy.

---

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

> Создай editorial AI-frontier-lab corporate marketing-сайт. Палитра: cream substrate `#faf9f5` + slate-dark text `#141413` (не `#000`) + clay accent `#d97757` (1-2 per viewport). Все нейтралы hue 40-60° (warm-earth), никаких cold-grays / blues / purples. Типографика dual-voice: body — Fraunces serif 400 line-height 1.4, hero-H1 — Inter sans 700 line-height 1.05, editorial section-H2 — Fraunces 400 display-xl. В H1 подчеркни 1-2 ключевых слова `text-decoration: underline; thickness 0.06em; offset 0.1em`. Shadow строго ОДНА: `--ml5-shadow-whisper: rgba(0,0,0,0.01) 0 2 2, 0.02 0 4 4, 0.04 0 16 24` на hover карточек. Radius binary: `0` (секции) + `100vw` pill (CTA). Cards `16px`. Один dark inset блок "картина в галерее" внутри cream body (`max-width 89.5rem`, radius `16px`, НЕ full-bleed). Motion: только color/opacity/transform ≤1.02. Section rhythm dominant `clamp(5.5rem, 4.12rem + 5.88vw, 10rem)`. 12-col grid max 89.5rem. Никаких trust-row партнёрских логотипов, никаких colored social-icons, никаких hero-video/gradient. Копирайтинг formal academic: «build», «research», «serve» — без «Unlock», «Supercharge», emoji. Wordmark typographic (не glyph-logo) с одной диакритической модификацией (backslash, dot, ligature).