lekss361/gendesign
1
0
Fork 0
Code Issues 57 Pull requests Projects Releases Packages Wiki Activity Actions
gendesign/.claude/rules/ui-tokens.md

3.7 KiB
Raw Blame History

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).

/* 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 по порядку)