05 · Patterns · canonical эталоны¶

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

Pattern = canonical связка компонентов которая решает конкретную задачу (onboarding, оплата, ошибка, аутентификация). Каждый pattern — закрытый precedent CEO ("золотой эталон"). Копировать 1-в-1 с минимальными правками контента. НЕ пересоздавать с нуля — потеря времени + риск регрессии.

При создании нового экрана первый шаг — найти ближайший pattern в этом списке.

1 · AI-Diagnostic onboarding (золотой эталон v4.4.14)¶

CEO 2026-05-07: «ВАУ это реально гениально · золотой эталон · магистральный путь привлечения».

Когда использовать¶

Любой entry point куда приходит cold lead и нужно convert в trial / signup / engaged user: - Academy onboarding (текущий) - Marketing landing CTAs (.ai/.com/.org/syndicate · план M1) - Cold email landing pages - LinkedIn campaign destinations - Future продукты как conversion engine

Anatomy · 3 step¶

Step 1 · DIAGNOSE (90 секунд) - 4 cards с вопросами (segment + use case + budget + readiness) - Single-select per card (не multi) - Прогресс-индикатор «1/4», «2/4»... - Progress dots (не bar) для интуитивности - НЕ generic «welcome to Academy» — сразу к ценности

Step 2 · MATCH (персонализированный путь) - Recommendations based на answers Step 1 - Path mapping (4 segments → 4 paths): - SOLO operator → L0 free → L1 paid path - Team lead → L1 → L2 + Syndicate access - Enterprise → demo call с CEO - Investor → portal access request

Step 3 · ECOSYSTEM (aspirational ladder) - Cross-product visualization (academy → syndicate → gate) - "Что у тебя будет через 30/60/90 дней" emotional anchor - Single CTA: «начать первый протокол» (не «зарегистрируйся»)

Canonical reuse¶

3 элемента V3 success pattern: - .auth-success-bar — header bar - .auth-kpi-row — 4 KPI tiles (per step метрики) - .auth-timeline-h — horizontal timeline между steps

Файлы¶

ecosystem-prototype/academy/onboarding.html — эталон
Memory: feedback_onboarding_ai_diagnostic.md
Project plan: project_ai_diagnostic_holding_expansion.md (M1/M2/M3 milestones)

Кастомизация для нового продукта¶

При применении на .ai / .com / syndicate: 1. Скопировать HTML 1-в-1 2. Заменить вопросы Step 1 на product-specific (segment / use case) 3. Обновить path mapping Step 2 (4 paths → 4 product CTAs) 4. Заменить ecosystem visualization Step 3 на product roadmap 5. Verify обе темы + RU/EN

Закрытые precedents¶

76 · «Welcome screen» concept abandoned (replaced by AI-Diagnostic)
77 · Generic onboarding deprecated · use AI-Diagnostic

2 · Quiz V3 · WIDE 2×2 + буквы А/Б/В/Г¶

CEO 2026-05-06: «сейчас просто супер круто. фиксируй».

Когда использовать¶

Lesson quiz внутри курса (Academy)
Knowledge check после блока теории
Onboarding mini-quiz (assessment use cases)
Future syndicate тесты вступления

Anatomy¶

Container max-width 1100px (как финалы success/cert) — wide для дыхания
Grid 2×2 опций (как 4 KPI tiles) — симметрия v4.4.12 уровень 1 (равная высота)
Буквы РУ/EN auto через nth-child + [data-lang]:
RU: А · Б · В · Г
EN: A · B · C · D
JS не нужен — pure CSS pseudo-content
Single-select state (radio behaviour)
Submit button после selection
Result feedback с explanation после answer

CSS pattern¶

.quiz-container { max-width: 1100px; margin: 0 auto; }
.quiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quiz-option:nth-child(1)::before { content: 'А) '; }
.quiz-option:nth-child(2)::before { content: 'Б) '; }
.quiz-option:nth-child(3)::before { content: 'В) '; }
.quiz-option:nth-child(4)::before { content: 'Г) '; }
[data-lang="en"] .quiz-option:nth-child(1)::before { content: 'A) '; }
[data-lang="en"] .quiz-option:nth-child(2)::before { content: 'B) '; }
/* ... */

Закрытые precedents¶

69 · 3 правила: никакой пустоты / симметрия одно-уровневых / философия финал-экранов

Файлы¶

ecosystem-prototype/academy/lesson-quiz.html — эталон
Memory: feedback_no_scroll_on_interaction.md
Spec раздел 30

Anti-pattern¶

❌ Single-column quiz options (вертикальный список) — нарушает 2×2 симметрию
❌ Скролл после selection — quiz должен fit в viewport (compact-fold)
❌ JS для буквенных меток — pure CSS достаточен

