04 · Components · semantic mapping¶

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

В master CSS (eco-components.css) ~150 классов. Без semantic mapping разработчик/дизайнер выбирает класс по визуальному сходству — получаются: - Дубли (.tier-l1 vs .tier-pill-l1 — оба есть, оба работают) - Inconsistency (один экран .btn-action, другой .btn-primary для одной задачи) - Brand drift (на одной странице gold, на другой bronze для одинаковой роли)

Этот файл говорит «когда какой компонент использовать», не «как он выглядит» (для последнего — ui-kit-v4.2.md).

Cards · 6+ семейств¶

Decision tree¶

Что показываем?
├─ Курс / протокол catalog → .course-card-big
├─ Service / feature block → .canvas-card / .svc-card
├─ Pricing tier (L0-L3) → .tier-card
├─ Continue learning state → .continue-card
├─ KPI / metric snapshot → .stat-card / .auth-kpi-tile
├─ Modal/dialog body → .eco-modal-card
└─ Profile section → .profile-acc (accordion-style)

Семейство 1 · `.course-card-big` (canonical · CEO 2026-05-03)¶

Когда: курс / протокол catalog в Academy (courses.html).

Spec: - Padding 24px (canonical space-6) - Gap 14px между внутренними блоками - Thumb 112×80px (для иконки/изображения) - Шрифты +5% bump для card text vs default body

Modifiers: - -locked — недоступен (chip top-left + thumb opacity gradient) - -flagman — флагманский курс (FLAGMAN ribbon top-right) - -vip — VIP/boardroom (purple/red border) - -purchased — куплен (green border + checkmark)

Эталон: ecosystem-prototype/academy/courses.html.

См. feedback_card_canonical_v1.md.

Семейство 2 · `.canvas-card`¶

Когда: section block с border + transparent bg на marketing landings.

Spec: 1px border + transparent bg (показывает body texture).

Эталон: ecosystem-prototype/ai/landing.html.

Семейство 3 · `.svc-card` / `.service-card`¶

Когда: marketing service cards (3-up grid на landing).

Spec: small padding, icon top, title middle, CTA bottom.

Семейство 4 · `.tier-card`¶

Когда: pricing tiers L0-L3 (dashboard / billing / pricing page).

Spec: prominent border (gold/purple/red per tier), price strong amber, CTA bottom, features list middle.

Семейство 5 · `.continue-card`¶

Когда: "продолжить обучение" CTA на dashboard hero.

Spec: wide horizontal card, course thumb left, progress middle, CTA right.

Семейство 6 · `.stat-card` / `.auth-kpi-tile`¶

Когда: KPI snapshot 4-up на dashboard / V3 success / cert.

Spec: centered text, big number top (Inter 700 23-32px), label bottom (JBM 12px uppercase).

Anti-patterns Cards¶

❌ Создавать .my-special-card page-isolated — сначала проверь не подходит ли existing ❌ Менять padding canonical 24px без обоснования — ломает rhythm ❌ Locked state через opacity: 0.55 — это anti-pattern v3, использовать chip + gradient overlay ❌ Heavy white bg + heavy border внутри .profile-acc — создаёт «решётку» (баг до v4.4.17)

Buttons · 7 semantic classes¶

Decision tree¶

Кнопка для чего?
├─ Brand primary CTA (купить курс) → .btn-action
├─ Bordered primary (купить L1/L2) → .btn-ai-primary
├─ Continue / в процессе → .btn-ai-success (green)
├─ VIP / boardroom request → .btn-ai-vip (purple)
├─ Investor portal CTA → .btn-ai-investor (steel-blue)
├─ Auth flow primary → .btn-auth (gold filled)
└─ Cert/admin toolbar → .toolbar-btn (bordered transparent)

Semantic mapping¶

Класс	Когда	Idle	Hover (light)
`.btn-action`	Brand primary CTA (главное действие на экране)	gold dark / bronze light	bronze fill + WHITE text
`.btn-ai-primary`	Bordered primary (купить L1/L2 на courses)	amber border + bronze text light	bronze fill + WHITE text + glow
`.btn-ai-success`	Continue / в процессе курса	green border + green text	green fill + WHITE text
`.btn-ai-vip`	VIP / GOD MODE / boardroom request	purple border + purple text	purple fill + WHITE text
`.btn-ai-investor`	Investor portal access CTA	steel-blue border + text	steel fill + WHITE text
`.btn-auth`	Auth flow primary (Войти / Continue / Submit)	gold filled	gold darker fill
`.toolbar-btn`	Cert/admin toolbar (Печать/PDF/Поделиться)	bordered transparent	gold border + gold text

`.btn-group` wrapper (canonical symmetry v4.4.12)¶

Когда: 2+ кнопки в группе (form-actions / dialog-actions / hero-CTAs).

