financial-ui-patternslisted

# Financial UI Patterns ## Overview Generic AI output for financial UIs fails in predictable ways: raw color values instead of design tokens, jittery non-tabular numbers, no decimal alignment, missing tick-flash on updates, hard-coded dark theme, broken Tailwind dynamic classes, no streaming/staleness states, no accessibility for color-blind users. This skill codifies the patterns that production trading UIs (Kraken, Coinbase, TradingView, Bloomberg Terminal, Robinhood, Binance) actually ship. **Core principle:** numbers must be legible, aligned, and trustworthy. Color is a signal, not decoration. Latency must be visible. Every digit shift is a failure. ## When to Use - Tables with prices, P&L, holdings, positions, orders, fills, trades - Order books, depth charts, ladders - Watchlists, tickers, market overviews - Streaming/live data of any kind - Portfolio screens, transaction history - Charts with OHLC, candlesticks, sparklines - Any UI showing money, percentages, basis points, or quantities **Don't use for:** marketing pages, blog posts, generic product UI without numbers. ## Quick Reference | Concern | Rule | |---|---| | Number rendering | Always `tabular-nums`. Never let digits reflow. | | Number alignment | Right-align in tables. Decimal-align when precision varies. | | Ticker/ID display | Use `font-mono` (JetBrains Mono, Roboto Mono, IBM Plex Mono). | | Colors | Semantic tokens only (`text-positive`, `text-negative`). Never `text-green-500`. | | Theme | Light