02 · Tokens Canonical · палитры, типографика, spacing, motion¶

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

Все цвета / шрифты / отступы / переходы взяты не из воздуха. Они зафиксированы как tokens в tokens/design-tokens.css и tokens/design-tokens.json (W3C формат). Хардкод значений в HTML/CSS = anti-pattern: theme не переключится, контраст сломается, brand drift начнётся.

Этот файл — каталог tokens с правилом «когда что использовать» и semantic mapping.

Color palettes¶

Dark canonical (default theme)¶

Backgrounds¶

--bg-primary    #080808    Page bg
--bg-secondary  #0E0D0B    Cards / sections / dark footer Stripe-pattern
--bg-tertiary   #1A1A1A    Hover states / nested cards / inverse text on light
--bg-quaternary #181614    Triad tiles на dark footer

Text¶

--text-primary    #FFFFFF                       H1 / body main / cert title
--text-secondary  rgba(255,255,255,0.85)        Subtitles / important meta
--text-muted      rgba(255,255,255,0.65)        Body text / nav-link / labels
--text-faint      rgba(255,255,255,0.45)        Captions / timestamps / status
--text-subtle     rgba(255,255,255,0.30)        Disabled / decorative

Brand · Amber Gold (4 stops)¶

--accent-amber-light  #F8F080    Highlight / cert-name foil top stop
--accent-amber        #EBC554    PRIMARY brand gold · CTAs dark / borders gold
--accent-amber-mid    #C9A332    Cert-name foil bottom stop / hover dark
--accent-amber-dark   #998018    PRIMARY CTAs LIGHT theme · deep bronze
--accent-amber-darker #6B5510    Gradient end stops light

Rule: В dark theme primary CTA = #EBC554. В light theme — #998018 (deep bronze · НЕ #EBC554 яркое).

Status colors (semantic)¶

--accent-green        #22C55E    Success / active / в процессе (dark theme)
--accent-green-deep   #16A34A    Success дeep на light theme (контраст)
--accent-purple       #9933E6    VIP / boardroom (dark)
--accent-purple-vip   #C44DFF    VIP brighter accent
--accent-red          #8B0000    Boardroom / L3 wine
--accent-red-error    #EF4444    Error states / L5 team
--accent-red-light    #B22222    Firebrick darker для light theme errors
--accent-steel        #2D5380    Investor primary
--accent-steel-light  #4573A1    Investor accent

Borders¶

--border-faint    rgba(255,255,255,0.06)    Subtle dividers
--border-default  rgba(255,255,255,0.10)    Card borders
--border-strong   rgba(255,255,255,0.20)    Emphasized borders / focus

Light canonical v2 (premium senior 2026-05-03)¶

Backgrounds¶

--bg-primary    #FFFFFF                                 Cards / pure white surface
--bg-secondary  #FAFAF7                                 Body bg · warm bone (НЕ pure white)
--bg-tertiary   #F5F2EC                                 Section bg / nested
section-grad    linear-gradient(#F5F2EC 0%, #FAFAF7 70%)  Subtle layered surface

Critical rule: body bg #FAFAF7 warm bone — НЕ pure #FFFFFF (резко глазу), НЕ cream #F0EDE8 (теплее тогда).

Text¶

--text-primary    #0A0A0A               Deep type · h1 / body main
--text-secondary  rgba(10,10,10,0.78)   Subtitles / descriptions
--text-muted      rgba(10,10,10,0.55)   Filters / meta / status pills
--text-faint      rgba(10,10,10,0.45)   Trends flat / separators

Critical rule: primary text #0A0A0A deep type — НЕ pure #000000 (контраст avoidance), НЕ #1A1A1A (мутно).

CTAs (bronze · НЕ яркий gold)¶

--cta-primary     #998018    Deep bronze · borders + text
--cta-secondary   #C9A332    Medium bronze · accents
--cta-tertiary    #6B5510    Dark bronze · gradient end stops

Footer (context-dependent — см. § 03-light-theme.md)¶

Marketing/landing footer  #0E0D0B  Stripe-pattern dark · canonical
UI-app footer (academy)   #FAFAF7  Cream · matches body
Marketing triad tiles     #181614  Dark on Stripe footer
UI-app triad tiles        rgba(10,10,10,0.02)  Faint wash on cream

Status (darker для контраста на белом)¶

--status-green-light   #16A34A    Success на light (deep)
--status-red-light     #B22222    Error firebrick darker
--status-amber-light   #998018    Warning bronze
--status-cyan-light    #0891B2    Info darker hue

Borders / shadows¶

--border-faint-light    rgba(26,26,26,0.06)
--border-default-light  rgba(26,26,26,0.12)
--border-strong-light   rgba(26,26,26,0.20)

--shadow-card-light     0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.06)
--shadow-hover-light    0 12px 28px rgba(26,26,26,0.10)
--shadow-paper-light    0 24px 60px rgba(26,26,26,0.10), 0 8px 24px rgba(26,26,26,0.06)

