⚠️ SUPERSEDED · этот документ устарел¶

2026-05-04 этот UI Kit v3.0 заменён ui-kit-v4.0.md — железобетонная спека v4.0.

Что в v4 нового: - 4 namespace clearly defined: .eco-* (Product) · .ai-* (renamed from .org-* · Marketing AI) · .vis-* (Vision .com · purple) · .vault-* (Vault .org · crimson) - 4 patterns canonical: V1 compact / V3 dashboard / V4 hero-action / V6 admin - Pre-deployment checklist v4 (10 секций A-J) - Anti-patterns explicit (16 closed precedents) - Behavior rules железобетонные (railroad) - MCP integration story для Артёма

Что устарело здесь (этот v3.0 doc): - 2-tier архитектура (header 62/72) — отменена в v3.2 (единый 77px) - .org-* namespace — переименован в .ai-* в v4 железобетонизации - Frontmatter version: 3.3.0 отстал — реально содержимое v3.0-v3.7 + light v2 - V4 hero-action и V6 admin patterns добавлены позже

Этот файл сохранён как historical changelog (нужен для understanding эволюции v3.0 → v3.7). Для нового UI work — first read ui-kit-v4.0.md.

GOLDJAXE AI Ecosystem · UI Kit v3.0 [SUPERSEDED]¶

Финальная фиксация дизайн-системы AI экосистемы. CEO утвердил 2026-05-02 после прогона всех cross-links между .ai · academy · syndicate. Этот документ — единственный источник истины для разработки всех интерфейсов экосистемы. Артём использует это для GATE, Academy LMS, Syndicate theme и всех будущих продуктов.

SCOPE · что покрывает UI Kit¶

✅ Применяется (AI Ecosystem · единая система)¶

goldjaxe.ai (cash cow main)
academy.goldjaxe.ai (LMS · все экраны: dashboard, lesson-viewer, quiz, cert, email)
syndicate.goldjaxe.ai (Discourse + brand layer)
gate.goldjaxe.ai (PAY backend + admin · в будущем)
link.goldjaxe.com (LinkStack · marketing-tier)

❌ НЕ применяется (отдельные продукты)¶

goldjaxe.com (luxury лендинг, эталон)
goldjaxe.org (enterprise лендинг, эталон)
q-vision.ru / q-check.ru / vegasoft.org — отдельные суб-бренды

АРХИТЕКТУРА · 2-TIER¶

Tier	Применение	Header h	Sub-line	Right cluster
Marketing	hero-v4, header.html, smart-checkout, linkstack	62px	Mono Regular 12 white/55	RU/EN switcher + theme toggle
Product	academy/*, syndicate, gate/admin	72px	Mono Bold 13 white/85	Status chip + Profile + ⌘K Search

Что одинаково в обоих tier (визуальная DNA — пользователь не замечает разрыв): - ✓ Cube 41×41 + glow drop-shadow gold - ✓ Wordmark Space Mono Bold 16px ls 0.07em - ✓ Nav Space Mono Regular 12.5px ls 0.14em uppercase + amber underline scale-x hover - ✓ Bg rgba(18,18,22,0.88) + backdrop-filter: blur(8px) - ✓ Border-bottom 1px white/6 - ✓ Цвета: amber #EBC554, green #22C55E, white #FFFFFF

DESIGN TOKENS¶

Colors¶

:root {
  /* Backgrounds (от темнее к светлее) */
  --bg-primary:    #050505;   /* deep canvas */
  --bg-secondary:  #080808;   /* default body */
  --bg-tertiary:   #111111;   /* cards default */
  --bg-quaternary: #1A1A1A;   /* hover, dividers */
  --bg-concrete:   #181818;   /* triad tiles, service cards */

  /* Header bg with blur */
  --header-bg:     rgba(18, 18, 22, 0.88);

  /* Brand */
  --accent-amber:        #EBC554;
  --accent-amber-light:  #F8F080;
  --accent-amber-dark:   #C9A332;
  --accent-amber-rgb:    235, 197, 84;

  /* Neon palette (с .com) */
  --neon-purple:    #C44DFF;  /* VISION luxury */
  --neon-steel:     #4573A1;  /* VAULT enterprise */
  --neon-crimson:   #8B0000;  /* .org-style hover */

  /* Status */
  --accent-green:   #22C55E;
  --accent-error:   #EF4444;
  --accent-cyan:    #00F0FF;  /* terminal/Vault, ≤2% поверхности */

  /* Text (white scale) */
  --text-primary:   #FFFFFF;        /* white 100% */
  --text-secondary: rgba(255,255,255,0.85);  /* product sub-line */
  --text-muted:     rgba(255,255,255,0.70);  /* nav links */
  --text-faint:     rgba(255,255,255,0.55);  /* marketing sub-line */
  --text-subtle:    rgba(255,255,255,0.40);  /* legal, copyright */
  --text-disabled:  rgba(255,255,255,0.30);  /* ИП row */

  /* Borders */
  --border-strong:  rgba(255,255,255,0.20);
  --border-default: rgba(255,255,255,0.12);
  --border-faint:   rgba(255,255,255,0.06);
}

Typography¶

/* Font families */
--font-display: 'Inter', sans-serif;        /* H1, H2, H3, body */
--font-mono:    'Space Mono', monospace;    /* wordmark, captions, nav, code */

/* Шкала шрифтов (px) — единая для всей экосистемы */
/* 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 26 · 30 · 34 · 38 · 42 */
/* Минимум читаемости = 11px (Space Mono caption · ИП row) */
/* Максимум = 56px (H1 hero clamp) */

/* Letter-spacing scale */
--ls-tighter:  -0.02em;  /* никогда */
--ls-tight:    -0.01em;  /* H3 sentence */
--ls-normal:    0;       /* body */
--ls-wider:     0.02em;  /* H1 uppercase */
--ls-widest:    0.05em;  /* wordmark short */
--ls-mono-1:    0.07em;  /* header wordmark Space Mono */
--ls-mono-2:    0.10em;  /* mono caption · footer triad inline */
--ls-mono-3:    0.12em;  /* sub-line marketing */
--ls-mono-4:    0.14em;  /* nav links · product sub-line · `// SECTION` */
--ls-mono-5:    0.20em;  /* slogans `INTELLIGENCE · AUTONOMY · PROTOCOL` */

Spacing scale¶

4 · 8 · 12 · 14 · 16 · 18 · 20 · 22 · 24 · 28 · 32 · 40 · 48 · 64

COMPONENTS · HEADER¶

Marketing Header (62px) — namespace `.org-*`¶

<header class="org-header sticky top-0 z-30">
  <div class="max-w-[1400px] mx-auto h-full flex items-center justify-between gap-6">
    <a href="/" class="org-logo">
      <img src="/master-cube.png" alt="GOLDJAXE" class="org-cube" />
      <div class="flex flex-col">
        <div class="org-wordmark"><span class="gold">GOLDJAXE</span> <span class="br">[ AI ]</span></div>
        <div class="org-subline">AI · INNOVATIONS</div>
      </div>
    </a>
    <nav class="org-nav hidden lg:flex ml-auto">
      <a href="..." class="org-nav-link">Academy</a>
      <a href="..." class="org-nav-link org-nav-active">AI-Panel</a>
      <a href="..." class="org-nav-link">Syndicate <span class="ext">↗</span></a>
      <a href="..." class="org-nav-link">Vault <span class="ext">↗</span></a>
      <a href="..." class="org-nav-link">Vision <span class="ext">↗</span></a>
    </nav>
    <div class="flex items-center pr-[18px] h-full">
      <span class="org-status-badge hidden md:inline-flex">SYS / ONLINE</span>
      <div class="org-lang-switcher">
        <button class="org-lang-btn org-lang-btn-active">RU</button>
        <button class="org-lang-btn">EN</button>
      </div>
      <button class="org-theme-btn"><svg>...</svg></button>
    </div>
  </div>
</header>

Product Header (72px) — namespace `.eco-*`¶

<header class="eco-header sticky top-0 z-30">
  <div class="max-w-[1400px] mx-auto h-full flex items-center justify-between gap-6">
    <a href="/" class="eco-logo">
      <img src="/master-cube.png" alt="GOLDJAXE" class="eco-cube" />
      <div class="flex flex-col">
        <div class="eco-wordmark"><span class="gold">GOLDJAXE</span> <span class="br">[ ACADEMY ]</span></div>
        <div class="eco-subline">L1 · M03 · LESSON 03/5</div>
      </div>
    </a>
    <nav class="eco-nav hidden md:flex ml-auto">
      <a href="..." class="eco-nav-link">Dashboard</a>
      <a href="..." class="eco-nav-link eco-nav-active">Курсы</a>
      <a href="..." class="eco-nav-link">Сертификаты</a>
      <a href="..." class="eco-nav-link">Syndicate <span class="ext">↗</span></a>
      <a href="..." class="eco-nav-link">AI <span class="ext">↗</span></a>
    </nav>
    <div class="flex items-center gap-3 pr-[22px] h-full">
      <span class="eco-status-chip hidden md:inline-flex">L1 · ACTIVE</span>
      <div class="eco-search hidden md:flex"><span class="key">⌘K</span><span class="label">SEARCH</span></div>
      <button class="eco-profile-btn">С</button>
    </div>
  </div>
</header>

См. ai/footer.html v2.4 — реализация. Используется только на ai/hero-v4.html (главная маркетинговая страница .ai).

Product Footer (compact) — namespace `.eco-footer-*`¶

Компактный вариант для academy / syndicate / gate. Отличается от Marketing: - Нет триады-плиток с border (только inline-links) - Cube меньше (40 vs 64) - Padding меньше (28px vs 96px) - Social icons 38×38 (vs 50×50)

<footer class="eco-footer">
  <div class="max-w-[1400px] mx-auto px-[22px]">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-5 mb-6">
      <a href="..." class="flex items-center gap-3.5 group">
        <img src="/master-cube.png" alt="GOLDJAXE" class="eco-footer-cube" />
        <div class="eco-footer-wordmark"><span class="gold">GOLD</span><span class="br">[</span><span class="text-white">JAXE</span><span class="br">]</span></div>
      </a>
      <nav class="eco-triad-inline">
        <a href="..." class="eco-triad-link">[ VISION ]</a>
        <a href="..." class="eco-triad-link eco-triad-current">[ INNOVATIONS ]</a>
        <a href="..." class="eco-triad-link">[ VAULT ]</a>
      </nav>
    </div>

    <div class="flex items-center gap-2.5 mb-6 flex-wrap">
      <a class="eco-social"><!-- IG --></a>
      <a class="eco-social"><!-- TG --></a>
      <a class="eco-social"><!-- FB --></a>
      <a class="eco-social"><!-- X  --></a>
      <a class="eco-social"><!-- YT --></a>
    </div>

    <div class="border-t border-[#1A1A1A] pt-5 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div class="font-mono uppercase" style="font-size:11px; ls:0.10em; color:rgba(255,255,255,0.4)">© 2026 GOLDJAXE. ВСЕ ПРАВА ЗАЩИЩЕНЫ.</div>
      <div class="flex items-center gap-5 font-mono uppercase" style="font-size:11px; ls:0.10em; color:rgba(255,255,255,0.4)">
        <a class="hover:text-amber">Privacy</a>
        <a class="hover:text-amber">Оферта</a>
        <a class="hover:text-amber">Cookies</a>
      </div>
    </div>

    <div class="text-center pt-3 mt-3 border-t border-[#1A1A1A]">
      <div class="font-mono uppercase" style="font-size:11px; ls:0.10em; color:rgba(255,255,255,0.3)">
        ИП Архангельский С.С. <span class="mx-2 text-[#525252]">|</span> ИНН 773183804968 <span class="mx-2 text-[#525252]">|</span> ОГРНИП 320774600445835
      </div>
    </div>
  </div>
