Financial Ui Patterns

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

Required Reading

Core Pattern: Numbers

The single most important fix vs. generic AI output:

tsxCopy code
// ❌ BAD: digits shift width on update, color is decorative, no sign on positive
<span className="text-green-500 font-medium">
  {value.toFixed(2)}%
</span>

// ✅ GOOD: tabular-nums locks width, semantic color, explicit sign, fixed width
<span
  className={`tabular-nums font-medium tracking-tight ${
    value >= 0 ? "text-positive" : "text-negative"
  }`}
  style={{ minWidth: 64, textAlign: "right" }}
>
  {value >= 0 ? "+" : ""}{value.toFixed(2)}%
</span>

Three failures the bad version causes:

1. Width changes when value goes from 9.99% to 10.00% — the entire row reflows
2. text-green-500 breaks light theme and ignores any design system
3. No + prefix means positive and zero look identical at a glance

Core Pattern: Color Tokens

Define semantic colors via CSS variables, expose via Tailwind, never use raw color values in components.

cssCopy code
/* globals.css */
:root {
  --positive: 34 197 94;   /* green for gains, buy, success */
  --negative: 239 68 68;   /* red for losses, sell, danger */
  --warning: 251 191 36;   /* amber for partial fills, stale data */
  --info: 0 143 250;       /* blue for working orders, neutral signals */
  --surface: 13 13 16;
  --surface-elevated: 22 22 26;
  --text-primary: 240 240 245;
  --text-secondary: 180 180 192;
  --text-muted: 110 110 125;
}

[data-theme="light"] {
  --positive: 22 163 74;
  --negative: 220 38 38;
  --surface: 248 249 251;
  /* ... */
}

Tailwind v3 form (tailwind.config.ts):

tsCopy code
colors: {
  positive: "rgb(var(--positive) / <alpha-value>)",
  negative: "rgb(var(--negative) / <alpha-value>)",
  surface: {
    DEFAULT: "rgb(var(--surface) / <alpha-value>)",
    elevated: "rgb(var(--surface-elevated) / <alpha-value>)",
  },
  text: {
    primary: "rgb(var(--text-primary) / <alpha-value>)",
    secondary: "rgb(var(--text-secondary) / <alpha-value>)",
    muted: "rgb(var(--text-muted) / <alpha-value>)",
  },
}

Tailwind v4 form (in your CSS, no config file needed):

cssCopy code
@theme {
  --color-positive: rgb(var(--positive));
  --color-negative: rgb(var(--negative));
  --color-surface: rgb(var(--surface));
  --color-surface-elevated: rgb(var(--surface-elevated));
  --color-text-primary: rgb(var(--text-primary));
  --color-text-secondary: rgb(var(--text-secondary));
  --color-text-muted: rgb(var(--text-muted));
}

Core Pattern: Tick Flash

When a price updates, briefly tint the background. CSS only. Robinhood, Coinbase, and TradingView all use this.

tsxCopy code
// PriceCell.tsx
import { useEffect, useRef, useState } from "react";

export function PriceCell({ value, format }: { value: number; format: (n: number) => string }) {
  const prev = useRef(value);
  const [flash, setFlash] = useState<"up" | "down" | null>(null);

  useEffect(() => {
    if (value === prev.current) return;
    setFlash(value > prev.current ? "up" : "down");
    prev.current = value;
    const t = setTimeout(() => setFlash(null), 400);
    return () => clearTimeout(t);
  }, [value]);

  return (
    <span
      data-flash={flash ?? undefined}
      className="tabular-nums tracking-tight transition-colors duration-300 px-1 rounded-sm data-[flash=up]:bg-positive/15 data-[flash=down]:bg-negative/15"
    >
      {format(value)}
    </span>
  );
}

Why this beats animation libraries: zero JS during the flash, scales to hundreds of cells, no jank on heavy WebSocket traffic.

Core Pattern: Decimal Alignment

tabular-nums aligns digit positions but does not align decimal points across different-magnitude values. Two fixes:

Option A — pad with hair spaces (Bloomberg approach):

tsCopy code
function alignDecimal(value: number, totalDigits = 8): string {
  const s = value.toFixed(2);
  const [int] = s.split(".");
  const padNeeded = totalDigits - int.length;
  return " ".repeat(padNeeded) + s; // hair space, non-breaking
}

Option B — fixed-width columns with right-align (TradingView approach):

tsxCopy code
<div className="grid grid-cols-[1fr_120px_120px_120px] gap-2 tabular-nums">
  <div>{symbol}</div>
  <div className="text-right">{formatPrice(price)}</div>
  <div className="text-right">{formatQty(qty)}</div>
  <div className="text-right">{formatValue(value)}</div>
</div>

Use B by default. Use A only when values must fit in flowing text.

Common Mistakes

Red Flags — Stop and Reread

When writing financial UI you may rationalize. These mean stop:

• "It's just a prototype, I'll fix tokens later" — semantic tokens take the same time to write as raw colors. Write them now.
• "The user won't notice digit shift" — they will, especially on a watchlist. It's the #1 tell of an unprofessional trading UI.
• "Tailwind should expand bg-${color}-500/10 since the strings exist somewhere" — JIT does not scan dynamic templates. Use a static map.
• "Light theme isn't needed" — Bloomberg, IBKR, and TradingView all ship both. Light theme is a serious-trader signal. Build with CSS variables from day one.
• "Mono font for tickers looks dated" — it's the opposite. Bloomberg, Reuters, TradingView all use mono for tickers/symbols. It's a professionalism signal.
• "I don't need a tick flash for a non-realtime page" — every list of prices that ever updates should flash. Even hourly updates benefit.

Industry Reference Points

See references/industry-patterns.md for screenshots' worth of detail on each.

Verification

Before claiming a financial UI is done, check:

• Every number has tabular-nums
• Every color is a semantic token, no raw text-green-* / bg-zinc-*
• Light theme renders correctly (toggle and verify)
• Streaming prices flash on update
• Stale data state is visible (e.g., dim or grey when > N seconds old)
• Positive returns show + prefix
• Numbers are right-aligned, labels are left-aligned
• Tickers use mono font
• No bg-${var} or other dynamic Tailwind classes
• Color is paired with non-color signal (arrow, icon, sign, position)
• Order/trade states use status pills, not just text color
• At least 5 rows visible without scroll on a typical laptop screen (density check)