Mortgage discipline is a clear win
−26%Housing & mortgage fell $7,707 YoY — the biggest offset to rising costs.
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₹88 Crtext-title$742,318text-headingYour three paths to Hyderabadtext-subheadingHousehold net worthtext-bodyMove to Hyderabad by 2029, clearing ₹70 Cr by 2039.text-labelInvested / yr (avg)text-captionsynced 3h ago · 26 accountstext-microP10 ₹52 · P90 ₹124Color
Dark-only. Semantic + finance roles are locked, so meaning is consistent everywhere.
Elevation — depth encodes importance (law 1)
bg-backgroundbg-background-sunkenbg-surfacebg-surface-2bg-surface-3Accent
bg-accentbg-accent-fillbg-accent-strongbg-accent-softSemantic + finance roles — state before words (law 2)
bg-positive (gain)bg-cautionbg-danger (loss)bg-infobg-positive-softbg-caution-softbg-danger-softbg-info-softChart series — one harmonious set (law 3)
chart-1chart-2chart-3chart-4chart-5chart-6text-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-badgerounded-fieldrounded-cardrounded-heroSurface level 1
default card
Surface level 2
raised / nested
Stat & Money
The wealth-app atom. Size = importance, color = meaning, ~ = forecast.
Household net worth
$1,194,722$2.1K
$940K assets − $210K debt
Odds of ₹70 Cr by 2039
79%
1,500 simulated futures
Median net worth, 2039
₹92.9 Cr
P10 ₹52 Cr · P90 ₹124 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.
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,967YTD 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 ₹52 Cr.
- 1,500 Monte Carlo futures at 12% mean return, 17% volatility.
- Median lands at ₹88 Cr — clears the goal with ₹18 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 grammar everywhere: series paint on mount, a ghost crosshair follows the pointer, and the chart's own header is the readout — no floating tooltip boxes.
The voice
Two typefaces, two jobs. Instrument Serif is the voice — currency signs, toolbar titles, the wordmark, emphasized phrases. Inter is the fact — every digit, always tabular. The serif never touches data.
$742,318+$4,280
Stay the course on Utah remote, then Hyd 2029 — the verdict wears the serif; the numbers never do.
lenses picked for this data — not a gallery
Liquid glass
Chrome only — the dock, the tab bar, the palette, stage scrims. Data surfaces stay solid. The recipe (iOS 27): blur + saturate diffusion, a darkened outer edge, a specular top catch-light.
Wglass-chromeactive
.glass-chrome = --surface-glass tint · blur(28px) saturate(1.4) · --glass-rim border · --glass-specular top line · --glass-edge outer ring.
Disclosure
ONE reveal physics (trigger + rotating chevron chip + grid-rows glide), worn four ways: Accordion rows, collapsible sections, stat cards, profile rows. All skins over ui/Disclosure.
The rows inside always sum to the headline — opening never surprises.
Section-level: the meta answers the header before you open it.
The mandates
Rules with dates — every one is a call made on a real screen, promoted to law and enforced by design-lint.
De-card
A box only where content is a data object (hero, charts, tables, competing cards). Statements, verdicts, portals, and inputs go bare — editorial rails, hairline rows. Inside a card: separator rows, never boxes-in-boxes.
Ink numbers
Headline figures render in foreground ink. Sentiment rides a small element — a 1.5px toned dot, a delta chip, a badge — never full-saturation color at display scale.
Deep fills
Filled controls use the deep accent-fill token with light on-fill ink (≈6.3:1). Light teal never sits behind text; white is not a token.
Role names only
No raw type sizes, no raw radii, no hex, no arbitrary colors — role names only. design-lint fails the build on any of it, so the dialect can't drift.
Motion
Motion communicates, never decorates. One ease (fast attack, long settle) and a duration ladder; every value is a token, and prefers-reduced-motion silences all of it.
- --duration-fast · 120ms
- hover, focus, color
- --duration · 200ms
- reveals, fades, the glide
- --duration-morph · 380ms
- layout morphs (pill ⇄ rail)
- --duration-entrance · 480ms
- content settling (we-rise)
- --stagger · 70ms
- per-sibling entrance offset
- --ease-out · (.2 .8 .2 1)
- the only curve — hydraulic
.we-rise — reload to watch the stagger; never animates under prefers-reduced-motion.