Paysprout

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Red Hat Mono is calm and rounded for a monospace, so the all-mono money notebook keeps its aligned figures without feeling like a terminal.

• Red Hat MonoHeadings: hero 80px bold, disposable figure 56px
• Red Hat MonoBody: body 16px, dense lists 15px, tabular numerals

vibld has built this product: see its example, generated from one sentence. A personal budget tracker: income, expenses and a balance.

Who it is for

• Salaried workers living paycheck to paycheck
• Freelancers with irregular bill cycles
• People on biweekly pay schedules
• Anyone watching subscription creep

Layout

1. Transparent top bar on teal gradient: wallet icon + monospace wordmark left, 'View demo' text and white pill 'Get started' right
2. Centered hero: wallet line icon, huge monospace headline, bold tagline, white pill + text CTA
3. Browser-framed dashboard mock: sidebar (Overview, Expenses, Income) and a main panel with period range, 1M/3M/6M/1Y/ALL toggles, 'DISPOSABLE' label, big amount and a red delta
4. Three numbered step cards with large teal numerals
5. Large monospace pull quote
6. Closing call-to-action section
7. App: Overview, Expenses, Income, Settings (pay cycle), /demo

Palette

calm, precise, practical, trustworthy, understated. A tidy money notebook with a cool teal accent.

• hero teal (deep)#00605a
• hero teal (light)#0d837a
• app background#f4f6f7
• text navy#0a2833
• card#ffffff
• negative delta red#dc2626
• muted text#5f6f76

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

Red Hat Mono Bold 86px, -2.15px tracking; H2 48px semibold

Body

Red Hat Mono 16px (15px in dense lists); large tabular figures for money

An all-monospace system turns the app into a calm ledger where every number aligns.

Spacing and imagery

1000-1150px container, cards with 12px radius and big soft shadows, pill toggles, an in-app sidebar about 240px wide, generous marketing sections.

No photos; line icons; the browser-framed app mock as hero art; a full-bleed gradient area chart and a donut chart inside the app.

Components

• Scroll-aware header
• Hero with icon and dual CTA
• Browser-frame dashboard mock
• Numbered step cards
• Pull quote
• Sidebar nav
• Period navigator with range label
• Disposable-income hero number with delta
• Range toggle (1M/3M/6M/1Y/ALL)
• Full-bleed income vs expense area chart
• Category donut
• Frequency-grouped item lists
• 'To pay' / 'Fulfilled' bill list with one-tap mark
• Pay-cycle settings with a live preview

Interactions

• Step through pay periods forward and back
• Tap to mark a bill fulfilled, which updates the disposable figure
• Range toggle redraws the chart
• Recurring items auto-schedule, with weekend dates moved to Monday
• Pay-cycle settings preview the resulting periods
• Add/edit an item in a dialog with validation
• Header turns solid on scroll
• Demo route with seed data

Data

• PaySchedule{user_id, frequency weekly|biweekly|semimonthly|monthly, anchor_date}
• RecurringItem{id, user_id, kind income|expense, name, amount, category, frequency, start_date, end_date?, active}
• Occurrence{id, item_id, due_date, amount, fulfilled_at?}
• Category{id, name, color}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Paysprout**, a budgeting app organized around pay periods instead of calendar months. Users describe their pay schedule and recurring bills once; the app works out every occurrence, shows how much is safe to spend before the next paycheck, and lets them tick bills off as they pay them.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Dialog, ToggleGroup, Select, Tabs) and lucide-react. Use Recharts for the area and donut charts, date-fns for period math and weekend shifts, TanStack Query for data, react-hook-form + zod for item and settings forms, and Framer Motion for number transitions. Use Supabase for Auth (email + Google), and Postgres for the schedule, items and occurrence status.

### Pages & layout
1. **Landing**:
   - Transparent header on a deep-teal gradient that turns solid on scroll.
   - Centered hero: line icon, huge monospace headline, bold tagline, two CTAs.
   - A browser-framed dashboard mock, three numbered step cards, a large quote marked as a sample, a closing CTA and a footer.
