Labs · Design system
TopX Terminal
The design system of a quant trading terminal: neutral grey, dense tables and colour with one meaning each. Light and dark tokens, CSS and component previews, free to reuse.
Three rules
- Density first, hierarchy kept: 24 px controls, 2 by 5 px table cells, hierarchy from type steps, weight and background.
- Honest data: a missing value reads unavailable or a dash, never a zero; no simulated curves.
- One colour, one meaning: blue for where you are and what to press, green and red for profit and loss with a sign, amber for data quality.
Download the kit · tokens.json · tokens.css · bundle.css
What is in the kit
The download is the English edition: tokens, CSS, 14 component previews with their guides, notes on charts and the logo. Figures in the page mock-ups are made up; they demonstrate the layout, not trading results.
Colour and type
The page shows each colour token with its light value on the left and dark value on the right, followed by the type scale. The token files provide these values for reuse.
Components
Preview Button, SegmentedControl, SubTabs, StatusBadge, KpiStrip, AlertBanner, DataTable, SeriesLegend, Disclosure and TopBar. Full-page previews cover the desktop Workspace, LivePage and a 390 px MobilePage. The gallery lets you open each preview on its own.