Skip to main content

​
Live sports board

The home screen (/live). Every live and upcoming game, grouped by league, with the score and one-click prices for the game’s main market. Main workflow: watch several games, click to trade, dock up to four ladders beside the board.

​
Content

  • Games: live and today’s upcoming games across US majors, soccer, tennis, esports and others.
  • Main market per game: the moneyline (winner) market. Three-way for soccer (home, draw, away). If a game has no moneyline, its highest-volume market. Other markets are one click away (+12 link → market view).
  • Per outcome line: team, score, Sell (best bid) and Buy (best ask) buttons, your pending-order dot, your position and P&L.
  • Per game: clock, period, possession, live state, in-play delay chip, pre-game wipe warning.
  • Sorting inside a league: live games first (by start time), then upcoming (by start time). Reorders are deferred while the list is in use (interactions.md).
  • League order: most live games first, then alphabetical.

​
Desktop (content area 1376 px with no ladders; 448 px with four)

[ellipsis] appears on hover or focus of the game block and opens the game’s menu. Re-post 3 takes the place of Wipe after the start wipe.

​
Columns (left-anchored, widths in steps)

Columns are left-anchored, and every column except Game state and Team has a fixed width. Game state and Team take the board’s free width in two steps (below and from a 960 px board), so a name never truncates while its row has room (“Nothing is clipped”). The step changes only when the board width crosses 960 px, which happens when a ladder is docked or closed, never while the pointer rests on a price. Space left over sits at the right end. When the board is too narrow for a column, the column hides, starting from the right: +N, Vol, P&L, Position.
  • Every dot, icon, chip, badge and number in a line is shrink-0: only the team name may shrink. Scores, clocks, prices, sizes and P&L reserve their widest value.
  • Sell and Buy sit 8 px apart; the same 8 px separates Buy from Pending.
At 448 px (four ladders), everything up to Pending fits. Position and P&L hide; a 6 px --foreground square after the team name marks an outcome you hold (tooltip: size and P&L), and the docked ladder headers show the full position. The square is positioned absolutely and takes no width from the name.

​
Rows

  • Outcome line height --row-h (36 px). A two-outcome game is 72 px, three-outcome 108. 1 px --border between games.
  • Hover: --accent on the whole game block.
  • Keyboard row cursor: 2 px --ring bar on the left edge of the current outcome line.
  • League header: 32 px, sticky under the panel header, heading text, collapse chevron, the column labels (caption) aligned to the columns, and a stale pill when that league’s sports feed is stale.

​
Interactions

The docked ladders appear to the right of the board (app-shell.md). A docked outcome’s line gets a 2 px --foreground bar on the right edge of the Buy button column, so you can see which rows are docked.

​
States

​
Mobile (390 × 844)

  • Cards are 358 px wide (16 px margins), --card, --radius-lg, 12 px inner padding.
  • Outcome line: 44 px. Logo 20, name (body; short team names; takes the free width and truncates only when it is full), score 28 px, then Sell and Buy price buttons (76 × 44, two-line) right-aligned.
  • One gap per group: the Sell/Buy buttons of all outcome lines form one grid with a 4 px gap across and 4 px down. Outcome lines therefore sit 4 px apart.
  • Card header: game state on the left; your P&L, pending-order dot and the [ellipsis] menu button (44 × 44 hit, always visible on touch) on the right. The delay text and wipe warning also sit here; on a card the warning reads Orders cancel at start, since touch has no tooltip. None of them shrinks; the header never truncates the clock.
  • Footer shows only when you hold a position or have orders in the game.