Bronze accents · подробно¶

3 stops для CTAs / accents в light theme:

Token	Value	Использование
`--cta-primary`	`#998018`	Border + text для `.btn-action`, `.btn-ai-primary`, hover bg для chip
`--cta-secondary`	`#C9A332`	Accent labels / verify QR border
`--cta-tertiary`	`#6B5510`	Gradient stops / deep accents

Rule: на light theme НЕ использовать яркий #EBC554 для primary CTA — слабый контраст на cream. Использовать #998018.

См. полный canonical в feedback_light_theme_v2.md memory + 03-light-theme.md для override patterns.

Typography stack¶

3 шрифта · semantic mapping¶

Шрифт	Назначение	Где использовать	Примеры
Inter	Headings + body main	h1 / h2 / h3 / body text / cert-name / course-title	`INITIATION PROTOCOL`, `Сергей Архангельский`
Space Mono	Brand mono · square brackets identity	wordmark / nav-link / cap-text / tier-pill labels	`[ ACADEMY ]`, `▸ CERTIFICATE OF COMPLETION`, `EXPLORE →`
JetBrains Mono	Functional mono · status/code/data	subline / status chips / btn-mono / serial / verify codes	`L0 · АКТИВЕН`, `[ КУПИТЬ → ]`, `GJA-2026-A4F2X9`

Weights¶

Inter¶

400 Body text default
500 Emphasized body / labels
600 Headings / cert-stat-num / important UI text
700 Strong emphasis / cert-stat-num bold variant
800 H1 / cert-course / cert-name (extra bold для premium)

Space Mono¶

400 Body mono (rarely)
700 Wordmark / brand cap text (default)

JetBrains Mono¶

400 Code blocks / terminal output
700 Status chips / button mono / labels (default for UI)

Light theme typography rule¶

Inter weight bump на light: 400→500, 500→600 (Apple/Stripe принцип — на light bg типографика теряет вес, нужна компенсация).

[data-theme="light"] body { font-weight: 500; }  /* было 400 */
[data-theme="light"] h1, h2, h3 { font-weight: 700; }  /* было 600 */

Anti-patterns typography¶

❌ Space Grotesk в headings — раньше использовалось в маркетинговых лендингах, заменено на Inter (CEO утвердил v2.1). Не возвращать в landings / academy / syndicate / gate UI.

✅ Исключение · blueprint family (Twin Canonical Unification Этап 3 · v4.88.0 · 2026-05-27): Space Grotesk разрешён в blueprint/live/ + blueprint/live-board/ + blueprint/pulse/ + blueprint/plan/ + будущих пультах (ERP / tour / новые) для: - Passport drill-down titles (pt-pp-title / pn-detail-title / lb-stub-title — 19px) - Section titles outer page (pl-sec-title / pn-sec-title — 15px через var(--pult-sec-title-fs)) - Card headings (pn-block-title / pl-prog-title 13px + pn-track-title / pl-init-title 12.5px через var(--pult-card-*-fs)) - Host names / IDs / numeric badges (pt-pp-host-name / pl-prio-id / pn-block-num)

Почему by-design: Карта (эталон Brand OS v3 ratified 21.05.2026) использует Space Grotesk во всех passport/host titles. Blueprint family = operational pult tools с другой density-айдентикой чем marketing/landings. CEO 27.05.2026 утвердил Вариант C при унификации Этапа 3 (Space Grotesk allowed в blueprint family · Inter остаётся canonical для landings/academy/syndicate/gate).

❌ Mono шрифт в body text — нечитаемо. Mono ТОЛЬКО для UI / data / labels. ❌ Font-size < 14px в body — нарушение правила 7 v4.2.8 для маркетинговых экранов (см. 06-anti-patterns.md). Исключение: blueprint family — operational density tools используют 11.5-13px для уплотнения данных (зафиксировано в tokens/design-tokens.css секции BODY CONTENT TYPOGRAPHY). ❌ Custom шрифты вне 3 семейств — не добавлять без явного апрува CEO. ❌ Weight < 400 на light theme body — слишком воздушно, не читается.

Spacing scale¶

Используем по строгому списку. Произвольные значения (5, 7, 13, 17, 19, 25, 27...) запрещены без обоснования в commit.

