Mintleaf

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 600, 18px for the modal title
• InterBody: Inter 400, 16px/1.5; method names 15px 600; captions 14px muted

Patterns

• modal over dimmed dashboard
• amount and region summary rows
• radio cards with fee and speed trade-off
• check-circle selected indicator
• full-width dark continue button handing off to hosted checkout
• balance display with top-up button in top bar
• monospace figures

States it is designed for

• default (card preselected)
• bank debit selected with settlement notice
• region unknown (chip + tooltip explaining tax implications)
• amount below minimum (error, continue disabled)
• creating session (spinner)
• provider unavailable (error with retry)
• returned success (balance updated)
• returned cancelled (modal reopens with note)
• pending bank debit (balance shows pending amount)

Who it is for

• developers running verification traffic
• startup finance owners
• account admins

Layout

1. Background: console top bar (workspace, product switcher, balance label + value, 'Top up' button, avatar), project name, tabs (Overview, Verifications, Routes, Configure), global filter, KPI grid of metric cards with monospace numbers, all under a grey scrim
2. Modal (~380px): title, description, amount row (label left, value right), region row with flag/unknown chip, divider, two radio cards stacked (method name bold, fee and timing caption), selected card blue border with check circle, full-width dark continue button
3. Below 480px modal becomes a bottom sheet with the button sticky

Palette

Precise, technical, trustworthy. Monospace numbers and a restrained palette make money feel exact.

• scrim#6f7378
• surface#ffffff
• canvas#e3e5e6
• text#111418
• muted#5a6068
• border#d4d7db
• selected#3b5bdb
• primary#16181b
• on-primary#ffffff
• positive#2f7d32
• control-border#8a9099
• focus#3b5bdb

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

Inter 600, 18px for the modal title

Body

Inter 400, 16px/1.5; method names 15px 600; captions 14px muted

Similar to the observed neo-grotesk; amounts and KPI values in JetBrains Mono 500 (similar to the observed monospace) with tabular figures.

Spacing and imagery

Compact; 4px base; modal padding 20px, radius 10px; radio cards 12px padding, radius 8px, 8px gap; button 44px tall radius 6px; modal shadow 0 20px 50px rgba(0,0,0,.25); scrim at 55% opacity.

No imagery; small flag glyph for region; check-circle icon.

Components

• dialog with scrim
• summary rows
• region chip
• payment method radio card
• selected check circle
• continue button
• balance indicator
• top up button
• success toast

Interactions

• Opening from 'Top up' focuses the first radio card
• Arrow keys switch methods; Enter continues
• Continue shows a spinner and redirects to the hosted checkout provider
• Escape or scrim click closes unless a redirect is in progress
• On return, balance animates to the new value and a toast confirms

Data

• Account{id, name, balance_minor, currency, region}
• TopUp{id, account_id, amount_minor, method (card|bank_debit), fee_minor, status (created|pending|succeeded|failed|cancelled), provider_session_id, created_at}

Guardrails

Experience

• Show the amount and fees before the user commits
• Explain speed vs fee trade-off inside each option
• Preselect the fastest method but never hide the cheaper one
• Keep one primary action and a clear way to cancel
• Show pending bank debits separately from available balance
• Return users to where they started after checkout

Accessibility

• Dialog has aria-modal, labelled title and description; focus trapped and restored
• Payment options are a radio group; selection shown by border and check icon
• Amounts read naturally (twenty euros) via aria-label
• Continue button states loading via aria-busy
• Scrim does not steal focus; Escape closes
• Unknown region chip has a text explanation

Security

• Create checkout sessions server-side (Edge Function) with the amount from the server, never trusting client amount
• Verify the provider's webhook signature before crediting balance; idempotent by session id
• RLS: top_ups and accounts readable by account members; only webhooks (service role) update status and balance
• No card data touches the app; hosted checkout only
• Audit log for balance changes

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 **Mintleaf**, the top-up flow of a developer console for a verification API. From the console's balance 'Top up' button, a modal confirms amount and region and lets the user choose between card (small fee, instant) and bank debit (no fee, several days), then hands off to a hosted checkout provider and updates the balance on return.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, RadioGroup, Button, Tooltip, Toast), lucide-react, react-hook-form + zod, TanStack Query. Supabase Auth and Postgres; Edge Functions to create checkout sessions with a hosted checkout provider and to receive signed webhooks.

