Шпаргалка классов eco-components.css

Компактная карта всех 640 CSS-классов дизайн-системы, сгруппированных по секциям. Назначение — дать нейросети контекст без загрузки 236 КБ CSS: скорми модели этот файл + токены + нужный canonical-эталон, и она соберёт интерфейс из существующих классов, не выдумывая свои.

Как пользоваться (для AI-workflow)

1. В контекст модели: CLAUDE.md (правила) + эта шпаргалка (какие классы есть) + dist/tokens.flat.json (значения) + 1–2 эталона из reference/canonical/.
2. Промпт: «собери экран X в стиле GOLDJAXE, используй только классы из шпаргалки и токены --gjx-*/--accent-*, не хардкодь цвета».
3. Полный CSS (src/css/eco-components.css) — только когда нужно уточнить конкретное правило.

Namespace-префиксы (главное правило)

Класс сообщает, для какого «яруса» и среды он предназначен:

Префикс	Ярус / среда	Пример
.org-*, .ai-*	Marketing tier — лендинги, hero (62px)	.org-header, .org-nav-link, .btn-org
.eco-*	Product tier — workspace: academy / syndicate / gate (72px)	.eco-header, .eco-nav-link, .eco-footer
.pt-* .lb-* .pl-* .pn-*	Pult-заголовки (варианты панелей)	.pt-nav, .pt-brand
.vis-*	Vision — goldjaxe.com	.vis-*
.vault-*	Vault	.vault-*
.pt-pp-*	Paspart — drill-down панель	.pt-pp-*
.auth-* .cert-* .dashboard-* .course-* .tier-* .triad-*	Компонентные группы (формы входа, сертификаты, дашборд, карточки, триада)	.auth-input, .tier-card

Не смешивай ярусы: marketing-разметку (.org-*) не ставят в product-экраны (.eco-*) и наоборот.

Быстрый старт (частые классы)

• Header (product): .eco-header → .eco-wordmark .eco-nav-link .eco-nav-active .eco-profile-btn
• Кнопки: .btn-org (default) · .btn-org-primary (CTA) · .tier-btn .tier-btn-primary (pricing)
• Карточки: .service-card+.card-gold · .course-card · .stat-card · .tier-card
• Чипы/бейджи: .chip · .chip-amber · .chip-amber-solid · .chip-green · .chip-red
• Формы: .auth-input .auth-label (+ атрибут data-validate для JS-валидатора)
• Footer: .eco-footer → триада .triad-tile .triad-wordmark
• Заголовки: .eco-h1-page (H1 страницы) · иерархия caption md/sm/xs, body lg/md/sm

