Контекст

Типmarketing-light (dual-theme)
АудиторияB2B SaaS команды, PM, IT-руководители
ЦельFreemium-регистрация + воронка демо
Дата2026-04-16
"Скандинавский минимализм встречает рабочую культуру Кремниевой долины — матовое дерево, матовое стекло и крафтовая бумага в фонах; bento-сетки и интерактивные калькуляторы в вёрстке. Тёплый в покое, холодный при разговоре."

DNA дизайна и суперсилы

1

Alpha-Layered Text Hierarchy

#alpha-text#adaptive#surface-agnostic

Иерархия текста через rgba(0,0,0,X) вместо hex — 0.95 / 0.9 / 0.54 / 0.4 / 0.2. Автоматически адаптируется к любому цвету поверхности через композитинг.

--ml4-color-text: rgba(0, 0, 0, 0.95) --ml4-color-text-body: rgba(0, 0, 0, 0.90) --ml4-color-text-secondary: rgba(0, 0, 0, 0.54) --ml4-color-text-tertiary: rgba(0, 0, 0, 0.40) --ml4-color-text-disabled: rgba(0, 0, 0, 0.20)

Заголовок (0.95) на белом

Основной текст (0.9) на белом

Вторичный (0.54) на белом

Заголовок (0.95) на тёплом сером

Основной текст (0.9) на тёплом сером

Вторичный (0.54) на тёплом сером

Prompt-сниппет
Use alpha-layered text: headings rgba(0,0,0,0.95), body rgba(0,0,0,0.9), secondary rgba(0,0,0,0.54), hints rgba(0,0,0,0.4), disabled rgba(0,0,0,0.2). NEVER convert to hex. Transparency adapts text to any background automatically.
Мобильная версия: работает идеально Для: SaaS, dual-theme, карточные интерфейсы Не для: цветной текст, градиентный текст
2

Whisper-Opacity Shadow System

#whisper-shadow#depth-through-surface#minimal

Многослойные тени с максимальной непрозрачностью 0.08. Глубина строится через различия цвета поверхностей, а не через тени.

