Limepurse

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

Baloo Da 2 keeps the warm, rounded headings as named, and Mulish is a clean, minimal sans that stays light and tidy in the card and transaction mocks.

• Baloo Da 2Headings: H1 48px, H2 36px, 700, line-height 1.1
• MulishBody: body 16px/1.6 400-500, leads 18px, UI mocks and amounts with tabular numerals, tag pills 14px 500

Patterns

• centered hero over faint square grid
• mint tag pill above every heading
• tilted dashboard mock under hero (sidebar, balance chart, transactions, card stack)
• partner logo marquee
• fanned credit-card trio rising out of a dark band
• alternating split rows with floating transaction list cards
• alert-type toggle list mock
• security feature section
• testimonial carousel
• three-tier pricing (free / $ / $$)
• FAQ accordion
• mobile-app download section
• blog teaser cards
• newsletter signup

States it is designed for

• Newsletter: invalid email, submitting, subscribed, already subscribed, error
• Demo route: seeded read-only dashboard, reset button
• Pricing: current-plan emphasis and 'most popular' badge
• Blog: empty category and pagination
• 404 page with friendly illustration and home link
• Reduced motion: no tilt/fan animation, static marquee and carousel
• Negative amounts show a minus sign and label, not colour only

Who it is for

• Young professionals juggling several cards
• Freelancers separating personal and work spend
• Budget-conscious households
• Fintech founders prototyping a card-management product

Layout

1. Nav: rounded wordmark left, pill links (Features, Pricing, Blog, Contact) and mint 'Get started' pill right; hamburger on mobile
2. Hero: mint tag pill, rounded bold two-line headline, one-line muted subline, mint 'Get started' pill + outlined 'Try the demo' pill, all over a faint square grid
3. Dashboard mock: slightly perspective-tilted panel with sidebar nav, total balance with area chart, recent transactions list (+/- amounts), stack of three coloured cards and an 'add card' tile
4. Partners: tag pill, one-line reassurance, grayscale logo marquee
5. Cards section: centered heading and outlined link button, three cards fanned upward out of a rounded near-black band
6. Transaction tracking: copy left, floating list of three transactions right
7. Custom alerts: mock of alert toggles left, copy right
8. Security, expense reporting and spending insight sections alternating
9. Testimonials, pricing (Free, Plus, Pro), FAQ, 'on the go' mobile app section, blog cards, newsletter, footer with legal links
10. Mobile: stacked full-width pill buttons, dashboard mock scaled down, split rows stack

Palette

friendly, fresh, reassuring, tidy, optimistic. Money management that feels as light as a mint on a white tablecloth.

• page background#ffffff
• soft gray surface#f9fafb
• headings and body text / dark band#1a1a1a
• muted slate-violet text (accessible fix)#6c6f99
• mint primary fill#60d2b6
• mint tint (tag pills)#ebf9f6
• deep green text / positive (accessible fix)#237d67
• negative amount (accessible fix)#ea093f
• violet card accent (accessible fix)#b622fc
• sky card accent (decorative)#00a8e0
• input border / outlined button#787ba1

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

Baloo Da 2 700, 48px hero / 36px section headings, normal tracking, 1.1 line-height

Body

Mulish 400-500, 16px / 1.6; lead lines 18px

Rounded display face gives warmth; UI mocks and numbers use Mulish with tabular numerals. Tag pills 14px 500.

Spacing and imagery

Airy and centered: 120px sections, 1120px container; dashboard mock 24px radius with 16px inner card radius; all buttons are 48px-radius pills; tag pills fully rounded; soft large shadows only under the dashboard mock.

UI-only visuals: dashboard mock, bright gradient bank cards in sky blue, mint and violet with generic issuer names, transaction rows, toggle lists; a faint square grid behind the hero; grayscale partner marks.

Components

• Pill nav and pill buttons
• Tag pill
• Dashboard mock (sidebar, balance chart, transactions, card stack)
• Bank card component (issuer, masked number, holder, expiry, type)
• Fanned card showcase over dark band
• Transaction row (+/- amounts, date, direction icon)
• Alert toggle list
• Logo marquee
• Testimonial carousel
• Pricing card
• FAQ accordion
• App-download section
• Blog card
• Newsletter form

Interactions

• Dashboard mock straightens from its tilt as it scrolls into view
• Fanned cards spread further apart on hover and on scroll
• Alert toggles in the mock are interactive demos
• Marquee scrolls; pauses on hover/focus
• Testimonial carousel with arrows, dots and swipe
• Pill buttons darken on hover; 2px deep-green focus ring

Data

• Card{id, issuer, type (credit|debit), last4, holder, expiry, balance, color}
• Transaction{id, card_id, merchant, amount, direction (in|out), date, category}
• AlertRule{id, type (payment_reminder|large_purchase|low_balance|weekly_summary), enabled}
• Plan{id, name, price, features[], popular}
• Testimonial{quote, name, role}
• Post{slug, title, excerpt, cover, published_at}
• Subscriber{email, created_at}

Guardrails

Experience

• Use invented issuers and a generic card-network glyph; never real bank or network logos
• Mask card numbers to the last four digits everywhere, even in mocks
• Pair every amount with a sign and colour
• Keep the free tier visible and honest in pricing
• Demo must be clearly labelled as sample data

Accessibility