Spec:

.btn-group { display: flex; gap: 8px; }
.btn-group > .btn-ai,
.btn-group > .btn-action,
.btn-group > .btn-auth { flex: 1; }

Зачем: правило симметрии — все кнопки в группе равной ширины (см. 01-mental-models.md § 3 уровень 2).

Hover canonical (light theme)¶

ВСЕ .btn-ai-* имеют: - bg = brand-color (solid) - color = WHITE (#FFFFFF inverse) - box-shadow = 0 4px 18px brand-color (glow) - !important overrides в master CSS line 357-364

Anti-pattern: hover только color без bg — bg остаётся idle (white), text становится white = invisible. См. 03-light-theme.md anti-pattern 10.

Header · `.eco-header` immutable canonical v3.2¶

ЕДИНЫЙ header на всех 36 экранах. CEO утвердил как brand-immutable.

Spec¶

Свойство	Значение
Height	77px
Cube	44px + drop-shadow `0 0 11px rgba(235,197,84,0.35)` gold
Wordmark	17.5px Space Mono Bold
Subline	14px JetBrains Mono Bold
Background	dark `rgba(18,18,22,0.88)` immutable в обеих темах
Text	WHITE immutable в обеих темах (master override на light)
Backdrop-filter	`blur(8px)` (frosted glass)
Border-bottom	`1px solid var(--border-faint)`

Internal anatomy (left to right)¶

.eco-cube — gold cube logo (44px)
.eco-wordmark — GOLDJAXE (gold) + [ ACADEMY ] (white, square brackets)
.eco-subline — BCE · ПРОТОКОЛЫ (контекстный subtitle)
.eco-nav — nav links (5-7 items, JBM 12.5px uppercase)
.eco-search (опционально) — Search ⌘K
.eco-status-chip — green active pill (L0 · АКТИВЕН)
.eco-lang-switcher — RU/EN toggle (2 buttons)
.eco-theme-btn — ☀/🌙 toggle (icon button)
.eco-profile-btn — avatar circle (1 letter + bordered)

Запрещено¶

Менять height / cube size / typography sizes без re-апрува CEO
Адаптировать на light theme (всегда dark)
Заменять Space Mono на другой шрифт в wordmark
Убирать brand cube или wordmark
Менять порядок элементов

См. feedback_header_canonical_v3.md + feedback_dont_change_approved_components.md.

Footer · `.eco-footer` + triad-grid¶

2 сценария (context-dependent)¶

Где: .ai/.com/.org главные, syndicate marketing, landing pages.

Spec: - Background #0E0D0B (Stripe-pattern dark) + !important в master - Text WHITE (rgba(255,255,255,0.65)) - Triad tiles #181614 (dark on dark) с gold border на current - Gold accents (cube/wordmark gold) - Pulsing dot 7×7 + amber top-line glow на triad-current

Утверждено: CEO 2026-05-03 (feedback_light_theme_v2.md).

Эталон: ecosystem-prototype/ai/landing.html footer.

Где: academy / gate-admin / syndicate-app (after login).

Spec: - Background cream var(--bg-secondary) (#FAFAF7) + !important в page-isolated style - Text dark (var(--text-primary)) - Triad tiles rgba(10,10,10,0.02) faint wash on cream - Bronze accents (#998018 для wordmark gold + brackets) - Amber tint на triad-current rgba(235,197,84,0.06) + bronze dot

Утверждено: CEO 2026-05-06 (v4.4.17 fix Phase 2). Memory обновлено: feedback_light_theme_v2.md v4.5.0.

Эталон: ecosystem-prototype/academy/courses.html footer (page-isolated overrides).

Decision tree¶

Это marketing/landing страница?     → Сценарий 1 (Stripe-dark)
Это UI-app (после login)?           → Сценарий 2 (cream)
Сомневаешься?                        → Спросить CEO с контекстом

Triad tiles markup (canonical)¶

<div class="triad-grid">
  <a href="https://goldjaxe.com" class="triad-tile tile-purple">
    <div class="triad-caption">goldjaxe.com</div>
    <div class="triad-wordmark">[ VISION ]</div>
  </a>
  <a href="../ai/landing.html" class="triad-tile tile-gold triad-current">
    <span class="triad-current-dot"></span>
    <div class="triad-caption">goldjaxe.ai</div>
    <div class="triad-wordmark">[ INNOVATIONS ]</div>
  </a>
  <a href="https://goldjaxe.org" class="triad-tile tile-org">
    <div class="triad-caption">goldjaxe.org</div>
    <div class="triad-wordmark">[ VAULT ]</div>
  </a>
</div>

triad-current помечает текущий продукт (один из 3) — даёт user awareness "ты здесь в экосистеме холдинга".

См. feedback_triad_footer_current_marker.md.

Modals · `.eco-modal-card` (Modal F canonical v4.2.8)¶

Spec (default variant)¶

Width 620px (variants: 460 / 580 / 720)
Body center align (form override → left для полей)
Btn min-w 220px + padding 32px + gap 16px
Form override: flex: 1 + gap 14 = match form-row 263px

Anatomy¶

.eco-modal-overlay — full-screen backdrop с blur
.eco-modal-card — content container (620px default)
.eco-modal-header — title (h2 24px) + close btn (top-right)
.eco-modal-body — main content (center align default)
.eco-modal-actions — .btn-group с CTAs (равной ширины)

При правке модалов¶

ОБЯЗАТЕЛЬНО first-read: feedback_modal_f_canonical.md — иначе риск воспроизвести фейл v4.2.6 (CEO «провал»).

Variants¶

460px — confirmation / simple alert
580px — refund-request / single form
620px — default (most cases)
720px — complex form / multi-step

См. 05-patterns.md для конкретных pattern usage.

Forms · `.eco-input` + theme controls¶

Inputs¶

.eco-input canonical: - Height 36px - Border var(--border-default) - Focus state WHITE (rgba(255,255,255,0.55) border + caret 0.85) — НЕ gold, НЕ box-shadow, НЕ outline, НЕ pure white - Padding 0 12px - Font Inter 14px

Утверждено CEO 2026-05-03 после теста (feedback_input_focus_v37.md).

Theme controls (НЕ путать)¶

.eco-theme-btn — header toggle ☀/🌙 (icon button, 38×36, immutable)
.eco-theme-pill — settings page form context (pill-style toggle, ✓ выбран)

Anti-pattern: использовать одно вместо другого — header pill / settings icon-btn = inconsistency.

Lang switcher¶

.eco-lang-switcher — 2 buttons RU/EN, height 36px, активный gold filled, неактивный transparent.

Switch toggle¶

.eco-switch — checkbox-style toggle (для settings booleans). НЕ дублировать как .switch page-isolated.

Form rows¶

.form-row — label + input vertical pair
.form-row-h — label + input horizontal (для compact forms)
Gap 14px between rows (canonical)

Status indicators¶

Decision tree¶

Это что показывает?
├─ Active / в процессе → .eco-status-chip (green pulsing)
├─ Tier badge (L0-L4) → .tier-pill-l0/-l1/-l2/-l3/-l4
├─ Course state (locked/purchased) → .course-card-locked / -purchased class
├─ Order state (pending/success/failed) → .auth-success-bar variants
└─ Inline label → .eco-tag / .badge-* (мелкий tag)

`.eco-status-chip` (active green pulsing)¶

Spec: - Height 36px - Padding 0 12px - Border 1px solid rgba(34,197,94,0.3) green - Color #22C55E text - ::before circle 7×7 green с box-shadow glow + pulse animation

Где: header right side (показывает «активная сессия» / tier)

`.tier-pill-l0/-l1/-l2/-l3/-l4` (tier classification)¶

Цвета: - L0 #EBC554 amber (free) - L1 #22C55E green (operator) - L2 #9933E6 purple (architect) - L3 #8B0000 red wine (boardroom) - L4 #4573A1 steel-blue (investor) - L5 #EF4444 red (team)

Anti-pattern: дублировать как .tier-l1 (без -pill) — это duplicate в master, использовать canonical .tier-pill-l1.

V3 success pattern (status screens)¶

3 элемента ритм: - .auth-success-bar (70px) — success header - .auth-kpi-row (100px, 3-4 KPI tiles) — что произошло - .auth-timeline-h (80px) — timeline/next steps

= 234px content в 823px viewport (compact-fold rule).

См. feedback_status_screens_v36.md + feedback_compact_fold_v3_v4_canonical.md.

Status colors = outcome (semantic)¶

Green = success / active / в процессе
Red = error / blocked / critical
Amber = warning / pending / recoverable
Steel-blue = info / investor / neutral
Gold = brand action (CTA, не status)

НЕ смешивать (gold = CTA, не «успех»). НЕ инверсировать (red = error, не «горячее предложение»).

Timeline · `.eco-timeline-*` canonical v4.4.12¶

`.eco-timeline-row` (vertical)¶

Spec: - 2-col grid: [meta-time] [text-content] - Text x-coordinate = meta-заголовка x-coordinate (symmetry rule v4.4.12 уровень 4) - Padding 14px vertical - Border-top dotted между rows

Где: profile активность / lesson timeline / cert history.

Anti-pattern в profile: heavy white-bg + heavy border создаёт «решётку» (баг до v4.4.17). Use:

.profile-acc .eco-timeline-row { 
  background: transparent; 
  border-top: 1px solid var(--border-faint); 
}

`.eco-timeline-h` (horizontal compact)¶

Spec: - Horizontal stack из 3-4 шагов - Каждый шаг: иконка + label - Used в V3 success pattern (compact-fold)

Где: auth-magic-link / checkout-success / lesson-completed.

См. feedback_visual_symmetry_rule.md + Spec раздел 32 + master CSS .eco-timeline-*.

Sidebar · `.eco-sidebar-*` (admin canonical v4.4.8)¶

CEO утвердил Sidebar Б (stripe-style) как стандарт админ-панели Academy.

Spec¶

Width 64px collapsed → 240px expanded
Background dark immutable
Items: SVG-иконки 16px (НЕ эмодзи) + text label
Active state — gold accent line на левой стороне + gold text
Hover state — subtle bg lift

Where¶

Settings (academy/settings.html)
Billing (academy/billing.html)
Future admin pages

Master CSS¶

.eco-sidebar-link — single item
.eco-sidebar-group — group wrapper с heading

См. feedback_admin_sidebar_canonical.md.

Search component (опционально)¶

.eco-search в header: - Width auto (responsive) - Placeholder Search + ⌘K hint key - Border 1px solid var(--border-default) - Icon search left + clear button right - Focus expands width slightly

Где: только на nav-heavy screens (academy dashboard / courses / library). НЕ обязательно везде.

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

Перед добавлением нового компонента — проверить не дублируешь ли existing
При создании экрана — выбрать components из этого каталога, не из воздуха
При аудите консистентности — проверить какие классы используются и есть ли дубли
При жалобе на «выглядит инородно» — first source of truth (вероятно используется page-specific вместо canonical)
При onboarding — после 01-mental-models.md + 02-tokens-canonical.md + 03-light-theme.md

04 · Components · semantic mapping¶

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

Cards · 6+ семейств¶

Decision tree¶

Семейство 1 · .course-card-big (canonical · CEO 2026-05-03)¶

Семейство 2 · .canvas-card¶

Семейство 3 · .svc-card / .service-card¶

Семейство 4 · .tier-card¶

Семейство 5 · .continue-card¶

Семейство 6 · .stat-card / .auth-kpi-tile¶

Anti-patterns Cards¶

Buttons · 7 semantic classes¶

Decision tree¶

Semantic mapping¶

.btn-group wrapper (canonical symmetry v4.4.12)¶

Hover canonical (light theme)¶

Header · .eco-header immutable canonical v3.2¶

Spec¶

Internal anatomy (left to right)¶

Запрещено¶

Footer · .eco-footer + triad-grid¶

2 сценария (context-dependent)¶

Сценарий 1 · Marketing/landing footer¶

Сценарий 2 · UI-app footer¶

Decision tree¶

Triad tiles markup (canonical)¶

Modals · .eco-modal-card (Modal F canonical v4.2.8)¶

Spec (default variant)¶

Anatomy¶

При правке модалов¶

Variants¶

Forms · .eco-input + theme controls¶

Inputs¶

Theme controls (НЕ путать)¶

Lang switcher¶

Switch toggle¶

Form rows¶

Status indicators¶

Decision tree¶

.eco-status-chip (active green pulsing)¶

.tier-pill-l0/-l1/-l2/-l3/-l4 (tier classification)¶

V3 success pattern (status screens)¶

Status colors = outcome (semantic)¶

Timeline · .eco-timeline-* canonical v4.4.12¶

.eco-timeline-row (vertical)¶

.eco-timeline-h (horizontal compact)¶

Sidebar · .eco-sidebar-* (admin canonical v4.4.8)¶

Spec¶

Where¶

Master CSS¶

Search component (опционально)¶

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

Семейство 1 · `.course-card-big` (canonical · CEO 2026-05-03)¶

Семейство 2 · `.canvas-card`¶

Семейство 3 · `.svc-card` / `.service-card`¶

Семейство 4 · `.tier-card`¶

Семейство 5 · `.continue-card`¶

Семейство 6 · `.stat-card` / `.auth-kpi-tile`¶

`.btn-group` wrapper (canonical symmetry v4.4.12)¶

Header · `.eco-header` immutable canonical v3.2¶

Footer · `.eco-footer` + triad-grid¶

Modals · `.eco-modal-card` (Modal F canonical v4.2.8)¶

Forms · `.eco-input` + theme controls¶

`.eco-status-chip` (active green pulsing)¶

`.tier-pill-l0/-l1/-l2/-l3/-l4` (tier classification)¶

Timeline · `.eco-timeline-*` canonical v4.4.12¶

`.eco-timeline-row` (vertical)¶

`.eco-timeline-h` (horizontal compact)¶

Sidebar · `.eco-sidebar-*` (admin canonical v4.4.8)¶