Color
Surfaces, borders, the ink ramp, and the three semantic colours that are the only ones allowed to mean something.
Surfaces
Depth comes from stacked layers, not from shadow. Four of them.
--bgPage canvas — the "void". #0A0A0B dark / #f5f5f7 light--surfaceCards, main panels. #131316 / #ffffff--surface-2Raised: row hover, inputs, sub-cards--surface-3Controls: segmented, pills, nav backgroundsRule: the more interactive an element is, the higher its surface. Controls live on
--surface-3; their active state drops back to --surface.
Borders
--line--border — standard: cards, separators--line-soft--border-soft — discreet internal separators--line-strong--border-strong — card hover, input focusThe ink ramp
Text hierarchy is built from alpha on white (dark) or on near-black (light) — never from ad-hoc greys.
--t1Primary text — body, values--t2Secondary — labels, decimals--t3Tertiary — table headers, captions--t4Disabled, faint strokes--t3 is 0.55 in dark and 0.62 in light, not the 0.4 the original mockup used. 0.4
failed 4.5:1 contrast on labels — it was illegible on light backgrounds and marginal on dark. If
you are porting from an old file, do not restore the original value.
The money pattern
Integer part in --t1, decimals in --t2. It reads as one number but the eye lands on the
significant digits first.
<span className="tabular-nums">
12,418<span className="text-[var(--t2)] font-semibold">.42</span>
</span>System accents
--focus-ringFocus ring ONLY. Apple blue #2997ff / #0071e3--silverNeutral secondary icons, neutral sparklines--silver-softLight silver--chrome-hiChrome highlights ("diamond" buttons)--focus-ring is for the focus ring and nothing else. It is the only blue in the interface
chrome, which is exactly what makes a focused element unmistakable.
Semantic colours
Three colours plus their "soft" variants. These are the only colours in the system that mean something.
--greenGain, long, buy, success, up--redLoss, short, sell, error, down--warnRisk, alert, liquidation price, capacity--green-softPositive badge / pill background--red-softNegative badge / pill background--warn-softAlert backgroundUsage rules
Text + soft background. Coloured value on its own soft background for badges — APY, PnL, side.
Variable intensity via color-mix. Funding heatmaps, order-book depth bars, donut segments:
color-mix(in oklch, var(--green) <mix>%, transparent). The token stays one value; the bar carries
the magnitude.
Position indicator. A 3px vertical bar on the left of the row — green long, red short.
Price flash on tick. .flash-up / .flash-down, .55s ease-out.
Graded risk. Healthy → green-soft, Filling up → warn-soft, Near capacity → red-soft.
Never decorative. No green or red on a non-financial element, ever.
Both rules 2 and 3 are visible in the live order book and positions table:
Liquidation price is --warn, not --red. Red means loss realised; orange means risk
ahead. Painting a liquidation price red makes a healthy position look like it is already
losing.
| Market | Size | Entry | Mark | Liq. | PnL |
|---|---|---|---|---|---|
| BTC-USDCXLONG 10× | 0.42000 | 61,880.00 | 64,212.25 | 56,410.00 | +979.55 |
| ETH-USDCXSHORT 5× | 3.2400 | 3,410.20 | 3,466.80 | 3,980.10 | −183.38 |
| SOL-USDCXLONG 20× | 112.00 | 186.40 | 191.02 | 178.55 | +517.44 |
Chart palette
| Token | Value | Role |
|---|---|---|
--chart-1 | var(--green) | Primary series |
--chart-2 | silver | Neutral series |
--chart-3 | #0A84FF | Apple blue |
--chart-4 | var(--red) | Negative series |
--chart-5 | var(--warn) | Risk series |
Chain colours
Fixed per-chain gradients at 135°, used on wallet cards:
| Chain | Gradient |
|---|---|
| Canton | #1A4D3A → #0D2A1F |
| Ethereum | #5b7ce7 → #252b69 |
| Solana | #9333ea → #4c1d95 |
| Base | #0052ff → #001a52 |