Onoo — Design Assets Specification (Public Pages)

Purpose: This document is the contract between the Onoo product team and the graphic designer. It defines every visual asset the public website needs: banners, key art, logos, icons, social images, and their exact sizes, safe zones, colors, typography, and file rules.

Reference system: DESIGN.md (product design decisions) + src/app/globals.css (live tokens). The live website is the source of truth. If this document and the website disagree, the website wins — tell the developer.

Status: v1.0 — 2026-08-07 Audience: graphic designer, developer integration.

1. Product in one paragraph

Onoo (Оноо) is the Mongolian basketball statistics platform. The public site is dark-first and mobile-first: a near-black canvas, amber-orange competition accents, purple depth, big condensed numerals, and court-line motifs. The design language is "NBA scoreboard energy, trusted records" — numbers are the heroes, text is editorial, and the court is the stage. UI copy is Mongolian first; English is a secondary scout view.

Design principles that govern every asset:

Dark canvas, bright data. Assets are built for a near-black background. Amber = live energy (scores, CTAs, LIVE badges). Purple = depth and premium. Never put data on a busy background.
The number is the hero. Stats use huge tabular numerals. Type follows, decoration follows last.
Mobile is the default. Everything is designed at 360px first, then scales up to desktop. Every asset ships a mobile variant or proof that it survives small sizes.
Court motif, not clutter. Half-court line, center circle, radial spotlights. One motif, used consistently.
No fake content. No AI-generated athlete imagery, no Lorem ipsum, no copied NBA assets. Real Mongolian copy or clearly-marked placeholders.

2. Brand foundations

2.1 Wordmark and logo

Item	Spec
Wordmark	"Оноо" — Oswald 800, tight tracking, white on dark, amber accent allowed for a single glyph or underline bar
Nav lockup (live)	36×36 px chip, `rounded-lg` (8 px), near-black purple-tinted bg, amber `CircleDot` glyph centered; wordmark "Оноо" to the right (hidden on <640 px)
Master files to deliver	SVG masters: full lockup (dark bg), horizontal on transparent, monochrome white, monochrome amber, app mark only (the chip glyph)
Minimum clear space	1× the glyph height on all sides of the mark
Minimum size	Mark: 16 px. Wordmark: not below 64 px wide on banners

Note: tenants can swap the logo via admin (white-label). Deliverables must never depend on the default mark alone — the wordmark must also read without the glyph.

2.2 Color palette

CSS tokens are authoritative (src/app/globals.css). Hex values below are accurate conversions for design tools (sRGB). Site is dark-first; light mode exists but banners are dark-theme assets.

Token	oklch	Hex (approx)	Usage
`--background`	`oklch(0.02 0.002 60)`	`#000000`	Page canvas — near black
`--surface-1` (card)	`oklch(0.07 0.003 60)`	`#010101`	Cards, asset base layer
`--surface-2`	`oklch(0.10 0.004 60)`	`#040303`	Raised panels, image wells
`--surface-3`	`oklch(0.14 0.005 60)`	`#0B0907`	Hover/prominent panels
`--ink` / `--foreground`	`oklch(0.98 0.005 60)`	`#FBF8F5`	Primary text on dark
`--muted-foreground`	`oklch(0.62 0.01 60)`	`#8B8580`	Secondary text, labels
`--primary` / `--brand-sports`	`oklch(0.72 0.22 40)`	`#FF6413`	Amber-orange — the sports accent
`--brand-sports-light`	`oklch(0.82 0.18 40)`	`#FF9664`	Amber tint, highlights
`--brand-sports-dim`	`oklch(0.55 0.18 40)`	`#C33E00`	Amber on dark, deep glow
`--secondary` / `--brand-purple`	`oklch(0.55 0.24 285)`	`#6D49F4`	Purple — depth, premium
`--brand-purple-light`	`oklch(0.65 0.20 285)`	`#8776FF`	Purple tint
`--warning` (scores)	`oklch(0.78 0.18 55)`	`#FF932A`	Scoreboard numerals, live badges
`--sidebar` (hero bg)	`oklch(0.06 0.01 265)`	`#000102`	Hero panels — black with purple hint
`--success`	`oklch(0.65 0.18 145)`	`#31AA40`	Positive deltas, form dots
`--destructive`	`oklch(0.70 0.19 25)`	`#FF645F`	Errors, negative deltas
`--info`	`oklch(0.60 0.15 240)`	`#0089D0`	Informational
`--border`	white 10 % over bg	`~#1A1A1B`	Hairline borders, court lines

Color rules:

Amber is the competition accent: scores, LIVE, CTAs, the 3 px top accent bar on every page header. It must never exceed ~30 % of an asset's area.
Purple is the depth layer: gradients, glows, secondary charts, the dark player-showcase hero.
Team colors are accents only — a logo chip, a stat bar, a glow. Team color never becomes a full surface and never carries meaning alone (accessibility).
Text on dark must hold ≥ 4.5:1 contrast (WCAG AA). Amber #FF6413 is for display/accents, not body copy — #FF932A reads better for small text.
One accent per asset unless it is an explicit team-color asset.

2.3 Typography