2. **Overview**:
   - Period header (date range, previous/next) and range toggles.
   - The "Disposable" number with its change from the previous period.
   - A full-bleed area chart of income vs expenses.
   - A "To pay" list with one-tap fulfil, a "Fulfilled" list, and the category donut.
3. **Expenses** and **Income**: items grouped by frequency (Weekly, Biweekly, Monthly, Quarterly, Yearly) with add/edit dialogs.
4. **Settings**: pay frequency and anchor date with a live preview of the next four periods.
5. **/demo**: the same screens with seed data and no sign-in.

### Design system
- Tokens: `--hero-from: #00605a`, `--hero-to: #0d837a`, `--background: #f4f6f7`, `--card: #ffffff`, `--foreground: #0a2833`, `--muted-fg: #5f6f76`, `--primary: #0b766e`, `--negative: #dc2626`, `--positive: #15803d`, `--input-border: #7b8a91`.
- Category colors: a six-step palette from teal to amber, each paired with a label.
- Font: Red Hat Mono everywhere with tabular numerals. Hero 80px bold at -0.025em, the disposable figure 56px, body 16px at line-height 1.5 (15px only in dense lists), nothing below 12px.
- Spacing on a 4px base; radius 12px on cards and full on toggles and CTAs.
- Shadows: `0 20px 40px -16px rgb(10 40 51 / .18)`.
- Motion: 400ms count-up on money figures, 150ms toggles.
- Light theme first, with an optional dark variant.

### Components & interactions
PeriodNavigator (disabled when at the first period), DisposableHero (positive and negative delta with an arrow and sign), RangeToggle, CashflowChart (tooltip, table fallback), CategoryDonut (legend with amounts), BillRow (fulfil button with an optimistic update and undo toast; overdue badge), ItemDialog (inline validation, saving and error states), FrequencyGroup (collapsible), PayCycleForm (live preview), EmptyStates ("Add your first bill"), plus loading skeletons.

### Data & state
`pay_schedules(user_id pk, frequency, anchor_date)`, `items(id, user_id, kind, name, amount_cents, category, frequency, start_date, end_date, active)`, `occurrence_status(item_id, due_date, fulfilled_at)`. Generate occurrences on the fly with a pure, unit-tested function `occurrencesInPeriod(item, period)` that moves weekend dates to Monday, and store only the fulfilment rows. Keep amounts in integer cents. Seed a fictional person with rent, utilities, streaming subscriptions, insurance and biweekly pay.

### Accessibility
The lighter teal stop is deepened to `#0d837a` so white hero text passes everywhere on the gradient; the negative red on white passes. Always show +/− signs, not color alone. The fulfil button's name includes the bill ("Mark Rent paid"). Charts come with data tables, and the donut legend lists values. Range toggles form a radio group. Keep focus rings visible (2px `--primary`). With reduced motion, figures change instantly instead of counting up.
Verified contrast: white on light teal: #ffffff on #0d837a = 4.6:1; body: #0a2833 on #f4f6f7 = 14.2:1; muted: #5f6f76 on #f4f6f7 = 4.8:1.

### Security
RLS on every table: `user_id = auth.uid()` for all operations. The demo uses static seed data. Validate amounts (positive, under a sane maximum), dates and enums with zod and database constraints. Keep only the anon key in the client. Don't collect bank credentials; this is a manual-entry app. Offer CSV export and account deletion.

### Performance & SEO
Split the landing and app bundles. Memoize period calculations. Lazy-load charts. Index `(user_id, due_date)` on fulfilment rows. Add meta/OG tags on the landing page and noindex the app. Target Lighthouse 90+.

### Guardrails
- Write fresh copy; don't present the quote as a real customer.
- Store no account numbers or sensitive banking data.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) changing the pay cycle re-slices every period correctly, with unit tests; (2) fulfilling a bill updates the disposable figure immediately; (3) weekend dates shift to Monday; (4) RLS isolates users; (5) /demo works logged out.

Open the builderAll templatesThis palette on its own