Balance

Small business owners need financial clarity, not financial complexity. Most accounting tools overwhelm with charts, graphs, and jargon. Balance takes the opposite approach: one number, one answer, one moment of calm.

The challenge was to build a financial dashboard that feels authored — not template-generated — while maintaining the trust that money management demands. Every design decision had to pass the "did anyone LOOK at the pixels" test.

Read-First Contract

Every screen is designed to be read, not decoded. The Dashboard shows one number — your cash position — with zero navigation required to get the answer. No charts. No bars. No visual noise. Just the answer.

One Accent, Maximum Restraint

The entire palette is built on warmth: a paper backdrop (#F7F6F2), ink-black text, and exactly one petrol-teal accent for CTAs and interactive elements. The cash hero stays in ink — accent restraint on the most visible number is the right call.

Tabular Ledgers, Not Charts

Financial data is presented in clean, tabular format with tabular numerals. Numbers align. Columns breathe. The "Money kept" figure in Reports is the single hero — not a pie chart, not a bar graph. One number that matters.

Nine stages, each with documented decisions and critique gates:

1. Research — Competitive analysis of 12+ fintech dashboards
2. Strategy — "Honesty as the feature" — trust through transparency
3. Information Architecture — 5-root navigation, depth ≤3
4. User Flows — Onboarding, dashboard, transactions, reports, settings
5. UI Design — 7 screens with full state coverage (empty/loading/error/partial/success)
6. Design System — 17 components, 7-step type scale, 8-point spacing
7. Visual Polish — Pixel-level refinements, 1px grid discipline
8. Accessibility Audit — WCAG 2.2 AA with 2 Critical + 8 High findings
9. Design Critique — Zero-tolerance senior review, GO with 5 must-fix items

The critique verdict: "Linear/Stripe/Vercel caliber."

The composition uses hierarchy pyramid, whitespace guarded above money, purposeful asymmetry, and tone-ruled discipline. The biggest differentiator is the absence — no chart, no bar of bars — restraint as the product shape.

Five must-fix items before final GO: muted-text AA contrast, warning-text AA on trust UI, interactive border contrast, currency consistency (one locale, no mixed £/$), and accessibility-behavior contracts for modals and keyboard navigation. All bounded, named-token changes — no redesign required.

The entire system uses system font stacks (no @font-face, no CDN), inline SVG (~4 icons), CSS custom tokens, and prefers-reduced-motion. Hand-buildable with zero dependencies, one stylesheet. No npm. No webfont block.

For a finance product, this is the correct call: fast load, zero external requests, full offline capability. The design system is production-ready as pure HTML/CSS.