87 lines
3.7 KiB
Markdown
87 lines
3.7 KiB
Markdown
---
|
||
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` по порядку)
|