Интерактив (модалки, тосты, валидация форм) — vanilla-JS модули src/js/*, живьём на интерактивных стендах.

Эталоны

Few-shot для нейронки — готовые экраны в reference/canonical/landings/: Academy (dashboard, courses, lesson-viewer, lesson-quiz, certificate, pricing, onboarding, login) и linkstack. Копируй структуру эталона, не изобретай.

---

Карта классов по секциям

Сгенерировано из src/css/eco-components.css. Номера строк — для навигации по исходнику.

HEADER IMMUTABILITY · LIGHT THEME · v4.4.17

стр. ~132

eco-header · eco-wordmark · br · eco-subline · eco-nav-link · eco-nav-active · ext · eco-search · key · eco-lang-btn · eco-lang-btn-active · eco-theme-btn · eco-profile-btn · text-white · eco-status-chip · investor-chip

PULT HEADER · LIGHT THEME · v4.63.6

стр. ~165

bp-view-link · pt-nav · lb-nav · pl-nav · pn-nav · is-active · pt-top-note · lb-top-note · pl-top-note · pn-top-note · pt-brand · lb-brand · pl-brand · pn-brand · pt-theme · lb-theme · pl-theme · pn-theme · pt-lang-switcher · lb-lang-switcher · pl-lang-switcher · pn-lang-switcher · pt-lang-btn · ai-lang-btn-active · lb-lang-btn · pl-lang-btn · pn-lang-btn

AUTH CARDS IMMUTABILITY · LIGHT THEME · v4.4.17

стр. ~280

auth-card · eco-h1-page · auth-success-h1 · eco-body-sm · auth-success-sub · auth-context · auth-context-sep · auth-label · auth-input · btn-auth-gold · auth-footer-info

DASHBOARD V4 CARDS · LIGHT THEME · v4.4.17

стр. ~317

dashboard-hero-action · dashboard-hero-stat · course-card · continue-card · stat-card · tier-card · dashboard-hero-stat-val · stat-num · dashboard-hero-stat-cap · stat-cap · dashboard-hero-title · dashboard-hero-progress-bar · progress-bar · course-card-locked

TIMELINE ROWS · LIGHT THEME · v4.4.17

стр. ~364

profile-acc · eco-timeline-row · profile-acc-body · eco-timeline-when

CERTIFICATE STAGE · LIGHT THEME · v4.4.17

стр. ~384

cert-stage · cert-paper · cert-course · cert-course-sub · cert-issued · cert-stat-label · cert-cap · cert-cap-sub · bottom-cap · bottom-val · cert-stat-value · cert-divider · cert-inner-border · cert-toolbar · toolbar-btn-primary · toolbar-btn

FOOTER · LIGHT THEME · v4.4.17

стр. ~449

eco-footer · eco-wordmark · gold · br · eco-footer-wordmark · eco-footer-mini · triad-tile · triad-caption · triad-wordmark · border-t

PAGE-LOCAL LIGHT THEME FALLBACKS · v4.11.1 audit fix 2026-05-09

стр. ~482

option · option-text · question-card · investor-portal-h1 · investor-h1 · auth-context · email-display-row · change-link · auth-cross-link · billing-current-card · price-block-free

BTN HOVER · LIGHT THEME · v4.4.17

стр. ~508

btn-ai-success · btn-ai-vip · btn-ai-investor · btn-action

TAILWIND/HARDCODED COLOR OVERRIDES для LIGHT THEME

стр. ~527

bg-bg · bg-bg-secondary · bg-bg-tertiary · bg-bg-concrete · bg- · text-white · text- · text-amber · bg-amber · border-amber · border- · border-bg-tertiary · current-stripe · mono-caption-org · mono-caption-link · gold-wordmark-f · gold-wordmark · triad-desc · font-mono · uppercase · h1-org · h2-org · code-input · btn-ai · btn-ai-primary · tier-btn · tier-title · tier-sub · service-card · card-body-text · triad-tile · triad-caption · triad-wordmark · br · triad-current · chip · mono-cap-xs · mono-cap-sm · mono-cap · eco-footer · eco-footer-wordmark · eco-triad-link · eco-social · eco-search · key · eco-profile-btn · eco-status-chip · triad-explore · gold-color · cube-glow · cube-glow-f · slogan-1 · slogan · slogan-2 · cursor-blink · social-icon · border-t · tier-btn-primary · tier-bracket

🔒 MARKETING HEADER · namespace .ai-*

стр. ~773

ai-header · ai-logo · ai-cube · ai-cube-h · ai-wordmark · gold · br · ai-subline · ai-nav · ai-nav-link · ai-nav-active · ext · ai-status-badge · ai-lang-switcher · ai-lang-btn · ai-lang-btn-active · ai-theme-btn

🔒 HEADER CANONICAL v3.2

стр. ~847

eco-header · eco-logo · eco-cube · eco-wordmark · gold · br · eco-subline

🔒 SECONDARY CAPTIONS — иерархия md/sm/xs

стр. ~892

eco-cap-md · eco-cap-sm · eco-cap-xs

🔒 BODY TEXT — иерархия lg/md/sm

стр. ~919

eco-body-lg · eco-body-md · eco-body-sm · eco-nav · eco-nav-link · eco-nav-active · ext · eco-status-chip · eco-search · key · label · eco-profile-btn

PRODUCT FOOTER

стр. ~995

eco-footer · eco-footer-cube · eco-footer-wordmark · gold · br · eco-footer-tagline · eco-triad-inline · eco-triad-link · eco-triad-current · eco-social

TILE TRIAD

стр. ~1031

triad-tile · triad-wordmark · triad-caption · br · triad-desc · triad-current · triad-current-dot · tile-purple · tile-gold · tile-org · vis-header · vis-logo · vis-cube-h · vis-wordmark · accent · vis-subline · vis-nav · vis-nav-link · vis-nav-active · ext · btn-vision · vis-h1-luxury · vis-card-luxury · vault-header · vault-logo · vault-cube-h · vault-wordmark · vault-subline · vault-nav · vault-nav-link · vault-nav-active · btn-vault · vault-h1-corporate · vault-pricing-table · is-highlighted · vault-compliance-row · vault-compliance-badge

SERVICE CARD

стр. ~1170

service-card · card-gold · card-purple · card-blue

BUTTONS · square brackets style

стр. ~1197

btn-ai · btn-ai-primary · btn-group · btn-action · btn-auth · eco-timeline-row · eco-timeline-when · eco-timeline-text · icon · tier-btn · tier-btn-primary · tier-title · tier-sub · tier-bracket

CHIPS

стр. ~1272

chip · chip-amber · chip-amber-solid · chip-green · chip-red

HEADINGS · Inter

стр. ~1288

h1-org · h2-org

UTILITIES

стр. ~1313

tnum · cursor-blink

UNIFIED MARKETING FOOTER · полная триада + GOLD[JAXE] big block + 5 social 50×50

стр. ~1322

cube-glow · mono-caption-org · mono-caption-link · triad-col-wordmark · br · current-stripe · social-icon · grid-bg · glow-radial

Light theme overrides for local