01 · Mental Models · ментальные карты дизайна

Зачем этот файл

Все 36 экранов прототипа выглядят согласованно не потому что у нас есть 2,068 строк CSS. А потому что мы держим в голове 5 ментальных моделей: контекстное разделение, hierarchy of identity, symmetry rule, compact-fold, эталонные экраны. Каждое решение — от выбора цвета кнопки до структуры footer — проходит через них.

Этот файл — карты этих моделей. Без них любой новый экран будет «почти как», но не «как». С ними — за 5 минут можно решить вопрос «дать footer dark или cream», который иначе требует 30 минут обсуждения.

---

1 · Контекстное разделение · 3 типа экранов

В экосистеме GOLDJAXE существует 3 фундаментально разных типа экранов. Решения для одного типа НЕ переносятся автоматически на другой.

🅰 UI-app (продуктовый интерфейс)

Что: академическая платформа Academy / админка GATE / Syndicate в режиме app (после login).

Где: ecosystem-prototype/academy/*.html (за исключением landing.html), ecosystem-prototype/gate-admin/*.html.

Поведение: - Footer cream var(--bg-secondary) в light theme (не Stripe-pattern dark) - Минимум маркетинговых вкраплений - Hero блоки сжаты до compact-fold (1440×900 без скролла) - Status indicators первичны (active/locked/in-progress) - Brand cube + wordmark в header — small (44px) - Sidebar (admin) или nav (academy) для in-app navigation

Метафора: Linear / Notion / Stripe Dashboard — сжатый, плотный, функциональный.

🅱 Marketing/Landing (внешний трафик)

Что: главные страницы продуктов .ai/.com/.org, syndicate landing, любая страница куда приходит cold lead.

Где: ecosystem-prototype/ai/landing.html (эталон), ecosystem-prototype/index.html, syndicate marketing.

Поведение: - Footer Stripe-pattern dark #0E0D0B + триадные плитки #181614 (canonical 2026-05-03) - Hero блоки полноэкранные с большим воздухом - Премиум-эффекты (gold-foil typography, large brand cube, layered gradients) - Triad navigation (3 продукта холдинга на одном экране) - CTA каскад: hero CTA → service cards → tier pricing → enterprise CTA - AI-Diagnostic onboarding (золотой эталон v4.4.14) для conversion

Метафора: Apple product page / Stripe homepage / Linear landing — premium, layered, immersive.

🅲 Premium artifact (статический deliverable)

Что: Certificate, OG-images, PDF-документы, любой artifact который user скачает / поделится / распечатает.

Где: ecosystem-prototype/academy/certificate.html, og-images/*.png, future PDFs.

Поведение: - В light theme — light surface (cream/white) как настоящая бумага, gold detail preserved (cube / cert-name foil / corners / dividers) - В dark theme — dark surface (как было) + white text + gold accents - НЕ «immutable dark» в light theme (это была anti-pattern до v4.4.17 — CEO 5x жаловался) - Toolbar (если есть) — реактивный к theme через canonical --header-bg token - A4 landscape ratio (842/595) для print compatibility - Square brackets corners + inner border (premium signature)

Метафора: Apple Card statement / Tesla certificate / luxury brand authentication artifact.

Decision flow

При создании / правке экрана — первый вопрос: какого он типа? От этого зависит ВСЁ остальное.

Это страница для cold-lead conversion?           → Marketing/Landing (Б)
Это после login, в продукте, для daily use?      → UI-app (А)
Это deliverable который user скачивает/печатает? → Premium artifact (В)

---

2 · Hierarchy of identity · 3 уровня элементов

Каждый элемент UI принадлежит одному из 3 уровней. Понимание иерархии = 80% всех theme override decisions.

Уровень 1 · Brand-immutable

Что: элементы которые НИКОГДА не меняются между темами и контекстами. Это brand DNA.

Список: - .eco-header background — всегда dark rgba(18,18,22,0.88) - Header текст — всегда WHITE (override в light theme через master) - .eco-cube (logo image) — всегда gold с drop-shadow rgba(235,197,84,0.35) - .eco-wordmark .gold (wordmark "GOLDJAXE") — всегда gold #EBC554 - .eco-wordmark .br (square brackets [ ACADEMY ]) — всегда WHITE в header - Tier коды (L0/L1/L2/L3/L4/L5) — всегда EN, не транслируются - Курс коды (INITIATION PROTOCOL etc.) — всегда EN, не транслируются - Premium artifact gold details (cert-name foil, cube, brackets, corners)

Правило: менять brand-immutable можно ТОЛЬКО при breaking change через major bump (X.0.0) + явное re-апрув CEO + обновление 36 экранов одновременно.

Уровень 2 · Theme-reactive

Что: элементы которые меняются автоматически через data-theme attribute и tokens.

Список: - Body bg / cards / borders / shadows - Body text / headings / muted text - Form inputs / textareas / selects - Most CTAs (.btn-action, .btn-ai-*) - Status chips (с сохранением semantic colors) - Modals / dropdowns / tooltips - Sidebar (admin) / nav (academy)

Правило: работают через CSS custom properties (var(--text-primary), var(--bg-secondary)). НЕ хардкодить значения, иначе theme switch сломается.

Уровень 3 · Context-specific

Что: элементы которые меняются по контексту экрана (не по theme), и решение принимается per-screen.

Список: - Footer (UI-app cream vs marketing dark) - Hero h1 (premium gradient на marketing vs plain dark на UI-app) - Header dark immutable, но search-input visibility — context (только на nav-heavy screens) - Sidebar (только на admin/settings) - Cert-toolbar (только на cert/PDF deliverables) - Notification banner (только при active alert)

Правило: для context-specific — page-isolated style блок в HTML с !important если нужно перебить master.

Practical impact

Когда CEO говорит «footer на courses не должен быть dark» — это про уровень 3 (context-specific). А когда говорит «header не должен переключаться на light» — это про уровень 1 (immutable, и так не должен).

90% багов в light theme происходят от смешения уровней — например, hardcoded rgba(255,255,255,X) color в class definition (это уровень 2 написанный как уровень 1) → не реагирует на light → invisible.

---

3 · Symmetry rule v4.4.12 · золотой стандарт

CEO 2026-05-06 утвердил 4 уровня обязательной симметрии. Любое расхождение = ошибка дизайна.

Уровень 1 · Пластины равной высоты

В горизонтальных группах (cards rows / KPI tiles / feature blocks) — все элементы должны иметь равную высоту независимо от контента. Нельзя одна card на 100px высокая, а соседняя на 80px.

Реализация: display: flex; align-items: stretch; или grid-template-rows фикс / flex-direction: column + flex: 1 на детях.

Уровень 2 · Кнопки равной ширины

В группах кнопок (form-actions / dialog-actions / hero-CTAs) — все кнопки имеют равную ширину. [ КУПИТЬ L1 → ] и [ КУПИТЬ L2 → ] не могут быть разной ширины из-за разной длины текста.

Реализация: master CSS .btn-group { display: flex; gap: 8px; } .btn-group > .btn-* { flex: 1; }. Либо min-width: 220px фикс.

Уровень 3 · Accordion заголовки grid fixed-col

В accordion / FAQ / collapsible списках — заголовки выровнены через grid-template-columns с фикс колонкой для chevron / status icon. Не флоят.

Пример:

.accordion-header { 
  display: grid; 
  grid-template-columns: 1fr 24px;  /* text + chevron */
}

