Home layout
Spec
Where things sit on an account's home page: the runway over the register, everywhere, while Road to payday is on. The check-to-clear list must never be pushed out of reach.
Wide screens
- One panel: Immediate on the left, the runway in the middle, Present over Once cleared on the right. The runway is about 2.2 to 1 against a balance column, and a balance column is never narrower than 240px.
- Below it, the register table (circle, date, payee, category, amount) with the slim entry row at the top.
- With no runway (free, or the trial has ended), the three balances share the panel in equal thirds with a divider between them.
Phones
- The runway leads, then the three balances as a strip (12px labels over 14px figures, no descriptions), then the register.
- The strip is one button. Tapping it opens a bottom sheet, "Your balances", with the full rows: descriptions, help and the below-zero lines.
- With Road to payday off, the full balances panel stays: three rows, Immediate first in the hero style.
- Add transaction is the center button of the bottom tab bar, in thumb reach.
Pinned bar
- On scroll, at every width, a bar pins under the header or top bar.
- With Road to payday on it leads with safe to spend ("Safe to spend $107.48", or "▲ Short before payday −$37.82" in text-warning), then the three balances and the "3 not cleared" filter.
- Phones: safe to spend on its own line above the balances. Wide: first in the row, a divider, the balances, and the filter at the right.
- With Road to payday off the bar is the three balances and the filter.
Bills on Home
- One quiet line: "10 bills · $1,284.00 before payday Show all ›". No bills card; the space goes to the register until Show all is opened.
Built 1.0.0
The app itself, version 1.0.0, with made-up data. Taken 2026-10-11.
Changes
- 1.0.0, Oct 11 2026: First record of what is built: Road to payday above the register, and the pinned balances strip on phones.