# Sporda — Design Grammar

Phase 1 deliverable. Grounded in the visible sports-app inspirations (Stembet, GoalLine, Eleven Beyond Arena, Orix sports-news, Bet Warrior, Padel Kinetiq) since the 143-screen Figma kit could not be read from the local mount. Substitute exact kit values once the kit is re-imported.

---

## Voice & casing

- **Section titles**: Title Case (`Match Highlights`, `Roshn Saudi League`).
- **Tab labels & nav**: Title Case (`Home`, `Matches`, `Watch`, `News`, `Profile`).
- **Sub-tab pills**: Title Case (`Events`, `Stats`, `Lineups`, `Commentary`).
- **CTA buttons**: Sentence case (`Follow team`, `Set notifications`, `Get started`).
- **Metadata**: dot-separated, sentence case (`La Liga · Old Trafford · 21:00`).
- **Live state**: small caps not used; lowercase pill `live` with red dot, or `FT` / `HT` in monospace caps.

---

## Palette — dark (default)

| Role | Hex | Use |
| --- | --- | --- |
| `--bg-base` | `#0A0F0C` | Page background. Pure near-black with a 2° green tilt so the accent reads native. |
| `--bg-surface` | `#121915` | Card, sheet, input background. |
| `--bg-elevated` | `#1A2320` | Card hover, raised popover, modal. |
| `--bg-inset` | `#080C0A` | Inset wells (search input, code-like areas). |
| `--border-hairline` | `#1F2A24` | 1px dividers between rows. |
| `--border-strong` | `#2B3832` | Outlined pill buttons, focused inputs. |
| `--accent` | `#C8FF3E` | Live FAB, primary CTA, active nav pill, brand-tinted highlights. Used surgically — never as a card fill except for ONE element per screen. |
| `--accent-press` | `#B5E835` | Active button press state. |
| `--accent-ink` | `#0A1400` | Text on accent surfaces. |
| `--text-primary` | `#F5F7F4` | Headings, score numerals, primary body. |
| `--text-secondary` | `#9AA59F` | Metadata, captions, inactive nav. |
| `--text-muted` | `#5E6963` | Disabled, helper, ghost. |
| `--live` | `#FF3B5C` | LIVE dot, in-play indicators only. |
| `--positive` | `#4ADE80` | W in form, goal scored. |
| `--draw` | `#9AA59F` | D in form. |
| `--negative` | `#FF7185` | L in form. |
| `--warning` | `#FFB547` | Yellow card, lineup warnings. |

## Palette — light (polish target)

| Role | Hex |
| --- | --- |
| `--bg-base` | `#F6F8F5` |
| `--bg-surface` | `#FFFFFF` |
| `--bg-elevated` | `#FFFFFF` (shadow does the work) |
| `--border-hairline` | `#E7EBE6` |
| `--accent` | `#5BC410` (slightly deeper — `#C8FF3E` is illegible on white) |
| `--accent-ink` | `#FFFFFF` |
| `--text-primary` | `#0E1410` |
| `--text-secondary` | `#5E6963` |

## Hero gradients (live match card only)

- **Live**: `linear-gradient(135deg, #1A2320 0%, #1F2D26 60%, #243A30 100%)` with `--accent` 8% noise overlay at top-left.
- **Champions League hero**: `linear-gradient(180deg, rgba(36,58,48,0.0) 0%, rgba(10,15,12,0.85) 70%)` over a full-bleed stadium photo.

---

## Type

Family: **Manrope** (var weight, geometric grotesque). Display 700, UI 500/600, body 400. Numerals: tabular for scores (`font-variant-numeric: tabular-nums`).

| Token | Size / line-height / weight / tracking | Use |
| --- | --- | --- |
| `--fs-display-xl` | 56 / 56 / 800 / -0.02em | League title overlays ("ROSHN SAUDI LEAGUE"). |
| `--fs-display-lg` | 40 / 44 / 700 / -0.02em | Score numerals on match hero. |
| `--fs-display-md` | 28 / 32 / 700 / -0.01em | Screen titles (`Matches`, `News`). |
| `--fs-section` | 18 / 24 / 700 / -0.005em | Section heads (`Match Highlights`, `Upcomings`). |
| `--fs-body` | 15 / 22 / 500 / 0 | Card titles, list rows. |
| `--fs-caption` | 13 / 18 / 500 / 0 | Metadata, sub-labels. |
| `--fs-micro` | 11 / 14 / 600 / 0.04em uppercase | Tags (`LIVE`, `FT`, league code), W/D/L badges. |
| `--fs-mono` | 13 / 18 / 600 / 0 | Timestamps (`32'`, `1st Half`), odds. |

