financial-ui-styles — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited financial-ui-styles (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
Don't use for: marketing pages, blog posts, anything not loading data. Styles are calibrated for data-dense UIs.
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 | 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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).
These apply regardless of style:
| 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 |
Before declaring style implementation done:
financial-ui-patterns correctness still passes (tabular nums, semantic tokens, etc.)financial-ui-patterns — REQUIRED base layerproduct-design — atomic decisions for any SaaS UIfrontend-design plugin — generic UI generation that avoids generic AI aesthetics~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.