Atoms built from the Phase 1 tokens, with variants typed through CVA. Every control below is live — hover, tab and click them. Nothing here hardcodes a color or a size.
Every interactive atom implements the same six states. Disabled, error and loading are rendered statically below; hover, focus and active are live, so use a mouse and the Tab key to exercise them.
shadow-focus, not the browser default.Price must be above 0.
Field owns the id plumbing — label association, aria-describedby for hint and error, and aria-invalid — so no input re-implements it. Error replaces hint rather than stacking; two lines of guidance under one field is noise.
Letters and numbers only.
Must be at least 8 characters.
Arrow keys nudge by the tick size.
Optional.
range underneath, so arrow keys, Home/End and mobile drag come free. The readout climbs the margin-health ramp — grey, then amber, then red past 8x — because the number is the risk, not the track.data-highlighted, not :hover.transform only — restating the centring offset in the keyframe made it compose with Tailwind's translate and snap into place.Three states that all look like “nothing here” and mean completely different things. The whole job of this group is to keep them distinguishable: a skeleton says data is coming, an empty state says there is none and this is normal, an error state says the request failed and here is what to do. At rest a skeleton block and an empty panel are the same rectangle — the sweep is the only difference, which is why it is a token rather than decoration.
--size-row, the same token the real ladder uses, so nothing moves when the book arrives.| Market | Size | Entry | PnL |
|---|---|---|---|
No open positions
A position opens here as soon as one of your orders fills.
No collateral deposited
Deposit to fund your cross-margin account and start trading.
No prints yet
Trades appear here the moment the book crosses.
Couldn't load the order book
The market data socket did not respond. Your positions and orders are unaffected.
WebSocket 1006 — abnormal closureCouldn't load account
Your balances are unavailable.
danger, never sell. Red means SHORT everywhere else on this screen, so the triangle glyph and the word carry the meaning and the colour only reinforces it. Retry is neutral — solid danger is reserved for a committed destructive action inside a confirm dialog.Fill confirmations are the reason this system exists, and they are where the two colour rules collide: a fill has a status and a direction, and both want to own the colour. They are split by job — the toast container carries status only, and direction lives in the body as a Side badge, which always prints the word. Click through them; they stack, pause on hover, and can be swiped away.
success — the success token aliases the long green, so a green “Filled” on a SHORT fill would state the opposite of the truth.danger — non-directional, because a liquidation closes a LONG or a SHORT and the Side badge beside it is the only thing in the toast allowed to be green or red.This is where the colorblind risk flagged in Phase 1 gets resolved. Delta always renders an explicit sign and Side always renders a word, so direction survives with the color removed. The sign is not an option on the component — it cannot be turned off.
A perpetual future is opposing pressure held in balance — longs against shorts, tethered to spot by funding. The most characteristic moment in the product is the middle of the order book, where bids pressing up meet asks pressing down and the last price sits on the join. Seam generalises that moment: two quantities grow toward each other and meet at a point that is the ratio. Information, not ornament — the balance is readable before any number is.
A real order ticket assembled only from the atoms above — no bespoke styles. This was the check that the primitives held together before anything was built on them; they did, and the organisms now exist. Three are on this page — the global header at the top, the ladder in The seam, and this ticket. The rest live in the terminal: market bar, order book, trades feed, chart and account tables.