---
paths:
  - frontend/**/*.css
  - frontend/src/components/**/*.{ts,tsx}
  - frontend/src/app/**/*.{ts,tsx}
---

# UI design tokens — GenDesign

> Часть набора `ui-*.md` (token / conventions / microcopy). Полное обоснование (бенчмарк vs Bnmap/DOM.РФ/CoStar/Bloomberg) — vault `research/UX_Analytics_Developers_Report_May17.md`.

## Design tokens (HARD — НЕ выдумывать новые)

Цвета — только из этого списка. Inline `#hex` вне токенов = нарушение (ругать в review).

```css
/* Surface */
--bg-app:        #F6F7F9;
--bg-card:       #FFFFFF;
--bg-card-alt:   #FAFBFC;   /* skeleton, lazy-mount */
--bg-headline:   #0F172A;   /* slate-900, тёмная headline-bar */

/* Borders */
--border-soft:   #EEF0F3;
--border-card:   #E6E8EC;
--border-strong: #D1D5DB;

/* Text */
--fg-primary:    #111111;
--fg-secondary:  #5B6066;
--fg-tertiary:   #73767E;
--fg-on-dark:    #E2E8F0;
--fg-on-dark-muted: #94A3B8;

/* Brand */
--accent:        #1D4ED8;   /* primary CTA, tabs, focused link */
--accent-hover:  #1E40AF;
--accent-soft:   #DBEAFE;
--accent-2:      #F2994A;   /* secondary CTA: Export, Share, Snapshot */

/* Semantic */
--success:       #0A7A3A;   --success-soft: #DCFCE7;
--warn:          #9A6700;   --warn-soft:    #FEF3C7;
--danger:        #B3261E;   --danger-soft:  #FEE2E2;

/* Data-viz sequence (порядок ОБЯЗАТЕЛЕН — viz-1 всегда «свой» / focused) */
--viz-1: #1D4ED8; --viz-2: #0EA5E9; --viz-3: #14B8A6;
--viz-4: #F59E0B; --viz-5: #8B5CF6;

/* Prediction / confidence (HouseCanary pattern) */
--prediction-line: #0EA5E9;
--prediction-band: rgba(14, 165, 233, 0.18);
```

**Цвет в chart серий** применяется ТОЛЬКО для сравнения серий. Одиночная линия — всегда `#374151`.

## Layout & spacing tokens

- Page `max-width: 1280px` (analytics-deep — `clamp(1280px, 90vw, 1440px)` на ≥1600px).
- Spacing scale: **4 / 8 / 12 / 16 / 24 / 32**. Никаких 6/10/14/18.
- Card padding: **20px** (Section), **16/18** (KpiCard) — НЕ менять.
- Card radius: **12px** (cards), 8px (chart skeleton), 6px (badges).
- Section vertical rhythm: `margin-top: 24` между секциями (НЕ 16).
- **НЕ использовать `box-shadow`** на cards. Border `--border-card` достаточно. Тень — только для modals / popovers.
- Inline `style={{}}` допустим только для динамических значений (height по data, transform, color по delta). Статический стиль → Tailwind utility или token.

## Typography tokens

- **Font stack**: `Inter, -apple-system, "Segoe UI", system-ui, sans-serif` через `next/font/google` (self-hosted, privacy).
- **Tabular-nums везде** для цифр: `font-variant-numeric: tabular-nums; font-feature-settings: "tnum";` в `:root`.
- Размеры:
  - **display** 28/36 weight 600 — KPI value
  - **h1** 22/28 weight 600 — page title
  - **h2** 18/24 weight 600 — Section title
  - **body** 14/20 weight 400
  - **caption** 12/16 weight 400
  - **label** 12/16 weight 500 uppercase letter-spacing 0.04em — KPI label
- Заголовок (h1, h2) не центрировать. Только left-align.

## Запреты (token violations)

- ❌ Inline hex вне токенов (`color: "#1d4ed8"` → `color: var(--accent)`)
- ❌ Box-shadow на cards (border достаточно)
- ❌ Gradient backgrounds — flat tokens only
- ❌ Centered h1/h2 (только left-align)
- ❌ Spacing не из scale (6/10/14/18 → 4/8/12/16/24/32)
- ❌ Хардкод цвета серии в ECharts (брать из `--viz-N` по порядку)