Switch modes with the sun/moon in the header
Everything on this page, and on all fourteen panel pages, was measured in both. The cog opens the App Builder drawer, where the two accents below are the only themes offered. The template's own nine are gone rather than hidden: they define none of the tokens these components read, so loading one left the panel half-painted — and none of them is contrast-validated for this data. Solar, the previous default, puts its danger colour at 4.00:1 as text and collapses profit against loss to dE 8.9 under deuteranopia. The accent is solved per mode: a deep fill carrying white ink in light, a lighter fill carrying near-black in dark, so in both directions it moves away from its own canvas.
Light palette
Every text colour clears 4.5:1 on all three surfaces
Surfaces
canvas
#F4F6F8
surface
#FFFFFF
surface2
#FAFBFC
surface3
#EDF0F3
Lines
border
#DDE2E8
border strong
#C3CAD3
border input
#838A8F
Text
text
#171A1D
text2
#565C63
text3
#676D74
Brand
accent
#006ABC
accent text
#006ABC
accent ink
#FFFFFF
Semantic
pos
#296E3D
neg
#841D16
warn
#8A5A00
info
#175F8F
idle
#545B62
Dark palette
Same contract, re-measured against the darker grounds
Surfaces
canvas
#0B0F14
surface
#12171E
surface2
#171D25
surface3
#1D242E
Lines
border
#232B35
border strong
#33404D
border input
#5B6670
Text
text
#E7EAEE
text2
#A2AAB4
text3
#8B949E
Brand
accent
#4B9DFF
accent text
#5CA2FF
accent ink
#0A0A0A
Semantic
pos
#74D69B
neg
#F5786F
warn
#E8B765
info
#79C0E8
idle
#A7AEB5
Accents
Two, because the status colours own the rest of the wheel
AccentLight fillDark fillLight textDark textInk l/d
Blue#006ABC#4B9DFF#006ABC#5CA2FF#FFFFFF / #0A0A0Adefault
Slate#636972#98A1AD#636972#9BA1AA#FFFFFF / #0A0A0A—
Colour ramps
18 steps × 7 roles = 126 tokens the template is built on
primary50 → 900
success50 → 900
danger50 → 900
warning50 → 900
info50 → 900
secondary50 → 900
The SmartAdmin base stylesheet reads these directly — --primary-500 alone is referenced 49 times, and the animated backdrop behind the logo is defined as var(--primary-500) and var(--primary-200). Generated in Lab so the steps are perceptually even, with chroma tapered at both ends. Step 500 is seeded from a mid-tone display colour, not from the darker text token, because the base stylesheet puts white text on several of them.
Typography
Two families, nine steps
Archivo
Interface. A grotesque with a slightly narrow set width, which buys real estate back in dense tables, and true tabular figures. Variable weight 100–900, self-hosted, SIL OFL.
ABCDEFGHIJKLM abcdefghijklm 0123456789
400 Weight500 Weight600 Weight700 Weight
JetBrains Mono
Tickets, logins, hosts, servers, prices. Drawn for reading code, so 0/O and 1/l/I are unmistakable — which matters when the string is an account number a client is about to retype into their broker.
0O 1lI 5S 8B 2Z · 5021884 · esh-lon-04 · 2647.92
Scale
14px base, not 16. A trading panel is a data instrument: the reader is scanning forty rows, not reading prose, and 16px forces the columns apart until the table needs scrolling that 14px does not. The steps sit close together at the bottom, where nearly all the text lives, and open up only for display numbers. 11px exists for one job — uppercase tracked micro-labels, which read a size larger than they measure — and nothing a client must read is set below 12px.
34px
2.125rem
Gold Scalper Pro +$1,284.40
Hero figures
26px
1.625rem
Gold Scalper Pro +$1,284.40
KPI values
20px
1.25rem
Gold Scalper Pro +$1,284.40
Page titles
17px
1.0625rem
Gold Scalper Pro +$1,284.40
Section headings
15px
0.9375rem
Gold Scalper Pro +$1,284.40
Card titles
14px
0.875rem
Gold Scalper Pro +$1,284.40
Body, controls — the base
13px
0.8125rem
Gold Scalper Pro +$1,284.40
Secondary body, table cells
12px
0.75rem
Gold Scalper Pro +$1,284.40
Table meta, timestamps, help
11px
0.6875rem
Gold Scalper Pro +$1,284.40
Uppercase micro-labels only
Components
On the theme tokens, so both modes are handled once
Status pills
OnlineConnectingStale heartbeatLogin failedOfflineSignal feed live
Always icon + word. Green, amber and red collapse under deuteranopia however they are chosen, so colour is the third signal here, not the first.
Profit and loss
Profit
+$1,284.40
Loss
−$283.38
Flat
$0.00
The pair holds a 12-point lightness gap at dE 19+ across protan, deutan and tritan, so it survives colour-blindness — and every figure carries an explicit + or −, so it survives colour being absent altogether. This is the one pair in the panel with no icon to fall back on.
Semantic channels
Three separate jobs, three separate treatments. The point of keeping them apart is that a client scanning this panel can trust one thing without reading a label: green and red mean their balance moved.
Money
+$1,284.40
−$283.38
Health
311 ms
687 ms
912 ms
— never checked
Direction
BUYSELL
KPI chip
and the sub-line under a KPI value
Money owns green and red, and every figure carries an explicit + or −. Health is an SLO readout, so nominal has no hue at all — the absence of colour is the statement that the figure is where it should be; only deviation is amber or red. It used to return the P&L classes, which printed a millisecond count in the green of money earned. Direction is green long, red short — the trading convention, taken after measuring the alternative: every pair that could have carried direction on its own collided with a status colour under protan/deutan/tritan (blue/orange dE 1.2 from amber, teal/violet dE 2.8 from idle, slate/rust dE 4.7 from info) and all three left under 5 L* between long and short. So direction shares the money hues and is separated by its mark instead — arrow-up / arrow-down against money's trending-up / trending-down — plus the word, which is unambiguous with no colour at all. The accent appears in none of them: it marks what is interactive.
Empty state
No copied trades in this period.
Widen the range
Buttons
Blue fill carrying white ink at 5.54:1 in light, and a lighter fill carrying near-black at 7.13:1 in dark — the one place the accent is the loudest thing on the page. The accent is never a P&L colour and never a status colour: it marks what is interactive, and nothing else.
Controls
% of equity
Risk per trade must be between 0.01% and 20%.
Meter