Design book / marketing-light-6

Playful B2B SaaS GTM — curated chromatic sampler with per-page identity

Дизайн-бук, фиксирующий tone «зрелой quiet-confidence» B2B SaaS-платформы: один geometric sans, binary weights 400/600, asymmetric tracking, oat warm-cream substrate, 8-swatch chromatic spread с per-page color identity, tri-modal radius signatures (0 + 12 + 40 + pill), mascot-as-product claymation textural unity и restraint manifesto через 9 anti-patterns.

→ Pill icon-button (signature 1584)

SP1 — Chromatic sampler

Curated 8-swatch palette + per-page identity

Warm-cream oat substrate (hue 30-40°) + 8 chromatic семей со строгой ролевой логикой. Только blueberry имеет structural role (link/pricing/product hero). Остальные — decorative pops freq 2-5. Two-slot near-black: #000 CTA bg, #1b1a18 body text — 8% saturation differentiator создаёт «cream paper, not white paper».

oat (substrate spine)

100

200

300

400

700

950

blueberry (only structural)

450

600

900

matcha (about hero / success)

100

400

500

700

lemon (yellow pop / warning)

100

500

700

tangarine (orange pop)

100

500

700

ube / dragonfruit / slushie (rare)

ube-500

drag-500

slush-500

pom-500

Промпт-сниппет для генерации (copy)

Палитра marketing-light-6:
- Substrate: oat (hue 30-40°, sat 8-15%) — НЕ grey. Page bg #fff, alt-section #f9f8f6, cards #f3f2ed/#eee9df.
- Action split: CTA bg #000 (sat 0%), body text #1b1a18 (oat-950, sat 8%). НЕ объединять.
- Primary accent (blueberry, единственный со structural ролью): link #0667d9, pricing-highlight #3859f9, product-hero full-bleed #002f67.
- Per-page color identity:
  • product → deep-tone full-bleed solid
  • solution → cream rounded card 40px
  • company → mid-saturated full-bleed solid
  • pricing → neutral + ОДИН highlighted tier
  • home → neutral + zebra pop-cards
- Каждая хроматическая семья 1-2 раза на ВЕСЬ сайт.

Per-page color identity (decision tree)

5 архетипов hero — semantic, not random

Каждой странице-архетипу соответствует свой signature solid hero. Это даёт chromatic wayfinding (пользователь чувствует переход в «другую комнату») при сохранении brand recognition через textural unifier (mascot illustrations).

PRODUCT-PAGE → blueberry-900 deep navy full-bleed, white H1 600 64px

Your AI research agent for any question

Deep-tone solid canvas signal интенсивности продукта. White H1 600 (никогда 700). Padding lg+md.

COMPANY-PAGE → matcha-500 forest green full-bleed, white H1 64px

Welcome to our company

Mid-saturated solid hero выражает personality бренда — narrative, не product-pitch.

SOLUTION-PAGE → oat-200 cream rounded card 40px (NOT full-bleed). 1111×1112 container.

Make every sales touch fast and personal

Card-as-page паттерн — softer warm tonality для role/persona-страниц. Differentiation: product=intense vs solution=approachable.

