QUnderQPHASE 5 · STEP 0

Foundations proof sheet — tokens, type and surface steps. Not the app.

Surface steps

background
app ground
#0b0c0e
surface-1
sidebar, top bar
#0f1113
card
block surface
#131518
raise
hover, active, track
#1c2025

Depth comes from four background steps, not from shadows. Shadows appear only on things that genuinely float: popovers, tooltips, the command palette.

Semantics

primary / pos
accent · gains · live
#28ebcf
neg
losses, drawdown
#ff5c72
warn
stale data, drift breach
#f5b54a
chart-2
second series only
#8b7cff

Turquoise is both the accent and the positive colour. That collision is deliberate, and it is why direction is carried by sign and arrow with colour only reinforcing — never colour alone.

Type

Manrope
UI, headings, labels · 400 / 500 / 600 / 700 / 800
184,206.44
JetBrains Mono · every figure, ticker and timestamp
Tabular alignment1,111.11
Same width, different digits8,888.88
Explicit sign, true minus+12.84%
Not a hyphen−4.10%
Currency is a unit — muted, beside the figure184,206 EUR

Build order

  1. 0Scaffold web/Next 16 · React 19 · Tailwind 4 · shadcn
  2. 1Token layerissue #91
  3. 2Formatters + semantics primitivesissue #92
  4. 3App shell on typed mocksissue #93
  5. 4Generated API clientissues #94, #69
  6. 5ECharts frameissue #96
  7. 6Loading, empty, errorissue #97

Foundations before screens. Each step is inherited by everything after it, so doing them out of order means retrofitting through every component already written.