Fintech Dashboard

---
name: fintech-dashboard
description: Apply the Fintech Dashboard visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Fintech Dashboard, mentions banking dashboard, trading UI, money dashboard, or describes KPI stat cards, green/red delta semantics, tabular-figure numerals — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Fintech Dashboard Design System

Clean, modern money UI: dark navy surfaces, tabular figures, sparklines, and strict green-up/red-down semantics. KPI cards, time-series charts, and dense tables organized under a slim sidebar — the language of Stripe, Robinhood, and Mercury.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Fintech Dashboard.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (banking dashboard, trading UI, money dashboard, finance app UI), or describes its traits: KPI stat cards; green/red delta semantics; tabular-figure numerals; sparklines and area charts; 1px-bordered dark surfaces; sidebar navigation.

## Design tokens

### Color palette

- App background, near-black navy: `#0b0e14` (--color-bg)
- Card, table, and panel background: `#161b26` (--color-surface)
- Hovered rows, popovers, dropdowns: `#1d2434` (--color-surface-raised)
- Primary text and numerals: `#e6e9ef` (--color-text)
- Labels, captions, secondary metadata: `#8b93a7` (--color-text-muted)
- Brand/interactive accent, Stripe-style violet-blue: `#635bff` (--color-accent)
- Gains, upward deltas, success states: `#16c784` (--color-positive)
- Losses, downward deltas, destructive states: `#ea3943` (--color-negative)
- 1px hairlines on cards, tables, dividers: `#232a3a` (--color-border)
- Light-theme page background (alternate mode): `#f7f9fc` (--color-bg-light)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 20, 24, 32, 48 — Data-dense but never cramped: 20px card padding, 8px grid everywhere else; tables at 40–44px row height.
- Border radius: sm 8px, md 12px, pill 999px — 8px on inputs and chips, 12px on cards and charts. Pills only for status/delta chips.
- Border treatment: 1px solid #232a3a — Every surface gets a 1px hairline; borders carry the structure so shadows can stay whisper-quiet.

### Shadows

- card: `0 2px 8px rgba(0, 0, 0, 0.08)` — Default card elevation — barely there
- popover: `0 8px 24px rgba(0, 0, 0, 0.32)` — Dropdowns, date pickers, command menus

### Layout

- Max content width: 1440px
- Fixed 240px sidebar nav, content area with 24–32px gutters
- KPI card row (3–5 cards) at the top, primary chart below, tables last
- Charts stretch full card width; axes labeled in text-muted at 12px
- Right-align all numeric table columns and use tabular figures

### Effects

- font-feature-settings: 'tnum' 1 on every numeral
- Gradient area-fill under line charts (accent at 20% fading to 0%)
- Subtle row hover tint (surface-raised)

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 320ms
- Numbers count up/tween on load; deltas fade in after values settle
- Chart lines draw left-to-right once on mount, never on every re-render
- Hover states are instant tints, not lifts — dashboards should feel solid

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0b0e14;
  --color-surface: #161b26;
  --color-surface-raised: #1d2434;
  --color-text: #e6e9ef;
  --color-text-muted: #8b93a7;
  --color-accent: #635bff;
  --color-positive: #16c784;
  --color-negative: #ea3943;
  --color-border: #232a3a;
  --color-bg-light: #f7f9fc;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.32);
  --border-default: 1px solid #232a3a;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 14px;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 240px dark sidebar: logo up top, icon+label links at 36px height, active item gets accent text and a soft accent-tinted background; workspace switcher pinned to the bottom
- **Hero:** Dashboards skip heroes — the header row is a page title, date-range picker, and a primary accent button, all on one 56px line
- **Card:** Surface bg, 1px border, 12px radius, 20px padding, card shadow; uppercase 11px muted label, 28px tabular-figure value, delta chip and sparkline
- **Button (primary):** Accent (#635bff) fill, white text, 8px radius, 500 weight, 36px height; darkens ~8% on hover
- **Button (secondary):** Transparent fill, 1px border, text color; surface-raised bg on hover
- **Form fields:** Surface bg, 1px border, 8px radius, 36px height; focus swaps border to accent with a 3px accent ring at 25% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A row of KPI cards, each with a small uppercase label, a large tabular-figure value, and a signed delta chip (▲ +2.4% in green, ▼ −1.1% in red) above an inline sparkline. Spend boldness here; keep everything else quiet.

## Do

- Reserve green and red exclusively for money-up/money-down semantics
- Use tabular figures ('tnum') for every number that can change or align
- Keep charts minimal: one accent series color, muted gridlines, no 3D
- Let 1px borders define structure; keep shadows nearly invisible

## Don't

- Don't use green/red for decoration — it dilutes the P&L signal
- Don't center-align numeric columns or use proportional figures in tables
- No heavy drop shadows or glassmorphism on data surfaces
- Don't animate live financial values continuously; tween once on change

## Accessibility notes

- Accent #635bff on bg #0b0e14 is ~4.1:1 — fine for large text, icons, and chart strokes, but use the text role for body copy and pair accent links with underlines
- Never encode gain/loss by color alone: always include the +/− sign or ▲/▼ glyph for color-blind users
- Verify positive #16c784 and negative #ea3943 remain distinguishable under deuteranopia simulation; the sign glyphs are the guarantee

## Reference sites

- Stripe Dashboard: https://stripe.com
- Robinhood: https://robinhood.com
- Mercury: https://mercury.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip fintech-dashboard.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/fintech-dashboard.json

Settings → Capabilities → Skills → Upload skill → fintech-dashboard.zip