# Design DNA — marketing-light-6

> Архетип: playful B2B SaaS GTM platform
> Извлечено: 2026-04-26

## The Soul

Этот archetype — это **серьёзный B2B-инструмент в детской упаковке**. Сайт продаёт сложную GTM-платформу для sales-ops, но визуальный язык построен на тёплом oat-substrate, ручной 3D-claymation и персонажах-маскотах с агентивными суффиксами (-ent/-or/-er). Это не "fun startup" — это намеренный architectural choice: **тёплая палитра + binary radii + monodiscipline-типографика + дисциплина воздержания** превращают SaaS в нечто похожее на дорогой издательский журнал, который случайно умеет автоматизировать enrichment.

Главная стратегическая ставка — **per-page chromatic identity**: разные архетипы страниц (product / company / solution / pricing / home) получают разные hero-цвета, превращая палитру в систему wayfinding. Цвет здесь не декорация, а навигационный сигнал. Поверх — единый textural anchor (claymation 3D), удерживающий разнородные цвета в одном бренде.

Brand built **through deletion**: сайт демонстративно отказывается от 9 индустриальных штампов (glassmorphism, shadow, gradient CTA, bold 700, pure black body, mid-radii, monodiscipline accent, cool grey, urgency-banner). Restraint = суперсила, а не ограничение.

## The Visual Metaphor

**Brand-name-as-material → claymation language → product-as-character.** Имя бренда буквально диктует визуальную метафору: материал (глина / резина / песок / металл — выбор бренда) → лепные 3D-объекты в едином матовом стиле → продукты-фичи персонифицированы как маскоты с суффиксами агента (Inferent, Discoveror, Targeter). Textural language работает как unifier поверх chromatic spread — какие бы пёстрые цвета ни играли на разных страницах, всех их связывает один материал. Footer на всех страницах — единая illustrated-landscape сцена с маскотами, как closing splash-page издательского tome.

## Superpowers (8 штук)

### SP1: Chromatic Sampler with Per-Page Identity (Curated 8-Swatch + Two-Slot Near-Black)

