Loanlight

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

Lexend has open, even geometric shapes that feel calm and conversational, and its figures are very clear for the large loan inputs.

• LexendHeadings: question headline 56-64px semibold
• LexendBody: body 16px, labels 14px, 36px input values

Who it is for

• First-time home buyers
• Real estate agents enriching listings
• Mortgage brokers capturing rate shoppers
• Personal-finance content sites

Layout

1. Thin progress bar across the very top showing wizard step
2. Header: home icon + title left, centered segmented tabs (Monthly payment / Affordability), Reset link right
3. Wizard step: small uppercase eyebrow ('THE HOME'), 'Step 1 of 4', very large question headline, subcopy
4. Frosted glass card with large numeric inputs (home price; down payment $ and % side by side with unit toggle) and computed loan amount
5. White pill 'Continue' button below the card
6. Later steps: rate & term, taxes/insurance/HOA, extras; then results with summary card, stacked bar chart, donut, amortization table

Palette

dreamy, reassuring, simple, modern, optimistic. Floating in the clouds makes a stressful calculation feel light.

• sky background (periwinkle)#4652bd
• glass card fill#616bc6
• text on sky#ffffff
• primary violet (active tab text, CTA text)#6d3fd6
• app body background#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

Lexend SemiBold 64px, -1.28px tracking, sentence-case questions

Body

Lexend 16px; 36px medium for input values

One geometric humanist sans throughout; the huge question headline plus big numeric inputs make it feel conversational.

Spacing and imagery

Single centered column ~770px; glass card with 32px padding and ~1.1rem radius; pills fully rounded; lots of breathing room around one question per screen.

Full-bleed photo of soft clouds tinted periwinkle/lavender behind frosted glassmorphism panels; results use Recharts bars, line and donut.

Components

• Top step progress bar
• Segmented mode tabs
• Reset button
• Eyebrow + step counter
• Large question headline
• Glass input card
• Currency input with prefix
• Dollar/percent unit toggle with linked fields
• Computed helper line (loan amount)
• Continue/Back pill buttons
• Payment summary card
• Stacked bar + balance line chart
• Lifetime cost donut
• Monthly/yearly amortization table

Interactions

• Live recalculation on each keystroke
• Down payment $ and % fields stay in sync
• Step transitions slide/fade with progress bar advancing
• PMI helper appears below 20% down with drop-off month
• Extra payment and biweekly toggles show savings callouts
• Monthly/yearly table toggle
• All inputs encoded in URL query for sharing; copy-link toast
• Reset restores defaults

Data

• LoanInputs{homePrice, downPayment, downPaymentMode($|%), ratePct, termYears, propertyTaxYearly, insuranceYearly, hoaMonthly, pmiRatePct, extraMonthly, biweekly}
• ScheduleRow{period, payment, principal, interest, extra, balance, pmi}
• Summary{monthlyPI, monthlyTotal, totalInterest, payoffDate, pmiDropMonth, interestSaved}

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 **Loanlight**, a friendly guided mortgage calculator for first-time buyers and for the agents and publishers who serve them. Ask one question per screen, show the true monthly and lifetime cost, and make it easy to share a scenario by link.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Tabs, Toggle Group, Collapsible, Table) and lucide-react. Use Recharts for the composed bar/line chart and the donut, Framer Motion for step transitions, react-hook-form + zod for inputs, and date-fns for payoff dates. There is no backend: all state lives in memory and in the URL query string.

### Pages & layout
1. **Header**: a thin progress bar pinned to the top edge; home icon + title on the left; centered segmented tabs ("Monthly payment", "Affordability"); a Reset action on the right.
2. **Wizard** (four steps, one centered column about 760px wide): an uppercase eyebrow, "Step n of 4", a very large question headline and one line of help. Below that sits a frosted card with big inputs, then Back / Continue pills.
   - Step 1: home price, and down payment with linked $/% fields and a computed loan amount.
   - Step 2: interest rate and term (15/20/30 chips).
   - Step 3: property tax, insurance, HOA; PMI rate appears only when down payment is under 20%.
   - Step 4: extra monthly payment and a biweekly toggle.
