提示
要求浅色、"可信赖"的配色，盈利只用一种招牌绿，而非深色终端风。数字要大且用等宽数字。把环形图中心的支出总额做成徽标，让总支出一眼可读。
Build a light personal-finance dashboard (an investing app's "Overview" page) in the Robinhood visual language. It must read like a real, calm money app — white cards, soft shadows, near-black ink, and a single confident green for gains.
STYLE
- Light UI: page background #eef2f9, card surface #ffffff, radius 14px, shadow 0 4px 14px rgba(30,45,90,.06)
- Ink #1f2a44, muted #8a94ad; hairline borders #eef1f6
- Gain green #00c805, loss red #f0607a, neutral blue #3b6ef6 for active nav
- 14px+ bold tabular numbers; Inter / Plus Jakarta Sans; generous whitespace
LAYOUT (two columns)
- Left sidebar (~110px): brand "Northstar" (green dot), nav Overview(active, green pill) / Accounts / Transactions / Budgets / Goals, Settings at bottom
- Main pane: top bar + body grid (1.6fr chart area : 1fr rail)
TOP BAR
- Left: small "Welcome back" + bold page title "Overview"
- Right: rounded "Search…" pill + avatar circle
STAT ROW (4 white cards: label / big value / delta chip)
- Total balance $48,250 ▲2.4%
- Income $9,200 ▲5.1%
- Expenses $4,120 ▼3.2% (red)
- Savings $3,080 ▲12%
CHART AREA (left column)
- Card "Spending overview": grouped bar chart, 7 months, two bars each — Income (green) and Expense (blue); legend top-right
- Below (desktop): "Accounts" card — three rows with an icon, name, and balance: Checking $12,400 / Savings $28,900 / Credit card −$1,240 (red)
RIGHT RAIL
- Card "Spending by category": donut (Housing 32 / Food 21 / Shop 19 / Fun 14 / Transit 14) with center total "$4.1k" and a 2-col legend
- Card "Recent transactions": three rows, each an icon + merchant + signed amount (Payroll +$3,200 green, Blue Bottle −$6.40 red, Whole Foods −$86 red)
- Card "Watchlist" (desktop): AAPL $228.50 ▲, TSLA $412.10 ▲, BTC $61,240 ▼
INTERACTION
- Hover states, 160ms transitions; signed amounts always colored; active nav highlighted with a soft green fill
- Responsive: rail stacks under the chart on narrow widths
TECHNICAL
- React + TypeScript
- Tailwind CSS
- Recharts or visx for the bar chart and donut
- Transaction icons as inline emoji/SVG