See your future balance days, weeks, months, and years ahead.
Product patterns
The system becomes useful when it meets a real decision.
These patterns show how Runrate combines familiar product structure with financial clarity. They are focused compositions, not complete screens—and every value shown here is synthetic.01 / Public conversion
A landing page should make the future feel readable before it asks for a download.
The public composition introduces the product, makes one path forward visible, and earns attention with a clear financial signal—not noise.Production componentsResponsive priority
The new way to budget
See Your Future Account Balance
Runrate connects your accounts, lines up the bills still ahead, and shows the balance you are likely to have after each one.11 dated forecast points. Use left and right arrow keys to inspect each point. Annotations: Lowest balance.
Try a small change to see how it will affect your future balance.
The product promise, a single primary action, and a directional proof point all remain in the first reading pass.
Navigation simplifies before the core promise, forecast signal, or download action loses its place in the hierarchy.
Do not ask a person to compare several calls to action, read a dense feature grid, and infer what Runrate does at the same time.
02 / Upcoming ledger
Scope, movement, and consequence share one precise reading edge.
The production Web ledger keeps account context and current balance above a responsive transaction list, while its most frequent tools stay in one floating dock.Production WebResponsiveKeyboard operable
Production-backed specimenUpcoming with transaction tools
Transaction Date Account Amount Future Balance
Due Today
Payroll transfer
-$8,420.00
$18,420.00
Pending
Client payment
$12,780.00
$31,200.00
Card payment
-$640.00
Ignored
Quarterly taxes
-$8,420.00
$620.00 Low balance
Ledger
Filter Transactions
Showing all transactions
Transaction Type
Show all transactions, or focus on incoming or outgoing activity.
Transaction Color Tag
Both account and balance controls are 2.125rem high. Their negative edge offsets align the values—not their backgrounds—with the transaction content below.
Desktop adds sticky columns for transaction, date, account, amount, and future balance. Compact layouts return date and account to each row and remove the header.
The borderless dock floats above the safe area. Settings and filters open at 22.5rem above their invoking circles; modal editors remain centered over a scrim.
03 / Account management
An account overview should be quick to scan and easy to keep current.
The summary explains why balance updates matter; flat groups and compact rows keep frequent editing from feeling heavy.Web verifiediOS mapped
Accounts
Net balance$23,153.95
For the most accurate Runrate, update your balance every day — or whenever you open the app.
Bank Accounts
$20,775.55Credit Cards
$2,378.40Business Card
$1,432.20Ignored in net balance
Current Balance
Household Card
-$1,189.40Subtracted from net balance
Current Balance
Travel Card
+$3,567.80Added to net balance
Available Credit
Net balance, guidance, group headings, totals, and account rows all use the same 0.95rem inline inset.
Show net balance only when more than one account exists and search is empty. Group totals also yield while search is active so matching rows remain the focus.
On iOS, preserve the scan order, compact native-list rhythm, 44pt targets, and explicit balance impact without copying Web dimensions.
Account management includes unavailable, no-accounts, no-matches, account-saved, and account-deleted states. Reuse the shared application-state surface for blocking states and concise inline status for successful actions.
04 / Popup forms
A focused task should feel calm, compact, and connected to the view behind it.
Account and transaction editors use a centered modal shell over a scrim. Ledger settings and filters reuse the same neutral cards and controls, but remain anchored to their tool instead of becoming modal.Production primitiveWeb verifiedResponsive
Live specimenPopup form states
Center the borderless editor over a semi-opaque scrim, separate it with elevation and surface contrast, and cap its height at 43rem or the safe viewport.
Settings and filters open from the ledger dock without a scrim. Keep them viewport-safe and return focus to the invoking circle when they close.
Use neutral stacked cards, whitespace-led grouping, and clear surface contrast instead of perimeter rules, internal dividers, or nested panels.
Keep short selects inline, let text fields span the card, and scroll dense choices within their own bounded row.
Keep the action row sticky inside long forms. Primary actions use the flat brand treatment with no decorative shadow.
Use a compact eyebrow and title, one circular close control, a quiet live status line, stacked task cards, and a sticky action row.
Production editor modals trap focus, close on Escape, and restore focus to their trigger. Backdrop dismissal is blocked while dirty; explicit Close and Escape remain available.
Tool popovers close on Escape, outside pointer, or focus leaving the tool group. They do not trap the rest of the page; Escape restores the invoking circle.
Keep the form centered and viewport-safe. Collapse paired fields, retain visible labels, preserve safe-area padding, and let only the popup content scroll.
05 / Risk and recovery
Caution should make the recovery path clearer, not make the interface louder.
Account deletion states what happens to upcoming and cleared transactions, preserves an obvious Cancel path, and prevents deletion when Runrate would be left without an account.Production WebExplicit consequenceBlocked state
Production-backed specimenDelete account states
Delete Account
Operating Checking
Please confirm deletion.
This will delete all upcoming transactions associated with this account. Cleared transactions will not be deleted.
Move all one-time and recurring series to another account before deleting this account.
Production uses an explicit destructive button after consequence copy; it does not require a typed phrase.
Name both sides of the operation: upcoming transactions are deleted, while cleared transactions remain.
If the account is required for Runrate to function, replace the destructive action with one clear Close path and explain why.
System threads