Clearpath

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

Gantari is a soft, open geometric sans that keeps a heavy money topic approachable and hopeful, with clear figures for the plan inputs.

• GantariHeadings: hero 56-64px semibold, card titles 30px
• GantariBody: body 16px, labels 13px, numeric inputs

Who it is for

• Households with credit card, car and student debt
• People juggling two to ten balances
• Financial coaches presenting plans to clients
• Anyone comparing avalanche and snowball

Layout

1. Header: card icon + title left, white 'Share' pill and overflow menu right
2. Centered hero title and subtitle on an indigo-to-violet gradient
3. Glass stepper bar: 1 Your Debts, 2 Strategy, 3 Budget
4. Glass card 'Your Debts': table of editable rows (nickname, category select, balance, APR, minimum) with delete icons, an 'Add another debt' link, and totals
5. White pill 'Continue' bottom right
6. Later steps: strategy cards; budget slider with feasibility warning
7. Results: debt-free date count-up with confetti, strategy comparison, balance timeline chart, interest donut, collapsible amortization table, CSV/PDF export

Palette

hopeful, supportive, clear, modern, motivating. It turns a stressful subject into a guided plan with a celebratory finish.

• gradient top indigo#342e91
• gradient bottom violet#5b5bd6
• glass card#6565d8
• text on gradient#ffffff
• button text indigo#342e91
• app surface#e9f1f9
• body text#151b24

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. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

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

Type scale

Display

Gantari SemiBold 64px hero, 30px card titles

Body

Gantari 16px body, 13px labels; right-aligned numeric inputs

Soft geometric sans keeps a financially heavy topic feeling approachable.

Spacing and imagery

Centered 720px column; glass cards with about 1.1rem radius; pill inputs and buttons; table rows about 72px tall with hairline dividers.

No photos; frosted glass surfaces over a smooth gradient; Recharts area and donut charts; a confetti burst on reveal.

Components

• Header with Share button
• Glass stepper
• Editable debt table rows
• Category select
• Currency and percent inputs
• Add/remove debt
• Running totals
• Strategy choice cards (avalanche/snowball)
• Budget slider with numeric input
• Feasibility warning
• Debt-free date reveal with confetti
• Strategy comparison panel
• Balance timeline area chart
• Interest donut and collapsible amortization table

Interactions

• Validation gates block Continue until rows are valid
• Add or delete debt rows with animation
• Totals update live
• Dragging the budget slider recomputes date, chart and interest instantly
• Warning appears when budget is below the sum of minimums
• Debt-free date counts up with confetti on reveal
• Share copies a URL with encoded state
• Export CSV/PDF

Data

• Debt{id, nickname, category, balance, apr, minPayment}
• Plan{strategy avalanche|snowball, monthlyBudget}
• MonthRow{month, debtId, payment, principal, interest, balance}
• Result{debtFreeDate, months, totalInterest, perDebtPayoffMonth, comparisonDelta}

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 **Clearpath**, a friendly debt payoff planner. In three short steps a user lists their debts, picks a payoff strategy and sets a monthly budget, then sees when they'll be debt-free, how much interest they'll pay and how the two main strategies compare. It is useful on its own and as a tool financial coaches can share with clients.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Select, Slider, Collapsible, Tooltip, DropdownMenu) and lucide-react. Use Recharts for the balance timeline and interest donut, Framer Motion for step transitions and the count-up, canvas-confetti for the reveal, react-hook-form + zod (useFieldArray) for debt rows, date-fns for dates, and jsPDF for the PDF export. No backend: state lives in the URL.

