Financial ui styles

Skill rgourley/financial-ui-suite/skills/financial-ui-styles

Production-grade financial UI skills for Claude Code. Composable correctness + 10 aesthetic styles (Bloomberg, TradingView, Robinhood, Coinbase, Financial Times, Massive, Wise, and more).

Install

npx -y skills add rgourley/financial-ui-suite --skill financial-ui-styles

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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, or AlphaSpace-style consumer terminal. Loads AFTER `financial-ui-patterns` (which handles correctness). Read when user says "make it look like X" or specifies a brand/style direction.

SKILL.md

11.7 KB, as published. Nobody here has run it

Financial UI Styles

Overview

Thirteen 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`

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`

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.

Cross-Cutting Rules

These apply regardless of style:

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.
One style per product. Don't mix Modern Pro Dark and Editorial Financial in the same UI; the brain reads it as broken.
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.
Density follows style. Pro Terminal is denser than Retail Polish Dark. Don't fight the style's density rules to fit more data.
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

Mistake	Why bad	Fix
Mixing two styles in one product	Reads as inconsistent / broken	One style per product
Picking style based on user's wishful brand mood	Styles describe shipping products; picking by mood often picks wrong	Pick based on user type and product category
Skipping the `financial-ui-patterns` base	Correctness fails (no tabular nums, wrong colors)	Always apply base layer first
Using DeFi Native or Crypto Exchange for traditional finance	Aesthetic mismatch users won't trust	Match audience expectation
Hard-coding style token values inline	Brittle to theme switches	Use CSS variables; style = token set
Defining style only in dark mode	Pro users want light during the day	Ship both light + dark for every style

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?