Уровень 4 · Timeline 2-col где text x = meta заголовка x

В timeline секциях (профиль активности / cert history / lesson timeline) — текст шага начинается с той же x-координаты что и meta-заголовок шага.

Пример:

[16:42]  Завершён урок 3.2  ← заголовок начинается с x=80
         "AI-Architect основы"  ← meta-text тоже начинается с x=80

Audit-промпт перед CEO ревью

Перед каждым показом нового экрана CEO — прогнать чек-лист: - [ ] Все cards в строке равной высоты? - [ ] Все кнопки в группе равной ширины? - [ ] Accordion headers через grid (chevron на одной x)? - [ ] Timeline text-x = meta-x?

Если хоть один пункт «нет» — fix перед показом, не ждать пока CEO заметит.

См. feedback_visual_symmetry_rule.md + Spec раздел 32 (~250 строк) + master CSS .btn-group + .eco-timeline-*.

---

4 · Compact-fold rule (1440×900) → 🔴 Fold-first · Mobile-first delivery (CEO 10.06.2026)

Все single-purpose / status / dashboard экраны должны помещаться в viewport 1440×900 без скролла. Это не «desktop-first», это focus-first — экран с одной целью не должен заставлять scrolldать.

🔴 Расширение 10.06.2026 (железобетонное, апрув CEO): правило применяется ко ВСЕМ новым экранам и редизайнам по умолчанию — в фолд 1440×900 помещается смысловое ядро экрана (ценность + решение + CTA), без шума, легко воспринимаемо. Decision-экраны (тарифы, выбор, формы) — целиком в фолде. Long-form остаётся исключением by design, но его первый фолд подчиняется правилу. Прецедент-эталон: pricing + request-access academy 10.06 (карточки ~1000 → 543-562px, фолд-математика 822 ≤ 900, CEO «эффект ВАУ»).

Что попадает под правило

• Все новые экраны и редизайны — по умолчанию (с 10.06.2026)
• Auth screens (login / magic-link / 6-digit code / reset-password)
• Status screens (success / error / pending / 3DS / refund-request)
• Dashboard первый screen (hero + первое действие)
• Decision screens (pricing / выбор тарифа / заявки) — решение целиком в фолде
• Lesson completed (success + cross-product CTA)
• Profile (hero + первый блок)
• Onboarding steps (each step fits)

