Ledger Equities Desk — Trading-Floor Watchlist
Dark navy trading-floor watchlist table with a sticky glass nav, a scrolling price ticker, index/P&L stat cards, and a dense financial data table: right-aligned tabular figures, green/red deltas, % pill badges, and inline SVG sparklines.
Summary
A dark navy trading-floor watchlist: a sticky glass nav, a full-bleed auto-scrolling price ticker, a split hero (headline + index/P&L stat cards), and a dense financial data table with right-aligned tabular figures, colored deltas, pill % badges, and inline SVG sparklines. Built for scanning numbers fast: the eye lands on the move, not the chrome.
Style
Deep-navy 'Bloomberg-terminal' aesthetic warmed with amber accents and a cream-on-dark text scale. Inter throughout, with tabular-nums on every figure so digits align in columns. Subtle radial 'grain' glow, hairline borders, and glassmorphism on the nav. Up/down semantics in green/red; amber is the single brand/CTA accent.
Layout & Structure
Top-to-bottom single-column flow inside a max-w-[1240px] container (px-6 / lg:px-8), with two full-bleed bands (ticker + footer) breaking the gutter. Sticky header, hero is a 12-col grid that collapses on mobile, and the data table is the centerpiece in a rounded card with horizontal scroll on small screens.
Sticky glass nav
Full-bleed price ticker
Split hero
Table head controls
Data table card
Table footer + legend
Full-bleed footer
Special Notes
All figures are illustrative sample data (rows rendered from a JS array; sparklines + ticker + footer totals computed client-side). Keep tabular-nums on every number, keep amber as the only brand accent (green/red are reserved strictly for up/down), and preserve the responsive column reflow (Volume hides under md, Mkt cap under lg, the table scrolls horizontally below 860px). Icons via Iconify (Phosphor 'ph:' set). Inspired by the DataTables stocks example, rebuilt as a navy trading-floor desk.