**Что:** Палитра — не один accent, а **curated hand-picked sampler из 8 семей** на тёплом oat-substrate (#faf9f5), распределённый **по архетипам страниц**: product=deep-navy, company=mid-green, solution=oat-200 cream-card, pricing=blueberry tier, home=neutral zebra. Embedded внутри: **two-slot near-black semantic split** — #000 pure ТОЛЬКО для CTA backgrounds, #1b1a18 (oat-950, sat 8%) ТОЛЬКО для body text. Pure black никогда не касается текста, тёплый near-black никогда не касается action.

**Как:**
- Substrate: `#faf9f5` (oat-100), warm cream неутралка
- 8-swatch sampler: navy #1d2849, green #2c5d3f, blueberry #5b6cf4, clay-orange, cream-card oat-200, plus 3 reserve pop-colors для testimonial pop-cards
- Per-page hero archetype mapping: product-page=full-bleed deep navy + white H1 / company=full-bleed mid-saturated green + white H1 / solution=oat-200 rounded card 40px (hosted by white outer) + oat-950 H1 / pricing=white substrate + single highlighted tier card / home=white+oat-100 zebra alternation
- Action-substrate split: CTA bg `#000` pure, body text `#1b1a18` warm — никогда не путать
- Blueberry — единственный structural цвет (pricing tier highlight), все остальные swatches = decorative

**Почему:** Chromatic wayfinding. Пользователь, попав на любую страницу, мгновенно идентифицирует её архетип по hero-цвету — это визуальный sitemap. Two-slot near-black защищает от "холодной digital-плоскости": warm body text + pure-black CTA = контраст текстуры substrate vs action, не контраст яркости. 8-swatch sampler вместо одного accent даёт **сериальное разнообразие при сохранении системы** (это не chaos — это curated zine).

**Промпт-сниппет:**
```
Build a marketing-light-6 page with warm-cream substrate #faf9f5 (oat-100).
Choose ONE page archetype and apply its hero rule:
- product → full-bleed deep navy #1d2849 hero, white H1 64px weight 600
- company → full-bleed mid-green #2c5d3f hero, white H1
- solution → white outer + oat-200 inner card radius 40px, oat-950 #1b1a18 H1
- pricing → white substrate, ONE blueberry #5b6cf4 tier card highlighted
- home → white/oat-100 zebra alternation, neutral H1
ALL body text uses #1b1a18 (warm 8% sat near-black).
ALL CTA buttons use #000 pure black bg + white text.
NEVER swap these slots. Reserve 2-3 decorative pop-colors for testimonial cards.
Single accent monodiscipline is FORBIDDEN — use the 8-family sampler.
```

**Tags:** `#palette:warm-cream-oat-substrate` `#strategy:per-page-color-identity` `#wayfinding:chromatic-archetype` `#action:two-slot-near-black-split` `#text:warm-not-cold` `#sampler:curated-8-family` `#anti:single-accent-monodiscipline`

---

### SP2: Monodiscipline Typography (geometric sans Single + Binary Weights + Asymmetric Tracking)

**Что:** Один шрифт geometric sans на всё — display И body. **Binary weight scale**: только 400 и 600 (никогда 700+ для headings — сознательный quiet refusal боldness). **Asymmetric letter-spacing** по ролям: -0.04em display peak / 0 mid-tier / +0.1em uppercase eyebrow / -0.01em body micro-tightening. **Context-aware H1**: 80px на home / 64px на product/company / адаптивно по архетипу.

**Как:**
- Font: geometric sans (single family, weights 400 + 600 ONLY)
- Display H1: 80px home / 64px product+company / 56px solution-card-as-page, weight 600, letter-spacing -0.04em
- H2: 40-48px, weight 600, ls -0.02em
- Eyebrow / overline: 12-14px UPPERCASE, weight 600, ls +0.1em
- Body: 16-18px weight 400, ls -0.01em (micro-tightening для warm rhythm)
- Mid-tier (subhead, label): weight 400 или 600, ls 0
- Forbidden: weight 700/800/900, italic, second display font

**Почему:** Monodiscipline = brand recognition без разрозненной типографики. Binary weights = ритм через крупный jump 400→600 без middle-mush 500. Asymmetric tracking создаёт **micro-typography theatre**: уплотнение в display peak, разрядка в caps eyebrow — буквы дышат по-разному в разных ролях. Context-aware H1 — антишаблон "одного H1 на всё".

**Промпт-сниппет:**
```
Use geometric sans as the ONLY font for both display and body.
Use ONLY weight 400 and weight 600. NEVER use 700/800/900 — even for hero H1.
Letter-spacing rules (mandatory):
  - Display (H1, H2): -0.04em (peak) / -0.02em
  - Eyebrow / kicker / UPPERCASE label: +0.1em
  - Body paragraph: -0.01em
  - Mid-tier subhead: 0
H1 size depends on page archetype:
  - home → 80px / weight 600
  - product or company hero → 64px / weight 600
  - solution card-as-page → 56px / weight 600
Italic and second font are FORBIDDEN.
```

**Tags:** `#font:single-monodiscipline` `#weight:binary-400-600` `#tracking:asymmetric-by-role` `#h1:context-aware-peak` `#anti:bold-700-headings` `#anti:second-display-font`

---

### SP3: Tri-Modal Radius Signatures (Binary 0+pill With Anchored Mid-Anchors 12+40)

**Что:** Радиус — **бинарная база с двумя anchored signatures**: `0` доминирует (87%, sharp-edge mass), `pill 1584px` для CTA и chips, плюс **только два mid-anchored значения**: `12px` (CTA buttons) и `40px` (solution hero card-as-page). Запрет всех остальных mid-radii: 4 / 6 / 10 / 16 / 20 / 24 / 32 — индустриальные размытые компромиссы вне системы.

**Как:**
- Radius scale: `0` (87% доминанта) | `12px` (CTA buttons signature) | `40px` (solution hero card signature) | `pill 1584px` (chips, badges, full-pill CTAs)
- Forbidden mid-radii: 4, 6, 8, 10, 14, 16, 20, 24, 28, 32 — НИЧЕГО между 12 и 40
- 0px используется на: cards (default), images, sections, dividers, inputs (default)
- 12px зарезервирован эксклюзивно для primary/secondary CTA button
- 40px зарезервирован эксклюзивно для card-as-page hero контейнера на solution-страницах

**Почему:** Tri-modal binary-with-signatures — это **дисциплинированная средняя** между total binary (0+pill) и continuous-scale (0,4,8,12,16,20,24...). Запрет mid-radii убирает paralysis-of-choice и делает каждый non-zero radius **семантическим маркером** — увидел 12px → знаешь, что это CTA; увидел 40px → знаешь, что это solution hero card.

**Промпт-сниппет:**
```
Use ONLY these four radius values, no exceptions:
  - 0 (default for 87% of elements: cards, images, sections, inputs, dividers)
  - 12px (EXCLUSIVELY for CTA buttons — both primary black and secondary)
  - 40px (EXCLUSIVELY for solution-page card-as-page hero container)
  - 1584px / pill (chips, badges, full-pill CTA variants)
FORBIDDEN: 4, 6, 8, 10, 14, 16, 20, 24, 28, 32. Even if it "looks fine".
Sharp-edge dominance is the substrate; the two mid-anchors are signatures.
```

**Tags:** `#radius:tri-modal-binary` `#pattern:anchored-signatures-12-40` `#ban:mid-radii-4-6-10-16-20` `#dominance:sharp-edge-87pct` `#semantic:radius-as-marker`

---

### SP4: Card-as-Page Solution Container

**Что:** Solution-pages (product-feature детальные страницы) используют **rounded inner cream container** 1111×1112px, radius 40px, на oat-200 substrate, **внутри** более широкого white outer-page. Это не hero-секция — это вся страница, упакованная как rounded card. Differentiation paradigm: product=full-bleed-intense vs solution=approachable-card-wrapped.

**Как:**
- Outer page: white #ffffff full-bleed
- Inner container: `1111×1112px`, radius `40px`, bg oat-200 cream
- Inner padding: ~80px all sides, content max-width ~951px
- Hero H1 inside: weight 600, 56px, oat-950 #1b1a18
- Sub-content: продолжается ниже card в обычном rhythm, но первый screen — целиком rounded card
- Used ONLY on solution-archetype pages, NEVER on product/company/pricing/home

**Почему:** Это **архетипический визуальный маркер** — пользователь по форме первого экрана мгновенно понимает "я на solution-странице, мягкая, объясняющая". Product-страницы агрессивные (full-bleed dark), solution-страницы дружелюбные (rounded cream остров на white substrate). Form = role.

**Промпт-сниппет:**
```
For solution-archetype pages ONLY:
- Outer page bg: #ffffff
- Inner hero container: width 1111px, height ~1112px, bg oat-200 cream, radius 40px
- Padding inside container: 80px all sides
- H1 inside: 56px geometric sans weight 600, color #1b1a18
- Body content continues BELOW the rounded card in normal rhythm
NEVER use this pattern on product-page (those use full-bleed deep navy intensity).
This rounded-card-as-page is the wayfinding signal "you are on solution".
```

**Tags:** `#composition:card-as-page` `#radius:large-40-signature` `#archetype:solution-page-marker` `#contrast:approachable-vs-intense`

---

### SP5: Mascot-as-Product + Claymation Textural Unity

**Что:** Каждый продукт-фича получает **имя-маскот** с агентивным суффиксом (-ent/-or/-er: Inferent, Discoveror, Targeter) и **3D textural иллюстрацию** в едином matte-claymation языке — лепные текстурные персонажи. Footer на всех страницах — общая illustrated-landscape сцена. Texture работает как **brand-anchor поверх chromatic spread**: какие бы пёстрые цвета ни играли, единый материал держит бренд.

**Как:**
- Naming convention: feature-products получают агентивные имена (verb + -ent/-or/-er суффикс)
- Illustration style: 3D claymation rendered (matte tactile sculpted, single-author commission) — tactile, lit, textural
- Каждый mascot имеет character-slot в hero своей feature-страницы
- Mega-footer: единая illustrated landscape сцена с несколькими маскотами, идентичная на всех страницах
- Texture = monomaterial unifier поверх 8-swatch chromatic sampler

**Почему:** Claymation = direct mapping имени бренда (Clay) на визуальный язык. Маскоты-агенты anthropomorphize продукт — фичи становятся "командой персонажей", а не abstract feature-list. Textural monomaterial решает проблему "как удержать pёструю палитру в одном бренде" — ответ: общий материал.

**Промпт-сниппет:**
```
Every feature/product on the site MUST have:
  1. An agentive name: verb-root + suffix -ent / -or / -er
     (e.g., "Inferent", "Discoveror", "Targeter")
  2. A 3D claymation character illustration (matte tactile sculpted style):
     hand-rendered feel, lit from above-left, warm clay material
  3. The character appears as the hero illustration of its feature page
The site footer (every page, same image) is a wide claymation landscape
scene featuring multiple mascots together.
Texture is the brand anchor — flat icons, line art, isometric vector are FORBIDDEN.
```

**Tags:** `#mascot:as-product-character` `#illustration:claymation-3d-editorial` `#naming:agentive-suffix-ent-or-er` `#unifier:textural-monomaterial` `#footer:shared-landscape-scene`

---

### SP6: FAT Mega-Sections Doctrine (Fat-Then-Compact Rhythm)

**Что:** Секции — не равномерный grid, а **alternating rhythm**: "FAT mega-section" 2000-2400px высотой, hosting 5+ child-features под общим bg/padding, чередуется с **compact one-message** секциями ~600-800px. Длинная-короткая-длинная — это breathing pattern сайта.

**Как:**
- FAT section: 2000-2400px height, 5+ feature children в одной композиции, общий bg, общий padding (внешние отступы 120px вверх/вниз), unified visual cluster
- Compact section: 600-800px, single message, single visual focal point
- Alternation: FAT → compact → FAT → compact → mega-footer
- Fat-section internal grid: typically 2- или 3-колоночный, children share visual vocabulary
- Не использовать одинаковые ~1000-1200px секции подряд — это убивает ритм

**Почему:** Fat-then-compact = **macro-typography сайта**. FAT = abundant content cluster, compact = pause / breath. Без compact-секций сайт превращается в перегруз; без FAT — в листательный feed без иерархии. Ритм = waves.

**Промпт-сниппет:**
```
Page composition rhythm (mandatory alternation):
  Section 1: FAT mega-section (2000-2400px tall, 5+ child features, shared bg)
  Section 2: COMPACT (600-800px, single message, single focal point)
  Section 3: FAT mega-section
  Section 4: COMPACT
  ... ending with mega-footer (claymation landscape)
Internal vertical padding of FAT sections: 120px top + 120px bottom.
NEVER place 3 sections of similar height (1000-1200px) in a row — this kills rhythm.
Treat alternation as breath: long inhale (fat) → short exhale (compact).
```

**Tags:** `#section:fat-mega-2000-2400px` `#composition:multi-feature-cluster` `#rhythm:fat-then-compact-alternation` `#breath:long-short-pattern`

---

### SP7: Restraint Manifesto (Brand Through Deletion)

**Что:** Сайт **демонстративно отказывается** от 9 индустриальных штампов SaaS-маркетинга. Restraint — это не отсутствие, это присутствие через отрицание. Список запретов — не guideline, а brand identity.

**Как (9 запретов):**
1. **No glassmorphism** — никаких backdrop-filter blur, semi-transparent panels
2. **No shadow** — у cards / buttons / containers НЕТ box-shadow вообще (single signature shadow допустим только если эстетически необходим, но default = none)
3. **No gradient CTA** — кнопки solid #000, никаких linear-gradient action-buttons
4. **No bold 700+ for headings** — H1/H2 = weight 600 maximum
5. **No pure black body text** — body всегда #1b1a18 oat-950 warm, НЕ #000
6. **No mid-radii** — запрет 4 / 6 / 8 / 10 / 16 / 20 / 24 / 28 / 32
7. **No single-accent monodiscipline** — палитра обязательно sampler 8-family, не "один синий"
8. **No cool grey** — все нейтрали тёплые (oat-substrate hue 40-60°), запрет hue 200-240°
9. **No urgency-banner** — никаких "Limited offer", countdown timers, red-alert полос

**Почему:** Brand = sum of choices NOT made. Каждый запрет = решение, которое делает сайт **не похожим на conversion-template**. Restraint demonstrative — пользователь чувствует quality через отсутствие шумов, даже не осознавая, что именно отсутствует.

**Промпт-сниппет:**
```
Before generating any element, validate against the 9 forbid rules:
  1. No backdrop-filter / glassmorphism panels
  2. No box-shadow on cards, buttons, containers (default = none)
  3. No gradient backgrounds on CTA — solid #000 only
  4. No font-weight 700/800/900 on headings — max 600
  5. No #000 on body text — use #1b1a18 (oat-950, warm)
  6. No border-radius values 4/6/8/10/14/16/20/24/28/32 — only 0/12/40/pill
  7. No single-accent palette — must use 8-family curated sampler
  8. No cool grey neutrals (hue 200-240°) — only warm oats (hue 40-60°)
  9. No urgency banners, countdown timers, red-alert strips
If any element violates these — DELETE it. Restraint is the brand.
```

**Tags:** `#discipline:anti-pattern-manifesto` `#restraint:as-superpower` `#brand:through-deletion` `#forbid:9-rules`

---

### SP8: Dual-Easing Tiered-Duration Motion System

**Что:** Motion — **dual-easing split по типу свойства** + **4-tier duration ladder** по семантической weight изменения. Slow-snap quartic для bg-color и emerge-перехода, smooth-quart для transform и opacity. Никаких generic `ease` или `ease-in-out`.

**Как:**
- Primary easing (slow-snap, deliberate): `cubic-bezier(0.075, 0.82, 0.165, 1)` — для bg-color transition, для emerge/reveal
- Secondary easing (smooth-quart): `cubic-bezier(0.165, 0.84, 0.44, 1)` — для transform, opacity, hover-shifts
- Duration ladder:
  - `0.1s` — color flick (link hover, text color shift)
  - `0.2s` — transform micro (translate, scale ≤1.02)
  - `0.3s` — bg-color (button bg, card bg-shift)
  - `0.4s` — emerge (scroll-reveal fade+rise, modal enter)
- Hover micro-interactions: only translateY(-2px) или scale(1.02) max — никаких больших jumps
- Scroll-reveal: assumed IX2-style scroll-trigger lib + GSAP ScrollTrigger, fade+rise 24-32px, duration 0.4s primary easing
- Forbidden: `ease`, `ease-in-out`, `linear` (для UI transitions), bouncy easings (overshoot), durations >500ms

**Почему:** Dual easing = семантическое разделение "цвет/эмерджент = медленно-снэп" vs "движение/прозрачность = плавно". Tiered durations = пропорциональность: чем больше визуальный вес изменения, тем длиннее transition. Это **micro-rhythm** parallel macro-rhythm fat-then-compact (SP6) — ритм работает на всех уровнях.

**Промпт-сниппет:**
```
Use ONLY these two easings, by property type:
  - bg-color, emerge/reveal:  cubic-bezier(0.075, 0.82, 0.165, 1)  (slow-snap quartic)
  - transform, opacity, hover: cubic-bezier(0.165, 0.84, 0.44, 1)  (smooth quart)
Use ONLY these four durations, by change weight:
  - 0.1s — color flick (link hover, text-color shift)
  - 0.2s — transform micro (translate, scale ≤1.02)
  - 0.3s — bg-color shift (button bg, card bg)
  - 0.4s — emerge (scroll-reveal fade+rise, modal enter)
Hover transforms: translateY(-2px) or scale(1.02) maximum.
Scroll-reveal: fade-in + rise 24-32px, 0.4s primary easing.
FORBIDDEN: ease, ease-in-out, linear (UI), bounce/overshoot, durations >500ms.
```

**Tags:** `#motion:dual-easing-by-property` `#duration:4-tier-ladder` `#easing:slow-snap-quartic` `#easing:smooth-quart` `#hover:micro-shift-only` `#anti:generic-ease`