Hearthbook

The brief

This is an example by Askmill: the prompt of the demo interview on the home page. The line under the title is the request typed at the start; the seven questions of the demo shaped the rest.

The prompt

The complete text, exactly as it is handed to an AI builder.

Download (.txt)

Hearthbook: a shared household expenses notebook for two people

CONCEPT
Hearthbook is a quiet paper notebook for a couple's household spending, where one ring per month shows how much of the budget is gone and whether the money will outlast the month.

WHO AND WHERE
Two partners write expenses down on their own phones, usually at the till, often with one hand. Entering a line must take under five seconds and never more than three taps after the amount. Build a mobile-first progressive web app that also works on a desktop browser, installable to the home screen and fully usable offline.

REAL MECHANICS
All money is stored and calculated as integer cents. Never use floating point for amounts. Display uses the euro with two decimals and tabular numerals: 69280 cents renders as €692.80.
A household has one monthly budget, default 90000 cents (€900.00), editable in Settings. A month runs from the 1st to the last calendar day in the device's local time zone.
Each line has: id (random 16-character string), amountCents (positive integer, maximum 999999), category, writtenBy (partner A or partner B), note (optional, maximum 40 characters), createdAt (ISO timestamp), deleted (boolean).
spent = sum of amountCents of all non-deleted lines in the month.
left = budget - spent.
spentShare = min(spent / budget, 1).
timeShare = dayOfMonth / daysInMonth, where dayOfMonth counts today as completed after 18:00 local time.
daysLeft = daysInMonth - dayOfMonth + 1 before 18:00, otherwise daysInMonth - dayOfMonth.
perDay = floor(left / daysLeft) when left > 0 and daysLeft > 0, otherwise 0.
A month is "on pace" while spentShare <= timeShare. This is the whole idea of the app: a good month is one where the time ring closes before the money ring does.
Default categories, in this order: Groceries, Bills, Home. A household may add up to three more (maximum six), rename any category, or archive one; archived categories keep their history. Category totals are the sum of that category's lines in the month.
Reference state for screenshots and tests: budget 90000, Groceries 41260, Bills 18620, Home 9400, spent 69280, left 20720, day 24 of a 30-day month before 18:00, so daysLeft 7 and perDay 2960 (€29.60).

PALETTE
Paper #F4ECDB: page background and sheets.
Ink #1D1812: all primary text, amounts, the spending arc.
Soft ink #6B5F4C: secondary text, timestamps, the writer's initial.
Brass #B8935A: hairlines, small labels, the time ring, the focus ring, the add button outline.
Rule #DDD0B4: row separators and the empty track of both rings.
Brick #A4472F: used only when spent is greater than budget, for the overflow arc and the word "over". Nowhere else.
Ink on paper is about 15:1; soft ink on paper is above 5:1; brass is never used for body text. No gradients except a 2% paper grain made in CSS, no drop shadows deeper than 0 1px 0 rule.

TYPOGRAPHY
Titles and the ring total: "Iowan Old Style", Palatino, Georgia, serif, weight 400. Body: the same stack at 17px, line-height 1.5. Amounts: same stack with font-variant-numeric: tabular-nums lining-nums. Labels: 11px small caps, letter-spacing 0.14em, brass. The ring total is 40px; the "of €900.00" beneath it is 15px soft ink. Never use more than these sizes: 11, 15, 17, 22, 40.

SCREENS
1. Month (the first screen, always). Top bar: the month name, for example "November", left; a gear button labelled "Settings" right. Centre: the ring, 220px on phones, 280px on wide screens. Outer arc: spending, 10px ink stroke, drawn with stroke-dasharray and stroke-dashoffset on an SVG circle of radius 100, offset = circumference x (1 - spentShare). Inner ring: time, 2px brass stroke at radius 88, offset = circumference x (1 - timeShare). Inside the ring: "€692.80" and below it "of €900.00". Under the ring one sentence, chosen by state: on pace, "€29.60 a day keeps you on pace."; behind pace but not over, "A little ahead of the calendar. €29.60 a day from here."; over budget, "€12.40 over this month."; empty month, "A new month. Nothing written yet." Then three category rows, each a label and an amount, right-aligned: "Groceries €412.60", "Bills €186.20", "Home €94.00". Then "Recent" with the last five lines (note or category, writer initial, amount, time such as "18:42"). A wide button at the bottom, 56px tall, brass outline, label "Write a line".
2. Write a line (bottom sheet, 70% of screen height). A large amount field that fills from the right as digits are typed: pressing 3, 2, 0 shows €0.03, €0.32, €3.20. A numeric keypad of 12 keys, each at least 56px, including "00" and a backspace. Below it, the categories as a single row of chips; the most recently used one is preselected. Optional note field, placeholder "Bread, bulbs, the plumber". Button "Write it down", disabled while the amount is 0. The writer is set by the device and never asked.
3. Category. Tapping a category row opens its lines for the month, newest first, with its total at the top. Swiping a line left, or pressing Delete on a focused line, reveals "Remove"; removed lines show "Removed. Undo" for 6 seconds.
4. Months. A list of past months, each with a small 32px ring, the total and "on pace" or "over by €x". Tapping one opens it read-only.
5. Settings. Monthly budget, categories, the two partners' first names, "Pair a phone", "Export this month (.csv)" and "Export everything (.json)".