### Pages & layout
1. **Console shell**: top bar (workspace 'Quartz Labs', product switcher 'Checks API', 'Balance 0.00' in mono, 'Top up', avatar); project header 'Signup checks starter'; tabs; 'Global' filter; KPI grid (Verifications volume, Conversion, Conversion time, Spend, Savings, Verification cost) in mono.
2. **Top-up dialog** (this screen): title 'Choose a payment method', description 'Check the details and continue.', rows Amount 20.00 and Region Unknown (chip), radio cards 'Card: 2% fee, instant' and 'Bank debit: no fee, up to 10 days', button 'Continue to payment'.
3. **Return route** /billing/return?session=... shows status and closes.
4. Mobile: bottom sheet with sticky button.

### Design system
- Colors: `--scrim: #6f7378`, `--surface: #ffffff`, `--canvas: #e3e5e6`, `--text: #111418`, `--muted: #5a6068`, `--border: #d4d7db`, `--selected: #3b5bdb`, `--primary: #16181b`, `--on-primary: #ffffff`, `--positive: #2f7d32`, `--control-border: #8a9099`, `--focus: #3b5bdb`.
- Fonts: Inter for UI; JetBrains Mono 500 for amounts and KPI values (tabular). Title 18px/600; body 16px/1.5; captions 14px.
- Spacing: 4px base; modal padding 20px; card gap 8px.
- Radius: modal 10px, cards 8px, button 6px.
- Shadows: modal `0 20px 50px rgba(0,0,0,.25)`; scrim `rgba(17,20,24,.55)`.
- Motion: dialog scale 0.98 to 1 over 150ms; balance count-up 400ms; reduced motion instant.

### Components & interactions
`ConsoleTopBar` (BalanceIndicator, TopUpButton), `KpiCard`, `TopUpDialog` (SummaryRow, RegionChip with Tooltip, MethodRadioCard with CheckCircle, ContinueButton), `ReturnHandler`, `Toast`.

### Data & state
Tables per data model. `create_top_up(amount_minor, method)` Edge Function validates amount (min/max), computes fee server-side, inserts `top_ups` row and returns the provider redirect URL. Webhook updates status and balance in a transaction. Mock: balance 0.00, amount 20.00.

### Accessibility
Dialog pattern with focus trap and restore. Radio cards use native inputs. Amount aria-labels include currency words. Error messages linked to the radio group. Loading state announced.
Verified contrast: modal text on white: #111418 on #ffffff = 18.47:1; muted caption on white: #5a6068 on #ffffff = 6.35:1; continue button label: #ffffff on #16181b = 17.79:1; selected card border on white: #3b5bdb on #ffffff = 5.67:1; unselected card border on white: #8a9099 on #ffffff = 3.22:1; focus ring on white: #3b5bdb on #ffffff = 5.67:1; positive trend text on white: #2f7d32 on #ffffff = 5.12:1.

### Security
Amounts and fees computed server-side only. Webhook signature verification and idempotency on `provider_session_id` (unique). RLS: members read their account and top_ups; no client updates to balance or status. No payment data stored; hosted checkout only. Audit every balance change. Rate-limit session creation.

### Performance & SEO
Dialog code-split and prefetched on hover of 'Top up'. KPI grid skeletons avoid layout shift. Noindex.

### Guardrails
- Invented workspace, amounts and product names
- Never credit balance from the client redirect alone
- Always show fees before continuing
- Typed code, visible errors
- Acceptance criteria: (1) method selection works by keyboard and pointer; (2) continue creates a server session and redirects; (3) webhook credits balance once (idempotent); (4) pending bank debits show as pending; (5) bottom sheet works at 390px.

Open the builderAll templatesThis palette on its own