Role	Font	Weights	Notes
Display / headlines	Oswald	600, 700, 800	Condensed, athletic, tight tracking (`-0.02em`), line-height 1.1. The NBA-energy voice.
Body	Manrope	400–700	Geometric sans. Full Mongolian Cyrillic incl. Ө (U+04E8) and Ү (U+04AE) — use the cyrillic-ext subset
Stats / numbers	JetBrains Mono	700	Tabular numerals, `-0.03em` tracking, monospaced so digits align in columns

Banner type scale (desktop / mobile):

Element	Desktop	Mobile (360 px)
Hero headline	96–128 px	48–64 px
Subheadline	32–48 px	22–28 px
Stat numeral	64–120 px	40–72 px
Label / kicker	12–14 px, uppercase, +0.05em tracking	same
Legal / disclaimer	10–12 px	same

Typography rules:

Headlines in ALL CAPS with Oswald 800 read most "sports network". Mongolian Cyrillic capitalizes fine — but verify every string for Ө/Ү rendering; if the font subset lacks them, outline the text or switch font.
Numbers are JetBrains Mono or Oswald 800 — never a script or serif font.
No fake italics, no letterspacing on Mongolian (Cyrillic diacritics break with wide tracking; keep ≤ +0.05em).

2.4 Motifs and texture (the "NBA-like" visual language)

These are the recurring visual elements. Use them, do not invent new ones.

Court baseline motif — a vertical half-court line + center circle, drawn as hairline strokes in --border (white ~10 %), low opacity (0.06–0.18), edges masked so the line fades at the frame. This is the signature "we are basketball" texture.
Radial spotlights — soft radial glows: amber at ~18 % / 10 % of the frame (top-left on heroes), purple at ~82 % / 88 % (bottom-right). Opacity 0.22–0.25 of the color; content sits above them.
Amber accent bar — a 3 px horizontal bar, gradient fading from transparent through amber to transparent (the header signature). Use as a divider under headlines or at frame edges.
Live pulse — a pulsing amber dot + "LIVE" label for live games (1.5 s opacity pulse).
Scoreboard energy — big tabular numerals, colon-separated clock, team chips above numbers. An asset that contains a scoreboard reads instantly as sports.
Court-dot accent — 6 px amber dot before a label (used on headings).
Marquee ticker — a continuous horizontal strip (scores scrolling). Used on the countdown strip; sponsor logo lives inside it.

Do not: glassmorphism blur on content cards, gradients that bury text, drop shadows on dark backgrounds (use subtle borders instead), photographic clutter behind data.

3. Mobile-first responsive rules (applies to every asset)

The site renders from 360 px wide. Mobile users in Mongolia browse on mid-tier Android over mobile data — every asset must stay light and legible at small sizes.

Design at 360 px first. Compose the mobile crop before the desktop crop. If the asset cannot work at 360 px, redesign, do not scale down.
Every banner asset ships 2 variants: desktop (≥1024 px layout) and mobile (360–640 px layout). Hero backgrounds additionally ship a vertical crop.
Safe zone = what must survive. Text and logos never live in the outer 8 % of any frame (small phones, rounded corners, notches). On hero assets the center ~60 % is the critical zone (team logos + scores render over it live).
Responsive behavior per breakpoint: 360 base → 640 (sm, horizontal controls) → 768 (md, full tables) → 1024 (lg, multi-column). Banners scale fluidly; the designer provides the two end states and the developer handles the middle.
Text minimums: no body copy below 12 px rendered size at 360 px; no headline below 40 px rendered on the mobile variant of a hero asset.
File weight budget (mobile data): every web-deployed raster ≤ 200 KB (WebP) per variant; total hero pair (desktop + mobile) ≤ 400 KB. Vector/SVG preferred where animation-free.
Deliver @1x and @2x for every raster; the web serves WebP with PNG fallback.
Test proof: each asset ships with a 360 px and 1920 px preview crop so the developer can verify the safe zone without opening the source file.

4. Asset inventory

Legend — ID used in file names; Canvas = artboard; Safe = area that must stay clear; Formats = delivery set; Max = file size budget.

A. HOME-HERO-BG — home hero backdrop (priority)


