Financial Ui Styles

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:

Copy code
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 two rows fit, pick the one whose reference product ships the closest UX. Don't blend.

Style Index

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 aggressive use of colored cells in tables.

retail-polish-dark — Robinhood, Public

Pure or near-pure black. Single signal color (often brand green). Very large display numbers (32-48px hero). Generous whitespace. 48-56px row heights. 12-20px radius (large, friendly). Gamification-appropriate. Mobile-first feel even on web.

retail-polish-light — Wise, Revolut, Cash App

White or near-white background. Colorful brand palette. Sans body with friendly weight choices. Big whitespace. 40-48px rows. 16-20px radius. Mobile-style cards translated to web.

editorial-financial — FT.com, Bloomberg.com, WSJ

Cream/beige (FT salmon-on-pinkish-beige) or off-white. Serif headlines, sans body, mono for data tables. Sharper radii (0-4px). 36-44px rows. Longer-form analysis blocks between data. Newspaper sensibility.

api-dashboard — Massive, Stripe, Vercel, Linear

Near-black or near-white. Single brand accent. Heavy on mono for code/IDs/keys. Status pills used aggressively. 40-48px rows (more relaxed than trading). Generous form fields. Documentation-adjacent aesthetic. Copy buttons everywhere.

defi-native — Uniswap, Jupiter, Solana ecosystem

Gradients permitted (radial backgrounds, glassy panels with backdrop-blur). Saturated brand palette (Uniswap pink, Solana purple/teal). Playful, less institutional. Often light or hybrid theme.

apple-native — iOS Stocks, macOS Stocks widget

Translucent surfaces, SF Pro Display + SF Pro Mono. System blur (vibrancy). Seamless light/dark transitions. Refined iOS feel. Use only for native companions or web that explicitly mimics native iOS.

yahoo-prosumer — Yahoo Finance (current redesign), Seeking Alpha, Investing.com

Slate-blue near-black surfaces (#0E111A, not neutral). Single bright Yahoo-style blue accent. Sans throughout — tickers rendered in bold sans, not mono. Signature: single-ticker quote pages with hero price + delta + after-hours + OHLC stats + news strip. Multi-ticker compare chart secondary. Top ticker tape pinned, watchlist sidebar. 36-40px rows. Sits between Modern Pro Dark (less terminal-dense) and Retail Polish Dark (less consumer-flat).

alphaspace — Yahoo Finance AlphaSpace, TradingView desktop, Bloomberg Terminal (layout reference)

Yahoo's premium terminal. Slate-blue surfaces with a bright green primary accent (the defining cue vs yahoo-prosumer's blue). Multi-panel canvas (overview + chart + news + holdings + fundamentals coexisting). View-driven left sidebar with named themed dashboards (Banks & Credit, Macro, Crypto, AI Software, etc.) plus "My Views". First-class AI-agent rail pinned right ("Ask Yahoo Scout"-style), with suggested-prompt list — never collapsed. Two-row ticker tape (broad market + active theme). Bloomberg's workspace pattern reskinned for serious retail.

research-terminal — AlphaSense, Visible Alpha, FactSet, Tegus

Light by default, near-white off-flat surfaces, saturated institutional blue accent. Document-first canvas — search bar always-on at top, source-type pills (10-K, Earnings Call, Press Release) on every result, and the signature yellow keyword highlights inside excerpt cards. AI summary block is a first-class component with a distinct accent rail and citation links. Sentiment shown as numeric + label (Bullish · +0.42), never color-only. Relaxed density (44-52px rows). Built for analysts who read for hours, not chart-watchers.

retro-tui — Gloomberb, lazygit, k9s, btop

Clean terminal UI. Near-black ground, muted white/grey mono text, green/red only on values, hairline dividers, :: Title panel headers, tiled multi-pane grid with traffic-light window chrome. Swappable phosphor palette (22 themes) plus an optional CRT mode (scanlines + phosphor bloom) that stays off by default. Warm "Paper" light variant. The indie/developer cousin of pro-terminal — same density, muted instead of institutional. Palettes adapted from Gloomberb (MIT).

Cross-Cutting Rules

These apply regardless of style:

1. Base correctness from financial-ui-patterns still applies. Tabular nums, semantic tokens, tick flash, accessibility, decimal alignment. A style overrides token values and aesthetic choices, not correctness rules.
2. One style per product. Don't mix Modern Pro Dark and Editorial Financial in the same UI; the brain reads it as broken.
3. Light theme matters. Every style must have a light variant. Pro Terminal's light variant uses light-amber-on-cream; Modern Pro Dark's light variant uses Supabase-slate. Define both.
4. Density follows style. Pro Terminal is denser than Retail Polish Dark. Don't fight the style's density rules to fit more data.
5. Mono usage is style-specific. Pro Terminal uses mono everywhere. Retail Polish minimal. Modern Pro on tickers only. Editorial Financial on data tables only. Apple Native on Greeks/numbers only.

When NOT to Use This Skill

• Marketing pages, landing pages, blog content
• Product UI with no financial data (CRMs, project tools, generic SaaS)
• One-off design tests where you want full freedom

Common Mistakes

Verification

Before declaring style implementation done:

• One and only one style is applied across the product
• Light + dark variants both render correctly
• Base financial-ui-patterns correctness still passes (tabular nums, semantic tokens, etc.)
• Mono usage matches style's rules (everywhere / tickers only / data tables only / minimal)
• Density matches style's row-height range
• Accent color and gradient/radius rules match style
• If style is a stub: have you loaded reference URLs and matched key characteristics?

See Also

• financial-ui-patterns — REQUIRED base layer
• product-design — atomic decisions for any SaaS UI
• frontend-design plugin — generic UI generation that avoids generic AI aesthetics