# Budget envelopes > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The month screen of an envelope-budgeting app in a Material 3 Expressive language: tonal surfaces from an ochre seed, a dark inverse summary card, a 64px extended FAB, emphasized easing, and one family, Zilla Slab, whose heavy slab numerals make the amounts feel like stamped tickets. Each budget category is an envelope: a tonal card with a drawn flap whose fill rises from the bottom as money is spent, with a scalloped top edge like a liquid line. One envelope (Dining out) has gone over, so its fill turns coral and it carries an "Over" badge. You move money by dragging one envelope onto another, or through a bottom sheet. The detail worth copying is that every envelope is a gauge without a single progress bar on screen. ## Reference behaviour 1. Initial state: October 2026, "4 days left". Summary card reads "Left in envelopes $557.73" with a marigold pill "$146 to assign". Eight envelopes in a 2-column grid: Rent (Paid, green fill full), Groceries $201.54 left of $520, Dining out −$38.20 over a $180 budget (coral, "Over" badge), Transit $34.50 of $96, Utilities $66.88 of $210, Fun money $76 of $120, Gifts $67.01 of $80, Car repair $150 of $150 (empty). 2. Fill height = spent ÷ budget, capped at 100%. Paid envelopes fill pale green; overspent fill coral; everything else marigold. 3. Mouse: press an envelope and move more than 8px; it lifts (scale 1.04, 28px shadow, rotates `dx/40` degrees) and follows the pointer. Other envelopes shrink to 0.98; the one under the pointer shrinks to 0.95 with a 3px primary ring. Release on it: the Move money sheet opens with From = dragged, To = target. 4. Touch: hold 280ms to lift (a quick swipe still scrolls the page), then drag as above. 5. Tap (or Enter/Space on a focused envelope): the sheet opens with From = that envelope and To = Dining out (or Groceries when you tap Dining out itself). 6. The FAB "Move money" opens the sheet with Groceries → Dining out and $40. 7. Sheet: From and To selects with each envelope's remaining amount under them, a 52px amount with 56px − / + steppers (±$5, minimum $5), quick chips $10 $25 $40 $80 (the matching one is pressed), and a full-width pill "Move $40 to Dining out". Same envelope twice disables the pill and it reads "Pick two envelopes". 8. Moving: the sheet slides away, both envelopes' budgets change and their fills animate over 640ms; Dining out at +$40 becomes $1.80 left of $220, loses the badge and turns marigold. A snackbar "Moved $40 from Groceries" with Undo appears for 5s above the FAB. Undo reverses the move. 9. The month chevrons switch to September 2026 ("Closed, $42.18 rolled over", every envelope nearly full) and November 2026 ("Starts in 4 days", all empty). The FAB hides outside the current month and the far chevrons disable. ## Structure ``` 390 × 844 ┌──────────────────────────────────────┐ │ 54 safe area │ │ (‹) October 2026 (›) │ 64 48px icon buttons │ 4 days left │ │ ┌──────────────────────────────────┐ │ inverse card, r28 │ │ Left in envelopes ($146 │ │ │ │ $557.73 (44px) to assign)│ │ │ └──────────────────────────────────┘ │ │ ┌ envelope 171×150 ┐ ┌ envelope ────┐ │ gap 10, r20 │ │ \ flap 44 / │ │ \ / │ │ alternate cards get a 44px │ │ Rent │ │ Groceries │ │ bottom-left corner │ │ ▒▒▒▒ fill ▒▒▒▒▒▒ │ │ ~~~~~~~~~~~~ │ │ │ │ Paid │ │ $201.54 │ │ │ └──────────────────┘ └──────────────┘ │ │ … 4 rows … │ │ ┌────────────┐ │ │ │ ⇄ Move money│ │ FAB 64 tall, r20, bottom 34 └──────────────────────────────────────┘ sheet: r28 top, handle 32×4, From/To selects 56 tall, amount 52px, chips 40, pill 56 ``` - `
`: two icon `