Numbers, with a little clarity.

Create a responsive personal finance dashboard called balance using React and CSS. Match a calm editorial financial app: pale sage canvas (#dce5d6), off-white app surface (#fafbf7), forest-green accent (#335445), muted gray labels, thin separators, and 12px corners. Use a restrained sans-serif type scale and tabular numerals. All financial data must be explicitly labeled demo data.

STRUCTURE: A slim left sidebar contains the wordmark, Overview (active), Transactions, Accounts, and Settings. Place the user profile at the bottom. The main content starts with “Your money, in balance.” and a date-range selector. Use three summary cards for Total balance ($24,680.00), Income ($8,250.00), and Expenses ($3,120.00), with text labels for change indicators.

CHART: Build a simple accessible spending chart using CSS bars or SVG, with seven labeled months and dark-green bars. Include a text summary of the trend. Under it, render a recent transactions list with merchant, category, date, amount, and status.

INTERACTIONS: Date-range changes update the demo chart and totals consistently. Navigation switches between meaningful sections. Transactions can be filtered by category with a visible reset action. Handle empty results, loading, and error states. Do not present fake controls that do nothing.

RESPONSIVE: Collapse the sidebar into a labeled menu below 768px. Stack the summary cards on small screens and allow the transaction table to scroll within its container. Use visible keyboard focus, semantic table markup, accessible labels, and reduced-motion support.