▸ Section 01
Read this FIRST
Любой новый элемент / блок / страница / модуль экосистемы начинается здесь. Не пропускать.
▸ Алгоритм при создании любого UI
┌────────────────────────────────────────────────────┐
│ 1. Открыть этот документ │
│ 2. Открыть ui-kit-v4.1.md (правила + детали) │
│ 3. Открыть eco-components.css (master CSS) │
│ 4. Найти domain (.eco / .ai / .vis / .vault) │
│ 5. Найти canonical pattern (V1 / V3 / V4 / V6) │
│ 6. Использовать canonical классы (БЕЗ дублей в │
│ локальных <style>) │
│ 7. Прогнать Pre-deployment checklist (раздел 13) │
│ 8. Применить privacy-lint перед commit │
└────────────────────────────────────────────────────┘
Single source of truth chain
| Что | Где | Когда читать |
|---|---|---|
| Master CSS | ui-kit/eco-components.css | Перед любой правкой стилей |
| UI Kit doc | ui-kit/ui-kit-v4.1.md | Перед созданием любого нового UI |
| Visual library | GOLDJAXE-DESIGN-SYSTEM.html (этот файл) | Когда нужно «увидеть» компонент |
| Tokens | tokens/ (CSS vars, fonts) | Только для understanding · не trogать |
| Production prototype | ecosystem-prototype/ | Reference для customer journeys |
| Memory | /.claude/.../memory/feedback_* | При re-entry в design сессию |
▸ Section 02
Identity · cube + favicons
Master cube — единый символ холдинга. 7 hue-вариаций для favicons экосистемы.
Master cube (transparent · 512px)
primary
▸ Master file
brand-system-v1/logos/master/master-transparent-512.png
512×512 PNG transparent · gold gradient #C9A332 → #EBC554 → #F8F080. Drop-shadow glow 11px на header (44×44), 16px на footer hero, 32px+ на large display.
Single asset для всех 4 domain (.eco / .ai / .vis / .vault). Domain accent применяется через CSS (не в файле).
7 favicon hue-variants
Семь оттенков master cube — для browser favicon различения tabs holding в открытом порядке:
ai · gold
academy · green
syndicate · purple
gate · red
com · violet
org · crimson
L4 investor · steel
▸ Section 03
Typography · 4 fonts
4 шрифта · железобетонные правила использования. Главное правило: cyrillic + Space Mono = всегда нарушение.
| Font | Use case | Cyrillic-safe |
|---|---|---|
| Inter | Body, h1, h2, paragraphs, кнопки, формы | ✅ Yes |
| Space Mono Bold | Wordmark GOLDJAXE [ X ] (latin), nav-links (latin only) | ❌ NO для cyrillic |
| JetBrains Mono Bold | Subline, captions, table headers, status (cyrillic-safe) | ✅ MANDATORY для всех cyrillic captions |
| Space Grotesk | Display headlines (изредка) | ✅ Yes |
Type specimen · canonical sizes
scale
Заголовок страницы
Compact заголовок
GOLDJAXE [ ACADEMY ]
L0 · MY PROTOCOLS
▸ ВНУТРИ ВЫ НАЙДЁТЕ
▸ В ПРОЦЕССЕ
▸ MIN READABLE
Body large — для hero sublines и важных параграфов.
Body medium — стандартный body text для длинных параграфов.
Body small — минимально допустимый размер. Меньше — запрещено.
ACADEMY · AI-PANEL · SYNDICATE
Cyrillic rule (closed precedent #1)
✓
JBM Bold для cyrillic captionsClass
.eco-cap-sm (или Inter для body) — cyrillic-safe, hinting сохранён.✗
Cyrillic в Space MonoТеряет hinting, выглядит «битым» на small sizes. Закрытый прецедент №1.
▸ Section 04
Colors · brand + status + tier
Полная палитра. Status colors ≠ brand action — критическое правило.
Brand · gold gradient
Gold gradient
#F8F080 → #EBC554 → #C9A332
Gold primary
#EBC554
Gold light
#F8F080
Gold deep
#C9A332
Status · outcome semantics
🔒 Status colors ≠ brand action. Status (green/amber/red) — только для outcome indicators. Brand primary CTA = всегда gold .btn-action.
Success / Online
#22C55E
Pending / Your-move
#EBC554
Error / Fail / Admin
#EF4444
Info / Steel
#4573A1
Tier colors · продукт пирамида L0–L5
L0 Initiate
white-neutral
L1 Operator
#22C55E
L2 Architect ★
#C44DFF
L3 Boardroom VIP
#8B0000
L4 Investor
#4573A1
L5 Admin
#EF4444
Cyber neutrals · dark theme bg ladder
--bg-secondary
#080808
--bg-primary
#050505
--bg-tertiary
#1A1A1A
--bg-quaternary
#525252
Opacity tokens · 9 уровней (master CSS truth · no magic numbers)
6 уровней text hierarchy + 3 borders. Значения — реальные из master eco-components.css (single source of truth).
| Token | Value (dark) | Value (light) | Use |
|---|---|---|---|
| --text-primary | #FFFFFF (100%) | #1a1a1a | H1, hero, brand-strong |
| --text-secondary | rgba(255,255,255,0.85) | rgba(26,26,26,0.80) | Body, h2, secondary |
| --text-muted | rgba(255,255,255,0.70) | rgba(26,26,26,0.65) | Captions, meta, descriptions |
| --text-faint | rgba(255,255,255,0.55) | rgba(26,26,26,0.50) | Tertiary, dividers labels |
| --text-subtle | rgba(255,255,255,0.40) | rgba(26,26,26,0.35) | Hint, soft labels |
| --text-disabled | rgba(255,255,255,0.30) | rgba(26,26,26,0.25) | Placeholder, disabled state |
| --border-strong | rgba(255,255,255,0.20) | rgba(26,26,26,0.20) | Visible separator |
| --border-default | rgba(255,255,255,0.12) | rgba(26,26,26,0.12) | Default border |
| --border-faint | rgba(255,255,255,0.06) | rgba(26,26,26,0.06) | Subtle border |
▸ Section 05
4 Domains · namespaces
Каждый visual domain имеет свой namespace в master CSS. Структура одинаковая (header 77 / cube 44 / wordmark 17.5), отличается accent color + некоторые domain-specific classes.
.eco-*
Product
Logged-in apps: Academy / Syndicate / GATE Admin. Gold accent. Все user-facing экраны экосистемы внутри логина.
.eco-header · .eco-cube · .eco-wordmark · .eco-nav-link · .eco-status-chip · .eco-search · .eco-profile-btn · .eco-h1-page · .eco-cap-md/sm/xs
.ai-*
Marketing AI
goldjaxe.ai marketing: hero landing, smart-checkout, linkstack. Gold accent. Renamed from .org-* в v4 (для clarity).
.ai-header · .ai-cube-h · .ai-wordmark · .ai-nav-link · .ai-status-badge · .btn-ai-primary · .btn-ai-success · .btn-ai-vip
.vis-*
Vision · goldjaxe.com
Personal brand · Music · Investments · Stories. Purple accent #C44DFF. Готов в master CSS, ждёт первого лендинга.
.vis-header · .vis-cube-h · .vis-wordmark · .vis-nav-link · .btn-vision · .vis-h1-luxury · .vis-card-luxury
.vault-*
Vault · goldjaxe.org
Enterprise · B2B · Cybersec · DC · Compliance. Crimson accent #8B0000. Готов в master CSS, ждёт первого лендинга.
.vault-header · .vault-wordmark · .btn-vault · .vault-h1-corporate · .vault-pricing-table · .vault-compliance-row · .vault-compliance-badge
▸ Section 06
Headers · 4 namespaces
Все 4 namespace используют идентичную structure (77 / 44 / 17.5 / 14 JBM). Отличие — accent color на cube glow + wordmark.
.eco-* / .ai-* · gold accent
Product / Marketing AI
GOLDJAXE [ ACADEMY ]
L0 · MY PROTOCOLS
.vis-* · purple accent (Vision · goldjaxe.com)
Vision · luxury
GOLDJAXE [ VISION ]
VISION · LUXURY · MUSIC
.vault-* · crimson accent (Vault · goldjaxe.org)
Vault · enterprise
GOLDJAXE [ VAULT ]
ENTERPRISE · B2B · COMPLIANCE
Specs · железобетон
| Element | Value |
|---|---|
| Height | 77px |
| Background | rgba(18,18,22,0.88) + backdrop-filter blur(8px) |
| Cube | 44×44 + drop-shadow 11px (accent rgba 0.35) |
| Wordmark | Space Mono Bold · 17.5px · ls 0.07em · line-height 1 |
| Subline | JBM Bold · 14px · ls 0.14em · text-secondary · uppercase · margin-top 5 |
| Nav-link | Space Mono 400 · 12.5px · ls 0.14em · uppercase · padding 0 14px · nowrap (latin only) |
| Status chip | height 36px · padding 0 12px · nowrap |
| Lang switcher | height 32px · btn 38×30 · Space Mono |
| Theme button | 34×32 · border 1px var(--border-default) |
▸ Section 07
Footer + Triad
Two footer types: Full landing footer (полная триада + GOLDJAXE big block + 5 social) · Product compact footer (мини-триада + cube logo + copyright).
Triad footer · canonical Variant A
🔒 Closed precedent #3: только симметричный glow + translateY(-3). Никаких brutalist 8×8 diagonal box-shadows.
Triad · all 4 domains
▸ Hover на tile → симметричный glow translateY(-3) · current tile получает amber top-line + pulsing dot top-right
Footer logo · uniform header+footer 44/17.5
Footer compact
GOLDJAXE [ HOLDING ]
INTELLIGENCE · AUTONOMY · PROTOCOL
▸ Section 08
Buttons
Square brackets format [ ТЕКСТ → ] — signature visual style. Brand primary = gold .btn-action everywhere.
Brand action (gold) — universal CTA
.btn-action / .btn-outline
Domain-specific accent CTAs
.btn-vision (purple) / .btn-vault (crimson) / .btn-ai-success (green) / .btn-ai-vip (purple)
| Class | Color | Use |
|---|---|---|
| .btn-action | gold | Brand primary · everywhere main CTA |
| .btn-outline | neutral · hover gold | Secondary actions |
| .btn-ai / .btn-ai-primary | gold | goldjaxe.ai marketing |
| .btn-vision | purple #C44DFF | goldjaxe.com primary CTA |
| .btn-vault | crimson #8B0000 | goldjaxe.org primary CTA |
| .btn-ai-success | green #22C55E | L0 Free CTAs (Academy onboarding) |
| .btn-ai-vip | purple #C44DFF | L3 VIP / luxury CTAs |
| .btn-ai-skip | text-only | Skip / dismiss actions |
▸ Section 09
Cards
9 семейств карточек: course-cards (academy) · service-card (AI-Panel) · auth-cards (login) · success-bar (status V3) · KPI tiles + Timeline (V3) · hero-action (V4) · Vision luxury (.com) · Vault pricing (.org).
| Family | Classes | Use |
|---|---|---|
| Course cards | .course-card-big · -flagman · -vip · -locked · -purchased | Academy курсы каталог |
| Service cards | .service-card · .card-gold · .card-purple | AI-Panel landing 9 услуг |
| Auth cards | .auth-card-gold (Variant A) · .auth-card-red (Variant C) · .auth-card-wide (520px) | Login screens, status confirmations |
| Success-bar (V3) | .auth-success-bar + .is-success/-pending/-error/-info | Status / completion screens |
| KPI tiles (V3) | .auth-kpi-row + .auth-kpi-tile | Dashboard 4-column metrics |
| Timeline (V3) | .auth-timeline-h + .auth-timeline-h-step | 3-step horizontal progress |
| Hero-action (V4) | .dashboard-hero-action + .dashboard-hero-stats | Active user dashboards (academy) |
| Vision luxury (.com) | .vis-card-luxury | goldjaxe.com brand cards |
| Vault pricing (.org) | .vault-pricing-table + .vault-compliance-row | goldjaxe.org enterprise |
▸ Section 10
Inputs · focus white v3.7
🔒 Closed precedent #7: focus = white border rgba(255,255,255,0.55) + caret rgba(255,255,255,0.85). НЕ gold, НЕ box-shadow, НЕ outline, НЕ pure white.
.eco-input · попробуй focus
▸ Modifier .is-code — Space Mono · gold caret · large letter-spacing для master keys.
▸ Section 11
Tabs · Nav · Pills
Tabs · секционная навигация
.tabs · .tab · .tab-action
Live TX 7
Users 847
Codes 128
Queue 3
Tier pills · продукт пирамида
.tier-pill · L0/L1/L2/L3/L4
L0 · INITIATE
L1 · OPERATOR
L2 · ARCHITECT ★
L3 · BOARDROOM
L4 · INVESTOR
Role badges · admin sidebar
.role-badge · root / ops / audit
▸ ROOT
▸ OPS
▸ AUDIT
Breadcrumb
.breadcrumb
▸ Section 12
4 Patterns · canonical templates
При создании новой страницы — найти подходящий pattern. Если ни один не подходит — это commit с расширением v4.x.
▸ V1
Compact Fold-First
Single-card · 760px max-width
Simple confirmations: auth-magic-link, checkout-redirect, locked. Icon-ring 88×88 + heading + sub + 2 CTAs. Body normal flow.
→ Live example
▸ V3
Dashboard Style
Info-rich status · success-bar + KPI + timeline
Status / completion screens: checkout-success, enterprise-thanks, lesson-completed. Compact horizontal success-bar (icon 68 + h1 + sub + CTA) → 4 KPI tiles → 3-step horizontal timeline.
→ Live example
▸ V4
Hero-Action
Active dashboard · continue + 4 stats
Active user dashboards (academy/dashboard) где continue-action — primary CTA. Layout: hero-row 1.4fr (continue card amber-glow) · 1fr (4 mini-stats 2x2). Под ним — список курсов.
→ Live example
▸ V6
OPS Deck Hybrid
Admin · Linear+Stripe+Datadog
GATE Admin (gate-admin/dashboard) · sidebar 64↔240 + topbar (search · live · OPS/CEO toggle) + KPI strip (4 + system health) + action queue 38% + tabbed table 62%. Persona-toggle меняет density.
→ Live example
▸ Section 13
Customer journeys
8 magistralные customer paths через все 36 экранов прототипа. Reference для understanding flow при правке любого экрана.
01
Guest → L0 Free Academy
landing → войти → academy/login → magic-link → onboarding → dashboard → lesson
→
02
L1 buyer · Prodamus · $149
landing → tier select L1 → checkout?product=L1 → checkout-redirect → checkout-success → academy/dashboard L1
→
03
L2 ★ Флагман · $890
landing → tier select L2 → checkout?product=L2 → success → academy/courses L2 unlocked
→
04
L3 VIP Enterprise · $3,500
landing → tier select L3 → enterprise-form → enterprise-thanks → manual onboarding
→
05
B2B service request · 9 popup-услуг AI-Panel
landing#ai-panel → service modal → enterprise-form → thanks
→
06
Custom integration · ПРОТОКОЛ СВЯЗИ
landing → enterprise-form (custom) → manual onboarding
→
07
Cross-product → Academy (auth-aware)
landing#academy → click → если guest: login · если logged-in tier-based: dashboard / investor-portal / admin
→
08
Cross-product → Syndicate (SSO)
landing → click Syndicate → если guest: login?return=syndicate (Academy IdP) → SSO opens Syndicate
→
▸ Section 14
Pre-deployment checklist
Перед публикацией нового экрана / блока — пройти все 10 секций A-J.
| Section | Check |
|---|---|
| A · Подключение | fonts.css + design-tokens.css + eco-components.css в head + anti-flash theme/lang script |
| B · Header | Canonical .eco/.ai/.vis/.vault namespace · 77/44/17.5/14 · cube link к /home |
| C · Captions / typography | Cyrillic captions = JBM Bold · body ≥14px · h1 = .eco-h1-page |
| D · Colors | Text/border/bg = var(--*) · brand/status/tier hex preserved |
| E · CTAs | Primary = .btn-action или domain-specific · square brackets format · status colors не для CTA |
| F · Footer triad | Variant A canonical · current dot pulsing · EXPLORE/CURRENT тексты удалены |
| G · Footer logo | Cube 44 + wordmark 17.5 + tagline JBM 14px · 5 social обязательны |
| H · Light/dark + mobile | Theme toggle работает · resize 375/768/1024/1440 не ломается · все var() defined |
| I · Compact-fold | Status/dashboard screens fit в 1440×900 · canonical V1/V3/V4/V6 pattern |
| J · Privacy + commit | python3 /claude/scripts/lint-privacy.py · make done type=X msg="..." · никаких личных финансов CEO |
▸ Section 15
Anti-patterns · 16 closed precedents
Список того что НИКОГДА не делать. Повторение = регресс. CEO утвердил каждый.
✗
1. Cyrillic в Space MonoВсегда JBM Bold для cyrillic captions/buttons. Closed precedent #1.
✗
2. Status color как primary CTABrand action всегда gold .btn-action. Status (green/amber/red) только для outcome. Closed precedent #2.
✗
3. Brutalist 8×8 box-shadow на triad hoverVariant A — симметричный glow + translateY(-3). Closed precedent #3.
✗
4. font-size: 10/11/12px на bodyМинимум 14px (eco-body-sm). Меньше — нечитаемо.
✗
5. .h1-dash/login/syn/admin/inv/checkoutDeprecated. Используй .eco-h1-page или .eco-h1-page-tight.
✗
6. .mono-cap-xs/sm/.mono-capDeprecated. Используй .eco-cap-xs/sm/md (JBM Bold cyrillic-safe).
✗
7. Hardcoded rgba(255,255,255,X) на text/borderИспользуй var(--text-*) / var(--border-*) — multi-theme support.
✗
8. .eco-*-c namespaceDeprecated v4, удалён. Используй прямо .eco-*.
✗
9. .org-* namespaceDeprecated v4, переименован в .ai-*. Никогда не возвращай.
✗
10. Big icon-ring 140×140 на dashboardИспользуй success-bar 68×68 horizontal. Compact-fold принцип.
✗
11. EXPLORE → / CURRENT LOCATION тексты в triadУдалены. Используй .triad-current + pulse-dot.
✗
12. Тестовые status-chip 30pxCanonical 36px. Compact lang-switcher = 32px (это другое).
✗
13. Локальные дубликаты canonical классов в <style>Используй master CSS. Дубль = drift.
✗
14. Magic opacity values (0.78/0.92/0.65)Только 5 канонических уровней (0.85/0.70/0.55/0.40/0.30) + 3 borders (0.20/0.12/0.06).
✗
15. 2-tier архитектура (header 62/72)Отменена. Единый 77px на всех экранах.
✗
16. mb-12 py-12 font-size:18px на single-purpose экранахСоздаёт «чёрные дыры» без контента. Compact spacing -30%.
▸ Section 16
Behavior rules · railroad
При любом UI work следуй этим 6 правилам. Никаких исключений.
1
First read this docКаждый раз при создании новой страницы / блока / компонента — открыть этот документ + UI Kit v4.1 + master CSS.
2
Найти canonical patternЕсли pattern уже есть (V1/V3/V4/V6) — используй его. Не создавай свой.
3
Расширение canonical = только через v4.x updateЕсли нужен принципиально новый pattern — это commit с расширением UI Kit. CEO утверждает.
4
Domain-first выбор namespaceПеред версткой определи domain — product (.eco) / marketing AI (.ai) / Vision (.vis) / Vault (.vault).
5
Pre-deployment checklist обязательныйНе commitить без всех ✅ в checklist (Section 14).
6
Documentation updateЕсли что-то новое в master CSS — обновить ui-kit-v4.1.md и этот документ.
▸ Section 17
Artyom · Production + MCP integration
Когда Артём портирует prototype в Next.js production, и как использовать MCP server для автоматизации новых страниц.
Stack для production port
| Layer | Tool |
|---|---|
| Framework | Next.js 14 + React 18 |
| Styling | Tailwind CSS v3 (preset из tokens/tailwind-preset.cjs) |
| Components | shadcn/ui (если headless нужны) + custom built по prototype |
| i18n | next-intl (словари из ui-kit/i18n/ru.js + en.js · 748 keys, 43 namespaces) |
| Auth | NextAuth + Magic Link через Kommo SMTP (Academy = главный IdP) |
| Payments | Prodamus webhook + USDT через Kommo CRM |
React component mapping
| Prototype HTML | React component |
|---|---|
| Header (any namespace) | <EcoHeader domain="ai|eco|vis|vault" /> |
| Footer triad + GOLDJAXE block | <EcoFooter /> |
| Auth Variant A login | <AuthCardGold /> |
| Auth Variant C admin login | <AuthCardRed /> |
| V1 compact status | <StatusCardCompact variant="success|pending|error|info" /> |
| V3 dashboard | <DashboardSuccessBar /> + <DashboardKpiRow /> + <DashboardTimelineH /> |
| V4 hero-action | <DashboardHeroAction /> + <DashboardHeroStats /> |
| V6 admin | <AdminLayout sidebar={…} topbar={…} mode="ops|ceo" /> |
▸ MCP integration (vision)
GOLDJAXE Design System MCP server
В будущем Claude через MCP сможет напрямую генерировать canonical components в production code. План:
- MCP server читает
eco-components.css+ui-kit-v4.1.md - Знает все canonical classes + variants + 4 namespace
- При запросе «add header» — выбирает правильный namespace по domain context
- При запросе «add status screen» — генерирует V1 или V3 с правильными tiles
- При запросе «add new button» — gold .btn-action или domain accent
- Pre-flight check: запускает privacy-lint + checklist
Implementation: handoff к Артёму (Phase 7+ железобетонизации). Code skeleton — handoffs/2026-05-04-artyom-mcp-integration.md (планируется).
Steps для Артёма (когда стартует production port)
- Скопировать
tokens/+ui-kit/eco-components.cssв Next.jspublic/styles/ - Импортировать в
_app.tsxилиglobals.css - Создать React components per mapping выше (используя classes из master)
- Реализовать customer journeys per
cross-domain-ux-spec.md - SSO через NextAuth (Academy = IdP, shared cookies
.goldjaxe.ai) - Подключить MCP server для автоматизации (когда будет готов)
▸ Section 18
Versioning history
Append-only. История эволюции дизайн-системы.
| Version | Date | Что добавлено / изменено |
|---|---|---|
| v1.0 | 2026-04-15 | Initial design system |
| v2.0 | 2026-04-26 | Inter в headings (отказ от Space Grotesk), triad footer canonical |
| v2.1 | 2026-04-29 | Master cube + 7 favicon hue-variants |
| v2.4 | 2026-05-01 | .org-proportions copy 1:1 (deprecated в v3) |
| v3.0 | 2026-05-02 | UI Kit canonical, ecosystem-prototype init, light theme v1 |
| v3.1 | 2026-05-02 | Subline JBM Bold (cyrillic fix) |
| v3.2 | 2026-05-03 | Header unified 77px (2-tier отменён) · nav nowrap padding 14 |
| v3.3 | 2026-05-03 | Body text canonical, eco-cap-md/sm/xs, cyrillic→JBM везде |
| v3.4 | 2026-05-03 | Auth Variant A gold + Variant C red admin |
| v3.5 | 2026-05-03 | Single-card screens canonical |
| v3.6 | 2026-05-03 | Status screens · V1 compact + V3 dashboard |
| v3.7 | 2026-05-03 | Input focus white v3.7 |
| Light v2 | 2026-05-03 | Light theme premium (off-white #FAFAF7 + bronze #998018) |
| V4 hero-action | 2026-05-04 | .dashboard-hero-action pattern (academy/dashboard) |
| V6 admin | 2026-05-04 | OPS Deck Hybrid (gate-admin/dashboard production) |
| Light v3 distribution | 2026-05-04 | 1,297 replacements hardcoded → var(--text-*) на 34 files |
| v4.0 | 2026-05-04 | Железобетонизация · namespace .org→.ai rename · added .vis-* (Vision .com) + .vault-* (Vault .org) · cleanup deprecated · canonical V4 additions · этот документ как single source of truth |