# AI Guide — Centsible · Envelope Budget

- **Slug:** `centsible-envelope-budget`
- **Category:** Financial Apps · Everyday Money
- **Vibe:** soft-pastel, calm, trustworthy
- **Format:** mobile app home screen (portrait phone)
- **Reference implementation:** `reference.html` (same directory, self-contained HTML/CSS)
- **Audience:** coding agents reproducing this design in any stack

## Mission

An envelope-budgeting home screen that makes a hard money question feel calm and
friendly. The user should feel *safe* the moment they open it: one big honest number,
clear envelope progress, and a daily "safe to spend" answer. No charts, no jargon, no alarm.

## Mood & voice

- Calm, warm, gently optimistic. Violet = trusted guardian; cream = soft paper.
- Voice in copy: second person, plain words, short lines. "Left this month", not
  "Remaining available balance". "Safe today", not "discretionary daily threshold".
- Nothing flashy: no gradients (only flat fills), no heavy shadows, no glassmorphism.

## Color tokens

| Token | Hex | Use |
| --- | --- | --- |
| canvas | `#f7f7fb` | page background |
| ink | `#17151f` | primary text, avatar fill |
| muted | `#7e7988` | secondary text (greeting, percentages) |
| faint | `#928d99` | tertiary text (transaction detail) |
| brand | `#6d52ff` | hero fill, active tab marker, links |
| brand-soft | `#7057ff` | envelope bar "Home" |
| accent | `#ffe85d` | "safe today" pill fill + avatar text |
| card | `#ffffff` | cards, tabs bar |
| border | `#e7e5ee` | 1px card hairlines |
| track | `#e9e8ee` | usage bar background |
| positive | `#18805b` | incoming money, deposit icon |
| positive-bg | `#ddf5eb` | transaction icon chip |
| bar-home | `#7057ff` | Home 74% |
| bar-groceries | `#22a87a` | Groceries 62% |
| bar-transport | `#eebd34` | Transport 38% |
| bar-fun | `#ff4f91` | Fun 57% |

## Typography

Face: **Manrope** (weights 400 / 500 / 700 / 800). Load from Google Fonts or bundle;
fallback stack `-apple-system, "Segoe UI", Roboto, sans-serif`.

| Style | Size | Weight | Tracking | Color |
| --- | --- | --- | --- | --- |
| greeting | 12 | 500 | 0 | muted |
| page title | 20 | 800 | −0.8px | ink |
| hero eyebrow | 10 | 800 | +1.2px, uppercase | white @ 68% |
| hero amount | 44 | 800 | −2.6px | white |
| hero sub | 12 | 500 | 0 | white @ 72% |
| safe label | 9 | 800 | +0.7px, uppercase | ink |
| safe amount | 23 | 800 | −0.9px | ink |
| section title | 15 | 800 | −0.4px | ink |
| section link | 12 | 700 | 0 | brand |
| envelope name | 12 | 700 | 0 | ink |
| envelope amount | 21 | 800 | −1px | ink |
| pct / caption | 10 | 500 | 0 | faint |
| txn name | 12 | 700 | 0 | ink |
| txn detail | 10.5 | 500 | 0 | faint |
| txn amount | 13 | 800 | 0 | positive |
| tab label | 9 | 700 | 0 | ink (active) / faint |

Display numerals should use tabular feel via tight negative tracking — the hero
amount is the centerpiece; it must read as *settled*, not loud.

## Spacing & shape

- Page padding: 19px horizontal. Content column max 560px, centered.
- Card padding: 14px. Radii: hero 23, card 16, chip/avatar 13, transaction 15, pill 999.
- Gaps: grid 10px, section-to-section 18–21px, header-to-hero 19px.
- Usage bar: 7px tall, radius 4, track `#e9e8ee`, fill = envelope color at its pct.
- Borders: 1px `#e7e5ee` on cards, tabs top edge, transaction row.

## Layout rules

1. **Header row:** greeting + page title on the left, 38×38 ink avatar (radius 13,
   yellow "AX", 12/800) on the right.
2. **Hero:** full-width brand violet block, radius 23, padding 20, white text. Decorative
   ring: 170px circle, 38px border `rgba(255,255,255,0.08)`, top-right offset
   (−55px right, −62px top), overflow hidden. Stack: eyebrow → amount → sub → safe pill.
3. **Safe pill:** inline yellow pill (radius 999, padding 7/15/7/17), label 9/800 +0.7 +
   amount 23/800 −0.9, 9px gap.
4. **Envelopes:** section head (title left, "See all" link right, baseline aligned),
   then a 2-column grid (3 on tablet, 4 on desktop). Each card: name + pct row, amount,
   usage bar.
5. **Transaction:** single white row, radius 15: 37×37 positive-bg icon chip (radius 12,
   green down-arrow SVG), two-line body (flex), amount right.
6. **Tabs:** fixed bottom bar, white, top border `#e7e5ee`, 4 tabs (Home · Budget ·
   Insights · Settings). Active: ink icon+label with a 22×3px brand marker under it;
   inactive: faint. Icons are thin (2px) line SVGs, 20px.

## Copy (exact)

- Greeting: **Good morning, Alex**
- Title: **June money plan**
- Hero eyebrow: **LEFT THIS MONTH** · Hero amount: **$2,146**
- Hero sub: **— $4,062 of $6,208 assigned**
- Safe pill: **SAFE TODAY** · **$86.40**
- Envelopes: Home **$1,240** 74% · Groceries **$318** 62% · Transport **$96** 38% ·
  Fun **$184** 57% (percentages match the bar fills)
- Transaction: **Payroll deposit** / *Payday · just now* / **+$2,880**

## Motion & interaction

- Hover (web): slight opacity 0.6 on tappable rows; "See all" link colors brand.
- No entrance animations. If a stack forces one, use a 200ms ease fade, nothing bouncy.

## Responsive behavior

- Phone: single column, 2-col envelope grid.
- Tablet (≥520px): 3-col grid. Desktop (≥900px): 4-col grid, content capped at 760px.
- Tabs stay pinned at the bottom in every size.

## Do / Don't

- DO keep the hero flat violet — no gradients, no pattern fills, no image behind it.
- DO use the exact tracking values; negative tracking is what makes the numerals feel
  intentional rather than default.
- DON'T add cards, shadows, borders, or extra chrome that isn't in the reference.
- DON'T replace the pill with a generic button — it's a status chip, not a CTA.
- DON'T invent new colors; when in doubt use muted/faint rather than a new hue.

## Reproduction checklist

- [ ] Canvas `#f7f7fb`, no background image
- [ ] Hero renders Manrope 800 with −2.6px tracking on "$2,146"
- [ ] Envelope bars exactly 7px, fills match copy percentages
- [ ] Bottom tabs pinned, active marker under Home
- [ ] All copy matches the list above verbatim
- [ ] Grid adapts 2/3/4 columns by width
- [ ] Safe-area aware on devices with notches

## Stack notes

- **HTML/CSS:** copy `reference.html` directly; it is self-contained (Manrope via Google
  Fonts is the only external dependency).
- **React:** map tokens to CSS variables; componentize EnvelopeCard, SafeToday, BottomTabs.
- **React Native / Expo:** use `@expo-google-fonts/manrope`; `letterSpacing` on Text;
  `borderRadius` per token; `SafeAreaView` for notch/home-indicator insets.
- **Tailwind:** tokens → `@theme` (colors + tracking + radii); grid classes for the 2/3/4
  column switch.

## Proof this works

The Expo (React Native) app in this repository's `src/` directory was built from this
exact reference — the same tokens, the same layout, the same copy.