description: >- English summary: Onoo design language — dark-first, broadcast-energy aesthetic. OKLch color system with S7 Monlive duo: brand-ember (`oklch(0.583 0.202 35)`) and brand-blue (`oklch(0.64 0.14 240.5)`), stepped dark surfaces (`--surface-1` through `--surface-3`), floating frosted glass docks with specular rim highlights, semantic tokens for sports (positive=green, negative=red, live-pulse=#ff4444). Design principles: stats as story (charts > tables), athlete-first, Mongolia-ready (360px width, Cyrillic text spacing), cold-start friendly empty states, no signup gating.

Оноо Design System

Харанхуй canvas. Broadcast energy. Stat-ууд бол түүх.

Onoo бол Монголын сагсан бөмбөгийн статистикийн платформ. Design language нь хүчтэй, immersive, шударга байх ёстой — near-black canvas дээр бүх stat highlight reel шиг харагдана.

Дизайн зарчим

Stat бол spreadsheet биш, түүх. Тоо баримт нь визуал, хөдөлгөөнтэй, хуваалцахад амар highlight reel шиг байх ёстой. Table-ээс илүү chart, footnote-оос илүү badge хэрэглэнэ.
Broadcast energy. Сайн спортын дэлгэцийн адил one-screen glance дээр ойлгогдох ёстой.
Монгол хэлний уншигдах чадвар. Кирилл Монгол текст илүү өргөн байдаг тул layout-аа түүнд тааруулна.
Харанхуй canvas. Background нь бараан, surfaces нь шаталсан, acccent нь тод байна.
Empty state ч гэсэн дизайнтай. Өгөгдөлгүй үед ч систем бэлэн мэт харагдана.

Өнгөний систем

Onoo бүх өнгөнд OKLch ашиглана — perceptual uniformity, dark/light behavior, smooth interpolation.

Brand palette (S7 Monlive Duo)

Token	Value	Usage
`--brand-blue`	`oklch(0.64 0.14 240.5)`	Cool flash accent, secondary focus
`--brand-blue-light`	`oklch(0.75 0.11 240)`	High-contrast blue highlight
`--brand-blue-dim`	`oklch(0.39 0.13 256)`	Deep blue container backgrounds
`--brand-ember`	`oklch(0.583 0.202 35)`	Primary action, energy, competition
`--brand-ember-light`	`oklch(0.7 0.17 35)`	Interactive labels, active tab text
`--brand-ember-glow`	`oklch(0.583 0.202 35 / 0.14)`	Ambient active glow

Surface hierarchy

Шаталсан dark surface system ашиглана. Өндөр түвшин бүр илүү тод болж гүн мэдрэмж өгнө.

Token	Value	Usage
`--bg`	`oklch(0.09 0.005 60)`	Global background
`--surface-1`	`oklch(0.11 0.005 60)`	Cards, panels
`--surface-2`	`oklch(0.12 0.005 60)`	Elevated surfaces
`--surface-3`	`oklch(0.14 0.005 60)`	Hover / active states
`--ink`	`oklch(0.98 0.005 60)`	Primary text

Semantic tokens (dark mode — default)

Onoo нь dark-first.

Chart palette

Stat visualization-д зориулагдсан.

Өнгөний утга

Ember (35°) — гол action өнгө. Energy, competition, heat. Basketball court-ийн amber floor ба Монголын спортын broadcast уламжлалаас санаа авсан.
Blue (240.5°) — broadcast flash, high-contrast cool accent. Depth, quality, focus ring.
Near-black background — төвлөрөл, immersion. Stat бүр урдаас гарч ирнэ.

Token usage rules

--brand-ember-ийг гол action болон active navigation / toggle highlight-д ашиглана.
--brand-blue-ийг secondary contrast, focus ring, болон cool accent-д ашиглана.
Background дээр text болгон дангаар нь ашиглахдаа contrast хангасан --brand-ember-light ашиглана.

Typography

Onoo гурван typeface ашиглана.

Role	Font	Weight	Size	Usage
Display	Fira Sans Extra Condensed	600–800	24–60px	Hero, leaderboard, stat number
Body	Golos Text	400–700	12–18px	Бүх UI текст
Stat	JetBrains Mono	400–700	14–48px	Tabular numerals, stat display

Font сонголтын шалтгаан

Fira Sans Extra Condensed — extra-condensed, 800 Black hero punch, native Ө/Ү outlines (fontTools cmap-verified; Sofia Sans Condensed ships no U+04E8/U+04AE).

Golos Text — Paratype-ийн Cyrillic-native sans (Орос төрийн сайтод зориулж зурсан). Кирилл дээр төрсөн, adapt хийгдээгүй — Монгол UI текстийн үндсэн font.

JetBrains Mono — табличлагдсан тоонуудаар stat column-уудыг тэнцүүлнэ. font-mono нь --font-stat-руу map хийгдсэн тул table/admin metadata автоматаар tabular болно.

Scale

--text-xs:   0.75rem  (12px)  — Labels, metadata, timestamps
--text-sm:   0.875rem (14px)  — Secondary body text
--text-base: 1rem     (16px)  — Default body
--text-lg:   1.125rem (18px)  — Section lead text
--text-xl:   1.25rem  (20px)  — Card titles
--text-2xl:  1.5rem   (24px)  — Subheadings
--text-3xl:  1.875rem (30px)  — Hero stat numbers
--text-4xl:  2.25rem  (36px)  — Large score headers
--text-5xl:  3rem     (48px)  — Display numbers
--text-6xl:  3.75rem  (60px)  — Score numbers

Type classes

.type-display  — Fira Sans Extra Condensed 800, letter-spacing -0.01em, line-height 1.05
.type-heading  — Fira Sans Extra Condensed 700, letter-spacing 0em, line-height 1.15
.type-body     — Golos Text 400, line-height 1.6
.type-label    — Golos Text 600, uppercase, letter-spacing 0.05em
.type-score    — JetBrains Mono 700, tabular-nums, letter-spacing -0.03em

Usage rules

Fira display — impact moments, hero sections, leaderboard rankings. Body text-д бүү хэрэглэ.
Golos body — бүх functional UI-д. Бүх font нь cyrillic + cyrillic-ext subset-тэй ачаалагддаг (Ө/Ү fallback-гүй).
JetBrains Mono stats — scores, shooting percentages, stat lines.

Spacing

4px base unit. Бүх spacing нь 4-ийн үржвэр байна.

--space-1: 0.25rem  (4px)
--space-2: 0.5rem   (8px)
--space-3: 0.75rem  (12px)
--space-4: 1rem     (16px)
--space-6: 1.5rem   (24px)
--space-8: 2rem     (32px)
--space-12: 3rem    (48px)
--space-16: 4rem    (64px)

Border radius

Token	Value	Used for
`--radius-sm`	`0.5rem` (8px)	Compact badges, inputs
`--radius-md`	`0.75rem` (12px)	Standard cards, inner list items
`--radius-lg`	`1rem` (16px)	Large cards, modal sheets
`--radius-xl`	`1.5rem` (24px)	Floating popovers, dropdown menus
`--radius-full`	`9999px`	Floating navigation docks, active pill indicators, chips, avatars

Nested radius harmony

Гадна container болон доторх interactive element-үүд radius-аараа нийцтэй байна:

Floating dock: rounded-full гадна capsule, rounded-full доторх tab pill.
Floating dropdown/sheet: rounded-2xl гадна frame, rounded-xl доторх menu item (p-1.5 padding-тай).

Shadows & Glass Material

Near-black canvas дээр ердийн drop shadow сайн харагддаггүй. Тиймээс Onoo нь translucent frosted glass + specular rim lighting + elevation glow ашиглана.

Token	Value	Usage
`--shadow-1`	`0 1px 2px rgb(0 0 0 / 0.3)`	Tiny separation
`--shadow-2`	`0 8px 24px rgb(0 0 0 / 0.45)`	Cards, dialogs
`--shadow-3`	`0 16px 48px rgb(0 0 0 / 0.55)`	Modals, drawers
`--shadow-float`	`0 14px 40px rgba(0 0 0 / 0.65)`	Detached floating docks
`--rim-specular`	`inset 0 1px 0 rgba(255 255 255 / 0.15)`	Top edge specular light reflection on glass
`--glow-primary`	`0 0 0 1px rgb(216 57 6 / 0.2), 0 0 32px rgb(216 57 6 / 0.18)`	Primary highlight

Glassmorphic surfaces

Dark glass dock: backdrop-blur-2xl bg-neutral-950/85 border border-white/10 shadow-[0_14px_40px_rgba(0,0,0,0.65),inset_0_1px_0_rgba(255,255,255,0.15)].
Доогуур нь scroll хийх контентийн өнгө гэрэлтэж харагдана (refraction & specular highlight).

Motion

Durations

Token	Value	Used for
`--duration-fast`	150ms	Hover, small transitions
`--duration-normal`	250ms	Standard transitions
`--duration-slow`	400ms	Page transitions, emphasis

Easing

Token	Value	Character
`--ease-out`	`cubic-bezier(0.16, 1, 0.3, 1)`	Entering
`--ease-in`	`cubic-bezier(0.7, 0, 0.84, 0)`	Exiting
`--ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Playful snap

Principles

Motion purpose-тэй байх ёстой: state change, attention, confirmation.
prefers-reduced-motion-ийг үргэлж дагана.
Drawer, modal зэрэг physical UI-д spring мэдрэмж ашиглана.

Component patterns

Floating navigation dock (Mobile)

Дэлгэцийн доод захад наалдахгүй, safe-area-аас хөндийрч хөвнө: fixed inset-x-3 bottom-[calc(0.75rem+env(safe-area-inset-bottom,0px))] z-40 mx-auto max-w-md rounded-full.
Frosted dark glass: backdrop-blur-2xl bg-neutral-950/85 + border border-white/10.
Specular top rim: inset 0 1px 0 rgba(255 255 255 / 0.15) — дээд хүрээний specular гэрэлтэлт.
Active pill indicator: Сонгогдсон tab нь дан ганц өнгө солихгүй, биет capsule highlight (rounded-full bg-white/10 text-[var(--brand-ember-light)] font-semibold) авч, icon нь үл ялиг томорно (scale-105 stroke-[2.25]).
Clearance contract: Хөвөгч dock доод контентыг далдлахгүйн тулд mobile page root нь pb-[calc(4.75rem+env(safe-area-inset-bottom))] bottom padding-тай байна.

Cards

Dark card background дээр subtle top border highlight хэрэглэнэ.
Padding: 24px standard, 16px compact.
Hover дээр elevation болон border intensity бага зэрэг нэмэгдэнэ.

Buttons

Primary button = ember fill (--brand-ember).
Secondary button = blue or outline.
Focus ring тод, accessibility-тэй байна.

Badges & Pill Toggles

Pill shape (rounded-full), жижиг uppercase label, tabular numbers хэрэглэнэ.
Segmented toggle (Grid/List, Үр дүн/Хүснэгт): Pill-in-pill highlight container хэрэглэнэ.

Tables

Sticky header, zebra row, compact density.
Mobile дээр шаардлагагүй column-уудыг нуух.

Empty states

Icon + heading + тайлбар + нэг primary CTA.
Орчуулга нь Монгол хэл дээр байх ёстой.

Responsive rules

Mobile-first.
360px width дээр бүх surface ажиллах ёстой.
Table-ийг card, stack, collapse pattern рүү шилжүүлж болно.
Mongolian text-д line-clamp / truncate хэрэгтэй бол ашиглана.

Accessibility

Focus state үргэлж харагдана.
Color alone-оор meaning дамжуулахгүй.
Contrast өндөр, touch target дор хаяж 44px.
Icon-only control-д aria-label өгнө.

Non-goals

Figma sync байхгүй.
Image generation байхгүй.
Framer Motion ашиглахгүй.
Hardcoded hex болон arbitrary Tailwind value ашиглахгүй.

Components

Component	Pattern	Notes
`TeamCardGrid` (`src/app/teams/components/team-card-grid.tsx`)	Plain NBA-style cells: compact logo + name + W–L score below the name (`wins-losses`, `—` when no row), no cards/background; `grid-cols-3` mobile, `lg:grid-cols-4` desktop	Group heading + stacked sections; `splitTeamsByTournamentGroups` partitions the filtered list, one cached `getTournamentGroups` + one `getStandings` fetch.
`TeamLeadersStrip` (`src/app/teams/[slug]/components/team-leaders-strip.tsx`)	Flush square tiles fill the desktop row; a square-tile rail scrolls on mobile	Full-bleed player photos sit behind a dark text fade; a colored initials panel replaces missing photos. Category, roster jersey number when available, games/minutes, and average stay visible.

Decisions

2026-09-15 — Teams directory copies nba.com/teams: plain logo-name-score grid in group sections (2-col mobile, 3-col desktop); no East/West schema column exists, tournament groups are the MN split.
2026-09-20 — Teams directory uses three compact columns on mobile with smaller logos and tighter cell spacing to reduce scrolling on 360px screens.
2026-09-25 — Team leaders use a continuous square-edged strip with full-bleed player photos, a dark text fade, and an initials fallback; the shared section heading links to the roster.
2026-09-25 — Team games history rows stay text-dense (W/L chip, opponent logo+name, date · home/away · venue, tabular score/time, chevron); the log adds season/status pill rails, icon prev/next pager, and a single total line on one-page results.
2026-09-28 — Mobile navigation transitions from edge-to-edge pinned bar to a floating frosted-glass capsule dock (rounded-full, backdrop-blur-2xl, specular rim light inset 0 1px 0 rgba(255,255,255,0.15), and pill-in-pill active tab highlight). Page root safe-area clearance updated to pb-[calc(4.75rem+env(safe-area-inset-bottom))].

Implementation notes

Tokens нь src/styles/globals.css дотор байх ёстой.
Tailwind config нь эдгээр CSS variables-тай таарна.
New component бүр design tokens дээр тогтоно.

description: >- English summary: Onoo design language — dark-first, broadcast-energy aesthetic. OKLch color system with S7 Monlive duo: brand-ember (`oklch(0.583 0.202 35)`) and brand-blue (`oklch(0.64 0.14 240.5)`), stepped dark surfaces (`--surface-1` through `--surface-3`), floating frosted glass docks with specular rim highlights, semantic tokens for sports (positive=green, negative=red, live-pulse=#ff4444). Design principles: stats as story (charts > tables), athlete-first, Mongolia-ready (360px width, Cyrillic text spacing), cold-start friendly empty states, no signup gating.