SIGNATURE MOMENT
When a line is written: 0-120 ms the sheet slides down; 120-300 ms the new row inks into Recent from 0 to 100% opacity with a 6px rise; 300-800 ms the spending arc advances to its new offset with cubic-bezier(.2,.8,.2,1) while the total counts up in whole cents; at 800 ms a 1px brass underline draws under the new amount over 200 ms and fades at 1600 ms. When the calendar month ends and the household was on pace, the next app open shows the closed time ring for 1200 ms with the line "October closed before the money did." before rolling into the new month.

INTERACTION AND KEYS
Every control is a real button or input with a visible label or aria-label. Touch targets at least 44px. On desktop: N opens Write a line, digits type the amount, Enter writes it, Escape closes the sheet, 1-6 pick a category while the sheet is open, Left and Right step between months on the Months screen. Focus is a 2px brass ring with 2px offset, never removed. No keyboard traps; the sheet returns focus to "Write a line" when closed.

SAVING AND SHARING
Local first: all data lives in IndexedDB on each phone and works with no connection. Pairing: "Pair a phone" shows a 10-character household code and a QR code drawn locally; the partner enters or scans it once. After pairing, both phones sync through a small server endpoint that stores the household's lines encrypted with a key derived from the code, merging by line id with last write wins on edits and deletions kept as tombstones. No accounts, no email, no password, no bank connection. If sync fails, show a small brass dot beside the month name and retry with backoff at 5, 30 and 120 seconds; never block writing.

REDUCED MOTION
With prefers-reduced-motion, rings and rows appear in their final state, the sheet cross-fades in 150 ms, and the month-closed line appears without the ring animation.

PERFORMANCE AND ACCESSIBILITY
First paint under 1 second on a five-year-old phone; HTML, CSS and JavaScript under 120 KB together; no web fonts downloaded; only transform and opacity animated. The ring has role="img" and an accessible name such as "€692.80 spent of €900.00, 7 days left, on pace". Amounts are read as currency. All text passes WCAG AA, and layout tolerates text 30% longer for later translations.

NEVER
No bank or card connections, no adverts, no analytics or third-party requests, no notifications or reminders, no streaks, badges or scores, no red or brick colour unless spent is over budget, no pie charts, no emoji in the interface, no sign-up screen.

DONE WHEN
1. With the reference state loaded, the Month screen shows the ring at 77% (69280 / 90000), the time ring at 80%, "€692.80", "of €900.00" and the three category rows exactly as written above.
2. Typing 3, 2, 0 and choosing Groceries writes €3.20 and the Groceries row becomes €415.80 and the total €696.00 within one second.
3. Writing 21640 cents more shows the brick overflow arc and "€12.40 over this month.", and removing that line restores the ink ring.
4. A line written on one paired phone appears on the other within 10 seconds when both are online, and a line written offline syncs after reconnecting.
5. Every screen is reachable and operable by keyboard alone at 360px and 1440px widths.
6. The CSV export opens in a spreadsheet with columns date, category, writer, note, amount in euros.

What's inside this prompt

The sections of this prompt, in order, with their length.

1. Overview 9 words
2. Concept 32 words
3. Who and where 56 words
4. Real mechanics 261 words
5. Palette 109 words
6. Typography 60 words
7. Screens 356 words
8. Signature moment 106 words
9. Interaction and keys 80 words
10. Saving and sharing
11. Local first 109 words
12. Reduced motion 25 words
13. Performance and accessibility 64 words
14. Never 42 words
15. Done when 139 words

More app prompts

• App prompt · 2,315 words

  La Sporta

  Our buying group of 38 families in Padova needs one place for the monthly orders instead of a spreadsheet and WhatsApp.

  Worked example (simulated interview)

• App prompt · 2,319 words

  Panjski dnevnik

  I keep 14 hives near Ljubljana and want to log inspections on my phone with gloves on.

  Worked example (simulated interview)

• App prompt · 2,394 words

  The Under-9s, Saturday Sorted

  I coach an under-9s team in Bristol and want one app for availability, lifts, oranges and kit washing.

  Worked example (simulated interview)

• App prompt · 2,177 words

  Squashed Bank - One Bitcoin in Dollars

  A one-screen price page in the spirit of preev.com: one huge orange number, the cost of one Bitcoin in US dollars right now, resting like a weight on the roof of a

  Customer prompt, public