/financial-ui-styles

name: financial-ui-styles
description: Use when building any financial UI to select a visual aesthetic — Bloomberg-style pro terminal, TradingView-style modern pro, Robinhood-style retail, FT-style editorial, Massive/Stripe-style API dashboard, Coinbase/Binance-style crypto exchange, TastyTrade-style options pro, Wise-style retail light, Uniswap-style DeFi, iOS Stocks-style Apple native, Yahoo Finance-style prosumer dark, AlphaSense-style research terminal, AlphaSpace-style consumer terminal, or Gloomberb-style terminal TUI. Loads AFTER `financial-ui-patterns` (which handles correctness). Read when user says "make it look like X" or specifies a brand/style direction.

Financial UI Styles

Overview

Fourteen distinct visual styles for financial UIs. The base skill `financial-ui-patterns` handles correctness (tabular nums, semantic tokens, tick flash, accessibility). This skill handles **visual style** — the brand-flavored layer on top.

**Layering:**

product-design                  → atomic decisions for any SaaS UI
financial-ui-patterns           → finance-specific correctness (mandatory)
financial-ui-styles (this)      → brand style / visual polish (pick one)

You always apply the lower layers. You pick exactly one style on top.

When to Use

• User says "make it look like X" where X is a financial product or aesthetic
• User specifies brand/aesthetic direction ("Bloomberg style", "Robinhood feel", "FT-like", "API-dashboard aesthetic")
• Starting a new financial UI from scratch and picking the visual direction
• Refactoring an existing financial UI toward a specific aesthetic

**Don't use for:** marketing pages, blog posts, anything not loading data. Styles are calibrated for data-dense UIs.

How to Pick

Match the user and product category, not the brand mood the founder asked for.

| If the user is... | And the product is... | Pick | |---|---|---| | Institutional / desk trader | Desktop terminal, command-line driven, max density | `pro-terminal` | | Pro / prosumer trader | Modern web app, dense but not terminal-dense | `modern-pro-dark` | | Mainstream prosumer | Chart-forward consumer market data, watchlist + multi-ticker compare | `yahoo-prosumer` | | Self-directed retail-pro | Multi-panel custom terminal with embedded AI agent, themed views | `alphaspace` | | Buy-side analyst | Document/transcript search, sentiment, AI summaries | `research-terminal` | | Active options trader | Strategy builder, Greeks-forward | `tasty-pro` | | Centralized crypto trader | Exchange (CEX), spot + perps | `crypto-exchange` | | Onchain / DeFi user | DEX, swap UI, wallet-connect first | `defi-native` | | Retail consumer | Mobile-first investing app, dark | `retail-polish-dark` | | Retail consumer | Money app / neobank, light, friendly | `retail-polish-light` | | News / analysis reader | Editorial layout with embedded market data | `editorial-financial` | | Developer / admin | API console, dashboard, docs-adjacent | `api-dashboard` | | iOS user | Native companion or web that mimics native iOS | `apple-native` | | Indie / developer trader | Tiled multi-pane terminal (TUI) dashboard, muted, theme-swappable | `retro-tui` |

If two rows fit, pick the one whose **reference product** ships the closest UX. Don't blend.

Style Index

| Style | Reference shipping products | Reference file | |---|---|---| | `modern-pro-dark` | TradingView, Kraken Pro, Hyperliquid | `references/modern-pro-dark.md` | | `pro-terminal` | Bloomberg Terminal, IBKR TWS, ThinkOrSwim | `references/pro-terminal.md` | | `tasty-pro` | TastyTrade | `references/tasty-pro.md` | | `crypto-exchange` | Coinbase Advanced, Binance, Bybit | `references/crypto-exchange.md` | | `retail-polish-dark` | Robinhood, Public | `references/retail-polish-dark.md` | | `retail-polish-light` | Wise, Revolut, Cash App | `references/retail-polish-light.md` | | `editorial-financial` | FT.com, Bloomberg.com, WSJ | `references/editorial-financial.md` | | `api-dashboard` | Massive, Stripe, Vercel, Linear | `references/api-dashboard.md` | | `defi-native` | Uniswap, Jupiter, Solana ecosystem | `references/defi-native.md` | | `apple-native` | iOS Stocks, macOS Stocks widget | `references/apple-native.md` | | `yahoo-prosumer` | Yahoo Finance (current redesign), Seeking Alpha, Investing.com | `references/yahoo-prosumer.md` | | `alphaspace` | Yahoo Finance AlphaSpace (Gold tier), TradingView desktop, Bloomberg Terminal (layout reference) | `references/alphaspace.md` | | `research-terminal` | AlphaSense, Visible Alpha, FactSet, Tegus | `references/research-terminal.md` | | `retro-tui` | Gloomberb, lazygit, k9s, btop | `references/retro-tui.md` |

Each file ships with CSS variable token set (dark + light), typography table, density numbers, visual rules, style-specific patterns, anti-patterns, example component code, reference URLs, and verification checklist.

Style Summaries

modern-pro-dark — TradingView, Kraken Pro, Hyperliquid

Dark slate background. Single blue or purple accent. Sans body + tabular nums + mono on tickers. 28-32px table rows, 24-28px order book. Hairline borders. 4-6px radius. No gradients, no shadows beyond elevation. The default for serious pro consumer products.

pro-terminal — Bloomberg, IBKR TWS, ThinkOrSwim

Black or near-black with amber or cyan accent. Mono-everywhere, ALL CAPS section labels. 24-28px rows, max density. 0-2px radius. Hairline borders. Function-key shortcuts in tooltips. Institutional desktop aesthetic.

tasty-pro — TastyTrade

Black background, pink-magenta accent, green/red signals. Sans + tabular. Options-focused: prominent strikes, Greeks readability. 32-36px rows. Distinctive enough to call out separately even though it shares Modern Pro fundamentals.

crypto-exchange — Coinbase Advanced, Binance, Bybit

Dark slate or near-black. Yellow (Binance) or blue (Coinbase) accent. Higher cell-level color saturation than Modern Pro. Subtle gradients OK on chart areas. 28-32px rows. More aggress