--ml4-shadow-sm: 0px 3px 9px rgba(0,0,0,0.03), 0px 0.7px 1.4px rgba(0,0,0,0.015) --ml4-shadow-md: 4-layer, max 0.04 per layer --ml4-shadow-lg: 0px 20px 50px rgba(0,0,0,0.08), 0px 6px 16px rgba(0,0,0,0.04)
sm
md
lg
Prompt-сниппет
Shadows are near-invisible: max rgba(0,0,0,0.08). Three levels: sm (hover lift, 2 layers), md (card/dropdown, 4 layers), lg (modal, 2 layers). Depth is created by SURFACE COLOR (#f9f9f8 vs #ffffff), not shadow. If shadows look invisible, that's correct.
3

Role-Partitioned Dual Accent

#dual-accent#conversion-grammar#color-roles

Синий #0075de для навигации/информации (24 элемента), красный #f64932 исключительно для CTA (6 элементов). Роли никогда не смешиваются.

Синий = ссылка навигации
Prompt-сниппет
Two accent colors with strict roles: blue (#0075de) = links, navigation, info (frequent). Red (#f64932) = ONLY CTA signup buttons (rare). Never use red for links, never blue for the main CTA. Frequency is inversely proportional to saturation.
4

Warm Neutral Substrate

#warm-neutral#stone-gray#human-tech

Нейтральная шкала с тёплым оттенком ~35 градусов вместо холодных серых. Создаёт ощущение «обжитости», как натуральное дерево и крафтовая бумага.

50
100
200
300
400
500
600
700
800
5

Bento Grid + Layered Composition

#bento-grid#layered-composition#product-showcase

Сетка на 2-3 колонки с зазором 12px (плотный монолит). Карточки показывают стопки скриншотов (фронт 65% + фон 85%), создавая глубину без 3D.

Модуль A
Просто и мощно.
Попробовать →
Модуль B
Единый источник правды.
Попробовать →
6

Cinematic Dark-to-Light Hero

#dark-hero#hard-cut#campaign-gradient

Тёмный индиго-hero (#02093a до #213183) с резким переходом на светлую тему. Без градиентного затухания. Однонаправленный: после перехода на светлый, страница никогда не возвращается к тёмному.

Встречайте будущее.

Продукт, который работает, пока вы спите.

Цвета

Основной и CTA

--ml4-color-primary#0075deСсылки, интерактивные акценты
--ml4-color-primary-hover#005babСостояние при наведении
--ml4-color-cta#f64932Только CTA-кнопки
--ml4-color-cta-hover#e32d14CTA при наведении

Нейтральная шкала (тёплый оттенок ~35 градусов)

50
100
200
300
400
500
600
700
800
900

Текст (alpha-слои)

--ml4-color-textrgba(0,0,0,0.95)Заголовки
--ml4-color-text-bodyrgba(0,0,0,0.9)Основной текст
--ml4-color-text-secondaryrgba(0,0,0,0.54)Вторичный / метаданные
--ml4-color-text-disabledrgba(0,0,0,0.2)Отключённое состояние

Семантические

--ml4-color-success#1aae39Успех
--ml4-color-warning#ffb110Предупреждение
--ml4-color-danger#f64932Опасность
--ml4-color-info#097fe8Информация

Кампания (градиент Hero)

--ml4-color-campaign-900#02093aНачало градиента Hero
--ml4-color-campaign-600#213183Конец градиента Hero
--ml4-color-campaign-300#607df6Декоративный акцент

Типографика

Aa Bb Cc 123
Display и Body: Inter (свободный аналог проприетарного шрифта источника)
Aa Bb Cc 123
Serif: Source Serif 4 (свободный аналог проприетарного шрифта с засечками источника)

Шкала размеров (13 ступеней, прогрессивный трекинг)

Акцентный дисплей 7xl 64px / 700 / ls -2.1px
Hero-заголовок 6xl 54px / 700 / ls -1.9px
Заголовок страницы 5xl 42px / 700 / ls -1px
Заголовок секции 4xl 32px / 700 / ls -1px
Заголовок карточки 3xl 26px / 700
Подзаголовок 2xl 22px / 700 / ls -0.125px
Вводный текст секции xl 20px / 500
Крупный текст, вводные абзацы lg 18px / 400
Основной текст (55% всего текста) md 16px / 400
Компактный текст, элементы сайдбара base 15px / 400
Метки, навигация, метаданные sm 14px / 500
Подписи, бейджи, мелкий шрифт xs 12px / 400

Экономия насыщенности

66% Regular 400 | 23% Medium 500 | 4% Semibold 600 | 7% Bold 700 — сдержанность как послание.

Отступы

Базовая единица: 4px. Шкала: 19 ступеней от 0 до 160px.

--ml4-space-14px
--ml4-space-28px
--ml4-space-312px
--ml4-space-416px
--ml4-space-624px
--ml4-space-832px
--ml4-space-1248px
--ml4-space-1664px
--ml4-space-2496px
--ml4-space-40160px

Раскладка

Навигация: 64px | Отступ секции: 60px | Сетка: 12 колонок, зазор 28px (12px мобильный) | bento-зазор: 12px

Формы

Скругление углов

xs4px
sm5px
md8px (доминирующий)
lg12px
xl16px
pill9999px

Тени

smлёгкое поднятие
mdкарточка
lgмодальное окно

Движение

Быстрая система: диапазон 100-300ms. Наведение через ease-in (не ease-out). Резко и достойно.

Системный отклик
Микровзаимодействие
Цвет, тень
Открытие дропдауна
Структурное изменение

Кривые плавности

quint (0.86,0,0.07,1) | quart (0.76,0,0.24,1) | quad (0.45,0,0.55,1) | cubic (0.645,0.045,0.355,1) | ease-in | ease-out | linear

Компоненты

Кнопки

Поля ввода

Карточки (bento-стиль)

Модуль A
Просто и мощно.
Попробовать →
Модуль B
Источник правды.
Попробовать →
Модуль C
Меньше трекинга.
Попробовать →

Теги

#alpha-text #whisper-shadow #bento-grid #warm-neutral

Руководство по использованию

Быстрый старт

1. Подключите токены: <link rel="stylesheet" href="tokens.css">
2. Используйте переменные var(--ml4-*) в CSS
3. Прочитайте dna.md для суперсил и prompt-сниппетов

Полный prompt для генерации

Полный prompt для /design-book generate
Create a marketing-light site in the style of AI productivity SaaS. Key parameters: (1) Dark indigo hero (#02093a to #213183) with white centered H1 64px/700 max-width 600px, floating 3D icons, dual CTA (red pill + white outline), hard-cut transition to light theme. (2) Alpha-layered text: headings rgba(0,0,0,0.95), body rgba(0,0,0,0.9), secondary rgba(0,0,0,0.54). NEVER hex. (3) Warm neutrals (hue ~35 deg): #f9f9f8 surfaces, #f6f5f4 cards, #dfdcd9 border. NOT cool gray. (4) Dual accent: blue #0075de for links, red #f64932 ONLY for CTA signup. (5) Whisper shadows: max opacity 0.08. Depth through surface color, not shadow. (6) Bento grid: 2-3 col, gap 12px, layered screenshots. (7) Inter font, weight economy: 66% regular 400, bold only for headings. (8) Motion: max 300ms, hover via ease-in, snappy + dignified.

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

  • Конвертация alpha в hex — ломает наложение на цветных поверхностях
  • Видимые тени — «чуть заметнее» = смерть дизайна. Безопасного шага вверх от 0.08 нет
  • Красный как primary — фреймворки ожидают один primary. Нужна отдельная роль cta, отличная от primary
  • Холодные серые — Tailwind gray-* имеет hue 220. Используйте stone-* или кастомные
  • Избыток bold — один font-bold «для акцента» ломает пирамиду 66% regular
  • Плоский letter-spacing — трекинг ОБЯЗАН меняться по размеру (0px при 16px, -4px при 76px)