---

## Spacing

Base unit **4px**. Approved values: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64`.

- Card padding: `16px` mobile, `20px` desktop.
- Section gap (between cards in a feed): `12px`.
- Group gap (between feed sections): `28px`.
- Item gap (between list rows in a card): `12px`.
- Safe-area inset on bottom nav: `16px + env(safe-area-inset-bottom)`.

## Radii

| Token | Value | Use |
| --- | --- | --- |
| `--r-input` | 12px | Inputs, small chips. |
| `--r-button` | 14px | Square buttons. |
| `--r-pill` | 999px | Pill nav, segmented controls, FAB. |
| `--r-card` | 18px | Match card, news card, list cards. |
| `--r-card-lg` | 24px | Match hero, large feature cards. |
| `--r-sheet` | 28px | Bottom sheet, modal top corners. |
| `--r-circle` | 50% | Crests, avatars, FAB, dots. |

## Shadows

Dark surfaces don't accept soft shadows well — use ring + tint instead.

- `--shadow-card`: `0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35)`
- `--shadow-fab`: `0 8px 24px rgba(200,255,62,0.30)` (accent-tinted)
- `--shadow-sheet`: `0 -8px 32px rgba(0,0,0,0.5)`

---

## Component vocabulary

Each entry cites the inspiration screen it derives from (would cite kit screen filenames once the kit is restored).

### Match card — compact (feed)
*Inspiration: GoalLine Matches list*. 
Rounded `--r-card`, surface fill, `League · Stadium` micro caption at top center, crest-name-score-FT-score-name-crest row, 12px vertical padding. Tappable, no hover state on mobile.

### Match card — live featured (hero)
*Inspiration: Eleven Beyond Arena live screen*.
Full-bleed `--r-card-lg`, gradient surface, large crests, `0 : 2` score in `--fs-display-lg`, mid pill `LIVE · 32:29 · 1st half` with `--live` dot pulsing 1.2s ease-in-out. Optional odds row below (3 pills: home/draw/away).

### Multi-match tile (carousel item)
*Inspiration: GoalLine Upcomings cards*.
Smaller version of the match card, fixed width 240px, horizontally scrollable row with momentum + snap. Date label in `--fs-micro` uppercase at top right.

### Pill nav — primary tab strip
*Inspiration: Stembet sport selector*.
Horizontal scroll of pills. Active = `--accent` fill, `--accent-ink` text, `--fs-body` 600. Inactive = transparent fill, `--border-strong` outline, `--text-secondary` text. Each pill 44px high, 16px horizontal padding.

### Underline sub-tabs
*Inspiration: Eleven Live Match (Game/Line-up/News/INFO)*.
4–5 inline text tabs separated by 24px. Active = `--text-primary` 700 with 2px `--accent` underline, 8px below the text. Inactive = `--text-secondary` 500. Horizontally scrollable when overflow.

### Bidirectional stat bar
*Inspiration: Sports News Stats panel*.
`label-left  value-left  [bar]  value-right  label-right` — single row. Bar is 4px tall, full-pill, split at the percentage. Left side `--accent`, right side `--text-secondary` (or both `--accent` shades for non-competitive stats).

### League standings row
*Inspiration: Roshn Saudi League table*.
| Rank | Crest + Name | P | W | D | L | Pts | Form |
Top-of-table row gets `--accent` fill with `--accent-ink` text (champion indicator). Last 5 form rendered as 5 colored dots: W=positive, D=draw, L=negative.

### Bottom nav
*Inspiration: Stembet bottom bar, Sports News FAB variant*.
5 slots: `Home / Matches / FAB (centered) / News / Profile`. FAB is `--accent`-filled 56px circle with shadow `--shadow-fab`, raised 14px above the bar. Inactive icons in `--text-secondary`, active gets `--text-primary` + accent indicator dot 4px under the icon.

### Chevron list row
Single row: optional left icon (16px) + label + spacer + optional value + chevron right. 56px tall, 16px horizontal pad. Border-bottom `--border-hairline` between rows, none on last.

### Toggle row
Same chrome as chevron list row but right side is a 32×20 pill toggle. Off = `--bg-inset` track, on = `--accent` track. Thumb is `--text-primary` 16×16 circle with a 1px ring.

### Segmented control
For binary-or-ternary view switches inside a screen (e.g. *Mine / All / Favorites*).
Container is `--bg-inset` pill, 36px high. Active segment = `--bg-surface` raised, `--text-primary` 600. Inactive = `--text-secondary` 500.

### Search input
`--bg-inset` fill, `--r-pill`, 48px tall, 16px left padding for icon, 16px right padding for clear. Placeholder in `--text-muted`. On focus, 1px `--border-strong` ring.

### News card
*Inspiration: Orix sports news Trending block*.
Full-bleed photo top (16:9), `--r-card`, content block beneath with 12px pad: TAG pill (uppercase micro), title in `--fs-section`, meta row (`Partnership · 15 min ago` and heart/comment/share at right).

### Watch / video player card
*Inspiration: Eleven streaming overlay*.
Full-bleed thumbnail with centered round play button (`--accent`, `--shadow-fab`), `LIVE` pill top-right (red), match score chip pinned bottom-left. Tappable card opens player.

### Lineup pitch
*Inspiration: GoalLine LaLiga lineup*.
Pitch is a dark green surface (`#0F2218` → `#1A3A2A` linear top-down), white horizontal stripes every 25% at 4% opacity, white circular avatar markers with number inside, name caption below. Yellow-card warning sits as small yellow dot top-right of marker.