</footer>

COMPONENTS · CARDS¶

TileTriad — Trinity neon hover (gold/purple/blue/org)¶

В footer .ai (Marketing) — 3 плитки сайтов экосистемы с hover-эффектом: - VISION (.com) → purple #C44DFF (luxury) - INNOVATIONS (.ai · current) → gold #EBC554 (наш брендовый) - VAULT (.org) → crimson #8B0000 (точно .monolithic-card:hover с .org)

.triad-tile {
  position: relative; padding: 21.25px 34px; background: #181818;
  text-decoration: none;
  transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  --tile-r: 235; --tile-g: 197; --tile-b: 84;
}
.triad-tile:hover {
  background: rgba(255,255,255,0.04);
  transform: translate(-3px, -3px);
  box-shadow:
    8px 8px 0px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.40),
    0 0 30px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.50),
    0 0 60px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.25),
    inset 0 0 30px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.10);
}
.tile-purple { --tile-r: 196; --tile-g: 77;  --tile-b: 255; }
.tile-gold   { --tile-r: 235; --tile-g: 197; --tile-b: 84;  }
/* tile-org — точная копия .monolithic-card с goldjaxe.org */
.tile-org:hover {
  background: rgba(255,255,255,0.04);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px rgba(139, 0, 0, 0.30);
}

ServiceCard — для AI-Panel протоколов¶

Все плитки услуг используют .service-card.card-gold (Сергей утвердил единый стиль).

.service-card {
  position: relative; border: 1px solid rgba(255,255,255,0.08); background: #181818;
  padding: 28px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  --card-r: 235; --card-g: 197; --card-b: 84;
}
.service-card:hover {
  transform: translate(-3px, -3px);
  border-color: rgba(var(--card-r), var(--card-g), var(--card-b), 0.5);
  box-shadow:
    8px 8px 0px rgba(var(--card-r), var(--card-g), var(--card-b), 0.40),
    0 0 30px rgba(var(--card-r), var(--card-g), var(--card-b), 0.50),
    0 0 60px rgba(var(--card-r), var(--card-g), var(--card-b), 0.25),
    inset 0 0 30px rgba(var(--card-r), var(--card-g), var(--card-b), 0.10);
}
.card-gold { --card-r: 235; --card-g: 197; --card-b: 84; }

COMPONENTS · BUTTONS¶

Square brackets style (Inter Semibold)¶