PRICING-PAGE → white substrate + один highlighted tier blueberry-450 (#3859f9)

Free

200 rows / month

Enterprise

Quote

unlimited

HOME → white + oat-100 zebra alternation, chroma только в pop-cards внутри

Go to market with unique data

Neutral substrate. Hero без solid-color, chroma уходит в trust-bar/testimonial cards дальше по странице.

↓ Trust-bar в alt-section bg = oat-100. Pop-color карточки testimonial появляются ниже.

SP2 — Monodiscipline typography

Один шрифт. Binary weights. Asymmetric tracking.

Один geometric sans на display+body+UI (substitute General Sans). Binary 400/600 — все headings H1-H6 одним weight 600. Asymmetric ls: -0.04em для display, +0.1em для eyebrow uppercase, 0 для mid-tier, -0.01em micro для body.

H1 / 600 / -0.04emГлавное обещание

H2 / 600 / -0.04emПодтема секции

H3 / 600 / -0.04emЗаголовок карточки

H4 / 600 / 0Подзаголовок блока

P-XL / 400 / 0Lead-параграф под H1, идёт сразу после с margin 0.2em

Body / 400 / -0.01emОсновной читаемый текст. Универсальный rhythm 1.5 на всех уровнях body/compact (24/16, 21/14).

Eyebrow / 500 / +0.1emМетка раздела

Промпт-сниппет

Single-font monodiscipline: General Sans (substitute Inter)
для display+body+UI. Binary weight: body=400, eyebrow/label=500,
ВСЕ headings H1-H6=600 (НИКОГДА 700 для текста).
Asymmetric tracking: H1-H3 letter-spacing=-0.04em;
html default letter-spacing=-0.01em; H4-H6 + body=0;
eyebrow uppercase mono +0.1em weight 500.
H1 fluid clamp(2.8rem, 2.0rem + 4.0vw, 5.5rem) с context override:
home 80px peak, interior pages clamp(...3vw, 4rem)=64px max.
Line-height inverted scale: H1=1.0, H2=1.1, H3=1.2, H4-6=1.4,
body=1.5 universal.
Hierarchy ТОЛЬКО через size+lh+ls — никаких bold-эскалаций.

Buttons & inputs

Pure-black CTA + cream secondary + pill icon

Primary CTA — pure #000 bg, white text, radius 12 (signature). Никогда gradient, никогда heavy shadow. Pill icon-button использует радиус 1584 (signature №3).

→ Pill icon-button

SP3 — Tri-modal radius

Binary 0 + три закреплённые signature

87% сайта — sharp 0. Плюс ровно три signature: 12px CTA, 40px solution-hero-card, 1584 pill. Запрет mid-radii 4/6/10/16/20.

0 (87%)

8 (sharp)

12 CTA

24 (md)

28 (card)

40 hero

pill

Запрещены: 4 / 6 / 10 / 16 / 20 px — никакого decorative smooth-radius scale.

Testimonial poster cards

Каждой карточке — свой pop-цвет

Diversity is the signature. Не унифицируй цвета карточек — yellow/green/orange/cyan/magenta/purple на одной решётке создают «paint sampler» эффект.

«Мы перешли с CSV-импортов на единую платформу за неделю.»

Мария Зорина

Head of RevOps

«Воронка стала прозрачной — каждый шаг измерим.»

Артём Кравцов

VP Sales

«SDR-команда выросла в 3 раза без увеличения бюджета.»

Илья Светлов

Sales Director

«Интеграции с CRM перестали быть проблемой.»

Анна Полякова

GTM Ops

2,4× рост LTV 312 новых сделок 6 мин до запуска

Inline KPI chips — pill radius + matcha-400 bg + bold 700 для нумералов (единственный случай weight 700).

Navigation

Floating header + hamburger drawer (≤991px)

Header абсолютный, sit-on-hero, transparent bg. Mega-menu dropdown использует repeat(N, minmax(240px, 336px)) с 1px hairline gap (divider trick).

Product Use cases Solutions Pricing Resources

DNA

Все 8 суперсил

Полное описание с промпт-сниппетами и tags — в dna.md. Каталог компонентов — components.md. Layout/motion — patterns.md.

SP1 — Chromatic Sampler with Per-Page Identity. 8-swatch curated spread + role-by-archetype + two-slot near-black. #palette#wayfinding#dual-action-split
SP2 — Monodiscipline Typography. Один шрифт + binary 400/600 + asymmetric tracking + context-aware H1. #single-font#binary-weight#asymmetric-tracking
SP3 — Tri-Modal Radius Signatures. 0 dominant + 12 CTA + 40 hero-card + pill. #anchored-signatures#ban-mid-radii
SP4 — Card-as-Page Solution Container. Solution-pages используют 1111×1112 cream rounded 40px. #card-as-page#solution-archetype
SP5 — Mascot-as-Product + Claymation Textural Unity. Имена -ent/-or/-er + 3D matte renders. #mascot#claymation#textural-unifier
SP6 — FAT Mega-Sections Doctrine. 2000-2400px section с 5 sub-features под общим bg. #fat-mega#fat-then-compact
SP7 — Restraint Manifesto. Brand через 9 anti-patterns (no glass / no shadow / no gradient / no bold). #restraint#through-deletion
SP8 — Dual-Easing Tiered-Duration Motion. easeOutCirc + easeOutQuart + 4-tier durations. #motion#dual-easing

Repeated anchor

Footer-CTA на каждой странице

Один и тот же CTA-блок повторяется в footer каждой страницы — consistency anchor через содержание, а не визуальный hammer.