Что НЕ под правило целиком (скролл ниже допустим — но ПЕРВЫЙ фолд несёт ядро)

• Catalog / list pages (courses / activity log) — первый фолд: заголовок + первый ряд карточек
• Long form pages (legal / terms / privacy)
• Documentation / help articles / статьи блога — первый фолд: H1 + direct answer + CTA
• Marketing landing (long-form storytelling) — первый фолд: hero с ценностью и CTA

🔴 Поставка = фолд + мобайл + программная проверка (10.06.2026)

Дизайн-поставка НЕ считается готовой без всех трёх:

1. Программная фолд-проверка — getBoundingClientRect().bottom последнего смыслового элемента ≤ viewport на 1440×900 + контрольная точка 1440×800 (реальный ноутбук: хром браузера съедает ~100-115px; низ ядра ≤790). Числа в отчёте CEO, не «на глаз». Короткие экраны — sticky-footer канон (06 Группа G п.2): docH = высоте окна, скролл 0. Если окно не ресайзится инструментом — клон блока в контейнер целевой ширины (приём 10.06: ширина колонки 4-col = (1320−3×20)/4 = 315px).
2. Мобильный адаптив в той же поставке (не «потом»): ≤767 стек по фирменным лекалам (mobile-блок diagnostic-canonical.css academy + goldjaxe-designer/references/mobile-canonical.md + feedback_mobile_header_triad_pattern), touch-CTA ≥48px, шрифты ≥ floor (body 14 / поля ввода 16), экстрим-проверка 358-390px без overflow-X (scrollWidth ≤ innerWidth, длинные слова overflow-wrap).
3. Visual verify обе темы + скрины desktop-фолда и мобайла перед показом CEO.

Реализация · 2 паттерна

V3 pattern (status / auth-success):

.auth-success-bar  · 70px
.auth-kpi-row      · 100px (3-4 KPI tiles)
.auth-timeline-h   · 80px
= 234px content в 823px viewport (после header 77 + body padding)

V4 pattern (dashboard):

.dashboard-hero-action  · primary CTA + status
.dashboard-hero-stats   · KPI row
= compact stack без overflow

Brand CTA в обоих = gold .btn-action.

См. feedback_compact_fold_v3_v4_canonical.md + memory feedback_canonical_reference_screens_v4.md.

---

5 · 5 эталонных экранов · canon reference

CEO 2026-05-03: «лендинг идеален. фиксируем переноси раскатывай везде».

Любое расхождение других экранов с этими 5 = ошибка. Перед созданием нового экрана — найти ближайший эталон, скопировать структуру, менять только контент.

#	Эталон	Файл	Назначение	Версия
1	Premium light theme айдентика	ecosystem-prototype/ai/landing.html	Marketing/Landing canon — все .ai/.com/.org/syndicate landings копируют	v4.4.16
2	V3 success 1-screen	academy/checkout-success.html + ai/enterprise-thanks.html	Status/success/thanks — все confirm screens	v3.6
3	V1 auth single-card 460px	academy/login.html	Все auth screens (L0 + admin)	v3.4
4	V3 success + cross-product	academy/lesson-completed.html	Success после прохождения этапа	v3.6
5	AI-Diagnostic золотой эталон	academy/onboarding.html	Onboarding — магистральный путь привлечения (план M1 на .ai/.com/.org/syndicate)	v4.4.14

Для каждого эталона есть memory file со специфичными правилами: - feedback_landing_is_canonical_reference.md - feedback_status_screens_v36.md - feedback_auth_canonical_v34.md + feedback_auth_flow_canonical.md - feedback_canonical_reference_screens_v4.md - feedback_onboarding_ai_diagnostic.md

И audit ecosystem-prototype/AUDIT-2026-05-03-CANONICAL.md (full breakdown 36 экранов: 14 FULL canonical, 6 без nav by design, 13 не-canonical by design, 5 transitional, 3 test gallery).

---

Шпаргалка для cold start

Один экран на проверку → 4 вопроса:

1. Какого типа? UI-app / Marketing / Premium artifact (см. § 1)
2. Какой слой каждого элемента? Immutable / Reactive / Context (см. § 2)
3. Симметрия? 4 уровня соблюдены (см. § 3)
4. Compact-fold? Если status/auth/dashboard — fits 1440×900 (см. § 4)
5. Какой эталон ближайший? Скопировать структуру, не пересоздавать (см. § 5)

Эти 5 моделей — фундамент. Дальше — 02-tokens-canonical.md для конкретных значений.

Когда читать

• В новой сессии после SEMANTIC-CORE.md — обязательно
• Перед созданием нового экрана — обязательно
• При сомнении о footer / header / theme override — да
• При аудите — да (это что проверять в первую очередь)
• Раз в месяц — освежить память (фундамент дрейфует если не повторять)