GOLDJAXE
GOLDJAXE · UI KIT v3.2 · PREVIEW
Light theme + RU/EN · production-ready
← All previews 📄 SPEC
// UI KIT v3.0 · 2-TIER ECOSYSTEM

UI Kit для всей AI-экосистемы

Единая дизайн-система для goldjaxe.ai · Academy · Syndicate · GATE · LinkStack. Marketing-tier 62px (lead-gen) и Product-tier 72px (workspace) с общей визуальной DNA. Все компоненты ниже — copy-paste готовы для разработки.

▸ MARKETING TIER · 62px ▸ PRODUCT TIER · 72px ✓ CSS namespace .org-* / .eco-* ✓ React API spec ✓ Cross-links matrix
// 01 · MARKETING HEADER (Tier 1 · 62px)

Header для лендингов и hero-страниц

Применяется на: ai/hero-v4 · ai/header.html · linkstack · ai/smart-checkout.

▸ Live preview
// 02 · PRODUCT HEADER (Tier 2 · 72px)

Header для logged-in workspace

Применяется на: academy/dashboard · academy/lesson-viewer · syndicate · gate/admin.

▸ Academy variant
▸ Syndicate variant (то же шасси · разный wordmark + sub-line)
[ ВХОД → ]
// 03 · TILE TRIAD · TRINITY NEON HOVER

3 плитки экосистемы (Marketing footer)

VISION → purple #C44DFF · INNOVATIONS → gold #EBC554 · VAULT → точная копия .monolithic-card с goldjaxe.org (crimson #8B0000, без glow blur).

▸ Hover на любую плитку
goldjaxe.com
[ VISION ]

Личный бренд. История. Инвестиции. Музыка основателя.

EXPLORE →
goldjaxe.ai
[ INNOVATIONS ]

AI-Академия. AI-Panel · 9 протоколов. Syndicate. Контент-завод.

CURRENT LOCATION
goldjaxe.org
[ VAULT ]

Enterprise. Кибербезопасность. ЦОД. Физический капитал. Compliance Dubai.

EXPLORE →
// 04 · SERVICE CARDS · UNIFIED GOLD HOVER

Карточки услуг (AI-Panel · Pricing)

CEO утвердил единый стиль .card-gold — все плитки услуг получают gold neon hover.

▸ 3 примера (одинаковый hover-эффект)
01 // DIGITAL TWIN

Цифровой клон CEO 24/7

HEYGEN ELEVENLABS FLUX 2

Голос. Лицо. Тон. Бренд-пресет. Контент 24/7 без личного времени.

[ РАЗВЕРНУТЬ → ] от $2,000
02 // CONTENT FACTORY

Контент-завод автономный

N8N 100+/MO MULTI-CHANNEL

Конвейер: тренды → AI-сценарии → Twin-видео → автопостинг.

[ ЗАПРОСИТЬ → ] по запросу
⭐ TOP
03 // AUTONOMOUS SALES

AI-Клоузер: 12 узлов

N8N KOMMO TG · WHATSAPP

Лид → квалификация → оффер → закрытие сделки в мессенджере.

[ ВНЕДРИТЬ → ] enterprise · NDA
// 05 · BUTTONS · SQUARE BRACKETS STYLE

Кнопки

▸ 4 варианта
[ DEFAULT → ] [ PRIMARY → ] [ SMALL → ] [ LARGE CTA → ]
▸ Tier buttons (для hero pricing · 96px min-height)
[ ИНИЦИИРОВАТЬ FREE → ] L0 · INITIATION PROTOCOL [ $149 NEURO-OPS ↓ ] L1 · 12 МОДУЛЕЙ · CERT [ VIP БОРД ↗ ] L3 · ОТ $3,500 · NDA
// 06 · CHIPS

Чипы и tier-бейджи

DEFAULT ▸ AMBER ⭐ AMBER SOLID ✓ GREEN STATUS ⊘ RED ERROR [ L0 ] [ L1 ] [ L2 ] [ L3 ] [ BOARDROOM ]
// 07 · TYPOGRAPHY · ШКАЛА

Шрифты и letter-spacing

▸ Inter (display · body)
H1 56МАШИНА ВАШЕГО
H2 38ДЕВЯТЬ ПРОТОКОЛОВ
H3 22Цифровой клон CEO 24/7
Body 16От бесплатного нейро-клона до автономной корпорации.
Body 14Description / sub-text · читаемость на всех экранах.
▸ Space Mono (wordmark · captions · nav)
WORDMARK 16GOLDJAXE [ AI ]
SUB-LINE 13L1 · M03 · LESSON 03/5
NAV 12.5PRIVATE CLOUD · INFRASTRUCTURE · DUBAI HUB
CAPTION 12// SECTION HEADER
SLOGAN 11INTELLIGENCE · AUTONOMY · PROTOCOL
// 08 · COLOR PALETTE

Цвета

▸ Brand · Backgrounds · Text · Status
Amber
#EBC554
Purple Neon
#C44DFF
Steel Blue
#4573A1
Crimson .org
#8B0000
BG Secondary
#080808
BG Concrete
#181818
Green
#22C55E
Error
#EF4444
// 09 · CROSS-LINKS · NAVIGATION MATRIX

Связи между продуктами

hero-v4 (.ai)
├─ nav: Academy → ../academy/dashboard.html
│       Syndicate ↗ → ../syndicate/branded-preview.html
│       Vault ↗ → goldjaxe.org (target=_blank)
│       Vision ↗ → goldjaxe.com (target=_blank)
└─ footer triad: VISION/INNOVATIONS/VAULT

academy/dashboard
├─ nav: Dashboard / Курсы → lesson / Сертификаты / Syndicate↗ / AI↗
└─ eco-footer triad: INNOVATIONS → ../ai/hero-v4

academy/lesson-viewer
└─ nav: Dashboard / Курсы(active) / Сертификаты / Syndicate↗ / AI↗

syndicate/branded-preview
├─ nav: Категории / Темы / Academy↗ / AI↗
└─ eco-footer triad: INNOVATIONS → ../ai/hero-v4
// 10 · IMPLEMENTATION · ДЛЯ АРТЁМА

Как использовать UI Kit

▸ Шаг 1: Импорт CSS
<link rel="stylesheet" href="path/to/tokens/fonts.css">
<link rel="stylesheet" href="path/to/ui-kit/eco-components.css">
▸ Шаг 2: Использовать готовые HTML-snippets из spec

См. ui-kit-v3.0.md — раздел COMPONENTS. Для каждого блока (header, footer, card, button) есть копи-пейст HTML.

▸ Шаг 3: React-компоненты (когда нужен JS)
<EcoHeader
  tier="product"
  product="academy"
  subline="L1 · M03 · LESSON 03/5"
  navLinks={[
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Курсы', href: '/courses', active: true },
    { label: 'Сертификаты', href: '/cert' },
    { label: 'Syndicate', href: 'https://syndicate.goldjaxe.ai', external: true },
    { label: 'AI', href: 'https://goldjaxe.ai', external: true }
  ]}
  rightCluster={<ProductRightCluster status="L1 · ACTIVE" />}
/>
// 11 · ECO FOOTER (Product compact)

Footer