3. **Results**: a summary card (P&I, tax, insurance, HOA, PMI, total), a stacked principal/interest/tax bar chart with a balance line, a collapsible lifetime-cost donut, savings callouts, and an amortization table with a monthly/yearly toggle.
4. **Affordability tab**: income and debts in, maximum price out.

### Design system
- Background: a full-bleed soft cloud image with a deep periwinkle overlay (`--sky: #4652bd` at 95% opacity) and a gradient fallback when the image is unavailable.
- Glass cards: `rgba(255,255,255,.10)` fill, 1px `rgba(255,255,255,.6)` border, `backdrop-filter: blur(16px)`.
- Tokens: `--on-sky: #ffffff`, `--primary: #6d3fd6` (active tab text, CTA label), `--surface: #e9f1f9` and `--fg: #151b24` for results panels that need higher contrast, and `--input-border: #6b7a8c` for results-panel inputs.
- Font: Lexend. Headline 56-64px semibold at -0.02em; input values 36px medium; labels 14px; body 16px (line-height 1.5); eyebrow 12px uppercase, 0.08em tracking.
- Spacing on an 8px grid; card padding 32px; radius 18px on cards and fully rounded pills.
- Motion: 300ms ease-out slide/fade between steps; the progress bar animates its width.

### Components & interactions
StepShell, MoneyInput (prefix, thousands formatting, error state), LinkedDownPayment (editing either field updates the other), UnitToggle, ChipGroup, PmiHint, SavingsCallout (hidden until relevant), SummaryCard, CostChart (tooltip, legend toggles), CostDonut, AmortizationTable (sticky header, monthly/yearly), ShareButton (copies the URL, shows a toast), ResetButton (confirms first). Continue stays disabled while the step is invalid, and the invalid fields explain why.

### Data & state
Put the math in a pure module: `amortize(inputs) -> ScheduleRow[]` and `summarize(rows) -> Summary`, with unit tests for 15- and 30-year loans, PMI removal at 78% LTV, extra payments and biweekly payments. Serialize inputs to URL params (short keys) and parse them back with zod on load. Use realistic generic defaults.

### Accessibility
The overlay is `#4652bd` at 95% so white labels pass 4.5:1 over any part of the photo; headlines also get a subtle shadow. Every input needs a visible `<label>` and `inputmode="decimal"`. Announce the recalculated monthly total through `aria-live="polite"`. Give charts a text summary and a "Show data" table. Keep focus rings visible on glass surfaces (2px white plus a dark outer ring). With reduced motion, drop the slide transitions.
Verified contrast: white on sky: #ffffff on #4652bd = 6.6:1; white on glass card: #ffffff on #616bc6 = 4.7:1; violet CTA label on white: #6d3fd6 on #ffffff = 6.3:1; results text: #151b24 on #e9f1f9 = 15.2:1.

### Security
This is a static app, so keep the security work proportionate. Clamp and validate every URL param with zod, reject NaN or extreme values, and never use `eval`. Commit no API keys. If you add a lead-capture form later, validate on the server with a honeypot and rate limiting, and collect minimal PII with explicit consent.

### Performance & SEO
Lazy-load Recharts on the results step. Serve the cloud image as responsive AVIF/WebP with a gradient placeholder. Add a descriptive title, meta and OG tags plus one H1. Target Lighthouse 95+.

### Guardrails
- Write fresh copy and a generated or royalty-free sky image; no lender brands.
- Show no fake testimonials or rates presented as live.
- Store no personal financial data.
- Keep components small and typed; no `any`. Show errors inline.
- Done when: (1) the $ and % down payment fields stay in sync; (2) totals match a reference amortization to the cent; (3) PMI drops at the correct month; (4) a shared URL reproduces the scenario; (5) the whole wizard works by keyboard.

Open the builderAll templatesThis palette on its own