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

Тип Landing (DR, long-form)
Аудитория Предприниматели, маркетологи 25-55
Цель Enrollment в курс (BOFU)
Дата 2026-04-17
Мастер-класс в дорогом лофте: стены белые, освещение тёплое с оранжевым свечением. Ведущий говорит спокойно (Inter 400, 15px), но когда указывает на ключевые цифры, голос меняется (PlayfairDisplay-Italic, 50px). На столе — одна оранжевая папка.

Design DNA & Суперсилы

1

Hue-Swap Hover

#dual-accent #micro-interactions #hover-glow #конверсия

При hover CTA-кнопка МЕНЯЕТ hue с оранжевого на фиолетовый, а не просто темнеет. Создаёт ощущение «ответа» — сайт реагирует неожиданно, как живой.

Default: bg #FF8A00, shadow rgba(255,138,0,0.2) 0 25px 35px Hover: bg #5E4ABB, shadow rgba(94,74,187,0.25) 0 15px 35px Active: bg #4C3B9E, shadow flush, translateY(10px) Speed: 100ms ease-out
Промпт-сниппет
Кнопки используют hue-swap hover: default bg orange #FF8A00 с оранжевым box-shadow (rgba(255,138,0,0.2) 0 25px 35px), на hover bg переключается на violet #5E4ABB с violet shadow (rgba(94,74,187,0.25) 0 15px 35px), active — dark violet #4C3B9E + translateY(10px) + flush shadow. Transition 100ms ease-out. Тень МЕНЯЕТ ЦВЕТ вместе с фоном.
2

Warm Dual-Layer Shadow

#warm-shadows #colored-shadows #depth #premium-feel

Тени состоят из двух слоёв: тёмная база + subtle orange tint (rgba(255,138,0,0.05)). Эффект тёплой глубины, как вечерний свет.

shadow-xl (dual)
shadow-md (CTA)
shadow-2xl (glow)
3

Whisper-Then-Shout Typography

#wide-tracking #bold #elegant

96.3% текста — weight 400 (шёпот). CTA — weight 800 uppercase (крик). Бинарный контраст без промежуточных весов.

Обычный текст страницы — тихий, ровный, weight 400, 15px

Заголовок — тоже 400, но крупнее

4

Pervasive Letter-Spacing Breath

#wide-tracking #elegant #breathing-room

Letter-spacing 0.4px на body (39% элементов). Градиент: body 0.4 → subheadings 0.5 → headings 1 → CTA 2px.

Без letter-spacing (0px) — текст сжимается, нет воздуха

С letter-spacing 0.4px — текст дышит горизонтально

Заголовок с 1px spacing

CTA С 2PX SPACING

5

Binary Radius System

#pill-buttons #high-contrast

95% элементов — sharp (0px), 5% — pill (100px). Промежуточных почти нет. Pill = интерактивный.

0px (карта)
100px (кнопка)
50% (play)
6

Violet-Tinted Dark Sections

#section-contrast #sandwich-dark-light #depth

Тёмные секции — НЕ чисто-чёрный, а #0B0813 с фиолетовым оттенком (hue 265 градусов). Гармонизирует с accent palette.

Pure black #000
Violet-tinted #0B0813
Footer #1F1F1F

Цвета

Primary & Secondary

--ld3-color-primary#FF8A00CTA default, tab hoverAA large text only (2.9:1)
--ld3-color-primary-hover#5E4ABBCTA hover, play hoverAA (5.1:1)
--ld3-color-primary-active#4C3B9ECTA pressed
--ld3-color-secondary-muted#8E84B5Вторичный текст, бордерыAA large (3.5:1)

Neutral Scale

50
100
200
300
400
500
600
700
800
900
950

Surface

--ld3-color-bg#FFFFFFОсновной фон
--ld3-color-surface#FCFBFAOff-white фон
--ld3-color-surface-dark#0B0813Тёмные секции (violet-tint)
--ld3-color-surface-footer#1F1F1FFooter bg

Text

--ld3-color-text#0D0D10Основной текст
--ld3-color-text-secondary#8E84B5Вторичный (violet-tinted)
--ld3-color-text-highlight#FF8A00KPI цифры, highlights

Типографика

Шрифты

Аа Бб Вв 123 — Playfair Display Italic
Display шрифт (декоративные заголовки)
Аа Бб Вв 123 — Inter
Body шрифт (99.9% текста)
CTA ТЕКСТ — Manrope 800
CTA шрифт (замена Gilroy-Heavy, только кнопки)

Шкала размеров

Заголовок первого уровня5xl · 50px · 400 · lh 1.10 · ls 1px
Крупный заголовок4xl · 36px · 400 · lh 1.11
Заголовок секции3xl · 30px · 400 · lh 1.17
Подзаголовок2xl · 25px · 400 · lh 1.30
Вторичный body текст, крупные параграфыxl · 20px · 400 · lh 1.50
Основной body текст — доминантный размер (41% элементов), Inter 400, 15px с letter-spacing 0.4pxbase · 15px · 400 · lh 1.47 · ls 0.4px · DOMINANT
Мелкий body текстsm · 14px · 400
Каптионы, метаxs · 12px · 400

Спейсинг

Нерегулярный grid — intention-driven, не 4px/8px база

--ld3-space-15px
--ld3-space-3 (xs)10px
--ld3-space-4 (sm)13px
--ld3-space-6 (md)20px
--ld3-space-8 (lg)30px
--ld3-space-10 (xl)42px
--ld3-space-12 (2xl)55px
--ld3-space-14 (3xl)80px
--ld3-section-pt88px (section top)
--ld3-space-32154px (max section)

Контейнер

Max-width: 1265px (фактический) / 1680px (CSS max-width)

Формы

Border Radius (бинарный: sharp vs pill)

none0px (95%)
xs2px
lg20px (карты)
pill100px (CTA)
circle50%

Тени (тёплые orange-tinted)

xs
sm
md (CTA)
lg (dual)
xl (signature)
inner

Движение

Три скорости: micro (100ms) / UI (300ms) / reveal (800ms). Easing: ease-out.

Durations

micro 100ms
fast 150ms
normal 300ms
reveal 800ms

Компоненты

Кнопки (CTA)

Default
Blue
Disabled

Ссылки

Посмотреть все сферы бизнеса

Инпуты

Кнопка Play

Feature Card (тёмная)

Стабильный поток клиентов на следующие несколько лет

Табы

1 2 3 4 5

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

1

Подключи токены: <link rel="stylesheet" href="tokens.css">

2

Используй CSS-переменные с префиксом --ld3-*

3

Для генерации нового сайта: /design-book generate "[промпт]"

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

Полный промпт
Создай long-form landing page с warm premium feel. Цветовая схема: белый фон, dual-accent orange #FF8A00 (CTA default) + violet #5E4ABB (hover/active states). Кнопки pill (border-radius 100px) с hue-swap hover (orange→violet) и warm orange-tinted box-shadow (rgba(255,138,0,0.2) 0 25px 35px). Все тени dual-layer: тёмная база + orange tint 0.05. Типографика whisper-then-shout: body Inter 400 15px letter-spacing 0.4px, headings тоже 400 но крупнее (25-50px), CTA единственное место с weight 800 uppercase letter-spacing 2px. Border-radius бинарный: 0px (всё) vs 100px (кнопки). Тёмная секция bg #0B0813 (violet-tinted black). Section padding 88-154px.

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