### Pages & layout
1. **Header**: logo and title on the left; a Share pill and an overflow menu (Reset, Export CSV, Export PDF) on the right.
2. **Hero**: centered title and subtitle on an indigo-to-violet gradient.
3. **Stepper**: a glass bar with three numbered steps; the current step gets a ring and completed steps a check.
4. **Step 1, Debts**: a glass card with a table of rows (nickname, category, balance, APR, minimum), a delete button per row, "Add another debt", and totals (balance, combined minimums).
5. **Step 2, Strategy**: two large choice cards, highest-rate-first vs smallest-balance-first, each with a one-line explanation.
6. **Step 3, Budget**: a slider plus a numeric input; a warning if the budget is below the minimums.
7. **Results**: debt-free date (count-up and confetti), months and total interest, a comparison panel (difference in dollars and months), a balance-to-zero area chart, an interest-vs-principal donut, per-debt payoff order, and a collapsible monthly table. A what-if slider stays pinned.

### Design system
- Tokens: `--grad-from: #342e91`, `--grad-to: #5b5bd6`, glass `rgba(255,255,255,.06)` (≈`#6565d8` over the lighter violet) with a `rgba(255,255,255,.5)` border and 12px blur, `--on-grad: #ffffff`, `--primary-ink: #342e91` (text on white pills), `--surface: #e9f1f9`, `--fg: #151b24`, `--warning: #fbbf24` used as a chip fill with `#151b24` text.
- Font: Gantari. Hero 56-64px semibold, card title 30px, body 16px (line-height 1.5), labels 13px, inputs 16px with tabular numerals.
- Spacing on an 8px grid; column max 760px.
- Radius: 18px on cards, full on inputs and buttons.
- Motion: 250ms step slide, 1.2s count-up, a single confetti burst.
- One light-on-gradient theme; results tables sit on the lighter surface for legibility.

### Components & interactions
Stepper (clickable for completed steps), DebtRow (error per field, delete with an undo toast), MoneyInput and PercentInput (formatting, min/max), StrategyCard (radio semantics, selected ring), BudgetControl (slider and input kept in sync), FeasibilityAlert, ResultHero, ComparisonPanel, TimelineChart (tooltip per month), InterestDonut, AmortizationTable (monthly/yearly, sticky header), ShareButton (copied toast), ExportMenu (CSV and PDF generation states). Continue stays disabled until the step is valid, and the reasons are listed.

### Data & state
A pure module `simulate(debts, strategy, budget) -> {rows, result}` with monthly interest accrual, minimums first, extra money rolling to the target debt, and freed-up minimums snowballing onward. Unit-test the edge cases: zero APR, a budget exactly equal to the minimums, and a payoff inside a month. Encode state into compact URL params and validate them with zod on load. Use generic seed nicknames ("Rewards card", "Car loan", "Student loan") with no lender names.

### Accessibility
The glass fill is kept at 6% white so white text on it stays above 4.5:1 even over the lighter violet. Each table input gets an `aria-label` combining the row nickname and the column. The slider exposes `aria-valuetext` in dollars. Announce the result date through a live region. Skip confetti and the count-up under reduced motion. Charts have data tables. Stepper items use `aria-current="step"`.
Verified contrast: white on violet: #ffffff on #5b5bd6 = 5.4:1; white on glass: #ffffff on #6565d8 = 4.8:1; pill label: #342e91 on #ffffff = 10.8:1.

### Security
Everything stays on the device: don't send debts anywhere, and point out that shared URLs contain the figures. Validate and clamp URL params (balance up to $10M, APR 0-100%). Commit no keys. Generate PDFs locally. Add a clear "estimates only" note. Use a CSP with no third-party scripts.

### Performance & SEO
Run the simulation in a memoized selector or a web worker for 10+ debts. Lazy-load jsPDF and confetti. Add meta/OG tags and a single H1. Target Lighthouse 95+.

### Guardrails
- Write fresh copy; use no bank or lender names or logos.
- No fake success stories.
- Store nothing on a server.
- Keep components small and typed; no `any`. Show validation errors visibly.
- Done when: (1) results match a reference spreadsheet within a cent; (2) avalanche vs snowball differences are correct; (3) a shared URL restores the exact plan; (4) the infeasible-budget warning appears correctly; (5) the whole wizard works by keyboard.

Open the builderAll templatesThis palette on its own