• Text on mint buttons is dark #1a1a1a (white fails on mint)
• Muted copy uses #6c6f99 to pass on white and gray
• Card showcase has a text alternative listing the three example cards
• Carousel is pausable, keyboard operable and announces slide position
• Honour reduced motion for tilt, fan and marquee

Security

• Marketing site collects only newsletter emails; insert via Edge Function with rate limiting
• RLS on subscribers with no anon read
• Security section describes real controls only (encryption, 2FA, read-only access) and links to a policy page
• Demo data is static JSON; never real account data

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build the marketing site for **Limepurse**, a personal finance app that gathers all of a person's cards, transactions and spending alerts into one tidy dashboard. The site must feel friendly and safe, show the product clearly and make starting free a one-click decision.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix, lucide-react, Recharts for the balance area chart, Motion for tilt/fan animations and the carousel, react-hook-form + zod for the newsletter. Supabase Edge Function stores newsletter signups.

### Pages & layout
1. **Home**: pill nav; centered hero (tag pill, 48px rounded headline, subline, mint "Get started" + outlined "Try the demo") over a faint grid; tilted dashboard mock; partner marquee; card showcase (fanned cards over a dark rounded band); transaction tracking split; custom alerts split; security; expense reporting; spending insights; testimonials carousel; pricing (Free, Plus, Pro); FAQ; mobile app section; blog cards; newsletter; footer.
2. **Demo** (read-only dashboard with seeded data), **Pricing**, **Blog** + post, **Contact**, **Privacy / Cookies / Licensing**, **404**.
Mobile: full-width stacked pill buttons, mock scales to fit, split rows stack with the visual after the copy.

### Design system
- Colors: `--bg: #ffffff`, `--surface: #f9fafb`, `--fg: #1a1a1a`, `--muted: #6c6f99`, `--mint: #60d2b6`, `--on-mint: #1a1a1a`, `--mint-tint: #ebf9f6`, `--green: #237d67`, `--negative: #ea093f`, `--violet: #b622fc`, `--sky: #00a8e0` (card gradient only), `--input-border: #787ba1`, `--ring: #237d67`.
- Fonts: Baloo Da 2 700 for H1/H2 (48/36px, 1.1); Mulish 16px/1.6 for body and UI; tabular numerals for amounts.
- Spacing: 8px base; sections 120px / 72px mobile; container 1120px.
- Radius: pills 48px, dashboard 24px, inner cards 16px, bank cards 14px.
- Shadows: dashboard mock `0 30px 60px rgba(26,26,26,.10)`; bank cards `0 12px 24px rgba(26,26,26,.18)`.
- Motion: tilt from 8deg to 0 over 600ms on enter; fan spread 400ms; marquee 30s.

### Components & interactions
PillNav, TagPill, PillButton (mint | outline), DashboardMock (Sidebar, BalanceChart, TransactionList, CardStack, AddCardTile), BankCard (issuer, type, last4, holder, expiry, colour), CardFan (dark band), TransactionRow (arrow icon, sign, amount), AlertToggleList (Radix Switch demos), LogoMarquee, TestimonialCarousel, PlanCard, FaqAccordion, AppDownload (generic store buttons), PostCard, NewsletterForm.

### Data & state
Static JSON for cards (issuers like "Northfield Credit" are invented), transactions (invented merchants), alerts, plans, testimonials, posts. Demo route loads the same JSON read-only with a reset. Newsletter states: idle, invalid, submitting, success, duplicate, error.

### Accessibility
Mint fills always carry dark text. Muted copy `#6c6f99`. Amounts include a +/- sign and a visually hidden "received"/"spent". Carousel has pause, arrows, dots and aria-live polite position. Tilt/fan/marquee off under reduced motion. Focus ring 2px `--ring` with 2px offset. Body 16px+.
Verified contrast: body text on white: #1a1a1a on #ffffff = 17.40:1; muted text on white: #6c6f99 on #ffffff = 4.80:1; muted text on gray surface: #6c6f99 on #f9fafb = 4.60:1; dark label on mint button: #1a1a1a on #60d2b6 = 9.44:1; tag pill text on mint tint: #237d67 on #ebf9f6 = 4.62:1; negative amount on white: #ea093f on #ffffff = 4.56:1; white text on violet card: #ffffff on #b622fc = 4.54:1; white text on dark band: #ffffff on #1a1a1a = 17.40:1; focus ring on white: #237d67 on #ffffff = 5.00:1; input border / outlined button on white: #787ba1 on #ffffff = 4.08:1.

### Security
Newsletter Edge Function: zod email validation, honeypot, per-IP rate limit, service-role insert; `subscribers` RLS allows no anon select/update/delete. No real bank data anywhere; masks show last four digits only. Security copy describes only controls the product actually has and links to the policy page.

### Performance & SEO
Dashboard mock as lightweight JSX, chart lazy-loaded. Logos as SVG sprites. Static generation, per-page meta, OG image of the dashboard, FAQ and Organization structured data (placeholder replaced before launch). Target Lighthouse 95+.

### Guardrails
- No real bank, card-network or partner logos; use invented names and a generic chip glyph.
- Testimonials are sample content.
- Don't claim regulatory licences.
- Acceptance criteria:
  - [ ] Hero, mock and card fan render cleanly at 390/768/1440px
  - [ ] Demo route works without login and resets
  - [ ] Newsletter handles all states
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own