Marketing-light 5 — editorial журнальный голос через dual-voice типографику (serif body + sans display), cream warm-earth substrate, whisper-shadow monodiscipline и clay accent deficit. 7 сигнатурных суперсил для research-orgs, AI labs, think tanks, longform publications.
01 · Контекст
Editorial AI-frontier-lab corporate archetype. Академический квартальник на warm cream paper, не SaaS-дашборд. Institutional trust через собственный голос, не borrowed credibility.
Тип
marketing-light
editorial AI-frontier-lab corporate
Цель
Trust-building / TOFU
(не конверсия)
Tone
mission-driven, academic, sober
Визуальная метафора
Разворот академического квартальника на толстой кремовой бумаге с шершавой фактурой. Рассеянный дневной свет из северного окна мастерской, падающий на тёплый ручной лён. Не стекло Silicon Valley, а рисовая бумага, музейный картон, переплётный ледерин.
Инверсия digital-паттерна (serif body, sans display) — сознательная декларация: текст важнее интерфейса. AI-лаборатория одевается как независимое издательство полувековой давности.
#faf9f5 вместо #fff, все нейтралы hue 40-60°#d97757, 1-2 на viewport0 dominant + pill 100vw, role-contrast02 · Colors
Все нейтралы в узком hue 40-60°. Ни один не на синей оси. Cream paper surface, тёплый deep brown-black вместо чёрного, единственный warm accent clay.
Core neutrals · Ivory
Core neutrals · Slate (text)
Cloud (muted)
Accent · Clay (1-2 per viewport max)
Swatch art collection (illustration reserve — НЕ для UI)
WCAG Контраст
slate-dark / ivory-light 18.4:1 ✅ AA · slate-light / ivory-light 6.3:1 ✅ AA · clay / ivory-light 3.7:1 ⚠️ только для крупного bold · clay / slate-dark 4.9:1 ✅ AA
03 · Typography
Инверсия индустриального digital-стандарта. Serif (Fraunces) для body-параграфов + sans (Inter) для display/UI/CTA + mono (JetBrains Mono) для метаданных. Пропорция ~50/50.
AI will have a vast impact on the world. The lab is a public benefit company dedicated to securing its benefits and mitigating its risks.
Editorial body-параграф в Fraunces regular 400. Letter-spacing -0.005em компенсирует открытые апертуры на средних размерах. Line-height 1.4 даёт комфортное чтение для longform прозы. Это голос писателя, разворачивающего мысль, не UI-лейбл.
01 · RESEARCH PROGRAMS
2026-04-18 · RESEARCH · FLAGSHIP INITIATIVE
04 · Spacing & Layout
Мелкие ≤24px — fixed. Крупные ≥32px — fluid clamp. Никаких media queries для размеров. Dominant section rhythm — 88-160px между смысловыми блоками.
Space scale
Container & Grid
max-width: 89.5rem (1432px) · edge-margin: clamp(32-80px) · grid: 12-col · gutter: clamp(28-32px)
Breakpoints (только для layout reflow, НЕ для type/space)
479px mobile · 767px tablet · 991px laptop · 1249px desktop · верхняя граница через clamp() max, не через breakpoint
Section rhythm (DOMINANT)
--ml5-section-main: clamp(5.5rem, 4.12rem + 5.88vw, 10rem) — 88-160px между 90% секций. Один метроном, не арпеджио.
05 · Shapes
Два полюса radius (0 и pill 100vw) + middle 4/8/16/24 для cards. Одна тень на весь сайт, hover-only.
Radius scale (binary)
Shadows (single whisper — hover карточек)
--ml5-shadow-whisper: rgba(0,0,0,0.01) 0 2 2, rgba(0,0,0,0.02) 0 4 4, rgba(0,0,0,0.04) 0 16 24 — единственная тень, появляется ТОЛЬКО на hover карточек-ссылок. Три слоя с opacity 0.01/0.02/0.04, почти невидимы отдельно, вместе дают мягкую дымку. Ни shadow-sm, ни shadow-md, ни shadow-lg — monodiscipline.
06 · Motion
Motion-budget: только color / opacity / transform (≤1.02). Никаких rotation, skew, massive scale. Два easings с role-разделением. Signature — menuOpen curtain clip-path.
Signature · menuOpen curtain-down
@keyframes menuOpen {
0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
/* 400ms, --ml5-ease-default, curtain-down reveal */07 · Components
14 компонентов подробно разобраны в components.md. Живые примеры сигнатурных ниже.
Buttons · Pill CTA hierarchy (radius 100vw)
Primary default = slate-dark bg. Accent (clay) — исключительный, для единственного CTA на viewport (cookie accept, special action).
Inputs
Release cards (editorial style · DATE · CATEGORY metadata)
A smarter, more capable Flagship model for coding, agents, vision, and complex professional work.
Read announcement →No ads. No sponsored content. Just genuinely helpful conversations.
Read the post →The first AI-assisted drive on another planet — a rover travel four hundred meters on a distant world.
Read the story →Dark inset inversion block (signature — «картина в галерее»)
Securing critical software for the AI era. Single dark block внутри cream body, max-width 89.5rem, border-radius 16px, padding 48-80px. НЕ full-bleed.
Read the story →Cookie modal (dark inset с clay Accept)
08 · Superpowers
Каждая — с промпт-сниппетом для /design-book generate. Полное описание с параметрами, тегами, anti-patterns — в dna.md.
Serif в body + Sans в display, пропорция ~50/50. Инверсия индустриального стандарта (где sans=body, serif=headlines). Разрушить → разрушить DNA.
Применяй 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-лексики.
Body background #faf9f5 (не #fff), все нейтралы hue 40-60°. Slate-dark #141413 — не чёрный, а тёплый brown-black.
Используй cream substrate #faf9f5 для body-background (не #fff). Все нейтралы строго hue 40-60°: slate-dark #141413 для текста и dark-inversion блоков (НЕ #000000). Секции чередуются #faf9f5 / #f0eee6 / #e8e6dc (ivory light/medium/dark). Никаких cold-neutrals, никакого #f5f5f5 серого — всегда тёплые ivory. Проверь HSL: hue 40-60°, saturation ≤38% на light, ≤6% на slate/cloud.
Одна тень на весь сайт, triple-layer opacity 0.01/0.02/0.04. Триггер: только .card:hover. Никакой shadow-шкалы.
Используй ОДНУ тень на весь сайт: 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 карточек-ссылок, transition 200ms ease-out-circ. В статике — никакой тени. НЕ добавляй shadow-md/lg/xl, НЕ используй цветные тени. Depth — через border rgba(20,20,19,0.10).
Единственный warm accent clay #d97757, max 1-2 на viewport. CTA default — slate-dark, clay — исключительный акцент.
Используй clay #d97757 как единственный 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). НЕ делай clay primary-CTA-bg по умолчанию. НЕ добавляй secondary accent (blue/purple/green).
Dominant 0 + pill 100vw. Cards 8/16px редки. 6/10/12/14/20px — запрещены.
Radius строго binary: 0 (секции, containers, блоки) и 100vw pill (CTA, chips). Средние 4/8/16/24px только для cards/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.
Solid-thick underline на 1-2 избранных словах в H1. НЕ wavy, НЕ hyperlink. «Рукописная правка редактора».
В hero-H1 выдели 1-2 ключевых слова через <em class="underline-edit">word</em> с CSS: font-style: normal; color: inherit; text-decoration: underline solid; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em. Подчёркивай действия / глаголы / существительные-действия. Не wavy, не hyperlink-color, не highlight. Применять только в одном H1 на страницу.
Бренд = sans wordmark + одна диакритическая модификация (backslash, dot, underscore, ligature). Header full wordmark → Footer reduced к 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 monogram той же типографики, monochrome на dark-bg. НЕ используй photographic logo, gradient-fill, shield-logo.
09 · Usage
В следующей сессии вызови /design-book generate "[бриф]". Этот бук подтянется автоматически для подходящего контекста (AI-lab, research-org, editorial publication, law/NGO).
Быстрый промпт для генерации сайта
Создай 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). Типографика dual-voice: body — Fraunces serif 400 lh 1.4, hero-H1 — Inter sans 700 lh 1.05, editorial section-H2 — Fraunces 400 display-xl. В H1 подчеркни 1-2 ключевых слова text-decoration: underline thickness 0.06em offset 0.1em. Shadow ОДНА: 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 clamp(5.5rem, 4.12rem + 5.88vw, 10rem). 12-col grid max 89.5rem. Никаких trust-row, colored social-icons, hero-video. Копирайтинг formal academic: «build», «research», «serve». Wordmark typographic с одной диакритической модификацией.
Подходит для
research orgs, think tanks, academic institutions, AI labs с trust-building messaging, editorial/longform publications, law firms, policy consultancies, NGOs, author blogs.
НЕ подходит для
e-commerce fashion/retail, gaming/entertainment, kids/education playful, dev-tools для массовой аудитории, fintech consumer apps.
Anti-patterns (BLOCKING)
#fff substrate → превращает в SaaS-dashboardsm/md/lg/xl → ломает whisper-monodiscipline6/10/12/14/20px → SaaS-шум