Token	Value	Назначение
`space-1`	4px	Micro · между inline элементами / `.eco-status-chip::before` size
`space-2`	8px	Tight · между связанными items / `.btn-group` gap
`space-3`	12px	Default field gap / form-row mini
`space-3-5`	14px	CANONICAL gap · между cards / form fields default · golden middle
`space-4`	16px	Normal padding · cert-paper inner / status-bar
`space-5`	20-22px	Cert-paper bottom row gap · accordion padding
`space-6`	24px	CANONICAL card padding · card-canonical-v1 (CEO 2026-05-03)
`space-7`	28-32px	Section spacing · cert-stats gap
`space-8`	40px	Large section spacing · hero padding

Typography spacing canon¶

Body line-height: 1.5 (Inter regular)
Headings line-height: 1.2 (h1) / 1.3 (h2) / 1.4 (h3)
Letter-spacing:
Inter h1: -0.005em (slightly tight)
Inter h2/body: 0 (default)
Space Mono uppercase: 0.20-0.30em (cap-text spacing)
JetBrains Mono labels: 0.10-0.14em

Card canonical (v4.4.6 / Cards · CEO 2026-05-03)¶

padding: 24px
gap (between elements inside): 14px
thumb: 112×80px (если есть)
font-size: +5% bump для card text vs default
locked chip: НЕ через opacity (это anti-pattern v3) · через bg + color override

См. feedback_card_canonical_v1.md.

Motion · transitions¶

Default transitions¶

/* Default — для большинства hover/click */
transition: all 200ms ease;

/* Hover — для интерактивных элементов */
transition: all 200-250ms ease;

/* Slow — для modal / page transitions */
transition: all 400ms ease;

Easing functions¶

ease — default для hover / state changes
ease-out — для входящих animations (modal open, dropdown reveal)
ease-in — для выходящих animations (modal close, dropdown hide)
linear — только для loaders / spinners (constant rate)

Specific patterns¶

Element	Transition	Property
Button hover	`all 200ms ease`	bg, color, border, transform
Card hover	`all 250ms ease`	transform, box-shadow, border
Theme toggle	`background-color 300ms ease, color 300ms ease`	smooth theme switch
Modal open	`opacity 200ms ease, transform 300ms ease-out`	fade + slight scale
Spinner	`transform 1s linear infinite`	rotation
Status chip pulsing dot	`box-shadow 1.2s ease-in-out infinite`	glow pulse

Anti-patterns motion¶

❌ Без transition на hover (резкий jump = низкое качество) ❌ Transitions > 600ms на UI (медленно, sluggish) ❌ cubic-bezier(...) custom без явного дизайн-решения (хватает ease вариантов) ❌ Multiple transitions на одном элементе с разной длиной (рассогласование)

Dark theme to Light theme migration matrix¶

При создании нового элемента — заполнить эту таблицу для consistency:

Свойство	Dark value	Light value	Token / override
Background	`#0E0D0B` (card)	`#FFFFFF`	`var(--bg-primary)` (white default)
Text primary	`#FFFFFF`	`#0A0A0A`	`var(--text-primary)`
Text muted	`rgba(255,255,255,0.65)`	`rgba(10,10,10,0.55)`	`var(--text-muted)`
Border	`rgba(255,255,255,0.10)`	`rgba(26,26,26,0.12)`	`var(--border-default)`
CTA primary	`#EBC554` (gold)	`#998018` (bronze)	Master CSS override
Shadow	`none` (dark naturally fades)	`0 1px 3px rgba(26,26,26,0.06)`	Master CSS override

Если для light нет значения — НЕ оставлять dark по умолчанию. Подобрать adapted через canonical палитру или спросить CEO.

Tokens distribution¶

Files¶

tokens/design-tokens.css — CSS custom properties (для consumption в browser)
tokens/design-tokens.json — W3C format (для tooling / Figma / sync)
tokens/tailwind-preset.cjs — Tailwind config (для legacy Tailwind CDN exports)
tokens/fonts.css — @font-face declarations + fallback stacks

Where used¶

eco-components.css master — все class definitions через tokens
36 HTML экранов — через var(--token-name) calls
GOLDJAXE-DESIGN-SYSTEM.html — visual demo всех tokens

Maintenance¶

При добавлении нового token: 1. Edit design-tokens.css (добавить строку) 2. Edit design-tokens.json (sync для tooling) 3. Update этот файл (раздел) с rationale 4. Bump VERSION minor (4.X.0) если new token, patch (4.5.X) если значение поправлено

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

Когда добавляешь новый цвет/шрифт — сначала проверь не дублируешь ли existing
Когда видишь hardcoded #XXX или rgba(...) в HTML inline — мигрируй в token (рефакторинг)
При создании нового экрана — выбирай values из этого каталога, не из воздуха
При работе с light theme — обязательно (всегда сверяться с light палитрой)
При onboarding нового подрядчика — обязательно вместе с 01-mental-models.md