Placement	`src/app/page.tsx` hero section — full-width dark panel behind the live scoreboard (team logos, score, countdown render over it)
Canvas	Desktop: 1920×1080 px. Mobile: 1080×1920 px (vertical crop, or 750×1334)
Safe	Center band ~1200 px wide × ~600 px tall (desktop) / center ~70 % (mobile): team logos + scores + "Тоглолтын төв" headline render there
Content	Background art only. No text, no logos, no scoreboard — all of that is live UI on top. Art = court motif, radial amber/purple spotlights, subtle arena atmosphere
Opacity	Glow layers ≤ 0.25; motif lines ≤ 0.18. Must stay legible under white text (verify with a #FBF8F5 text sample over the final art)
Formats	WebP @1x/@2x + PNG fallback; master layered PSD/AI
Max	200 KB per web variant
Do	subtle, atmospheric, dark; the "stage" for the game
Don't	literal players, crowds, logos, text, bright photo areas, anything that competes with the scoreboard

B. SECTION-BANNER — page/competition/tournament headers


Placement	Future competition hubs, tournament hub (`/tournaments/[id]`), news landing. Wide billboard under the nav
Canvas	Desktop: 1920×400 px (4.8:1). Mobile: 750×320 px
Safe	Desktop: left 60 %, height 60 % (title zone). Mobile: center 80 % × 70 % (title centered)
Content	Optional title text (Oswald 800) + competition identity; else a designed key-art backdrop with empty title zone (dev renders the real name)
Formats	WebP @1x/@2x + PNG; master layered
Max	200 KB per variant
Rule	One accent (amber or purple), one motif. Team-color variants allowed per competition

C. NEWS-COVER — article cover template


Placement	News listing + detail pages (news UI ships from task T-11b.1; covers are the editorial face of the site)
Canvas	Desktop: 1200×675 px (16:9). Mobile: 750×422 px
Safe	Bottom 45 % = title overlay zone (scrim gradient recommended, ink → transparent). Top-left 15 % = category kicker zone
Content	Cover art + a title-safe template with the overlay scrim built in. Designer produces: 1 base template + 3 art-direction variations (action/stat-driven/photo)
Formats	PSD/AI template (editable text layer, MN copy), WebP export @1x/@2x
Max	250 KB per web export
Don't	text baked into the raster; crop art that destroys the 16:9 → 4:5 mobile recrop

D. AWARD-CARD — shareable award/recap graphic template


Placement	Awards page (`/awards`), recap share cards, `api/cards` share images
Canvas	800×400 px @2x = 1600×800 master (2:1)
Live reference	Dark `#0a0a0a` bg, 10 px amber left bar, Oswald 800 stat numerals, team-color accents. Designer formalizes this into a reusable template
Content	Template art only; award title + player name + stat lines render dynamically
Formats	Layered template + exported art layers (PNG/SVG)
Rule	Must reflow for: award card (800×400), OG image (1200×630) — design for both from one master

E. OG-IMAGE — social share template (1200×630)


Placement	`opengraph-image.tsx` per player/team/game — Facebook/X/WhatsApp/Telegram link previews. The most-shared asset on the site
Canvas	1200×630 px (1.91:1), PNG output
Live reference	Dark bg, left amber bar, Oswald 600/800 + Inter 400, team color resolved from data
Safe	1200×630 renders at ~400×210 px in most feeds — the left ~80 % is what matters; right 20 % may crop on some platforms
Content	Template art (bg texture, glow, court motif) + layout zones: kicker line, title, stat line, logo slot. Text is dynamic
Formats	Layered template + bg art @1x/@2x
Max	200 KB rendered PNG

F. SPONSOR-LOGO — sponsor placement kit (revenue)


Placement	`SponsorSlot` components: slots `standings`, `leaders`, `game`, `recap`, `award_card`, `home`, `ticker`. Logo renders at 120×40 px CSS (so supply ≥ 240×80 px @2x) next to the "Ивээн тэтгэгч" label; ticker slot renders a slim strip
Deliverable	1. Sponsor logo lockup on transparent bg, PNG + SVG, ≥ 480×160 px master. 2. Optional slim ticker banner 640×48 px (logo + short sponsor name)
Max	2 MB, JPEG/PNG/WebP only (storage bucket limit)
Rules	Transparent background only — the site is dark, a white box breaks the design. No text smaller than 10 px at render size. Lockup must read at 120×40 px on near-black
Don't	drop shadows baked in, low-res raster upscaled, bright full-bleed photos

G. TEAM-LOGO — team identity kit


Placement	Standings, game cards, hero, leaderboards — rendered 24–128 px
Deliverable	Per team: 512×512 px crest/logo PNG (transparent) + SVG master; wordmark lockup 1200×400 px; `primary_color` hex chosen to match the brand system (saturated, mid-tone)
Rules	Team color = accent only. Logo must read as a solid silhouette at 24 px (no fine strokes < 2 px at 512). Contrast against near-black and against amber
Note	Teams already have logos; this kit standardizes quality for new teams

H. PWA-ICON — app icon set


Placement	PWA manifest, home screen, favicon
Master	1024×1024 px SVG/PNG
Exports	192×192, 512×512, maskable 512 (safe zone: content inside center 80 % circle), favicon 32×32 + 64×64, apple-touch 180×180
Content	Amber mark on near-black rounded square (matches the 36 px nav chip: dark bg, amber glyph)
Format	PNG (raster exports), SVG master
Max	50 KB per icon

I. ILLUSTRATION — empty states and helper art


Placement	`public/illustrations/` — current set: `basketball-owl.svg`, `select-player.svg`, `selecting-team.svg`; used in empty states, search, compare
Style spec	Flat vector, geometric, 2–4 colors max per figure: ink `#FBF8F5`, amber `#FF6413`, purple `#6D49F4`, muted `#8B8580`. Rounded shapes, 2 px consistent stroke weight at 48 px grid
Display size	160–240 px rendered (SVG, so supply source at 512×512 artboard)
Rules	Figures may be playful (the owl) but never cartoon-grotesque; must sit on dark surfaces; no gradients unless subtle (≤ 2 stops)

J. SHOP-PRODUCT — product imagery


Placement	`/shop` cards (square, `object-cover`) and detail page (square, zoom on hover)
Canvas	1024×1024 px master, square 1:1
Styling	Subject centered, ~70 % of frame, on `--surface-2` (`#040303`) gradient well; soft top-light; no props clutter; consistent per-product-series background
Formats	WebP + PNG @1x/@2x; JPG allowed for photos ≤ 300 KB
Rules	Alt-text-ready (product name is the description); no text baked into the image

K. SOCIAL-KIT — platform banners (marketing)

Platform	Canvas	Safe zone	Notes
Facebook cover	820×312 px	center 640×312	brand + tagline left
Facebook/IG post	1080×1080 px	center 90 %	scoreboard-style stat posters
Instagram story	1080×1920 px	top 320 px / bottom 420 px clear	full-bleed art + swipe-up zone bottom
X (Twitter) header	1500×500 px	center 1200×500
YouTube channel	2560×1440 px	center 1546×423 px	logo top-left, text right
LinkedIn banner	1584×396 px	center 90 %

Style: same dark court language. Never use the live site's screenshots as the design (no fake data in marketing).

L. PRINT (optional, phase 2)

Match-day program cover: A4 210×297 mm @300 dpi = 2480×3508 px; poster A3 297×420 mm. CMYK conversion provided by designer; brand colors remain the same values converted.

5. Copy and language rules

Mongolian first. All public-facing text on assets is Mongolian. English is only for the scout-facing export view.
Verified strings you may reuse:

String	Meaning	Usage
Оноо	"Score / Onoo"	Wordmark
Лигийн бүх түүх нэг дор.	"All league history in one place."	Home tagline (hero fallback)
Тоглолтын төв	"Game Center"	Home hero headline
Ивээн тэтгэгч	"Sponsor"	Sponsor slot label
НГ	points	Stat label
ОВР	rebounds	Stat label
ПАС	assists	Stat label

Stat labels: НГ (points), ОВР (rebounds), ПАС (assists) — use the Mongolian abbreviations, never English ones, on MN-facing assets.
Dates and times on assets: Mongolian format (2026.08.07, 19:00). Timezone Asia/Ulaanbaatar.
Placeholders on templates must be marked [ДҮҮРГЭХ] / [TITLE MN] — never leave Latin lorem ipsum in a template the client might ship.
Cyrillic check: every deliverable with text is proofread for Ө/Ү/ө/ү glyphs rendering correctly.

6. Delivery and technical rules

Naming

onoo-<ID>-<variant>.<ext> — examples:

onoo-home-hero-bg-desktop.webp
onoo-home-hero-bg-mobile.webp
onoo-news-cover-01.webp
onoo-og-template-1200x630.png
onoo-sponsor-logo-{sponsor}.png
onoo-icon-512-maskable.png
onoo-social-fb-cover.png

Folder structure (handoff)

handoff/
├── 01-logo/            # masters + exports
├── 02-hero/            # home hero + section banners
├── 03-news-covers/
├── 04-og-share/        # og templates + award card
├── 05-sponsor/         # sponsor kit + ticker
├── 06-team-logos/
├── 07-icons/           # pwa + favicon
├── 08-illustrations/
├── 09-shop/
├── 10-social/
└── 11-print/

Format rules

Use	Master	Web	Print
Logos, marks, motifs	SVG / AI (outlined + editable)	SVG or PNG @1x/@2x	—
Banners, key art	PSD/AI layered	WebP @1x/@2x, PNG fallback	TIFF/PDF
Photos	RAW/PSD	JPG ≤ 300 KB	CMYK TIFF
Icons	SVG	PNG @1x/@2x/@3x	—

Color profile: sRGB for everything web. No embedded CMYK in web files.
Raster exports at @2x minimum for any element rendered ≥ 1× CSS size.
No interlaced PNGs, no 8-bit banding on dark gradients (use ≥ 16-bit master, dither if needed).
Every web raster has its pair of previews: 360 px and 1920 px wide, flattened, with a 50 % white text sample strip to prove legibility.
Do not commit binaries to the repo directly — deliver to the developer; the developer places them under public/ and compresses.

7. Deliverable checklist (designer sign-off)

Onoo — Design Assets Specification (Public Pages)

Purpose: This document is the contract between the Onoo product team and the graphic designer. It defines every visual asset the public website needs: banners, key art, logos, icons, social images, and their exact sizes, safe zones, colors, typography, and file rules.

Reference system: DESIGN.md (product design decisions) + src/app/globals.css (live tokens). The live website is the source of truth. If this document and the website disagree, the website wins — tell the developer.

Status: v1.0 — 2026-08-07 Audience: graphic designer, developer integration.

1. Product in one paragraph

Design principles that govern every asset:

Dark canvas, bright data. Assets are built for a near-black background. Amber = live energy (scores, CTAs, LIVE badges). Purple = depth and premium. Never put data on a busy background.
The number is the hero. Stats use huge tabular numerals. Type follows, decoration follows last.
Mobile is the default. Everything is designed at 360px first, then scales up to desktop. Every asset ships a mobile variant or proof that it survives small sizes.
Court motif, not clutter. Half-court line, center circle, radial spotlights. One motif, used consistently.
No fake content. No AI-generated athlete imagery, no Lorem ipsum, no copied NBA assets. Real Mongolian copy or clearly-marked placeholders.

2. Brand foundations

2.1 Wordmark and logo

Item	Spec
Wordmark	"Оноо" — Oswald 800, tight tracking, white on dark, amber accent allowed for a single glyph or underline bar
Nav lockup (live)	36×36 px chip, `rounded-lg` (8 px), near-black purple-tinted bg, amber `CircleDot` glyph centered; wordmark "Оноо" to the right (hidden on <640 px)
Master files to deliver	SVG masters: full lockup (dark bg), horizontal on transparent, monochrome white, monochrome amber, app mark only (the chip glyph)
Minimum clear space	1× the glyph height on all sides of the mark
Minimum size	Mark: 16 px. Wordmark: not below 64 px wide on banners

Note: tenants can swap the logo via admin (white-label). Deliverables must never depend on the default mark alone — the wordmark must also read without the glyph.

2.2 Color palette

CSS tokens are authoritative (src/app/globals.css). Hex values below are accurate conversions for design tools (sRGB). Site is dark-first; light mode exists but banners are dark-theme assets.

Token	oklch	Hex (approx)	Usage
`--background`	`oklch(0.02 0.002 60)`	`#000000`	Page canvas — near black
`--surface-1` (card)	`oklch(0.07 0.003 60)`	`#010101`	Cards, asset base layer
`--surface-2`	`oklch(0.10 0.004 60)`	`#040303`	Raised panels, image wells
`--surface-3`	`oklch(0.14 0.005 60)`	`#0B0907`	Hover/prominent panels
`--ink` / `--foreground`	`oklch(0.98 0.005 60)`	`#FBF8F5`	Primary text on dark
`--muted-foreground`	`oklch(0.62 0.01 60)`	`#8B8580`	Secondary text, labels
`--primary` / `--brand-sports`	`oklch(0.72 0.22 40)`	`#FF6413`	Amber-orange — the sports accent
`--brand-sports-light`	`oklch(0.82 0.18 40)`	`#FF9664`	Amber tint, highlights
`--brand-sports-dim`	`oklch(0.55 0.18 40)`	`#C33E00`	Amber on dark, deep glow
`--secondary` / `--brand-purple`	`oklch(0.55 0.24 285)`	`#6D49F4`	Purple — depth, premium
`--brand-purple-light`	`oklch(0.65 0.20 285)`	`#8776FF`	Purple tint
`--warning` (scores)	`oklch(0.78 0.18 55)`	`#FF932A`	Scoreboard numerals, live badges
`--sidebar` (hero bg)	`oklch(0.06 0.01 265)`	`#000102`	Hero panels — black with purple hint
`--success`	`oklch(0.65 0.18 145)`	`#31AA40`	Positive deltas, form dots
`--destructive`	`oklch(0.70 0.19 25)`	`#FF645F`	Errors, negative deltas
`--info`	`oklch(0.60 0.15 240)`	`#0089D0`	Informational
`--border`	white 10 % over bg	`~#1A1A1B`	Hairline borders, court lines

Color rules:

Amber is the competition accent: scores, LIVE, CTAs, the 3 px top accent bar on every page header. It must never exceed ~30 % of an asset's area.
Purple is the depth layer: gradients, glows, secondary charts, the dark player-showcase hero.
Team colors are accents only — a logo chip, a stat bar, a glow. Team color never becomes a full surface and never carries meaning alone (accessibility).
Text on dark must hold ≥ 4.5:1 contrast (WCAG AA). Amber #FF6413 is for display/accents, not body copy — #FF932A reads better for small text.
One accent per asset unless it is an explicit team-color asset.

2.3 Typography

Role	Font	Weights	Notes
Display / headlines	Oswald	600, 700, 800	Condensed, athletic, tight tracking (`-0.02em`), line-height 1.1. The NBA-energy voice.
Body	Manrope	400–700	Geometric sans. Full Mongolian Cyrillic incl. Ө (U+04E8) and Ү (U+04AE) — use the cyrillic-ext subset
Stats / numbers	JetBrains Mono	700	Tabular numerals, `-0.03em` tracking, monospaced so digits align in columns

Banner type scale (desktop / mobile):

Element	Desktop	Mobile (360 px)
Hero headline	96–128 px	48–64 px
Subheadline	32–48 px	22–28 px
Stat numeral	64–120 px	40–72 px
Label / kicker	12–14 px, uppercase, +0.05em tracking	same
Legal / disclaimer	10–12 px	same

Typography rules:

Headlines in ALL CAPS with Oswald 800 read most "sports network". Mongolian Cyrillic capitalizes fine — but verify every string for Ө/Ү rendering; if the font subset lacks them, outline the text or switch font.
Numbers are JetBrains Mono or Oswald 800 — never a script or serif font.
No fake italics, no letterspacing on Mongolian (Cyrillic diacritics break with wide tracking; keep ≤ +0.05em).

2.4 Motifs and texture (the "NBA-like" visual language)

These are the recurring visual elements. Use them, do not invent new ones.

Court baseline motif — a vertical half-court line + center circle, drawn as hairline strokes in --border (white ~10 %), low opacity (0.06–0.18), edges masked so the line fades at the frame. This is the signature "we are basketball" texture.
Radial spotlights — soft radial glows: amber at ~18 % / 10 % of the frame (top-left on heroes), purple at ~82 % / 88 % (bottom-right). Opacity 0.22–0.25 of the color; content sits above them.
Amber accent bar — a 3 px horizontal bar, gradient fading from transparent through amber to transparent (the header signature). Use as a divider under headlines or at frame edges.
Live pulse — a pulsing amber dot + "LIVE" label for live games (1.5 s opacity pulse).
Scoreboard energy — big tabular numerals, colon-separated clock, team chips above numbers. An asset that contains a scoreboard reads instantly as sports.
Court-dot accent — 6 px amber dot before a label (used on headings).
Marquee ticker — a continuous horizontal strip (scores scrolling). Used on the countdown strip; sponsor logo lives inside it.

Do not: glassmorphism blur on content cards, gradients that bury text, drop shadows on dark backgrounds (use subtle borders instead), photographic clutter behind data.

3. Mobile-first responsive rules (applies to every asset)

The site renders from 360 px wide. Mobile users in Mongolia browse on mid-tier Android over mobile data — every asset must stay light and legible at small sizes.

Design at 360 px first. Compose the mobile crop before the desktop crop. If the asset cannot work at 360 px, redesign, do not scale down.
Every banner asset ships 2 variants: desktop (≥1024 px layout) and mobile (360–640 px layout). Hero backgrounds additionally ship a vertical crop.
Safe zone = what must survive. Text and logos never live in the outer 8 % of any frame (small phones, rounded corners, notches). On hero assets the center ~60 % is the critical zone (team logos + scores render over it live).
Responsive behavior per breakpoint: 360 base → 640 (sm, horizontal controls) → 768 (md, full tables) → 1024 (lg, multi-column). Banners scale fluidly; the designer provides the two end states and the developer handles the middle.
Text minimums: no body copy below 12 px rendered size at 360 px; no headline below 40 px rendered on the mobile variant of a hero asset.
File weight budget (mobile data): every web-deployed raster ≤ 200 KB (WebP) per variant; total hero pair (desktop + mobile) ≤ 400 KB. Vector/SVG preferred where animation-free.
Deliver @1x and @2x for every raster; the web serves WebP with PNG fallback.
Test proof: each asset ships with a 360 px and 1920 px preview crop so the developer can verify the safe zone without opening the source file.

4. Asset inventory

Legend — ID used in file names; Canvas = artboard; Safe = area that must stay clear; Formats = delivery set; Max = file size budget.

A. HOME-HERO-BG — home hero backdrop (priority)


Placement	`src/app/page.tsx` hero section — full-width dark panel behind the live scoreboard (team logos, score, countdown render over it)
Canvas	Desktop: 1920×1080 px. Mobile: 1080×1920 px (vertical crop, or 750×1334)
Safe	Center band ~1200 px wide × ~600 px tall (desktop) / center ~70 % (mobile): team logos + scores + "Тоглолтын төв" headline render there
Content	Background art only. No text, no logos, no scoreboard — all of that is live UI on top. Art = court motif, radial amber/purple spotlights, subtle arena atmosphere
Opacity	Glow layers ≤ 0.25; motif lines ≤ 0.18. Must stay legible under white text (verify with a #FBF8F5 text sample over the final art)
Formats	WebP @1x/@2x + PNG fallback; master layered PSD/AI
Max	200 KB per web variant
Do	subtle, atmospheric, dark; the "stage" for the game
Don't	literal players, crowds, logos, text, bright photo areas, anything that competes with the scoreboard

B. SECTION-BANNER — page/competition/tournament headers


Placement	Future competition hubs, tournament hub (`/tournaments/[id]`), news landing. Wide billboard under the nav
Canvas	Desktop: 1920×400 px (4.8:1). Mobile: 750×320 px
Safe	Desktop: left 60 %, height 60 % (title zone). Mobile: center 80 % × 70 % (title centered)
Content	Optional title text (Oswald 800) + competition identity; else a designed key-art backdrop with empty title zone (dev renders the real name)
Formats	WebP @1x/@2x + PNG; master layered
Max	200 KB per variant
Rule	One accent (amber or purple), one motif. Team-color variants allowed per competition

C. NEWS-COVER — article cover template


Placement	News listing + detail pages (news UI ships from task T-11b.1; covers are the editorial face of the site)
Canvas	Desktop: 1200×675 px (16:9). Mobile: 750×422 px
Safe	Bottom 45 % = title overlay zone (scrim gradient recommended, ink → transparent). Top-left 15 % = category kicker zone
Content	Cover art + a title-safe template with the overlay scrim built in. Designer produces: 1 base template + 3 art-direction variations (action/stat-driven/photo)
Formats	PSD/AI template (editable text layer, MN copy), WebP export @1x/@2x
Max	250 KB per web export
Don't	text baked into the raster; crop art that destroys the 16:9 → 4:5 mobile recrop

D. AWARD-CARD — shareable award/recap graphic template


Placement	Awards page (`/awards`), recap share cards, `api/cards` share images
Canvas	800×400 px @2x = 1600×800 master (2:1)
Live reference	Dark `#0a0a0a` bg, 10 px amber left bar, Oswald 800 stat numerals, team-color accents. Designer formalizes this into a reusable template
Content	Template art only; award title + player name + stat lines render dynamically
Formats	Layered template + exported art layers (PNG/SVG)
Rule	Must reflow for: award card (800×400), OG image (1200×630) — design for both from one master

E. OG-IMAGE — social share template (1200×630)


Placement	`opengraph-image.tsx` per player/team/game — Facebook/X/WhatsApp/Telegram link previews. The most-shared asset on the site
Canvas	1200×630 px (1.91:1), PNG output
Live reference	Dark bg, left amber bar, Oswald 600/800 + Inter 400, team color resolved from data
Safe	1200×630 renders at ~400×210 px in most feeds — the left ~80 % is what matters; right 20 % may crop on some platforms
Content	Template art (bg texture, glow, court motif) + layout zones: kicker line, title, stat line, logo slot. Text is dynamic
Formats	Layered template + bg art @1x/@2x
Max	200 KB rendered PNG

F. SPONSOR-LOGO — sponsor placement kit (revenue)


Placement	`SponsorSlot` components: slots `standings`, `leaders`, `game`, `recap`, `award_card`, `home`, `ticker`. Logo renders at 120×40 px CSS (so supply ≥ 240×80 px @2x) next to the "Ивээн тэтгэгч" label; ticker slot renders a slim strip
Deliverable	1. Sponsor logo lockup on transparent bg, PNG + SVG, ≥ 480×160 px master. 2. Optional slim ticker banner 640×48 px (logo + short sponsor name)
Max	2 MB, JPEG/PNG/WebP only (storage bucket limit)
Rules	Transparent background only — the site is dark, a white box breaks the design. No text smaller than 10 px at render size. Lockup must read at 120×40 px on near-black
Don't	drop shadows baked in, low-res raster upscaled, bright full-bleed photos

G. TEAM-LOGO — team identity kit


Placement	Standings, game cards, hero, leaderboards — rendered 24–128 px
Deliverable	Per team: 512×512 px crest/logo PNG (transparent) + SVG master; wordmark lockup 1200×400 px; `primary_color` hex chosen to match the brand system (saturated, mid-tone)
Rules	Team color = accent only. Logo must read as a solid silhouette at 24 px (no fine strokes < 2 px at 512). Contrast against near-black and against amber
Note	Teams already have logos; this kit standardizes quality for new teams

H. PWA-ICON — app icon set


Placement	PWA manifest, home screen, favicon
Master	1024×1024 px SVG/PNG
Exports	192×192, 512×512, maskable 512 (safe zone: content inside center 80 % circle), favicon 32×32 + 64×64, apple-touch 180×180
Content	Amber mark on near-black rounded square (matches the 36 px nav chip: dark bg, amber glyph)
Format	PNG (raster exports), SVG master
Max	50 KB per icon

I. ILLUSTRATION — empty states and helper art


Placement	`public/illustrations/` — current set: `basketball-owl.svg`, `select-player.svg`, `selecting-team.svg`; used in empty states, search, compare
Style spec	Flat vector, geometric, 2–4 colors max per figure: ink `#FBF8F5`, amber `#FF6413`, purple `#6D49F4`, muted `#8B8580`. Rounded shapes, 2 px consistent stroke weight at 48 px grid
Display size	160–240 px rendered (SVG, so supply source at 512×512 artboard)
Rules	Figures may be playful (the owl) but never cartoon-grotesque; must sit on dark surfaces; no gradients unless subtle (≤ 2 stops)

J. SHOP-PRODUCT — product imagery


Placement	`/shop` cards (square, `object-cover`) and detail page (square, zoom on hover)
Canvas	1024×1024 px master, square 1:1
Styling	Subject centered, ~70 % of frame, on `--surface-2` (`#040303`) gradient well; soft top-light; no props clutter; consistent per-product-series background
Formats	WebP + PNG @1x/@2x; JPG allowed for photos ≤ 300 KB
Rules	Alt-text-ready (product name is the description); no text baked into the image

K. SOCIAL-KIT — platform banners (marketing)

Platform	Canvas	Safe zone	Notes
Facebook cover	820×312 px	center 640×312	brand + tagline left
Facebook/IG post	1080×1080 px	center 90 %	scoreboard-style stat posters
Instagram story	1080×1920 px	top 320 px / bottom 420 px clear	full-bleed art + swipe-up zone bottom
X (Twitter) header	1500×500 px	center 1200×500
YouTube channel	2560×1440 px	center 1546×423 px	logo top-left, text right
LinkedIn banner	1584×396 px	center 90 %

Style: same dark court language. Never use the live site's screenshots as the design (no fake data in marketing).

L. PRINT (optional, phase 2)

Match-day program cover: A4 210×297 mm @300 dpi = 2480×3508 px; poster A3 297×420 mm. CMYK conversion provided by designer; brand colors remain the same values converted.

5. Copy and language rules

Mongolian first. All public-facing text on assets is Mongolian. English is only for the scout-facing export view.
Verified strings you may reuse:

String	Meaning	Usage
Оноо	"Score / Onoo"	Wordmark
Лигийн бүх түүх нэг дор.	"All league history in one place."	Home tagline (hero fallback)
Тоглолтын төв	"Game Center"	Home hero headline
Ивээн тэтгэгч	"Sponsor"	Sponsor slot label
НГ	points	Stat label
ОВР	rebounds	Stat label
ПАС	assists	Stat label

Stat labels: НГ (points), ОВР (rebounds), ПАС (assists) — use the Mongolian abbreviations, never English ones, on MN-facing assets.
Dates and times on assets: Mongolian format (2026.08.07, 19:00). Timezone Asia/Ulaanbaatar.
Placeholders on templates must be marked [ДҮҮРГЭХ] / [TITLE MN] — never leave Latin lorem ipsum in a template the client might ship.
Cyrillic check: every deliverable with text is proofread for Ө/Ү/ө/ү glyphs rendering correctly.

6. Delivery and technical rules

Naming

onoo-<ID>-<variant>.<ext> — examples:

onoo-home-hero-bg-desktop.webp
onoo-home-hero-bg-mobile.webp
onoo-news-cover-01.webp
onoo-og-template-1200x630.png
onoo-sponsor-logo-{sponsor}.png
onoo-icon-512-maskable.png
onoo-social-fb-cover.png

Folder structure (handoff)

handoff/
├── 01-logo/            # masters + exports
├── 02-hero/            # home hero + section banners
├── 03-news-covers/
├── 04-og-share/        # og templates + award card
├── 05-sponsor/         # sponsor kit + ticker
├── 06-team-logos/
├── 07-icons/           # pwa + favicon
├── 08-illustrations/
├── 09-shop/
├── 10-social/
└── 11-print/

Format rules

Use	Master	Web	Print
Logos, marks, motifs	SVG / AI (outlined + editable)	SVG or PNG @1x/@2x	—
Banners, key art	PSD/AI layered	WebP @1x/@2x, PNG fallback	TIFF/PDF
Photos	RAW/PSD	JPG ≤ 300 KB	CMYK TIFF
Icons	SVG	PNG @1x/@2x/@3x	—

Color profile: sRGB for everything web. No embedded CMYK in web files.
Raster exports at @2x minimum for any element rendered ≥ 1× CSS size.
No interlaced PNGs, no 8-bit banding on dark gradients (use ≥ 16-bit master, dither if needed).
Every web raster has its pair of previews: 360 px and 1920 px wide, flattened, with a 50 % white text sample strip to prove legibility.
Do not commit binaries to the repo directly — deliver to the developer; the developer places them under public/ and compresses.

Бидэнтэй хамт

Бидэнтэй хамт

Onoo — Design Assets Specification (Public Pages)

1. Product in one paragraph

2. Brand foundations

2.1 Wordmark and logo

2.2 Color palette

2.3 Typography

2.4 Motifs and texture (the "NBA-like" visual language)

3. Mobile-first responsive rules (applies to every asset)

4. Asset inventory

A. HOME-HERO-BG — home hero backdrop (priority)

B. SECTION-BANNER — page/competition/tournament headers

C. NEWS-COVER — article cover template

D. AWARD-CARD — shareable award/recap graphic template

E. OG-IMAGE — social share template (1200×630)

F. SPONSOR-LOGO — sponsor placement kit (revenue)

G. TEAM-LOGO — team identity kit

H. PWA-ICON — app icon set

I. ILLUSTRATION — empty states and helper art

J. SHOP-PRODUCT — product imagery

K. SOCIAL-KIT — platform banners (marketing)

L. PRINT (optional, phase 2)

5. Copy and language rules

6. Delivery and technical rules

Naming

Folder structure (handoff)

Format rules

7. Deliverable checklist (designer sign-off)

Onoo — Design Assets Specification (Public Pages)

1. Product in one paragraph

2. Brand foundations

2.1 Wordmark and logo

2.2 Color palette

2.3 Typography

2.4 Motifs and texture (the "NBA-like" visual language)

3. Mobile-first responsive rules (applies to every asset)

4. Asset inventory

A. HOME-HERO-BG — home hero backdrop (priority)

B. SECTION-BANNER — page/competition/tournament headers

C. NEWS-COVER — article cover template

D. AWARD-CARD — shareable award/recap graphic template

E. OG-IMAGE — social share template (1200×630)

F. SPONSOR-LOGO — sponsor placement kit (revenue)

G. TEAM-LOGO — team identity kit

H. PWA-ICON — app icon set

I. ILLUSTRATION — empty states and helper art

J. SHOP-PRODUCT — product imagery

K. SOCIAL-KIT — platform banners (marketing)

L. PRINT (optional, phase 2)

5. Copy and language rules

6. Delivery and technical rules

Naming

Folder structure (handoff)

Format rules

7. Deliverable checklist (designer sign-off)