.btn-org {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 24px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid #525252; background: transparent; color: #FFFFFF;
  border-radius: 0; cursor: pointer; transition: all 200ms ease;
}
.btn-org:hover { border-color: #EBC554; color: #EBC554; background: rgba(235,197,84,0.04); }

.btn-org-primary { border-color: #EBC554; color: #EBC554; }
.btn-org-primary:hover { background: #EBC554; color: #080808; }

Текст внутри обязательно в square brackets: [ ИНИЦИИРОВАТЬ FREE → ], [ VERIFY → ], [ ВНЕДРИТЬ → ].

Tier buttons (крупные · 96px min-height)¶

Для hero-pricing (3 уровня доступа). См. ai/hero-v4.html .tier-btn / .tier-btn-primary.

COMPONENTS · CHIPS¶

.chip {
  display: inline-block; padding: 3px 9px;
  border: 1px solid rgba(163,163,163,0.3);
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #A3A3A3;
}
.chip-amber { border-color: rgba(235,197,84,0.5); color: #EBC554; }
.chip-amber-solid { border: 2px solid #EBC554; color: #EBC554; background: rgba(235,197,84,0.15); font-weight: 700; }
.chip-green { border-color: rgba(34,197,94,0.5); color: #22C55E; }
.chip-red { border-color: rgba(239,68,68,0.4); color: #EF4444; }

Tier-бейджи: [ L0 ] [ L1 ] [ L2 ] [ L3 ] (chip-amber). L3 → solid (выделение элиты).

H1 · H2 · H3 (headings)¶

.h1-org {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(38px, 5.2vw, 56px);
  letter-spacing: 0.02em; line-height: 1.1; text-transform: uppercase;
  color: #FFFFFF; text-shadow: 0 0 24px rgba(255,255,255,0.15);
}
.h2-org {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: -0.005em; line-height: 1.1; text-transform: uppercase;
}
/* H3 — Inter 700 22px ls -0.01em sentence */

Page H1 — canonical (NEW · 2026-05-02)¶

Все page-headlines (после header, перед основным контентом) на product-страницах (Academy, Syndicate, GATE Admin) используют один canonical класс. Размер уменьшен на ~21% от старых значений (max 44–56 → 36) — компактный и читаемый.

Класс	Использование	Размер
`.eco-h1-page`	CAPS section headers (например «BILLING», «MY PROTOCOLS», «INVESTOR PORTAL», «ALL PROTOCOLS», «DASHBOARD», «SETTINGS»)	clamp(26px, 3vw, 36px) · UPPERCASE · Inter 800
`.eco-h1-page-tight`	Mixed-case greetings, имена пользователей, названия топиков, lesson titles (например «С возвращением, Сергей», «Алексей Новиков», «12-узловой AI-клоузер · production blueprint», «Принцип 1: Процессы работают сами»)	clamp(22px, 2.4vw, 30px) · sentence-case · Inter 700
`.eco-h1-sub`	Mono mini-caption под h1 (если нужна)	Space Mono 13px ls 0.10em rgba(255,255,255,0.65)

.eco-h1-page {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.1;
  letter-spacing: -0.005em; text-transform: uppercase; margin: 0;
}
.eco-h1-page-tight {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -0.005em; margin: 0;
}
.eco-h1-sub {
  font-family: 'Space Mono', monospace; font-size: 13px;
  letter-spacing: 0.10em; color: rgba(255,255,255,0.65);
  text-transform: uppercase; margin-top: 8px;
}
[data-theme="light"] .eco-h1-page,
[data-theme="light"] .eco-h1-page-tight {
  color: var(--text-primary, #1a1a1a) !important;
}

Правила: - НЕ использовать inline font-size на h1 страницы — только canonical class - Старые специфические классы (.h1-dash, .h1-syn, .h1-inv, .h1-locked, .h1-cat, .h1-bill, .h1-set, .h1-prof, .h1-quiz, .h1-done, .h1-lesson, .h1-onboard, .h1-login, .h1-admin, .h1-tx, .h1-u, .h1-uw, .h1-new, .h1-topic) — deprecated, заменены на .eco-h1-page / .eco-h1-page-tight - Hero h1 на ai/landing.html (.h1-org) — отдельный canonical, не унифицируется с product-headlines - demo/flow-map.html h1 — fixed ранее, не унифицируется (entry-страница) - index.html (entry) — не product, не унифицируется

Где находится canonical CSS: wiki/design-system/ui-kit/eco-components.css

Утверждено: CEO 2026-05-02 после прокликивания прототипа («шрифт надписи гигантский — исправь · унифицируй размер на всех страницах»).

CROSS-LINKS MATRIX (рабочие переходы)¶

hero-v4.html (.ai)
├─ nav: Academy → ../academy/dashboard.html
│       AI-Panel (active)
│       Syndicate ↗ → ../syndicate/branded-preview.html
│       Vault ↗ → goldjaxe.org (новая вкладка)
│       Vision ↗ → goldjaxe.com (новая вкладка)
└─ footer triad:
        VISION → goldjaxe.com (target=_blank)
        INNOVATIONS = self
        VAULT → goldjaxe.org (target=_blank)

academy/dashboard.html
├─ nav: Dashboard (active)
│       Курсы → lesson-viewer.html
│       Сертификаты → certificate.html
│       Syndicate ↗ → ../syndicate/branded-preview.html
│       AI ↗ → ../ai/hero-v4.html
└─ eco-footer triad:
        VISION → goldjaxe.com
        INNOVATIONS → ../ai/hero-v4.html
        VAULT → goldjaxe.org

academy/lesson-viewer.html
└─ nav: Dashboard / Курсы (active) / Сертификаты / Syndicate↗ / AI↗
        (footer пока через side layout)

syndicate/branded-preview.html
├─ nav: Категории (active) / Темы / Academy↗ → dashboard / AI↗ → hero-v4
└─ eco-footer triad: те же

REACT COMPONENTS · API SPEC (для Артёма)¶

`<EcoHeader />` (унифицированный header)¶

type EcoHeaderProps = {
  tier: 'marketing' | 'product';
  product: 'ai' | 'academy' | 'syndicate' | 'gate' | 'linkstack';
  subline?: string;                    // текст под wordmark
  navLinks: Array<{
    label: string;
    href: string;
    active?: boolean;
    external?: boolean;                // показать ↗ icon
  }>;
  rightCluster?: React.ReactNode;      // кастом-блок справа (status, profile, switchers)
  sticky?: boolean;                    // default: true
};

`<EcoFooter />` (Product compact)¶

type EcoFooterProps = {
  current: 'ai' | 'academy' | 'syndicate' | 'gate';
  legalLinks?: Array<{ label: string; href: string }>;  // default: privacy/oferta/cookies
  legalEntity?: 'IP' | 'FZ-LLC' | 'BOTH';                // default: 'IP'
};

`<TileTriad />` (Marketing footer triad)¶

type TileTriadProps = {
  current: 'com' | 'ai' | 'org';      // подсветка current location
  size?: 'compact' | 'full';           // default: 'full' для marketing
};

`<ServiceCard />` (AI-Panel + Pricing)¶

type ServiceCardProps = {
  number: string;                      // "01", "02", "03"
  category: string;                    // "DIGITAL TWIN"
  title: string;                       // "Цифровой клон CEO 24/7"
  tags?: string[];                     // ["HEYGEN", "ELEVENLABS"]
  description: string;
  cta: { label: string; href: string; primary?: boolean };
  price?: string;                      // "от $2,000"
  hoverColor?: 'gold' | 'purple' | 'blue';  // default: 'gold'
  topBadge?: string;                   // "⭐ TOP"
};

`<TierButton />` (3 уровня доступа в hero)¶

type TierButtonProps = {
  level: 'L0' | 'L1' | 'L2' | 'L3';
  label: string;                       // "ИНИЦИИРОВАТЬ FREE"
  arrow: '→' | '↓' | '↗';
  meta: string;                        // "L0 · INITIATION PROTOCOL"
  primary?: boolean;                    // default: false
  href: string;
};

VERSIONING · changelog¶

Версия	Дата	Изменения
3.0.0	2026-05-02 день	PRODUCTION-READY · CEO REV 7 утверждено. 2-tier (Marketing 62px / Product 72px). Единый CSS namespace `.eco-` для product, `.org-` для marketing. Применено: hero-v4, header.html, footer.html, academy/dashboard, academy/lesson-viewer, syndicate/branded-preview. Cross-links рабочие.
3.1.0 (queued)	TBD	Применить UI Kit ко всем остальным файлам: quiz, certificate, email-templates, gate-admin, linkstack, smart-checkout

[[ecosystem-style-guide]] v3.0 — общая концепция, цвета, шрифты
[[BRAND-GUIDELINES]] v1.0 — брендбук (master document)
[[design-system/README]] — токены, интеграция в проекты
tokens/eco-components.css — готовый CSS для импорта в любой проект
ui-kit/preview.html — визуальный showcase всех компонентов

🔒 Canonical Components v3 (FIXED 2026-05-03 · CEO утвердил)¶

ЕДИНЫЙ header на всех 36 экранах прототипа. Никакого деления на marketing-tier vs product-tier. 2-tier архитектура отменена решением CEO 2026-05-03 после двух прецедентов расхождений между namespace .org-* (landing) и .eco-* (academy/syndicate).

Эталонная страница: wiki/design-system/ecosystem-prototype/academy/courses.html. Все правила — в eco-components.css блок «🔒 HEADER CANONICAL v3 (FIXED 2026-05-03)».

Header v3 — единый везде (77px)¶

Элемент	Класс	Значение v3 (FIXED)	Было v2
Container	`.eco-header` (или `.org-header` для landing/checkout)	height 77px · bg rgba(18,18,22,0.88) · backdrop-blur 8px	62 / 72
Cube logo	`.eco-cube`	44×44 · drop-shadow amber 11px	41×41
Wordmark	`.eco-wordmark`	Space Mono Bold 17.5px · ls 0.07em (только латиница)	16 / 16.5
Wordmark gold	`.gold`	#EBC554 (часть «GOLDJAXE»)	(без изменений)
Wordmark brackets	`.br`	#FFFFFF dark / #1a1a1a light (часть `[ ACADEMY ]` и т.п.)	(без изменений)
Sub-line	`.eco-subline`	JetBrains Mono Bold 14px ls 0.14em · color rgba(255,255,255,0.85) · uppercase (полный Cyrillic, technical)	12 Reg Space Mono → cyrillic broken
Logo gap	(inline)	14px	(без изменений)
Logo padding	(inline)	0 22px (eco) или 0 20px (org)	(без изменений)

Правило: header и footer-logo (нижняя часть футера) имеют одинаковый размер: cube 44×44, wordmark 17.5px Space Mono Bold, drop-shadow 11px. Никаких clamp() и масштабирования.

Элемент	Спека	Примечание
Tile padding	16px / 24px	После удаления EXPLORE/CURRENT LOCATION текстов (CEO 2026-05-03) — компактнее.
Caption (goldjaxe.com/.ai/.org)	Space Mono · 13px · ls 0.12em	margin-bottom 10px
Wordmark `[ VISION/INNOVATIONS/VAULT ]`	Space Mono Bold · 15px · ls 0.08em	margin-bottom 12px
Description	Inter · 14px · alpha 0.60	margin-bottom 0 (последний элемент)
Текст «EXPLORE →» / «CURRENT LOCATION»	УДАЛЁНЫ ВЕЗДЕ	tile сам по себе ссылка
Маркер «вы здесь» (только на текущем тайле)	Variant A canonical: усиленная top-line 2px amber-glow + pulsing dot 7×7 в правом верхнем углу + light gradient background	Анимация `triad-pulse` 2s ease-in-out infinite
Альтернативы CURRENT (B/C/D/E)	в `triad-current-test.html` для будущих пересмотров	B = только top-line, C = vertical line слева, D = full border, E = pin emoji
Hover canonical (Variant A)	`transform: translateY(-3px)` + симметричный box-shadow `0 0 24px / 0 0 48px / inset 0 0 24px` rgba(R,G,B,...)	без diagonal `8px 8px 0` block-shadow. Все 3 тайла должны иметь CSS variable `--tile-r/g/b` (purple/gold/org) — иначе fallback amber. Никаких отдельных `.tile-X:hover` override — общий `.triad-tile:hover` работает на всех.
Альтернативы hover (B/C/D)	в `triad-hover-test.html` для будущих пересмотров	B = + inner border, C = radial glow изнутри, D = brutalist 8×8 куб (исправленный)

Элемент	Класс	Значение v3
Cube	`.eco-footer-cube` (canonical) или `.cube-glow-f` (landing) + img class `w-11 h-11`	44×44
Wordmark	`.eco-footer-wordmark` или `.org-wordmark` (landing — для идентичности с header)	17.5px Space Mono Bold (только латиница `GOLDJAXE [ AI ]`)
Caption (под лого)	inline стиль с font-family `'JetBrains Mono'`	14px JetBrains Mono Bold ls 0.14em uppercase color rgba(255,255,255,0.85) — идентично subline header
Glow	drop-shadow 0 0 11px rgba(235,197,84,0.35)	соразмерно header

Triad-tiles в средней части футера (категории VAULT/INNOVATIONS/VISION) — отдельная сущность, к этому правилу не относится.

Шрифты экосистемы (подключение через `tokens/fonts.css`)¶

Гарнитура	Где используется
Space Mono Bold	wordmark `GOLDJAXE [ AI ]` (header + footer) — только латиница
JetBrains Mono Bold	subline header + footer caption + ВСЕ secondary captions (.eco-cap-md/.eco-cap-sm/.eco-cap-xs) — uppercase, полный Cyrillic, technical look
Inter	h1, h2, body текст, кнопки, формы
Space Grotesk	display headlines (изредка, не везде)

Body text canonical (NEW · FIXED 2026-05-03)¶

Все параграфы / описания / body-text — Inter с явной иерархией размеров:

Класс	Размер	Line-height	Применение
`.eco-body-lg`	17px	1.6	hero-paragraphs, intro
`.eco-body-md`	15px	1.6	main paragraphs, card body
`.eco-body-sm`	14px	1.5	secondary descriptions, step text

❌ Запрещены text-[10px]/[11px]/[12px] Tailwind utilities на body-text — они слишком мелкие. Минимум для body = 14px. Для меньших размеров → eco-cap-* (это caption, не body).

Secondary captions canonical (FIXED 2026-05-03)¶

Все captions внутри страницы (section labels, stat captions, step labels, card captions) — единая иерархия в master CSS:

Класс	Размер	Letter-spacing	Применение
`.eco-cap-md`	13px	0.14em	главные section labels («▸ ЧТО ПРОИСХОДИТ ДАЛЬШЕ», «▸ ВОПРОСЫ?»)
`.eco-cap-sm`	12px	0.10em	sub-section labels, мета-инфо
`.eco-cap-xs`	11px	0.14em	мелкие лейблы, chip-стиль, step labels

Все три — JetBrains Mono Bold (font-weight: 700) · uppercase · line-height 1.5.

Заменяет устаревшие mono-cap-xs / mono-cap-sm (Space Mono, cyrillic ломался) — после миграции 2026-05-03 на 29 экранах. Локальные inline-определения запрещены — все кэпшоны через master CSS.

Правила Claude (для всех будущих сессий)¶

Один header на всех экранах. Создавая новый экран — скопировать header из courses.html или eco-components.css без локальных размерных override.
Не форкать размеры локально. Если нужно изменить — менять в master CSS + batch sed по всем 36+ экранам.
Memory: feedback_header_canonical_v3 — single source of truth.

Layout правила (FIXED 2026-05-03)¶

Элемент	Правило	Зачем
`.eco-nav-link` / `.org-nav-link`	`white-space: nowrap` + padding 0 14px	Русский «ВСЕ ПРОТОКОЛЫ» без nowrap → перенос на 2 строки → header съезжает. Padding 14px (не 18) даёт запас для 5 nav-link + right cluster на 1366px+ viewport.
`.eco-status-chip` / `.org-status-badge`	`white-space: nowrap`	«L0 · ACTIVE» без nowrap переносится на 2 строки внутри chip.
`.eco-search`	`white-space: nowrap`	Аналогично.

История версий¶

v1 (до 2026-04-15) — 16px wordmark, 41 cube, 72 height, разные подходы
v2 (2026-05-02) — 16.5 wordmark, 72 height, 2-tier (Marketing 62 / Product 72), subline в Space Mono
v3 (2026-05-03) — 17.5 wordmark, 77 height, единый tier на всех экранах
v3.1 (2026-05-03) — subline на JetBrains Mono Bold (полный Cyrillic + technical)
v3.2 (2026-05-03) — white-space: nowrap на nav-link/status-chip/search + nav-link padding 18→14
v3.3 (2026-05-03) — eco-cap-md/sm/xs (JetBrains Mono Bold) + eco-body-lg/md/sm (Inter ≥14px) + status-chip 36px canonical + stat-sub JBM + Variant A hover triad + триад без EXPLORE/CURRENT текстов ← текущий

🚫 Что нельзя делать (FIXED 2026-05-03 — после dashboard audit)¶

Список грабель которых надо избегать. Каждый пункт — закрытый прецедент.

Шрифты¶

❌ Space Mono для cyrillic-текстов (subline, secondary captions, stat captions). Space Mono из Google Fonts не имеет полного Cyrillic glyphs → fallback на системный monospace → разные шрифты в одной строке. Используй JetBrains Mono Bold.
❌ Inter для caption (uppercase technical labels). Inter слишком растянутый — CEO отверг 2026-05-03. Caption всегда — JetBrains Mono Bold.
❌ Wordmark в Inter (header/footer logo). Wordmark всегда — Space Mono Bold (только латиница, для бренда).

Размеры¶

❌ text-[10px] / [11px] / [12px] Tailwind utilities на body-text (параграфы, описания). Минимум для body = 14px. Меньше — caption (eco-cap-*).
❌ font-size:10px / 11px inline на cyrillic-тексте. Минимум 12 для caption, 14 для body.
❌ inline style="font-size:Npx" overrides на eco-cap-* классах. Они ломают canonical иерархию. Если нужен другой размер — другой класс из иерархии md/sm/xs.
❌ status-chip / search height: 30px. Canonical = 36px на всех экранах.
❌ Дублирующие inline определения локальных classes которые уже есть в master CSS (.eco-cap-*, .eco-header, .eco-cube и т.д.). Master = single source of truth.

Layout¶

❌ Diagonal 8px 8px 0 block-shadow на .triad-tile:hover. Создаёт асимметрию (только справа+снизу). Используй симметричный glow Variant A.
❌ Отдельные .tile-X:hover overrides (типа .tile-org:hover). Все 3 тайла должны иметь CSS variable --tile-r/g/b и работать через общий .triad-tile:hover.
❌ Тексты «EXPLORE →» / «CURRENT» в triad footer tiles. Variant A — без текста, только pulse-dot + top-line glow на текущем.
❌ 2-tier архитектура (marketing 62 / product 72). Только единый header 77px на всех экранах.

Class management¶

❌ mono-cap-xs / mono-cap-sm (deprecated) — заменены на eco-cap-xs / eco-cap-sm. Если встречаешь старое имя — мигрируй.
❌ white-space: nowrap отсутствует на: .eco-nav-link, .eco-status-chip, .eco-search, .eco-cap-*. Без него русские тексты переносятся на 2 строки.
❌ eco-components.css не подключён на экране где используются eco-* classes. Проверяй: <link rel="stylesheet" href="../../ui-kit/eco-components.css" />.

Caption-классы (мигрированы 2026-05-03)¶

Все локальные caption-классы с Cyrillic content — на JetBrains Mono Bold (font-weight 700): - .stat-cap (для stat tiles · «УРОКОВ ПРОЙДЕНО») - .stat-sub (subline в stat tiles · «STREAK: 4», «+18 ЗА НЕДЕЛЮ») - .info-cap (для info cards · «▸ ТАРИФ», «▸ СУММА») - .kpi-cap (для KPI tiles) - .doc-meta (для document меты) - .cap-row-header (для table headers) - .filter-pill (filter chips · «Все/Куплено/Доступно/Заблокировано») - .status-pill (status chips · «▸ В ПРОЦЕССЕ», «🔒 ЗАБЛОКИРОВАНО») - .price-rub (price subline · «бесплатно», «разово», «contact CEO») - ФЛАГМАН / LIMITED · NDA / INVITE-ONLY badges (inline на course cards)

Если содержат только латиницу + цифры (типа .tier-badge «L1 · OPERATOR», .tier-pill «L0 · YOU», .step-dot «01») — можно оставить Space Mono.

Если создаёшь подобный — проверь content: cyrillic → JBM Bold, латиница → Space Mono.

Pre-deployment checklist (audit одного экрана) · FINAL v3.3¶

Перед добавлением экрана в production проходишь по списку (~5 минут на экран):

A. Подключение¶

[ ] <link rel="stylesheet" href="../../tokens/fonts.css" /> подключён
[ ] <link rel="stylesheet" href="../../tokens/design-tokens.css" /> подключён
[ ] <link rel="stylesheet" href="../../ui-kit/eco-components.css" /> подключён

B. Header (canonical v3.2 — единый на всех экранах)¶

[ ] .eco-header (или .org-header) 77px
[ ] Cube image 44×44
[ ] Wordmark Space Mono Bold 17.5px · ls 0.07em (только латиница)
[ ] Subline JetBrains Mono Bold 14px · ls 0.14em (полный Cyrillic)
[ ] Nav-link: padding 0 14px (не 18!), white-space: nowrap, font 12.5 SM Reg
[ ] Status-chip / Search: height 36px, font 12-12.5px, dot 7×7, nowrap
[ ] Lang switcher 32 / lang-btn 38×30
[ ] Theme btn 34×32
[ ] Profile btn 36×36

C. Captions (eco-cap-* — единый шрифт для всех secondary captions)¶

[ ] Section labels («▸ ЧТО ПРОИСХОДИТ ДАЛЬШЕ» / «// АКТИВНОСТЬ») — .eco-cap-md 14px JBM Bold ls 0.14em
[ ] Sub-labels («▸ ШАГ 1 · ТЕПЕРЬ») — .eco-cap-sm 12px JBM Bold ls 0.10em
[ ] Mini chips («▸ ВСЕГО ЭКРАНОВ») — .eco-cap-xs 11px JBM Bold ls 0.14em
[ ] white-space: nowrap наследуется автоматически из master CSS
[ ] НЕТ inline style="font-size:Npx" overrides на eco-cap-*

D. Body text (eco-body-* минимум 14px)¶

[ ] Hero paragraphs — .eco-body-lg 17px Inter line-height 1.6
[ ] Main body — .eco-body-md 15px Inter line-height 1.6
[ ] Secondary descriptions — .eco-body-sm 14px Inter line-height 1.5
[ ] НЕТ Tailwind text-[10/11/12]px на body-text (минимум 14)

E. Локальные caption-классы (если есть)¶

Все локальные caption-классы (.stat-cap, .info-cap, .kpi-cap, .doc-meta, .cap-row-header, .tier-badge, .tier-pill, .status-pill, .filter-pill, .price-rub, etc): - [ ] Если содержат Cyrillic content → 'JetBrains Mono', monospace + font-weight: 700 - [ ] Если содержат только латиницу + цифры (типа «L1 · OPERATOR», «$149») → можно 'Space Mono', monospace - [ ] Никогда Inter для caption — слишком растянутый - [ ] white-space: nowrap для chip-стиля (если содержание короткое и не должно переноситься)

[ ] Класс .triad-grid + 3 .triad-tile (tile-purple, tile-gold, tile-org с CSS variables)
[ ] НЕТ локальных inline override .triad-tile/grid/current в <style> блоке (наследуется master)
[ ] НЕТ текстов «EXPLORE →» / «CURRENT» (Variant A — без текста)
[ ] Текущий тайл: triad-current class + <span class="triad-current-dot"></span> (pulse animation)
[ ] Hover Variant A автоматически (translateY -3 + симметричный 3-layer glow)

[ ] Cube 44×44 (re-use .eco-cube класс из header)
[ ] Wordmark Space Mono Bold 17.5px (re-use .eco-wordmark или .org-wordmark)
[ ] Caption под лого (если есть) — JetBrains Mono Bold 14px (= header subline)

H. Финальная проверка¶

[ ] Прокликать в Chrome — header / nav / chip в одну строку, ничего не съезжает
[ ] Hover на triad tiles — симметричный glow, никаких 8×8 / 6×6 brutalist
[ ] Cyrillic тексты везде читаются ровно (нет fallback на системный monospace)
[ ] Status-chip / Search не переносятся
[ ] Pre-deployment checklist passed → готово в production

🔒 AUTH SCREENS · canonical v3.4 (NEW · CEO утвердил 2026-05-03)¶

ДВА И ТОЛЬКО ДВА стандарта авторизации для всей экосистемы GOLDJAXE. Других быть не должно. Любой новый login screen использует один из двух паттернов ниже.

Variant A · `.auth-card-gold` — Passwordless / Magic Link¶

Назначение: academy/login.html · syndicate auth · любой regular login (все tiers). Method: email-only · magic link sent → auth-magic-link.html.

Структура card (max-width 460px, padding 40px 36px): 1. eco-cap-sm (caption: «// MAGIC LINK · PASSWORDLESS») 2. eco-h1-page (h1: «Вход в Academy») 3. eco-body-sm description (1 строка: «Введите email — отправим ссылку доступа.») 4. 1 input (email, autocomplete="email", autofocus) 5. .btn-auth.btn-auth-gold (w-full, glow) 6. .auth-context (3 metrics: «8+ студентов · 99.9% uptime · SSO Syndicate»)

Below card (.auth-footer-info): «Нет аккаунта? — Выберите тариф L1/L2/L3» + JWT badge.

Theme: gold accent (#EBC554), grid-bg-gold, glow-gold.

Variant C · `.auth-card-red` + `.auth-trust-row` — Admin Secure¶

Назначение: gate-admin/login.html · любой root/ops L5 login. Method: email + password / 2FA → JWT session.

Структура card (max-width 460px): 1. eco-cap-sm (caption: «▸ INTERNAL · L5 ACCESS», color #EF4444) 2. eco-h1-page (h1: «GATE Admin») 3. .auth-trust-row (inline 1 строка): ✓ TLS 1.3 · ✓ TAILSCALE IP · ⚠ JWT REQUIRED 4. 2 inputs: - .auth-label (red) «Email» + email input - .auth-label (red) «Password / 2FA» + password input 5. .btn-auth.btn-auth-red (w-full, red glow)

Below card (.auth-footer-info): «🔒 root или ops роли · audit-log включён» + back-link.

Theme: red accent (#EF4444), grid-bg-red, glow-red.

Общие правила (для обоих variants)¶

Правило	Значение
Header	Canonical 77px (eco-header) — обязательно. Logo + back-link + RU/EN + theme toggle
body	БЕЗ `display:flex` (нормальный flow). Card centered через max-width + margin auto
Card max-width	460px (gold) / 460px (red)
Card padding	40px 36px
Card border	2px accent-color · soft glow shadow
H1	`.eco-h1-page` (Inter 800 26-36px clamp uppercase)
Caption	`.eco-cap-sm` (JBM Bold 12 ls 0.10em) — color accent
Description	`.eco-body-sm` (Inter 14 line-height 1.5) — оптionально, 1 строка
Input	`.auth-input` (16px font-size, padding 16-18)
Submit	`.btn-auth` w-full · padding 18 · glow shadow
Helper text	`.auth-footer-info` 13px Inter
Высота	fits в 1440×900 viewport БЕЗ vertical scroll (требование)
Не использовать	lock-icon ring 96×96 · `.terminal` block с >2 строк · длинные description · multiple sections

CSS namespace¶

Все классы определены в eco-components.css блок «AUTH SCREENS · canonical v3.4»: .auth-stage · .auth-card (+.auth-card-gold / .auth-card-red) · .auth-input · .auth-label · .btn-auth (+.btn-auth-gold / .btn-auth-red) · .auth-trust-row · .auth-trust-item (+.auth-trust-ok/warn/fail) · .auth-context · .auth-footer-info.

HTML snippet · Variant A¶

<header class="eco-header sticky top-0 z-40">
  <!-- canonical header (logo + back-link + RU/EN + theme) -->
</header>

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-gold pointer-events-none"></div>
  <div class="absolute inset-0 auth-stage-glow-gold pointer-events-none"></div>

  <div class="relative">
    <div class="auth-card auth-card-gold">
      <div class="text-center mb-7">
        <div class="eco-cap-sm text-amber mb-3">// MAGIC LINK · PASSWORDLESS</div>
        <h1 class="eco-h1-page mb-3">Вход в Academy</h1>
        <p class="eco-body-sm" style="color:rgba(255,255,255,0.65);">Введите email — отправим ссылку доступа.</p>
      </div>

      <form class="space-y-5">
        <input type="email" class="auth-input" placeholder="ivan@example.com" autocomplete="email" autofocus required />
        <button type="submit" class="btn-auth btn-auth-gold">[ ОТПРАВИТЬ MAGIC LINK → ]</button>
      </form>

      <div class="auth-context">
        <span><strong>8+</strong> студентов</span>
        <span class="auth-context-sep">·</span>
        <span><strong>99.9%</strong> uptime</span>
        <span class="auth-context-sep">·</span>
        <span><strong>SSO</strong> Syndicate</span>
      </div>
    </div>

    <p class="auth-footer-info">
      Нет аккаунта? <a href="../ai/landing.html#academy">Выберите тариф L1/L2/L3</a><br/>
      🔒 JWT · cookie shared *.goldjaxe.ai
    </p>
  </div>
</section>

HTML snippet · Variant C¶

<header class="eco-header sticky top-0 z-40">
  <!-- canonical header -->
</header>

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-red pointer-events-none"></div>
  <div class="absolute inset-0 auth-stage-glow-red pointer-events-none"></div>

  <div class="relative">
    <div class="auth-card auth-card-red">
      <div class="text-center mb-6">
        <div class="eco-cap-sm mb-3" style="color:#EF4444;">▸ INTERNAL · L5 ACCESS</div>
        <h1 class="eco-h1-page mb-3">GATE Admin</h1>
      </div>

      <div class="auth-trust-row">
        <span class="auth-trust-item auth-trust-ok">✓ TLS 1.3</span>
        <span class="auth-trust-item auth-trust-ok">✓ TAILSCALE IP</span>
        <span class="auth-trust-item auth-trust-warn">⚠ JWT REQUIRED</span>
      </div>

      <form class="space-y-4">
        <div>
          <label class="auth-label">Email</label>
          <input type="email" class="auth-input" placeholder="admin@goldjaxe.com" autocomplete="email" required />
        </div>
        <div>
          <label class="auth-label">Password / 2FA</label>
          <input type="password" class="auth-input" placeholder="••••••••••" autocomplete="current-password" required />
        </div>
        <button type="submit" class="btn-auth btn-auth-red" style="margin-top:8px;">[ AUTHENTICATE → ]</button>
      </form>
    </div>

    <p class="auth-footer-info">
      🔒 root или ops роли · audit-log включён<br/>
      ← <a href="../ai/landing.html">Назад на goldjaxe.ai</a>
    </p>
  </div>
</section>

Правила выбора варианта¶

Email-only flow → Variant A. Нет паролей в системе UX → magic link.
Password + role-based access (admin) → Variant C. Trust signals дают visual confirmation security posture.
Не смешивать. Никаких «Variant A с password input» или «Variant C без trust row».

🚫 Что нельзя делать на auth screen¶

❌ body { display: flex; align-items: center; } — ломает sticky header. Используй normal flow + margin: 0 auto.
❌ Lock-icon ring 96×96 + decorative caption + длинная description + terminal-block + form — это 5+ секций vertical scroll.
❌ <header> отсутствует на login screens (A / C) — обязателен canonical 77px.
❌ Card width >480px на login — слишком wide, не focused. (Status pages могут wide 760px)
❌ Кастомные form-input/btn classes — используй .auth-input / .btn-auth.
❌ Variant A без .auth-context — sterile.
❌ Variant C без .auth-trust-row — теряет security posture.

🔒 SINGLE-CARD SCREENS · canonical v3.5 (NEW · CEO утвердил 2026-05-03)¶

Расширение Auth pattern. Всего 4 нормативных variant для всех single-card screens экосистемы. Любой будущий «card centered с message + actions» — один из 4 ниже.

Карта вариантов¶

Variant	Use case	Header	Card width	Принципиальный block
A · gold login	Passwordless login (academy / syndicate)	обязателен	460	input + button + context strip
C · red login	Admin password+2FA login (gate-admin)	обязателен	460	trust-row + 2 inputs + button
D · confirmation	После auth action (magic-link sent / password reset / 2FA prompt / email verify)	опционально	460	icon + email-display + countdown + terminal + actions
E · status	Outcome screen (success / pending redirect / thank-you)	опционально	760 (wide)	status-icon ring + sub + (info-grid / steps-list) + actions + support

Variant D · Confirmation (Magic-link sent / 2FA / email verify)¶

Назначение: screen после того как user submit-ил auth action и теперь ждёт результата (e-mail в inbox / SMS code / etc).

Структура (max-width 460px): 1. .auth-icon-ring.auth-icon-ring-pending (120×120 amber ring + .auth-icon-glyph emoji 📨 / 🔑 / etc, optional is-pulse animation) 2. .eco-cap-sm text-amber («▸ MAGIC LINK SENT») 3. .eco-h1-page («Письмо отправлено») 4. .auth-email-display (highlighted email box · auto-filled из URL params) 5. .auth-sub (Inter 16px description · «Откройте письмо в течение 15 минут.») 6. .auth-countdown («▸ ССЫЛКА АКТИВНА: 14:59») 7. .auth-terminal (4 lines: EMAIL DELIVERED / JWT GENERATED / COOKIE SET / AWAITING USER CLICK) 8. .auth-help-card («Не видите письмо? Проверьте Промоакции / спам · noreply@academy.goldjaxe.ai») 9. .auth-actions-row ([ ИЗМЕНИТЬ EMAIL ] | [ DEMO: КЛИК ПО ССЫЛКЕ → ])

Theme: amber/gold (auth-icon-ring-pending).

Variant E · Status (Success / Pending / Thank-you / Redirect)¶

Назначение: outcome screen после завершённой операции. Поддерживает 4 статуса через class modifier:

Class	Цвет	Использование
`.auth-icon-ring-success`	Green #22C55E	оплата прошла / cert получен / signup OK
`.auth-icon-ring-pending`	Amber #EBC554	redirect загружается / в обработке
`.auth-icon-ring-error`	Red #EF4444	failed payment / access denied (rare)
`.auth-icon-ring-info`	Steel #4573A1	application received (B2B / enterprise)

Структура (max-width 760px wide): 1. .auth-icon-ring.auth-icon-ring-{status} (с pulse animation если pending) 2. .eco-cap-sm (color matches status · «▸ TRANSACTION CONFIRMED») 3. .eco-h1-page («Оплата прошла успешно») 4. .auth-sub (description) 5. Optional content (выбираешь по контексту): - .auth-info-grid (2-3 cards: tier / amount / tx-id) — для transaction details - .auth-steps-grid (3 columns horizontal steps) — для «что дальше» success - .auth-steps-list (numbered ol) — для длинного 5-шагового процесса - .auth-progress + .auth-terminal — для pending redirect 6. .auth-actions-row (1-3 buttons inline) 7. .auth-support-row + .auth-support-cap + .auth-support-links (support contacts)

Theme: через CSS variable --auth-icon-color определяется автоматически от status modifier.

CSS namespace (расширение)¶

Добавлено в eco-components.css блок «SINGLE-CARD SCREENS · canonical v3.5»: - .auth-card-wide (760px вместо 460px) - .auth-icon-ring (+ is-pulse + auth-icon-ring-success/pending/error/info) - .auth-icon-glyph (font-size 60px, color matches ring) - .auth-sub (Inter 16 description) - .auth-email-display (highlighted email box) - .auth-countdown (timer with strong amber) - .auth-terminal (+ .auth-terminal-ok/pending/warn/fail/cursor) - .auth-info-grid + .auth-info-card + .auth-info-cap + .auth-info-val (+ is-mono) - .auth-steps-list + .auth-step-num - .auth-steps-grid + .auth-steps-grid-item + .auth-step-cap/title/desc - .auth-help-card - .auth-progress + .auth-progress-fill - .auth-actions-row / .auth-actions-stack - .auth-support-row + .auth-support-cap + .auth-support-links + .auth-support-sep

HTML snippet · Variant D (Magic-link sent)¶

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-gold pointer-events-none"></div>
  <div class="absolute inset-0 auth-stage-glow-gold pointer-events-none"></div>

  <div class="relative">
    <div class="auth-card-wide">
      <div class="auth-icon-ring auth-icon-ring-pending is-pulse">
        <span class="auth-icon-glyph">📨</span>
      </div>
      <div class="eco-cap-sm text-amber" style="margin-bottom:14px;">▸ MAGIC LINK SENT</div>
      <h1 class="eco-h1-page">Письмо отправлено</h1>

      <div class="auth-email-display" id="email-display">demo@example.com</div>
      <p class="auth-sub">Откройте письмо в течение <strong>15 минут</strong>.</p>
      <div class="auth-countdown">▸ ССЫЛКА АКТИВНА: <strong id="cd">14:59</strong></div>

      <div class="auth-terminal">
        <div class="auth-terminal-ok">▸ EMAIL DELIVERED · OK</div>
        <div class="auth-terminal-ok">▸ JWT TOKEN GENERATED · OK</div>
        <div class="auth-terminal-ok">▸ COOKIE gjx_session SET · OK</div>
        <div class="auth-terminal-pending">▸ AWAITING USER CLICK<span class="auth-terminal-cursor"></span></div>
      </div>

      <div class="auth-help-card">
        Не видите письмо? Проверьте <a href="#">«Промоакции»</a> или спам.<br/>
        Письмо от: <a href="#">noreply@academy.goldjaxe.ai</a>
      </div>

      <div class="auth-actions-row">
        <a href="login.html" class="btn-auth btn-auth-gold" style="width:auto; padding:12px 18px;">[ ИЗМЕНИТЬ EMAIL ]</a>
        <span class="auth-support-sep">|</span>
        <a href="#" id="auto-click" class="btn-auth btn-auth-gold" style="width:auto; padding:12px 18px;">[ DEMO: КЛИК ПО ССЫЛКЕ → ]</a>
      </div>
    </div>
  </div>
</section>

HTML snippet · Variant E (Status success)¶

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-gold pointer-events-none"></div>

  <div class="relative">
    <div class="auth-card-wide">
      <div class="auth-icon-ring auth-icon-ring-success is-pulse">
        <span class="auth-icon-glyph">✓</span>
      </div>
      <div class="eco-cap-sm" style="color:#22C55E; margin-bottom:14px;">▸ TRANSACTION CONFIRMED</div>
      <h1 class="eco-h1-page">Оплата прошла успешно</h1>
      <p class="auth-sub">
        Мы отправили <strong>Magic Link</strong> на ваш email.<br/>
        Откройте письмо в течение 15 минут — доступ активируется.
      </p>

      <div class="auth-info-grid">
        <div class="auth-info-card"><div class="auth-info-cap">▸ Тариф</div><div class="auth-info-val">L2 · ARCHITECT</div></div>
        <div class="auth-info-card"><div class="auth-info-cap">▸ Сумма</div><div class="auth-info-val">$890</div></div>
        <div class="auth-info-card"><div class="auth-info-cap">▸ Транзакция</div><div class="auth-info-val is-mono">tx-a4f2x9</div></div>
      </div>

      <div class="auth-actions-row">
        <a href="../academy/login.html?return=onboarding" class="btn-auth btn-auth-gold" style="width:auto; padding:14px 24px;">[ ОТКРЫТЬ ACADEMY → ]</a>
        <a href="../academy/dashboard.html" class="btn-auth btn-auth-gold" style="width:auto; padding:14px 24px; background:transparent; box-shadow:none;">[ Я УЖЕ ВОШЁЛ ↗ ]</a>
      </div>

      <div class="auth-steps-grid" style="border-top:1px solid #1A1A1A; padding-top:24px;">
        <div class="auth-steps-grid-item">
          <div class="auth-step-cap">▸ ШАГ 1 · ТЕПЕРЬ</div>
          <div class="auth-step-title">Magic Link на email</div>
          <div class="auth-step-desc">Письмо приходит за 60 секунд.</div>
        </div>
        <!-- ...more steps -->
      </div>

      <div class="auth-support-row">
        <div class="auth-support-cap">▸ ВОПРОСЫ?</div>
        <div class="auth-support-links">
          <a href="mailto:support@goldjaxe.ai">support@goldjaxe.ai</a>
          <span class="auth-support-sep">|</span>
          <a href="https://t.me/goldjaxe">Telegram</a>
        </div>
      </div>
    </div>
  </div>
</section>

Правила применения¶

Magic-link sent / password-reset-sent / 2FA-code-sent → Variant D
Payment success / signup success / cert issued → Variant E success (green)
Application received / B2B form submitted → Variant E info (steel blue)
Redirect loading / pending state → Variant E pending + .auth-progress
Failed payment / generic error → Variant E error (red)

🚫 Что нельзя делать на single-card screens (D / E)¶

❌ Card width default 460 если контент имеет info-grid / 5-step list — используй .auth-card-wide (760).
❌ Inline CSS animation в <style> для icon-ring — используй .auth-icon-ring + is-pulse.
❌ Custom .h1-success / .h1-thanks — это .eco-h1-page (canonical).
❌ Custom .info-card / .info-cap / .info-val — это .auth-info-card / .auth-info-cap / .auth-info-val.
❌ Цветной H1 (color:#22C55E на h1) — H1 всегда default text. Цвет идёт в icon-ring и caption.
❌ body { display:flex } без header — нет необходимости. Body normal flow + card centered.
❌ Variant E с card width 460 + 5-step list — текст переносится плохо. Используй wide.

🔒 STATUS DASHBOARD · canonical v3.6 (FINAL · CEO утвердил 2026-05-03)¶

ФИНАЛЬНАЯ ИТЕРАЦИЯ status-screens. После 4 итераций UX-дизайна (compact card → wide card → split → dashboard) выбраны 2 эталонных pattern для всех outcome screens экосистемы GOLDJAXE: V1 для simple confirmations, V3 для info-rich success/status. Применяется к: auth-magic-link.html, checkout-redirect.html, checkout-success.html, enterprise-thanks.html + любые будущие status pages.

Принципы дизайна (зафиксированы)¶

Above-the-fold first. Критическая информация (status icon + h1 + sub + actions) ВСЕГДА видна на одном экране без vertical scroll на 1440×900 viewport. Secondary информация (timeline + support) — компактно следующим блоком.
Brand DNA = architectural density. GOLDJAXE визуальная DNA = dashboard pattern (KPI tiles + technical info). Не «celebration page» с большим декоративным иконом и пустотой.
Status colors ≠ Brand action color. Зелёный/амбер/красный = OUTCOME indicators (icon ring + caption + bar border). Gold #EBC554 = ALWAYS primary CTA (action driver, identity). Не смешивать.
Information hierarchy через size + color contrast. Captions JBM Bold 12px (techincal labels). Body 14px Inter (canonical). H1 clamp(22-36) Inter 800 (hero). KPI values 20px Inter 800 (architectural focus).

Variant V1 · COMPACT FOLD-FIRST¶

Use case: simple confirmation / pending redirect / generic «successfully done». Применяется к: - academy/auth-magic-link.html (Magic Link sent confirmation) - ai/checkout-redirect.html (loading redirect to Prodamus) - любой будущий password-reset-sent / 2FA-prompt / email-verify

Структура (centered single-column, max-width 760px): 1. .auth-icon-ring.is-compact 88×88 (вместо 120) с status color + glyph 46px 2. .eco-cap-sm (12px) caption — status color 3. .eco-h1-page (clamp 26-36) — Inter 800 uppercase 4. .auth-sub (16px) — короткое description, 1-2 строки 5. Optional content (если confirm с email): - .auth-email-display (highlighted email box) - .auth-countdown (live timer) - .auth-terminal (4-line tech log) 6. .auth-actions-row с .btn-action (gold primary) + .btn-outline (secondary) 7. .auth-timeline-compact (3-col inline steps) — если нужно 8. .auth-support-row (footer links)

Variant V3 · DASHBOARD-STYLE¶

Use case: info-rich success / outcome с transaction details / enterprise events. Применяется к: - ai/checkout-success.html (payment confirmed) - ai/enterprise-thanks.html (B2B application received) - любой будущий cert-issued / signup-completed / subscription-renewed

Структура (architectural KPI layout, max-width 1100px):

.auth-success-bar — compact horizontal-row, all-in-one:
.auth-success-icon 68×68 (status color)
.auth-success-content:
- .auth-success-cap (12px JBM Bold, status color) «▸ TRANSACTION CONFIRMED»
- .auth-success-h1 (Inter 800 clamp 22-28)
- .auth-success-sub (14px) — короткое описание
.auth-success-cta flex-row 2 кнопок: .btn-action primary gold + .btn-outline secondary
.auth-kpi-row — 4-column KPI tiles (как dashboard):
.auth-kpi-tile × 4
Each: .auth-kpi-cap (12px JBM gold) + .auth-kpi-val (Inter 800 20px) + .auth-kpi-sub (11px JBM 0.50 opacity)
Modifier .is-mono для tx-id (JBM Bold 13)
Modifier .is-amber/.is-success/.is-pending для accent value coloring (например «MAGIC LINK SENT» amber)
.auth-timeline-h — 3-column horizontal timeline с arrow separators (›):
.auth-timeline-h-step × 3
Each: .auth-timeline-h-num (12px JBM gold «01 · СЕЙЧАС») + .auth-timeline-h-title (15px Inter Bold) + .auth-timeline-h-desc (14px body)
Auto arrow › between steps via ::after
.auth-support-row — bottom links (support / Telegram / возврат)

Цветовая семантика (FIXED)¶

Element	Color	Reasoning
Status icon ring + caption + bar border	green `#22C55E` (success) / amber `#EBC554` (pending) / red `#EF4444` (error) / steel `#4573A1` (info)	Functional outcome indicator — moment-of-truth state
Primary CTA (`.btn-action`)	ALWAYS gold `#EBC554`	Brand action driver, identity. НЕ status color. (Stripe/Linear/Vercel pattern)
Secondary CTA (`.btn-outline`)	Neutral `#525252` border → hover gold	Less visual weight, drives nothing critical
Pending-action sub-state в KPI (типа «MAGIC LINK SENT»)	amber `#EBC554`	Your-move-needed signal, brand-aligned
H1 + body text	Default white	H1 не цветной — это canonical (цвет переходит в icon-ring и caption)

Fonts canonical (UI Kit v3.3 compliant)¶

Element	Size	Family
Caption (success-cap, kpi-cap, timeline-num)	12px	JBM Bold
Tile sub (auth-kpi-sub)	11px	JBM Bold (eco-cap-xs minimum)
Body text (sub, timeline-desc)	14px (eco-body-sm)	Inter
Timeline-h-title	15px	Inter Bold
KPI value	20px	Inter 800
KPI value mono (tx-id)	13px	JBM Bold
H1 main page	clamp(26, 3vw, 36px)	Inter 800 uppercase
H1 success-bar (compact)	clamp(22, 2.4vw, 28px)	Inter 800 uppercase
Buttons (`.btn-action`, `.btn-outline`)	14px	Inter 600
Card padding	40-48px (Variant D) / 18-22px tile (Variant V3)	—

CSS namespace (расширение v3.6)¶

В eco-components.css блок «🔒 STATUS DASHBOARD · canonical v3.6»:

V3 dashboard pattern: - .auth-success-bar (+ .is-success/-pending/-error/-info modifiers · CSS variables) - .auth-success-icon + .auth-success-icon-glyph - .auth-success-content + .auth-success-cap/-h1/-sub - .auth-success-cta - .auth-kpi-row (responsive grid) - .auth-kpi-tile (+ :hover border amber) - .auth-kpi-cap/-val(.is-mono/.is-amber/.is-success/.is-pending)/-sub - .auth-timeline-h + .auth-timeline-h-step (with arrow › ::after, responsive collapse on mobile) - .auth-timeline-h-num/-title/-desc - .auth-dashboard-container (max-width 1100)

V1 compact pattern (modifier для existing classes): - .auth-icon-ring.is-compact (88×88 вместо 120×120) - .auth-timeline-compact (3-col inline steps grid · responsive collapse) - .auth-timeline-compact-step/-num/-text

Brand action buttons: - .btn-action (gold primary, hover filled) - .btn-outline (neutral secondary, hover gold)

HTML snippet · Variant V3 (checkout-success)¶

<header class="eco-header sticky top-0 z-40">...canonical 77px header...</header>

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-gold pointer-events-none"></div>
  <div class="absolute inset-0 auth-stage-glow-gold pointer-events-none"></div>

  <div class="auth-dashboard-container">
    <!-- Success bar -->
    <div class="auth-success-bar is-success">
      <div class="auth-success-icon"><span class="auth-success-icon-glyph">✓</span></div>
      <div class="auth-success-content">
        <div class="auth-success-cap">▸ TRANSACTION CONFIRMED</div>
        <h1 class="auth-success-h1">Оплата прошла успешно</h1>
        <p class="auth-success-sub">Magic Link отправлен на email. Откройте в течение <strong>15 минут</strong>.</p>
      </div>
      <div class="auth-success-cta">
        <a href="../academy/login.html?return=onboarding" class="btn-action">[ ОТКРЫТЬ ACADEMY → ]</a>
        <a href="../academy/dashboard.html" class="btn-outline">[ Я УЖЕ ВОШЁЛ ↗ ]</a>
      </div>
    </div>

    <!-- KPI tiles row -->
    <div class="auth-kpi-row">
      <div class="auth-kpi-tile">
        <div class="auth-kpi-cap">▸ ТАРИФ</div>
        <div class="auth-kpi-val">L2 · ARCHITECT</div>
        <div class="auth-kpi-sub">пожизненно</div>
      </div>
      <div class="auth-kpi-tile">
        <div class="auth-kpi-cap">▸ СУММА</div>
        <div class="auth-kpi-val is-amber">$890</div>
        <div class="auth-kpi-sub">USD оплачено</div>
      </div>
      <div class="auth-kpi-tile">
        <div class="auth-kpi-cap">▸ ТРАНЗАКЦИЯ</div>
        <div class="auth-kpi-val is-mono">tx-ax9c90km</div>
        <div class="auth-kpi-sub">prodamus · confirmed</div>
      </div>
      <div class="auth-kpi-tile">
        <div class="auth-kpi-cap">▸ MAGIC LINK</div>
        <div class="auth-kpi-val is-amber">SENT</div>
        <div class="auth-kpi-sub" style="color:rgba(235,197,84,0.65);">14:59 до истечения</div>
      </div>
    </div>

    <!-- Horizontal timeline -->
    <div class="auth-timeline-h">
      <div class="auth-timeline-h-step">
        <div class="auth-timeline-h-num">01 · СЕЙЧАС</div>
        <div class="auth-timeline-h-title">Magic Link на email</div>
        <div class="auth-timeline-h-desc">Письмо приходит за 60 секунд. Проверьте «Промоакции» если не видите.</div>
      </div>
      <div class="auth-timeline-h-step">
        <div class="auth-timeline-h-num">02 · 5 МИНУТ</div>
        <div class="auth-timeline-h-title">Onboarding в Academy</div>
        <div class="auth-timeline-h-desc">Покажем структуру курса, артефакты, доступ в Syndicate.</div>
      </div>
      <div class="auth-timeline-h-step">
        <div class="auth-timeline-h-num">03 · 4 ЧАСА</div>
        <div class="auth-timeline-h-title">Первый цифровой актив</div>
        <div class="auth-timeline-h-desc">AI-клон голоса / Reels / Instagram-бот в production.</div>
      </div>
    </div>

    <!-- Support row -->
    <div class="auth-support-row">
      <div class="auth-support-cap">▸ ВОПРОСЫ?</div>
      <div class="auth-support-links">
        <a href="mailto:support@goldjaxe.ai">support@goldjaxe.ai</a>
        <span class="auth-support-sep">|</span>
        <a href="https://t.me/goldjaxe">Telegram</a>
        <span class="auth-support-sep">|</span>
        <a href="../legal/oferta.html">Возврат · 14 дней</a>
      </div>
    </div>
  </div>
</section>

HTML snippet · Variant V1 compact (auth-magic-link)¶

<section class="auth-stage relative">
  <div class="absolute inset-0 auth-stage-grid-gold pointer-events-none"></div>
  <div class="absolute inset-0 auth-stage-glow-gold pointer-events-none"></div>

  <div class="auth-card-wide" style="max-width:760px; padding:50px 24px 24px;">
    <div class="auth-icon-ring auth-icon-ring-pending is-pulse is-compact">
      <span class="auth-icon-glyph">📨</span>
    </div>
    <div class="eco-cap-sm text-amber" style="margin-bottom:10px;">▸ MAGIC LINK SENT</div>
    <h1 class="eco-h1-page">Письмо отправлено</h1>
    <div class="auth-email-display">ivan@example.com</div>
    <p class="auth-sub">Откройте письмо в течение <strong>15 минут</strong>.</p>
    <div class="auth-countdown">▸ ССЫЛКА АКТИВНА: <strong>14:59</strong></div>
    <div class="auth-terminal">...4 lines...</div>

    <div class="auth-actions-row">
      <a href="login.html" class="btn-outline">[ ИЗМЕНИТЬ EMAIL ]</a>
      <a href="#" class="btn-action">[ DEMO: КЛИК ПО ССЫЛКЕ → ]</a>
    </div>

    <p class="auth-footer-info">▸ Прототип: кнопка симулирует открытие письма</p>
  </div>
</section>

Правила применения (FINAL)¶

Use case	Pattern	Why
Magic-link sent / password-reset-sent / 2FA-code-sent / email-verify	V1 compact	Single-action confirmation, минимум информации, фокус на email + timer
Loading redirect / pending state	V1 compact + `.auth-progress`	Transitional, нет actions, auto-redirect
Payment success / cert issued / signup completed	V3 dashboard	Information density (transaction details + next steps) — match brand DNA
Application received / B2B form submitted	V3 dashboard + `.is-pending`	Information-rich (5-step process), enterprise context
Generic error / failed action	V1 compact + `.is-error`	Simple message, no celebration

🚫 Что нельзя делать на status screens (FINAL · v3.6)¶

❌ Big icon-ring 120+ + большая padding-top + центрирование = пустота сверху. Используй compact 88×88 (V1) или 68×68 (V3 success-bar) с tight spacing.
❌ Status color на primary CTA. Primary CTA ВСЕГДА gold .btn-action. Status цвет только в icon/caption/bar border.
❌ Цветной H1. H1 всегда default white text. Цвет в caption + icon ring.
❌ 5+ vertical sections (icon → h1 → sub → info-grid → actions → timeline → support → ещё) в narrow card 460px. Используй V3 dashboard layout (1100px wide) с horizontal sections.
❌ Custom .h1-success / .h1-thanks / .h1-redirect. Используй .eco-h1-page (canonical) или .auth-success-h1 (для success-bar).
❌ Inline animations в <style> блоке. Используй canonical .is-pulse modifier на .auth-icon-ring.
❌ Зелёный/жёлтый mix на hover button. CSS specificity конфликт — используй .btn-action/.btn-outline (canonical, без conflicts).
❌ Шрифты ниже canonical (cap < 11, body < 14, button < 14). Соблюдай UI Kit v3.3 fonts table выше.
❌ Variant E с card-wide 460 + 4 KPI tiles — не помещается. Используй .auth-dashboard-container 1100.
❌ Steps grid repeat(auto-fit, minmax(220px, 1fr)) на 760 wide card — ломается на 2 cols. Используй .auth-timeline-h (fixed 3-col flex) или responsive collapse на 1024.

Lang switcher + Theme toggle (canonical 32px height)¶

<div class="eco-lang-switcher">
  <button class="eco-lang-btn eco-lang-btn-active" data-lang-btn="ru">RU</button>
  <button class="eco-lang-btn" data-lang-btn="en">EN</button>
</div>
<button class="eco-theme-btn" aria-label="Toggle theme" data-theme-toggle>
  <svg ... /> <!-- moon icon -->
</button>

Атрибуты data-lang-btn и data-theme-toggle обрабатываются theme-lang.js автоматически — никакого inline JS не нужно.

Cards (course-card-big · canonical)¶

Параметр	Значение	Обоснование
Padding	24px	Серия итераций CEO (был 28→18→24 финал)
Gap (flex column)	14px	Воздух между блоками внутри
Border	`1px solid #1A1A1A`	Faint divider
Hover	`translateY(-3px)` + amber shadow	Subtle lift
Variants	`.course-card-flagman` (★ amber glow), `.course-card-vip` (crimson glow), `.course-card-purchased` (green border)	tier-aware accents

Thumb (course-thumb)¶

Параметр	Значение
Height	112px фикс (НЕ aspect-ratio 16/9 — давала 190px пустого)
Icon font-size	80px (+18% от старых 64 + 5% общий)
Background	linear-gradient `#1A1A1A→#050505` (default) / tier-tint→#050505 (.course-thumb-l0…l4)
Border	1px solid #1A1A1A

Locked pattern · tier-color chip top-left (НЕ opacity)¶

Правило: для locked карточек НЕ использовать opacity:0.55 на родителе — утомляет глаз. Вместо этого:

.course-card-locked .course-thumb::after — gradient color overlay (БЕЗ backdrop-filter — он создаёт stacking context и прячет absolute badges)
.course-card-locked .course-thumb::before — chip top-left (10/10) с tier-color border + tier-color text. Содержимое через data-tier:
L1 → «🔒 L1 ONLY» зелёный
L2 → «🔒 L2 ONLY» фиолетовый
L3 → «🔒 L3 ONLY» малиновый
L4 → «🔒 L4 INVITE» steel-blue
L5 → «🔒 L5 TEAM» red
На hover: chip заполняется tier-color (цветной glow box-shadow), overlay тает (opacity 0.45) — видно оригинальную иконку категории сквозь
Inline <span> ★ ФЛАГМАН / 👑 LIMITED · NDA badges: добавлять z-index:10 + box-shadow чтобы быть гарантированно поверх overlay

Tier-badges + Status pills¶

Класс	Значение
`.tier-badge`	Space Mono 11px ls 0.14em · padding 4/10
`.tier-l0` ... `.tier-l4`	tier border + colored text + 5%-opaque tinted bg
`.status-pill`	Space Mono 11px · padding 3/8
Variants	`.status-purchased` (green) · `.status-locked` (faint) · `.status-progress` (amber) · `.status-available` (white)

Btn-org canonical¶

Класс	Значение
`.btn-org`	Inter 600 14px ls 0.04em · padding 12/22 · border 1px
`.btn-org-primary`	amber border+text → amber bg+dark на hover
`.btn-org-success`	green border+text → green bg+dark на hover
`.btn-org-vip`	purple border+text → purple bg+white на hover

<footer class="eco-footer">
  <div class="max-w-[1400px] mx-auto px-6">
    <!-- Triad ВЕРХОМ -->
    <div class="triad-grid" style="margin-top:0; margin-bottom:18px;">
      <a href="https://goldjaxe.com" class="triad-tile tile-purple" target="_blank">
        <div class="triad-caption">goldjaxe.com</div>
        <div class="triad-wordmark"><span class="br">[</span>&nbsp;VISION&nbsp;<span class="br">]</span></div>
        <span class="triad-explore">EXPLORE →</span>
      </a>
      <a href="../ai/landing.html" class="triad-tile tile-gold">…</a>
      <a href="https://goldjaxe.org" class="triad-tile tile-org">…</a>
    </div>

    <!-- Logo + copyright НИЗОМ через divider -->
    <div class="flex items-center justify-between gap-4 flex-wrap pt-4 border-t border-[#1A1A1A]">
      <div class="flex items-center gap-3.5">
        <img src=".../master-cube" class="eco-cube" />
        <div class="eco-wordmark"><span class="gold">GOLDJAXE</span> <span class="br">[ ACADEMY ]</span></div>
      </div>
      <div class="eco-footer-mini">© 2026 GOLDJAXE</div>
    </div>
  </div>
</footer>

Класс	Значение
`.triad-tile`	padding 14/18 · neon hover translate(-2,-2) + tile-color shadow
`.tile-purple/gold/org`	`--tile-r/g/b` для VISION/INNOVATIONS/VAULT
`.triad-caption`	Space Mono 10px ls 0.12em (URL goldjaxe.com)
`.triad-wordmark`	Space Mono Bold 13px (`[ VISION ]`)
`.triad-explore`	Space Mono 9.5px amber/55 (EXPLORE →)
`.triad-current`	gradient + amber line top для текущей локации
Footer copyright	only «© 2026 GOLDJAXE» (юр-детали в legal/)

Light theme overrides (cream cards · pastel thumbs)¶

Все canonical components имеют [data-theme="light"] overrides в том же блоке eco-components.css: - Карточки → cream #ffffff background - Thumbs → pastel tier-tint(15-18%)→#ffffff gradients - Lock chip → white background + tier-color text (на hover → tier-color background + white text) - Footer + triad-tiles → cream/quaternary background - Lang switcher / theme btn → dark border + dark text

Что НЕ менять без явного запроса CEO¶

Padding card 24px
Gap card 14px
Thumb height 112px
Thumb icon 80px
Card title 19px / desc 14px / meta 13px / price 25px
Lock pattern (chip top-left tier-color, БЕЗ opacity)
Wordmark 16.5px (+3% от 16px)
Footer order: triad ВЕРХОМ → logo+copyright НИЗОМ через divider
Triad tile size: padding 14/18 · caption 10px · wordmark 13px · explore 9.5px

Утверждено CEO¶

2026-05-02 после серии итераций на academy/courses.html. Все остальные экраны прототипа должны быть приведены к этому эталону (rollout report — см. wiki/design-system/ecosystem-prototype/UI-KIT-ROLLOUT-2026-05-02.md).

🔒 INPUT FOCUS · canonical v3.7 (FINAL · CEO утвердил 2026-05-03)¶

Все text/email/password/textarea/select/search input'ы в прототипе используют ОДИН focus pattern — белый rgba(255,255,255,0.55) (тот же цвет что у h1 hero «МАШИНА ВАШЕГО» = var(--text-primary), но с opacity 55% для мягкости).

Why¶

Раньше все input'ы при :focus получали border-color: #EBC554 (gold) + иногда box-shadow: 0 0 0 1px #EBC554 (двойная коробка). На gold-перегруженных экранах (landing, checkout, enterprise-form) — это шум на шуме: brand-gold уже доминирует в wordmark, headings, CTA, labels. Gold focus-border не выделяется как «вот, я фокус» — растворяется в общем потоке.

CEO 2026-05-03 итеративно протестировал на реальном landing: 1. Сначала исправили двойную коробку (убрали box-shadow + outline) 2. Затем тестировали 6 не-жёлтых tones (white / steel / cyan / purple / whisper / green) в gallery _focus-tones.html 3. Сначала выбран steel #4573A1 (canonical info из v3.6), но при тестировании на landing в context показалось «синим» — слишком отдельная семантика 4. Финальный выбор — white того же цвета что у h1 hero, но 55% (pure 100% слишком ярко)

Цветовая система (FIXED после v3.7)¶

Цвет	Семантика	Использование
gold #EBC554	Brand action	CTA buttons, accent labels, brand wordmark — НЕ focus
white rgba(255,255,255,0.55)	Focus / neutral input state	input :focus border + caret-color (0.85)
steel #4573A1	Info badges	status `.is-info`, tier-card L4 — НЕ focus (резерв)
green #22C55E	Success	status `.is-success`, valid filled state
amber #EBC554 (тот же gold)	Pending	status `.is-pending` (sub-state в KPI «MAGIC LINK SENT»)
red #EF4444	Error / admin L5	status `.is-error`, auth-card-red theme, validation errors

Canonical specification¶

.eco-input,
input[type="text"].eco-input,
input[type="email"].eco-input,
input[type="password"].eco-input,
input[type="search"].eco-input,
textarea.eco-input,
select.eco-input {
  background: transparent;
  border: 1px solid #525252;
  color: #FFFFFF;
  caret-color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  box-shadow: none;
  transition: border-color 250ms ease, caret-color 250ms ease;
}
.eco-input:focus,
.eco-input:focus-visible {
  border-color: rgba(255,255,255,0.55);
  caret-color: rgba(255,255,255,0.85);
  outline: none;
  box-shadow: none;
}

Modifiers¶

.eco-input.is-code — gold-text variant для code-input на landing (Space Mono Bold 16, letter-spacing 0.15em, color gold). Focus всё равно white.
.eco-search-wrap — flex-wrapper для search с иконкой (single border вокруг icon + input). На :focus-within border → white 0.55.
.auth-card-red .auth-input:focus — исключение: красная тема admin login (gate-admin/login). Focus border остаётся red #EF4444 (это L5 access — danger-context).

Анти-паттерны (запрещено)¶

❌ box-shadow: 0 0 0 1px #EBC554 на focus — двойная коробка (default border + box-shadow)
❌ outline: 3px gold — браузерный default, нет в canonical
❌ border-color: #EBC554 на focus в gold-themed экранах
❌ halo / glow на focus primary inputs — это не CTA, не нужен blur shadow
❌ pure #FFFFFF (100%) на focus — слишком ярко на чёрном, читается как ALERT
❌ Inline :focus { border-color: #EBC554 } на новых экранах — использовать .eco-input или master class

Применение в прототипе (audit 2026-05-03)¶

Экран	Класс	Status
`ai/landing.html`	`.code-input`	✅ white 0.55
`ai/checkout.html`	`.form-input` ×4	✅ white 0.55
`ai/enterprise-form.html`	`.form-input/.form-select/.form-textarea`	✅ white 0.55
`syndicate/new-topic.html`	`.form-input/.form-select/.form-textarea`	✅ white 0.55
`syndicate/home.html`	`.syn-search:focus-within`	✅ white 0.55
`syndicate/topic.html`	`.reply-textarea`	✅ white 0.55
`academy/settings.html`	`.form-input`	✅ white 0.55
`gate-admin/usdt-pending.html`	`.form-input/.form-select/.form-textarea`	✅ white 0.55
`eco-components.css` master	`.auth-input` (через `.auth-card-gold`)	✅ white 0.55
`eco-components.css` master	`.eco-input` + `.is-code` modifier	✅ canonical block добавлен

Pre-deployment checklist для нового input¶

[ ] Default border #525252 1px (или token --border-default для полупрозрачных)
[ ] :focus border → rgba(255,255,255,0.55)
[ ] caret-color на focus → rgba(255,255,255,0.85) (или оставить #FFFFFF если default белый)
[ ] outline: none + box-shadow: none (никаких двойных коробок)
[ ] Transition border-color 250ms ease, caret-color 250ms ease
[ ] НЕ использовать :focus { border-color: #EBC554 }
[ ] НЕ использовать box-shadow: 0 0 0 Npx gold/red/green
[ ] НЕ использовать pure #FFFFFF 100% (слишком ярко)

Files¶

Master CSS: wiki/design-system/ui-kit/eco-components.css блок «🔒 INPUT FOCUS · canonical v3.7» (строка ~1219+)
Demo gallery (для будущих CEO ревью оттенков): ecosystem-prototype/_focus-tones.html

Утверждено CEO¶

2026-05-03. Итеративный процесс: исправление двойной коробки → 6 не-жёлтых tones → финал на white 55% (как цвет h1 hero «МАШИНА ВАШЕГО»). Опции steel/cyan/purple/green отвергнуты как «слишком отдельная семантика», pure white 100% — «слишком ярко».

LIGHT THEME · canonical v2 (FINAL · CEO утвердил 2026-05-03)¶

Premium senior redesign light theme. Перенесён из inline-блока ai/landing.html в master CSS eco-components.css. Применяется автоматически на всех 36 экранах через [data-theme="light"].

Принципы¶

#	Принцип	Реализация
1	Off-white canvas	`body: #FAFAF7` (warm bone) вместо pure white или Apple-cream `#f0ede8`
2	Type contrast	Headings `#0A0A0A` (deep) + `font-weight: 800`. Body 75-82% opacity black
3	Bronze CTAs	`#998018` (deep bronze) для всех action elements — premium read, не «жёлтое инфо» `#EBC554` или `#C9A332`
4	Layered surfaces	Body `#FAFAF7` → cards `#FFFFFF` → multi-layer shadows (1px hairline + soft drop)
5	Stripe-pattern dark footer	Footer `#0E0D0B` (warm charcoal) поверх light body — grounding + brand contrast
6	Borders >> backgrounds	Разделяем плоскости через `rgba(26,26,26,0.08-0.18)` borders, не цветные backgrounds
7	Critical visibility fix	`.price-list li` был `rgba(255,255,255,0.85)` → белый текст на белой карточке (НЕВИДИМО). Теперь `rgba(10,10,10,0.82)`

Canonical color values¶

/* Surfaces */
--body-bg-light:        #FAFAF7;  /* off-white warm bone */
--card-bg-light:        #FFFFFF;  /* pure white surface */
--section-soft-light:   #F5F2EC;  /* academy section gradient */
--footer-bg-light:      #0E0D0B;  /* dark Stripe-pattern footer */
--triad-tile-light:     #181614;  /* triad на dark footer */

/* Text */
--text-deep-light:      #0A0A0A;       /* h1, h2, h3, prices */
--text-body-light:      rgba(10,10,10,0.82);  /* paragraphs */
--text-secondary-light: rgba(10,10,10,0.78);  /* hero sub */
--text-muted-light:     rgba(10,10,10,0.65);  /* captions */
--text-subtle-light:    rgba(10,10,10,0.50);  /* meta */
--text-faint-light:     rgba(10,10,10,0.35);  /* placeholder/separator */
--text-disabled-light:  rgba(10,10,10,0.20);  /* dividers in body */

/* Brand bronze (gold для light) */
--accent-bronze-light:        #998018;  /* premium CTAs · h1 mid-gradient */
--accent-bronze-light-hover:  #6B5510;  /* deep bronze · CTA :hover */
--accent-bronze-soft:         #FFFAEC;  /* tier-primary gradient top */

/* Status colors (deeper для contrast на cream) */
--green-light:    #16A34A;  /* SYS/ONLINE · service-status */
--vip-red:        #6B0000;  /* VIP card border */
--vip-purple:     #7C2D9C;  /* VIP card hover */

/* Borders (rgba black variants) */
--border-soft-light:   rgba(26,26,26,0.06);  /* dividers footer-internal */
--border-default-light: rgba(26,26,26,0.10);  /* card borders */
--border-strong-light: rgba(26,26,26,0.18);  /* input borders */

Specificity strategy¶

Master блок добавлен в КОНЕЦ eco-components.css (после 1539:[data-theme="light"] .eco-theme-btn). Для тех правил, которые перебивают существующие [data-theme="light"] overrides (например body background #f0ede8 → #FAFAF7), поднимаем специфичность через html[data-theme="light"].

/* Старое правило в master (строка ~126): */
[data-theme="light"] body { background: var(--bg-secondary) !important; ... }
/* Новое правило в light v2 (специфичность +1): */
html[data-theme="light"] body { background-color: #FAFAF7 !important; }

Что НЕ трогали (старые light правила сохранены как fallback)¶

Master CSS блок [data-theme="light"] (строки 62-1539) с cream #f0ede8 body, var-based override system, --bg-tertiary cards, и все hardcoded color overrides (text-[#A3A3A3] → var(--text-muted), etc.) остаются для non-landing экранов где light v2 правила не применяются (specificity не перебита) — например academy/syndicate без bg-bg class.

Critical fixes (вошли в v2)¶

Bug	Fix
`.price-list li` белый на белом → невидимо	`color: rgba(10,10,10,0.82)`
`.org-subline` `rgba(255,255,255,0.85)` на light glass header → невидимо	`color: rgba(10,10,10,0.65)`
`.org-nav-link` `rgba(255,255,255,0.70)` на light glass → невидимо	`color: rgba(10,10,10,0.62)`
Footer `INTELLIGENCE·AUTONOMY·PROTOCOL` `#FFFFFF` → ОК на dark footer	сохранили white 85% — теперь footer dark
Grid pattern `rgba(235,197,84,0.04)` → почти не видно на cream	`rgba(26,26,26,0.05)` tonal
H1 gradient `#F8F080→#EBC554→#C9A332` muted на белом	`#C9A332→#998018→#6B5510` (deeper)

Files¶

Master CSS: wiki/design-system/ui-kit/eco-components.css — блок «LIGHT THEME · canonical v2» (строки ~1540-1810)
Reference HTML: ecosystem-prototype/ai/landing.html (visual reference, inline-блок очищен)
Доп. references: applied to all 36 ecosystem-prototype screens автоматически

Verification (post-migration 2026-05-03)¶

Computed styles match expected: - body bg-color: rgb(250, 250, 247) = #FAFAF7 ✓ - .h1-org color: rgb(10, 10, 10) = #0A0A0A ✓ - footer bg-color: rgb(14, 13, 11) = #0E0D0B ✓ - .price-list li color: rgba(10, 10, 10, 0.82) ✓ - Dark theme не сломан: body: rgb(8,8,8), h1: rgb(255,255,255) ✓

Утверждено CEO¶

2026-05-03. CEO: «фиксируем переноси в UI kit все детали сохраняй помечай и раскатывай везде». Распространение на оставшиеся 35 экранов — следующая итерация: visual verification + точечные fixes если selector specificity где-то не перебила inline-styles.

⚠️ SUPERSEDED · этот документ устарел¶

GOLDJAXE AI Ecosystem · UI Kit v3.0 [SUPERSEDED]¶

SCOPE · что покрывает UI Kit¶

✅ Применяется (AI Ecosystem · единая система)¶

❌ НЕ применяется (отдельные продукты)¶

АРХИТЕКТУРА · 2-TIER¶

DESIGN TOKENS¶

Colors¶

Typography¶

Spacing scale¶

COMPONENTS · HEADER¶

Marketing Header (62px) — namespace .org-*¶

Product Header (72px) — namespace .eco-*¶

COMPONENTS · FOOTER¶

Marketing Footer (полная триада + GOLD[JAXE] block + 5 social 50×50)¶

Product Footer (compact) — namespace .eco-footer-*¶

COMPONENTS · CARDS¶

TileTriad — Trinity neon hover (gold/purple/blue/org)¶

ServiceCard — для AI-Panel протоколов¶

COMPONENTS · BUTTONS¶

Square brackets style (Inter Semibold)¶

Tier buttons (крупные · 96px min-height)¶

COMPONENTS · CHIPS¶

H1 · H2 · H3 (headings)¶

Page H1 — canonical (NEW · 2026-05-02)¶

CROSS-LINKS MATRIX (рабочие переходы)¶

REACT COMPONENTS · API SPEC (для Артёма)¶

<EcoHeader /> (унифицированный header)¶

<EcoFooter /> (Product compact)¶

<TileTriad /> (Marketing footer triad)¶

<ServiceCard /> (AI-Panel + Pricing)¶

<TierButton /> (3 уровня доступа в hero)¶

VERSIONING · changelog¶

RELATED¶

🔒 Canonical Components v3 (FIXED 2026-05-03 · CEO утвердил)¶

Header v3 — единый везде (77px)¶

Triad footer (3 тайла VISION / INNOVATIONS / VAULT) — только на landing¶

Footer logo (нижняя часть, рядом с copyright)¶

Шрифты экосистемы (подключение через tokens/fonts.css)¶

Body text canonical (NEW · FIXED 2026-05-03)¶

Secondary captions canonical (FIXED 2026-05-03)¶

Правила Claude (для всех будущих сессий)¶

Layout правила (FIXED 2026-05-03)¶

История версий¶

🚫 Что нельзя делать (FIXED 2026-05-03 — после dashboard audit)¶

Шрифты¶

Размеры¶

Layout¶

Class management¶

Caption-классы (мигрированы 2026-05-03)¶

Pre-deployment checklist (audit одного экрана) · FINAL v3.3¶

A. Подключение¶

B. Header (canonical v3.2 — единый на всех экранах)¶

C. Captions (eco-cap-* — единый шрифт для всех secondary captions)¶

D. Body text (eco-body-* минимум 14px)¶

E. Локальные caption-классы (если есть)¶

F. Footer triad (если есть)¶

G. Footer logo (нижняя часть, рядом с copyright)¶

H. Финальная проверка¶

🔒 AUTH SCREENS · canonical v3.4 (NEW · CEO утвердил 2026-05-03)¶

Variant A · .auth-card-gold — Passwordless / Magic Link¶

Variant C · .auth-card-red + .auth-trust-row — Admin Secure¶

Общие правила (для обоих variants)¶

CSS namespace¶

HTML snippet · Variant A¶

HTML snippet · Variant C¶

Правила выбора варианта¶

🚫 Что нельзя делать на auth screen¶

🔒 SINGLE-CARD SCREENS · canonical v3.5 (NEW · CEO утвердил 2026-05-03)¶

Карта вариантов¶

Variant D · Confirmation (Magic-link sent / 2FA / email verify)¶

Variant E · Status (Success / Pending / Thank-you / Redirect)¶

CSS namespace (расширение)¶

HTML snippet · Variant D (Magic-link sent)¶

HTML snippet · Variant E (Status success)¶

Правила применения¶

🚫 Что нельзя делать на single-card screens (D / E)¶

🔒 STATUS DASHBOARD · canonical v3.6 (FINAL · CEO утвердил 2026-05-03)¶

Принципы дизайна (зафиксированы)¶

Variant V1 · COMPACT FOLD-FIRST¶

Marketing Header (62px) — namespace `.org-*`¶

Product Header (72px) — namespace `.eco-*`¶

Product Footer (compact) — namespace `.eco-footer-*`¶

`<EcoHeader />` (унифицированный header)¶

`<EcoFooter />` (Product compact)¶

`<TileTriad />` (Marketing footer triad)¶

`<ServiceCard />` (AI-Panel + Pricing)¶

`<TierButton />` (3 уровня доступа в hero)¶

Шрифты экосистемы (подключение через `tokens/fonts.css`)¶

Variant A · `.auth-card-gold` — Passwordless / Magic Link¶

Variant C · `.auth-card-red` + `.auth-trust-row` — Admin Secure¶