​

Components

​

Button

​

Price button

• Nothing is clipped. The button is shrink-0 and its width fits the widest price on the market’s tick (99.9¢ on a 0.001 tick) at numeric-price size. A price never truncates and never shrinks its font; Exit, Join and Add labels (Exit 39¢) reserve their widest value the same way.
• Centred means optically centred. The price is centred on its own text. The reduced-motion direction marker, the sending bar and any other marker that comes and goes are positioned absolutely (position: absolute, outside the text box) and never take width from the price, so 42¢ sits in the same place with or without them, within 1 px of the button’s centre. On mobile the caption and the price are each centred on their own text.
• One gap per group. Price buttons that form a grid (the mobile Sell/Buy pairs of a board card, the portfolio’s Exit/Join/Add row) use one gap from the spacing scale, the same across and down: 4 px on mobile.

​

Cancel all

​

Safe/Armed switch

 desktop 120×32                         mobile 96×32 (44 hit)
 ┌────────────┬───────────┐             ┌──────┬───────┐
 │    Safe    │   Armed   │  (Safe)     │ Safe │ Armed │
 └────────────┴───────────┘             └──────┴───────┘
 ┌────────────┬───────────┐
 │    Safe    │   Armed   │  (Armed: right segment --warning fill, --warning-foreground text)
 └────────────┴───────────┘

​

Stake selector

• Desktop: segmented control in the top bar. One segment per preset from settings (1–6), 40 × 32 each, numeric (14/20): 10 25 50 100. The active segment is --primary bg / --primary-foreground text. Label Stake $ sits left of it.
• Mobile: the stake bar: a full-width 44 px row pinned above the tab bar on Live and Watchlist, and in the ladder sheet footer. Segments are 44 px tall and share the width equally.
• Hotkeys 1–6 pick a preset in the focused panel (armed only).
• Disabled segments: none. Stake selection works in Safe.

​

Status pill

​

Price cell (with flash)

• Right-aligned, fixed width per column, tabular-nums.
• Structure: position: relative cell, a ::after flash layer (inset: 0, opacity: 0, pointer-events: none) under the text.
• On a change of the displayed value: the value swaps instantly, and the flash layer gets --flash-up (value rose) or --flash-down (value fell) and runs the flash (see motion.md). Sizes and depth do not flash; only prices and P&L columns do.
• Stale: no flash, --muted-foreground text.
• Reduced motion: no flash; a static lucide [arrow-up] (--bid) or [arrow-down] (--ask) after the value, cleared on the next change or after 5 s. It is positioned absolutely outside the value’s text box, so the value never moves when it appears.
• Nothing is clipped: the cell reserves the widest value of its column and never truncates; beyond it the value switches to compact form.

​

Order chip

• Nothing is clipped. A chip is shrink-0 and never truncates its size or count. Its width fits the widest value it can show in its slot (12.3k, 12/25, ×2); a larger size switches to compact form (1.2k) with the exact size in the tooltip. In the ladder the chip sits at the outer edge of the Bid or Ask cell and the depth size gives way (it moves under the chip’s opposite side), never the chip.
• Centred means optically centred. The size is centred on its own text. State markers that come and go (the [check] on a fill, [circle-alert] on a reject, [circle-help] on an unknown order, the countdown ring) are positioned absolutely at the chip’s inner left edge, inside padding the chip always has, so the size does not move when a marker appears or leaves.
• A chip and the other controls in its row (steppers, cancel button in the orders table) use one height: the table’s --control-h, or the ladder’s chip height below.

​

Countdown ring

​

Cursor tag

• 24 px tall, --popover bg, 1 px --border, --shadow-md, label text, offset 12 px right and 16 px below the pointer, flipped at viewport edges. Moves with transform.
• Appears on the first frame of hover, with no delay and no fade.
• Content:
  • Buy: Buy $25 → 59.52 sh @ 42¢
  • Sell: Sell 59.52 sh @ 44¢ · +$1.19
  • Drag: Move buy 25 → 44¢
  • Safe: Safe: arm to trade
  • Stale: Stale 6s
  • Sell with no position: No position to sell
• Share counts are an estimate. The backend rounds size to the market’s minimum and tick before signing.

​

Tick stepper

​

Panel

• Header: 36 px, heading text, --border bottom line, actions on the right.
• Focused: header title in --foreground. A 2 px --ring line along the panel’s top edge (the panel focus indicator) shows only after F6 / Shift+F6, or while Armed with more than one panel that takes trading keys visible (interactions.md). Unfocused headers use --muted-foreground. Exactly one panel is focused at a time.
• Focus moves on pointerdown anywhere in the panel, with F6 / Shift+F6, or when a panel opens.

​

Position row

​

Ladder row

​

Score badge

​

Toast

• 56 px minimum height, --popover bg, --shadow-md, the overlay radius. A title line and a body line (body-sm, muted, up to two lines). A 3 px left stripe only for warning and critical; at most one text action and a close [x].
• Hover pauses the timer (desktop). Swipe dismisses (mobile).

• Notifications (fills, rejects, alerts, feed and trading-state events) come only from the notifications WS topic, with their severity’s stripe and duration: info 4 s, warning 8 s, critical until closed. Copy, stacking and coalescing are in notifications.md.
• Results of the user’s own action that is not a notification kind stay local:

​

Command palette row

│ [trending-up]  Lakers v Celtics                   88–84 Q3 4:12   42¢ / 44¢ │
│                NBA · Moneyline                                              │
 kind icon (16 px: trending-up market, users team, hash tag, history recent,
 chevron-right command), title body, subtitle body-sm muted, right side numeric muted

​

Empty states

​

Skeletons