3 · Certificate (золотой стандарт v4.4.2 + light v4.4.17 + i18n RU/EN)¶

CEO 2026-05-05: «сейчас сертификат идеален — зафиксируй чтобы не потерять».

Когда использовать¶

Для всех tier L0-L3 + специальные achievement сертификаты + future Syndicate badges. Копировать 1-в-1, менять только текстовый контент.

Anatomy · A4 landscape¶

Stage (background) — radial gradient (cream в light, dark в dark)
Paper — A4 landscape ratio 842/595, max-width 920px, light/dark adaptive
Cube — 160px (16% paper width) с double drop-shadow gold (24+48px)
Cap text — ▸ CERTIFICATE OF COMPLETION (Space Mono uppercase 12px gold)
Brand sub — GOLDJAXE [ ACADEMY ] (Space Mono uppercase 12px muted)
Course title — INITIATION PROTOCOL (Inter 800 40px dark)
Course sub — Архитектура Превосходства (Inter italic 14px muted)
Issued — ▸ ВЫДАН (JBM 700 12px muted)
Cert-name — Имя получателя 48px GOLD FOIL gradient (#F8F080→#EBC554→#C9A332) + glow + filter drop-shadow
Stats row — 4 stats (Модулей / Уроков / Артефактов / Контента) каждая 23px gold + label JBM 12px muted
Bottom row — 3-col grid: Дата выдачи / Основатель CEO / Serial Verify (с QR)
4 corner brackets + inner border (square brackets premium signature)

Vertical rhythm¶

679px content в 920×651 paper. Fit 1440×900 ✓ (header 56 + stage 32 + paper 679 = 767).

Light theme behavior (v4.4.17)¶

Stage cream radial gradient
Paper white/cream gradient (#FFFFFF → #FAFAF7 → #FFFFFF)
Text → DARK #0A0A0A для course/issued
Bottom values → DARK
Stat labels → muted dark rgba(10,10,10,0.55)
Gold details preserved: cube / cert-name foil / corners / dividers / brackets

i18n behavior (v4.4.17)¶

Все text узлы → data-i18n="academy_certificate.X" keys: - cap_completion / cap_brand / course_title / course_sub - issued_to / name_default - stat_modules / stat_lessons / stat_artifacts / stat_content / stat_hours_unit - bottom_date / bottom_founder / bottom_founder_name / bottom_serial / verify_url - toolbar_back / toolbar_print / toolbar_pdf / toolbar_share / subline_protocol

Date — реактивный через MutationObserver на html[lang] (не статический i18n key, потому что динамический):

function updateCertDate() {
  const isEn = document.documentElement.lang === 'en';
  const months = isEn ? ['JANUARY','FEBRUARY',...] : ['ЯНВАРЯ','ФЕВРАЛЯ',...];
  /* ... */
}
new MutationObserver(updateCertDate).observe(document.documentElement, { 
  attributes: true, attributeFilter: ['lang','data-lang'] 
});

Native EN keys¶

Architecture of Excellence (course sub)
▸ ISSUED TO (issued)
Sergey Arkhangelsky (transliteration name default)
Modules / Lessons / Artifacts / Content (stat labels)
4h (hours unit)
06 MAY 2026 (date format DD MONTH YYYY · UK style)
▸ ISSUE DATE / ▸ FOUNDER · CEO / ▸ SERIAL · VERIFY (bottom caps)

Файлы¶

ecosystem-prototype/academy/certificate.html — эталон
Memory: feedback_certificate_canonical.md (обновлено v4.4.17 · light + i18n)

Кастомизация для нового tier (L1/L2/L3 cert)¶

Копировать certificate.html 1-в-1
Изменить course_title (например NEUROOPERATOR)
Изменить course_sub (description курса)
Обновить stats numbers
Дата — auto через JS (current)
Serial — auto через JS (random)
NOT TOUCH: paper layout, gold details, vertical rhythm

Anti-pattern¶

❌ Менять paper aspect-ratio (всегда 842/595 A4 landscape)
❌ Менять cert-name foil gradient (закреплён)
❌ Адаптировать gold details на light theme (они immutable preserved)
❌ Скрывать toolbar / убирать lang switcher в toolbar
❌ Захардкодить дату текстом (использовать JS + MutationObserver)

4 · Auth flow (canonical v4.3.4 + light v4.4.17)¶

CEO 2026-05-04: «формат как у Anthropic».

Когда использовать¶

Для всех authentication flows в экосистеме: - Academy login / signup (gold variant) - Admin GATE login (red variant) - Future syndicate auth - Magic link confirmation - Reset password flows

8 экранов · 2 variants¶

L0 Variant A · Gold passwordless (4 экрана в auth/): 1. login.html — email input + Cloudflare Turnstile 2. auth-magic-link.html — 6-digit code input (auto-advance · 10 min ttl) 3. session-expired.html (общий gold) — re-auth prompt 4. + signup variant (если отдельно)

Admin Variant C · Red secure (3 экрана в gate-admin/): 1. login.html — password + 2FA TOTP (6 cells red, 30s rotation) 2. forgot-password.html — 15 min reset link 3. reset-password.html — new password + live-checklist 4 правила + strength meter 4 цвета

Spec¶

Header canonical 77px (immutable, не gold/red — header brand-immutable)
Auth-card 460px width
Body normal flow (НЕ flex) — для proper centered alignment
Card content vertical stack: title + email/password input + CTA + footer-info
Auth-footer-info внизу: legal info (JWT / cookie / privacy link)

Variant A (gold) details¶

Color theme amber/gold (#EBC554 dark / #998018 light)
CTA .btn-auth (gold filled)
6-digit cells: 6 separate input boxes, auto-advance on type
Resend timer 60 seconds with countdown
Code TTL 10 minutes

Variant C (red admin) details¶

Color theme red (#8B0000 dark / #B22222 light)
2FA TOTP: 6 cells, 30s rotation indicator
Password strength meter: 4 colors (red→amber→yellow→green)
Live-checklist: 4 правила (length / digit / special / case)
Reset link 15 min TTL

Light theme behavior (v4.4.17)¶

Auth-card cream gradient (НЕ hybrid dark на cream body — был anti-pattern, CEO отверг)
Dark text + bronze button
Footer auth-footer-info — bronze hyperlinks

Файлы¶

ecosystem-prototype/academy/login.html, auth-magic-link.html
ecosystem-prototype/gate-admin/login.html, forgot-password.html, reset-password.html
Memory: feedback_auth_flow_canonical.md, feedback_auth_canonical_v34.md, feedback_signup_email_6digits.md

Кастомизация для нового product auth¶

Копировать ближайший variant (gold для public / red для admin)
Менять цвета через theme override block (если variant не подходит)
NOT TOUCH: 460px width, vertical layout, 77px header
NOT TOUCH: 6-digit auto-advance JS logic

Anti-pattern¶

❌ Hybrid dark cards на cream body — CEO отверг (feedback_light_theme_card_strategy)
❌ Wider auth-card (520+) — нарушает focus принцип
❌ Skipping Cloudflare Turnstile — bot protection обязательна
❌ TTL без countdown UI — user не понимает remaining time

5 · Payment failure states (v4.3.5 · 3 экрана)¶

CEO 2026-05-05 утвердил 3 экрана сбоя оплаты как финал Этапа 2 Path A.

Когда использовать¶

Все scenarios сбоя оплаты Stripe / BTCPay / Prodamus: - Card declined - Insufficient funds - 3DS authentication failure - Network timeout - Refund request

3 экрана¶

1. checkout-failed.html — amber pending recoverable - Status pattern V1 single-card - Reason format: plain RU + JBM bank-код мелко амбер - CTAs: "Попробовать снова" / "Сменить карту" / "Связаться с поддержкой" - Color theme amber (warning, не critical)

2. checkout-3ds.html — gold placeholder в стиле бренда - Real bank UI = handoff Артёму (placeholder для design) - Brand-styled overlay - Spinner + status text - Cancel option

3. refund-request.html — V1 single-card 580px - Form: order ID + reason dropdown + comment textarea - Submit + "Связаться с менеджером" alternative - Compact-fold (fits 1440×900)

Critical rules¶

Reason format: plain RU описание + bank-код (например INSUFFICIENT_FUNDS) мелко amber JBM
Legal-условия в Оферте, НЕ в UI — CEO ревизия 05.05: нормативка не должна загромождать UX
Все fit 1440×900 без скролла

Файлы¶

ecosystem-prototype/academy/checkout-failed.html
ecosystem-prototype/academy/checkout-3ds.html
ecosystem-prototype/academy/refund-request.html
Memory: feedback_payment_failures_canonical.md

6 · Error pages (v4.3.2 · 6 экранов)¶

CEO 2026-05-05 утвердил 6 экранов ошибок.

Когда использовать¶

404 Not Found
500 Internal Server Error
403 Forbidden
429 Rate Limited
Offline (PWA fallback)
Maintenance mode (planned downtime)

Spec¶

V3 status pattern (auth-success-bar + kpi-row + timeline-h)
All fit 1440×900 без скролла
Серьёзный технический тон (НЕ playful, НЕ apologetic)
ASCII-art только на 404 (signature element)
JS-генерация:
Incident-кодов (404: ERR-404-XXXXX)
Countdown (429 rate limit reset)
ETA (maintenance ETA)

Color mapping¶

4xx / 5xx errors → red .is-error
Offline / maintenance → amber .is-pending

Файлы¶

ecosystem-prototype/academy/errors/*.html (6 файлов)
Memory: feedback_error_pages_canonical.md

Anti-pattern¶

❌ Playful tone в errors («Упс! Мы накосячили!») — CEO ругал
❌ Generic messaging без incident-кода для support traceability
❌ Auto-redirect без user action (frustrating)

7 · OG-images (v4.3.0 · 1200×630)¶

CEO 2026-05-05: «картинки очень крутые просто топ. надписи тоже».

Когда использовать¶

Social sharing для каждого продукта (.com/.org/.ai/academy/syndicate)
Twitter cards / Facebook / LinkedIn / Telegram preview
Email campaign hero images
Press kit assets

Spec¶

Resolution 1200×630 PNG
Тёмная палитра (universal across platforms)
Единый master cube + CSS-фильтр hue per продукт:
.com → purple hue rotate
.org → red hue rotate
.ai / academy → gold (no rotate, original)
.syndicate → dimmed gold
Headline INNOVATIONS / VISION / VAULT per продукт (Inter 800 large)
Subline product description (JBM medium)
Wordmark GOLDJAXE [ ECOSYSTEM ] bottom-left
4 corners brackets (premium signature)

Pipeline¶

Chrome headless для пересборки: - Source: HTML template per продукт - Render via puppeteer / playwright - Export 1200×630 PNG - 10 PNG total (5 продуктов × 2 языка RU/EN)

Meta-tags блоки¶

<meta property="og:image" content="/og-images/og-{product}-{lang}.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:card" content="summary_large_image" />

Gallery¶

og-images/index.html — gallery всех 10 PNG для visual review.

Файлы¶

og-images/*.png (10 PNG)
og-images/templates/*.html (5 templates)
Memory: feedback_og_images_canonical.md

Кастомизация для нового продукта¶

Копировать ближайший template (.ai gold base)
Adjust hue rotate в CSS filter
Обновить headline / subline текст (RU + EN versions)
Re-render через Chrome headless
Add to gallery

8 · Favicons (v4.3.1 · 7 directions через CSS-фильтры)¶

CEO REV 2026-05-01 утвердил 7 CSS-фильтров.

Когда использовать¶

Для каждого продукта/sub-brand холдинга — отдельный favicon вариант через CSS filter (не отдельные PNG).

7 directions (CSS filter classes)¶

.fav-com — purple
.fav-org — red wine
.fav-ai — gold (original)
.fav-academy — gold (alias)
.fav-syndicate — neon cyan
.fav-gate — silver/steel
.fav-link — dimmed (linkstack/util)

Pipeline¶

Source: master-transparent-512.png (single golden cube PNG with transparent bg)
Apply CSS filter via .fav-{product} class (hue-rotate + saturate + brightness)
Chrome headless с --default-background-color=00000000 для transparent rendering
Export per size: 16/32/48/96/192/512px PNG + safari SVG

Outputs (per продукт)¶

4 PNG sizes (16, 32, 192, 512)
Safari SVG mask icon
Manifest.json (PWA icons array)
Windows Tiles XML config
Meta-tags block для HTML

Total¶

28 pre-rendered PNG (4 sizes × 7 продуктов)
7 safari SVG
7 manifests
Windows Tiles per продукт
Meta-tags spec

Файлы¶

brand-system-v1/favicons/{product}/*.png (28 PNG)
brand-system-v1/favicons/manifests/*.json (7 manifests)
Memory: feedback_favicon_canonical.md + feedback_favicon_7_directions.md

Note¶

Favicon palette расходится с OG-palette (живут параллельно — favicon 7 directions, OG 5 продуктов с hue rotate). Это intentional, не баг.

Шпаргалка · pattern lookup¶

Задача	Pattern	Файл
Cold lead conversion	AI-Diagnostic onboarding	`onboarding.html`
Knowledge check	Quiz V3 (2×2)	`lesson-quiz.html`
Course completion deliverable	Certificate	`certificate.html`
Public auth (signup/login)	Auth gold variant	`login.html`, `auth-magic-link.html`
Admin auth	Auth red variant	`gate-admin/login.html`
Payment failure	Payment failure states	`checkout-failed.html`
HTTP error	Error pages V3	`errors/*.html`
Social sharing	OG-images 1200×630	`og-images/*.png`
Browser tab icon	Favicons CSS filter	`brand-system-v1/favicons/*`

Когда читать¶

Перед созданием нового экрана — найти ближайший pattern, скопировать
При сомнении «как сделать» — сначала смотреть здесь, не пересоздавать
При создании нового продукта — этот файл + 09-audit-checklist.md
При onboarding — после 04-components.md