Контекст
Тип
marketing-light
Аудитория
B2B — tech leaders, developers, enterprise
Цель
Self-serve signup + enterprise lead gen
Дата
2026-04-16
"Архитектурный минимализм: бетон, свет и один яркий арт-объект. Уверенность через тишину, не через крик."
Design DNA
1
Whisper Typography
#typography #weight-light #negative-trackingЗаголовки в weight 300 (light) с негативным tracking. Уверенность через тишину: бренду не нужно кричать bold, чтобы быть услышанным.
Financial infrastructure
Промпт-сниппет
Используй weight 300 (light) как доминирующий для заголовков. H1: 48px/300/1.1 с letter-spacing -0.02em. H2: 38px/300/1.12 с -0.016em. Body: 15px/300-400/1.4. Шрифт — геометрический гротеск (Inter var). НЕ использовать bold для заголовков.
2
Indigo-Tinted Dual-Layer Shadows
#shadow #dual-layer #elevationТени из двух слоёв: индиго-тонированный rgba(50,50,93) + чистый чёрный с отрицательным spread. Парящий эффект вместо прилипшей тени.
shadow-sm
shadow-md
shadow-lg
shadow-xl
Промпт-сниппет
Все тени — dual-layer: первый слой тонирован основным акцентным цветом (rgba вашего accent, 0.25), второй — чистый чёрный (rgba 0,0,0, 0.30). Обязательно отрицательный spread (от -1px для sm до -30px для xl). Пропорция: blur в 5-10x от vertical offset, spread = -40% от blur.
3
Breathe Rhythm (112px Sections)
#whitespace #section-rhythm #premium112px section padding создаёт ощущение «каждая секция — отдельная комната». Whitespace IS the design.
Промпт-сниппет
Section padding: 112px сверху и снизу. Base unit 4px. Container max-width: 1264px. Grid: 12 колонок, gap 16px. H1 max-width: ~960px. НЕ уменьшать padding ради 'экономии места' — whitespace IS the design.
4
Slate Blue-Gray Neutrals
#neutral #blue-gray #financialВся нейтральная шкала имеет hue 210-215deg (синий подтон). Создаёт холодный «финансовый» характер вместо generic серого.
Промпт-сниппет
Нейтральная шкала — НЕ чистый серый. Все нейтральные цвета имеют hue 210-215deg (blue-gray / slate). Primary text: #0A2540. Secondary: #425466. Border: #E5EDF5. Surface: #F8FAFD. При генерации: берите чистый серый и сдвигайте hue на 210deg, saturation 15-25%.
5
Signature Radius 16.5px
#radius #non-standard #signatureФирменный border-radius 16.5px — не круглый и не pill. «Мягкий прямоугольник» который не найдёшь в Tailwind.
4px
8px
16.5px
pill
Промпт-сниппет
Signature border-radius: 16.5px для ключевых элементов (cards, modals, hero blocks). НЕ округлять до 16 или 20 — нестандартность value = часть identity. Шкала: 0 (default) → 2px (inputs) → 4px (buttons) → 8px (cards, nav) → 16.5px (featured) → 9999px (pills).
6
Five-Curve Easing System
#motion #easing #polish5 easing curves для разных типов анимации: default, slide, smooth, sharp, nav. Каждое движение продумано.
Промпт-сниппет
5 easing curves: (1) default — cubic-bezier(0.25,1,0.5,1) для color/bg; (2) slide — (0.165,0.84,0.44,1) для transforms; (3) smooth — (0.16,1,0.3,1) для reveals; (4) sharp — (0.4,0,0.2,1) для menu; (5) nav — (0.45,0.05,0.55,0.95) для morphing. Duration: fast 150ms, normal 300ms, slow 800ms.
Цвета
Primary — Indigo
--ml3-color-primary
#533AFD
CTA, links, highlights
AA 4.6:1
--ml3-color-primary-hover
#635BFF
Hover state
--ml3-color-primary-subtle
#E2E4FF
Badge bg, focus ring
--ml3-color-accent
#9966FF
Декоративный, градиенты
Neutral Scale — Slate Blue-Gray
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#15BE53
warning#FFCE48
danger#FF6118
info#0073E6
teal#00C4C4
Surface
bg#FFFFFFPage background
surface#F8FAFDFooter, alt bg
surface-dark#0D1738Dark section
Типографика
Aa Bb Cc Dd 0123
Inter var (free-аналог проприетарного geometric sans) — variable font
Hero heading H1
Page heading H1
Section heading H2
Subsection heading H3
Card heading H4
Lead paragraph text
Body large (home page)
Body primary (product pages)
Body secondary (cards)
Caption / footnote
Overline micro
Weights
Light 300
Dominant (~60%)
Dominant (~60%)
Regular 400
Nav, accent body
Nav, accent body
Medium 425
vf-specific
vf-specific
Semibold 500
CTA, overline
CTA, overline
Спейсинг
Base unit: 4px. Section padding: 112px.
--ml3-space-0_52px
--ml3-space-14px
--ml3-space-28px
--ml3-space-312px
--ml3-space-416px
--ml3-space-624px
--ml3-space-832px
--ml3-space-1040px
--ml3-space-1664px
--ml3-space-2496px
--ml3-space-28112px (section)
Формы
Border Radius
none
0px
0px
xs
2px
2px
sm
4px
4px
md
8px
8px
lg
14px
14px
xl
16.5px
16.5px
pill
9999px
9999px
Shadows
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-nav
Движение
ease-default — color/bg feedback
ease-default — standard transitions
ease-slide — transforms, carousels
ease-smooth — scroll reveals
Компоненты
Кнопки
Inputs
Default
Error
Карточки
Feature card
Hover to see the signature dual-layer shadow elevation effect.
Dark variant
Dark section card with inverse text colors.
Badges
Primary
Success
Warning
Danger
Stats
135+
currencies supported
99.999%
historical uptime
200M+
subscriptions managed
Как использовать
1
Подключи токены: <link rel="stylesheet" href="tokens.css">
2
Используй переменные --ml3-* в своих стилях
3
Копируй промпт-сниппеты из секции DNA для генерации нового контента
Быстрый промпт для генерации
Полный промпт
Создай marketing-страницу в стиле premium fintech: light theme, белый фон (#fff), slate blue-gray нейтральные (hue 210deg, primary text #0A2540). Один accent — indigo (#533AFD), только на CTA и links. Шрифт — Inter var, weight 300 (light) как доминанта для заголовков (48px/300/1.1, ls -0.02em). Section padding 112px. Border-radius 16.5px на карточках. Dual-layer тени: rgba(50,50,93,0.25) + rgba(0,0,0,0.30) с отрицательным spread. 5 easing curves для разных типов анимации. Whitespace — ключевой элемент дизайна: не экономить, не уплотнять.
Не делать
- Не заменять weight 300 на 400 — потеря signature «воздушности»
- Не убирать негативный letter-spacing — заголовки рассыпаются
- Не заменять slate neutrals (hue 210) на чистые серые
- Не округлять 16.5px до 16 или 20
- Не упрощать dual-layer тени до single-layer
- Не уменьшать section padding со 112px
- Не добавлять bold weight на заголовки