Whealthy Simplified — Design Document

Date: 2026-03-01 Status: Approved Deploy target: whealthy.unicorn.land (Cloudflare Pages subdomain) Tech stack: Next.js (static export), React 19, TypeScript, Tailwind 4, Recharts, Zustand, Zod

Overview

Whealthy is a wealth longevity calculator that answers two questions:

1. Reverse (default): “How much money do I need now to die with X?”
2. Forward: “Given what I have, how long will my money last?”

The current version is a full-featured financial simulator with multi-jurisdiction tax, private equity commitments, philanthropy, and Monte Carlo modeling. This redesign strips it to its essential question, wraps it in a story-driven “answer first” interface, and visually connects it to the Unicorn.Land design system.

Interaction Model: Answer First

The user lands on one big number — the answer. Inputs are presented as an editable sentence. Complexity is available but hidden behind collapsible assumption cards. Everything updates instantly (150ms debounce).

The philosophy: the answer IS the interface. The tool tells you a story about your money. You pull threads to understand why.

Information Architecture

Zone 1: Hero

• The Number: ~64px JetBrains Mono bold. “You need $2.4M today.” (reverse) or “Your money lasts until age 78.” (forward)
• Visual state: Rainbow gradient shimmer when healthy (same CSS as Unicorn.Land wordmark — 6-color gradient, 300% bg-size, 6s animation). Solid opal when neutral. Solid coral when concerning (ruin likely).
• The Sentence: ~20px Outfit regular. Editable inline values with subtle underline on hover, opal cursor. “I’m 35, I want to die at 85, I spend $80k/year, and I want $500k left.”
• Mode toggle: Subtle switch between reverse (“what do I need?”) and forward (“what happens with what I have?”). Reverse is default.

Zone 2: Visualization

Key Stats Strip — 3-4 numbers in a horizontal row between hero and charts:

• Ruin age or terminal wealth (mode-dependent)
• Total lifetime spending
• Total lifetime taxes paid
• Effective blended annual return (after tax)

Each stat: JetBrains Mono number + Outfit label. Tappable for tooltip with more context.

Wealth Timeline (primary chart):

• X-axis: age (current → death). Y-axis: wealth.
• Deterministic: single opal line with translucent opal area fill below.
• Monte Carlo: median line (solid opal) + probability bands as layered fills — 5th/95th (lightest opal wash), 25th/75th (medium). Topographic contour feel.
• Dashed horizontal line at target terminal wealth (reverse) or zero (forward).
• Hover: vertical crosshair with JetBrains Mono tooltip showing age, wealth, percentile range.

Breakdown Chart (secondary, beside timeline on desktop):

• Stacked area showing cumulative composition over time: starting wealth, returns earned (dividends + capital gains + interest), minus spending, minus taxes.
• Palette: opal (returns), gold (starting wealth), coral (taxes), stone (spending).

Zone 3: Assumptions

Collapsible cards, all closed by default. Flat white, 1px stone border, no shadow. Smooth height transition on open/close.

Returns: - Pre-filled with historical averages (e.g., ~7% equities, ~2% cash) - Asset class weight sliders - All adjustable - (i) tooltips explaining each return assumption and its historical basis

Taxes: - Single effective tax rate as the simple view - Breakdown toggle revealing: dividend tax rate, capital gains tax rate, interest tax rate - Jurisdiction picker (Germany, US, UK) sets defaults - (i) tooltips explaining each tax type

Spending Rules: - Default: fixed annual spending (inflation-adjusted) - Toggle options: percentage-of-wealth, guardrails (target % with min/max annual change) - (i) tooltips explaining each mode

Monte Carlo: - Toggle on/off - When on: simulation count slider (100–2,000) - Probability bands appear on timeline chart - Ruin probability displayed in key stats strip - (i) tooltip explaining what Monte Carlo simulation means

Visual Design

Shared Unicorn.Land DNA

• Typography: Outfit (headings, UI text) + JetBrains Mono (numbers, stats, chart labels)
• Primary accent: Opal #56dbd0
• Neutrals: Warm stone scale (--ul-stone-*, #fafaf9 to #1c1917)
• Signature treatment: Rainbow gradient shimmer on the hero number (healthy state)
• Footer: “Made in Unicorn.Land” badge

Whealthy’s Personality

• Precision, not atmosphere. No clouds, sparkles, or frosted glass. Clean white/stone cards, sharp type hierarchy, generous whitespace.
• Numbers are the decoration. The hero number IS the visual statement. Charts are the ornament. Let the data be beautiful.
• Muted chart palette: Opal for wealth line, warm gold for spending, soft coral for taxes/ruin. Monte Carlo bands as translucent opal fills. No bright competing colors.
• Subtle interactions: Inputs feel like editable text (underline on hover, opal cursor). Sliders are thin and precise. Tooltips are compact.
• Dark mode using --ul-* dark tokens from the design system.

Chart Styling

• Opal line on warm stone gridlines
• JetBrains Mono for axis labels and values
• Gridlines in --ul-stone-200
• Monte Carlo bands: layered translucent opal fills (lightest → most saturated)
• Hover crosshairs with crisp tooltip cards

Responsive

• Desktop: Hero + sentence at top, two charts side by side, assumptions in 2-column grid below
• Mobile: Single column stack. Hero number stays big and bold. Charts full-width. Assumptions as accordion.

Scope

In (v1)

• Two modes: reverse (default) and forward, toggled
• Editable sentence for core inputs (age, death age, spending, target)
• Hero number with rainbow shimmer / opal / coral visual states
• Wealth timeline chart (deterministic + Monte Carlo probability bands)
• Breakdown chart (returns vs spending vs taxes over lifetime)
• Key stats strip (ruin age, total spending, total taxes, effective return)
• Assumptions section: returns, taxes, spending rules, Monte Carlo
• Historical defaults for all return/tax values, adjustable
• Inline (i) tooltips on every concept
• Dark mode
• Responsive (desktop + mobile)
• Static export → whealthy.unicorn.land via Cloudflare Pages
• “Made in Unicorn.Land” badge
• Zustand store with localStorage persistence

Out (cut from current Whealthy)

• Private equity / illiquid commitments
• Cash flow events (one-off inflows/outflows)
• Philanthropy engine
• Multi-jurisdiction tax blending / treaty benefits / holding company structures
• JSON export/import
• Seed presets
• Full year-by-year results table
• Notes tab

Ported from Current Whealthy

• Simulation engine (deterministic + Monte Carlo core logic)
• Tax calculation (simplified to single jurisdiction at a time)
• Spending rules logic (fixed, percentage, guardrails)
• Zustand store pattern

Future (v2+)

• Sensitivity analysis: “What if” sliders showing how sensitive the answer is to each assumption, with inline sparklines
• Cash flow events: Add back one-off inflows/outflows for life events
• Shareable results: URL-encoded state for sharing projections