WealthEngine

Design system

The single source of truth. Every screen composes these tokens and primitives — no hardcoded color, radius, or type anywhere. Each primitive bakes in a chair-law: you should know what a thing is, and how it's doing, before you read a word.

Typography

Inter, with tabular figures so money columns align. Roles, not sizes.

text-display₹92.9 Cr
text-title$1,194,722
text-headingYour three paths to Hyderabad
text-subheadingHousehold net worth
text-bodyMove to Hyderabad by 2029, clearing ₹70 Cr by 2039.
text-labelInvested / yr (avg)
text-captionsynced 3h ago · 26 accounts
text-microP10 ₹61 · P90 ₹157

Color

Dark-only. Semantic + finance roles are locked, so meaning is consistent everywhere.

Elevation — depth encodes importance (law 1)

bg-background
bg-background-sunken
bg-surface
bg-surface-2
bg-surface-3

Accent

bg-accent
bg-accent-strong
bg-accent-soft

Semantic + finance roles — state before words (law 2)

bg-positive (gain)
bg-caution
bg-danger (loss)
bg-info
bg-positive-soft
bg-caution-soft
bg-danger-soft
bg-info-soft

Chart series — one harmonious set (law 3)

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6

text-foreground   The quick brown fox 1,234,567

text-foreground-secondary   The quick brown fox 1,234,567

text-foreground-tertiary   The quick brown fox 1,234,567

Radius & surfaces

Semantic radii. Cards rise through three elevation levels instead of stacking borders.

rounded-badge
rounded-field
rounded-card
rounded-hero

Surface level 1

default card

Surface level 2

raised / nested

Surface level 3

overlay (shadow)

Stat & Money

The wealth-app atom. Size = importance, color = meaning, ~ = forecast.

Household net worth

$1,194,722$2.1K

$1.57M assets − $378K debt

Odds of ₹70 Cr by 2039

79%

1,500 simulated futures

Median net worth, 2039

₹92.9 Cr

P10 ₹61 Cr · P90 ₹157 Cr

Monthly burn

$8,920$340

under your $10k ceiling

$1,194,722₹92.9 Cr+$2,100−$340

Badges

Status & category tags. Tone is the meaning.

on trackBEST PATHaction neededoff trackLiveInternal
SolidOutlineSpentIncomeWealth

Insights

The master component for every engine read — sentiment-led, metric-forward, reasoning on demand.

Mortgage discipline is a clear win

−26%

Housing & mortgage fell $7,707 YoY — the biggest offset to rising costs.

Childcare exploded

+473%

Jumped to $14,705 in 2025 — now your fastest-growing line. Bright Beginnings alone ran 42 charges.

2026 is starting soft

−$9,967

YTD net is negative ($52,947 spent vs $42,980 earned) — partial-year timing, worth watching.

On track for ₹70 Cr

79%

The median forecast clears the goal comfortably; even the unlucky P10 lands near ₹61 Cr.

  1. 1,500 Monte Carlo futures at 12% mean return, 17% volatility.
  2. Median lands at ₹92.9 Cr — clears the goal with ₹22.9 Cr to spare.

Buttons

Actionable looks actionable (law 4): hover, press, focus ring.

Dropdowns

Native select, dressed to match — custom chevron, token styling, dark option list.

Accordion

Progressive disclosure — a smooth reveal with a rotating chevron.

A US townhome and the India flat in Hyderabad.
Brokerage + retirement.
22kt jewelry, valued live.

Charts

One visual language: shared grid, axis, tooltip, forecast band, accent line.

WealthEngine design system · tokens in globals.css · primitives in components/ui