### Bottom sheet
`--r-sheet` top corners, `--bg-surface`, drag handle 36×4 `--text-muted` at top center, 24px content padding. Backdrop scrim `rgba(0,0,0,0.6)`.

### Share modal
*Inspiration: standard iOS share*. Bottom sheet with 6-icon row (Copy link, Messages, X, Instagram, WhatsApp, More), plus a "preview card" at top showing what's being shared.

---

## Motion

Restrained, all eased with `cubic-bezier(0.2, 0.0, 0.0, 1.0)`.

| Token | Duration | Use |
| --- | --- | --- |
| `--dur-fast` | 120ms | Press, hover. |
| `--dur-base` | 220ms | Tab change, sheet open, card expand. |
| `--dur-slow` | 380ms | Page transition, hero swap. |

- **LIVE dot**: opacity 0.4 ↔ 1.0, 1.2s ease-in-out infinite.
- **FAB press**: scale 1.0 → 0.94, 120ms.
- **Sheet enter**: translateY 100% → 0, 380ms.
- **Tab indicator**: width + transform on the 2px underline, 220ms.
- **Match card live score change**: number flips up 12px with 380ms ease, old number cross-fades. (Used for live in-play updates only.)

---

## Iconography

- **Lucide-react** for 95% of glyphs (chevron, bell, search, settings, gear, share, heart, play, x, plus). Stroke 1.75, size 20 default.
- **Custom sport pictograms** needed for: soccer ball, basketball, tennis, padel racquet, cricket bat, american football, e-sport controller. Build as solid-filled SVGs, 24×24 grid, single-color (use currentColor) so they tint with the active pill background.
- **Team crests**: real SVGs once licensed. Until then, draw circular monogram badges — 2 letters on a tinted background derived from a 6-color hash of the team name (`#FF6B6B`, `#4ECDC4`, `#FFE66D`, `#7158E2`, `#3D5AFE`, `#F8B400`).

---

## Open questions for kit alignment

When the kit is restored, these are the values to re-verify against `Screenshot 2026-05-22 at 3.06–3.14 AM`:

1. Exact accent hex — is it `#C8FF3E` lime or closer to `#5BFF8A` Stembet-green or `#7E60FE` Orix-purple?
2. Card radius — is it 16 or 18 or 20?
3. Bottom-nav FAB elevation — is the FAB always present, or only on Home?
4. Lineup pitch color and stripe pattern.
5. Standings table — does the top row get an accent fill or just a left bar?
6. Light-mode accent — does it shift, or does the kit lean on a darker neutral?