Centavo Budget

# Centavo — Personal Budgeting App

## Goal
Design and build "Centavo", a personal budgeting app. Feel: kind money coach — zero guilt, high clarity. Every screen should feel native-quality — fluid, tactile, zero jank.

## Visual Language
- **Palette**: cream #FAF7F2 base (light-first!), espresso #33302B text, fresh green #34C759 for 'left to spend', soft coral for overspend — never alarm-red
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Home** — big friendly 'Left to spend this week: $184' number, ring showing week progress, 4 envelope cards (Groceries/Fun/Transport/Eating out) each with mini progress bar and remaining amount.
2. **Add expense** — opens as bottom sheet: big numpad, category chips row, optional note; save button morphs into a checkmark.
3. **Envelope detail** — spend ring center (spent vs budget), transaction list grouped by day, 'Move money' action to rebalance from another envelope.
4. **Insights** — monthly bar chart (6 months), 'wins' cards ('You spent 18% less on delivery 🎉'), no shame framing anywhere.
5. **Settings** — budget period picker, currency, backup toggle, 'Fresh start' (reset month) with gentle confirm.

## Interactions & Motion
- Numpad digits pop 1.06 on press with light haptic; amount animates count-up as typed.
- Envelope rebalance: drag amount chip from one envelope onto another, both bars animate to new values.
- Pull-to-refresh plays a tiny coin-flip animation on the logo.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- Overspend states say 'A bit over — happens!' with coral (not red) and suggest a rebalance.
- Week resets Monday with a soft confetti moment if any envelope finished under budget.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.