Planchet

Patterns

Road to payday

Design 1.0.0, Built 1.0.0. Figma: Balances page

Spec

The runway: what is safe to spend until payday, and which bill would overdraw you. On wide screens it takes the middle of the balances panel and most of its width (about 2.2 to 1 against each balance column, which keep at least 240px). On phones, while Road to payday is on, the runway leads the screen (as on the mood board): safe to spend and days to pay, the track, then the three balances as a compact strip, then the register. When it is off (free), the full balances panel returns. During the trial and for paying users it is never hidden: no payday or no bills show an empty state that says what it does. After the trial it shows the manual-habit tip once; once dismissed it is gone and the balances split the panel in thirds. Dates assume today is Wed, Oct 1 and payday is Fri, Oct 10.

Desktop screens (1280px)

Phone screens (320 × 740)

Every state

Anatomy

  • Label (text-label) with help icon, then the headline figure (hero-cents style at 32px in this panel).
  • Track: Today on the left, payday on the right (the $ marker, surface-accent-bright). A dark tick marks today; the filled part is the days already gone this cycle.
  • Bills are dots by date. Only the next bill is labeled ("Oct 4 · Phone −$45.00"). Same-day bills stack into a count.
  • One summary line: "N bills · $X before payday", Show all ›.

The math

  • Safe to spend = Immediate − every bill due before payday that is not yet entered as a transaction.
  • Never cap the bill count: every bill is subtracted, however many there are.
  • A bill drops off the runway once it is entered; it is then in Immediate already.

Color

  • Amber appears only when a bill will take you below zero before payday: that dot, its label with ▲, the dashed track after it, the headline and the note.
  • Below zero at the bank stays red in the balances; the runway does not repeat it.
  • Every warning carries ▲ and words, never color alone.

Plans

  • Trial: full runway with a "Trial" badge (surface-badge, text-badge) beside its label. In the last 7 days the badge reads "Trial · N days left".
  • Last 7 days: one note naming the end date, what changes, that data is kept, and one button.
  • Trial ended: the runway slot shows the manual-habit tip once, with "Got it" and "Keep Road to payday". Dismissing removes Road to payday from the page completely and shows a toast: "You can subscribe at any time from the profile menu to turn this feature on."
  • Free: no runway. The three balances share the panel in equal thirds.

Decided (Oct 1, 2026)

  • "Show all ›" goes to the Bills page; no extra sheet.
  • The phone strip stays label-and-figure only. Tapping it opens a sheet explaining all three balances, with the same descriptions as the full panel.
  • The runway is never hidden during the trial or for paying users. After the trial: the tip once, then gone, with balances in thirds.
  • next First-time walkthrough.

Built 1.0.0

The app itself, version 1.0.0, with made-up data. Taken 2026-10-11.

Road to payday as built, version 1.0.0: phone, 390px, light
Phone, 390px, light
Road to payday as built, version 1.0.0: phone, 390px, dark
Phone, 390px, dark
Road to payday as built, version 1.0.0: wide, 1280px, light
Wide, 1280px, light
Road to payday as built, version 1.0.0: wide, 1280px, dark
Wide, 1280px, dark

Changes

  1. 1.0.0, Oct 1–2 2026: Runway in every state: trial badge, empty states, Show all, short before payday.