NYDEX
Trading workstation and 846-token design system
FIELD
FINTECH, TRADING WORKSTATION
OWNERSHIP
END-TO-END UI/UX, TOKEN SYSTEM & FRONTEND CODE
STACK
FIGMA, 846 CSS TOKENS, REACT, VITE, TAILWIND, CLAUDE CODE
RESULT
846 CUSTOM PROPERTIES, LIGHT + DARK THEMES
ROLE
UI/UX design, design system, frontend code
THE PROBLEM
Web trading terminals wear traders out. Indicator controls pile up, light and dark themes disagree, and chart readouts bleed into each other. When hierarchy collapses under dense data, traders act slower.
WHAT HE FOUND
Thomas audited competing brokerage interfaces at 400% zoom and found indicator panels where figure and ground blur together. He set a strict information architecture for MACD oscillators, volume multipliers, and multi-panel layouts so no panel bleeds into the next.
WHAT HE BUILT
Thomas built an 846-token CSS custom property system with calibrated light and dark themes, then built the production frontend himself from his Figma specs using React, Vite, Tailwind CSS, and Claude Code.
THE OUTCOME
Nydex is live, with a production frontend Thomas built himself in React, Vite, and Tailwind from his own Figma specs. Its 846-token CSS system keeps contrast and spacing consistent across light and dark themes.
VISIT THE LIVE SITE
↗
THE WORK
DETAILS
Consolidated scattered MACD and volume controls into one keyboard-accessible rail.
Engineered 846 semantic and component tokens so contrast holds in both light and dark themes.
Calibrated price columns to tabular numerals so live ticks never shift the layout sideways.
Eliminated orphan CSS and extra DOM wrappers to keep chart rendering at 60fps.