Receiptly

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

Hubot Sans has a heavy, slightly wide black weight that gives the neon fintech wordmark more bite than Inter, while its text weights stay neutral.

• Hubot SansHeadings: wordmark 96-128px, 900, uppercase
• Hubot SansBody: body 16px, 12px uppercase field labels

Who it is for

• Founders formalizing expense processes
• Finance leads enforcing policy
• Managers approving on mobile
• Field and sales staff filing on the go

Layout

1. Sign-in screen: black canvas with a blurred neon-green aurora sweeping across the top
2. Left: giant uppercase stacked wordmark and a short tagline
3. Right: dark glass card with underline-style EMAIL and PASSWORD fields, 'Forgot password?', green gradient pill 'Sign in', 'or' divider, dark pill 'Continue with Google', and a note that accounts are admin-provisioned
4. App (mobile): bottom tab bar; camera-first new-expense flow; expense list; trips; reports; approvals queue; finance analytics; policy settings; admin users/departments; AI assistant chat

Palette

bold, fast, modern, confident, techy. Neon on black signals speed; the app itself is practical.

• background black#0b0a10
• aurora neon green#00c805
• primary green (button)#10b26c
• glass card#141414
• text#ffffff
• muted label#9ca3af
• light-mode background#faf9f7

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

Hubot Sans Black 128px uppercase, tight -3.2px tracking, stacked two lines

Body

Hubot Sans 16px body; 12px uppercase tracked field labels

A massive black-weight wordmark against minimal form text gives it a bold fintech poster feel.

Spacing and imagery

Split sign-in layout with a 450px card and 24px radius; pill buttons at full radius; generous padding; the app uses mobile safe-area insets and a bottom tab bar.

An abstract blurred green aurora gradient; no photos; receipt thumbnails captured by users; Recharts in finance views.

Components

• Aurora sign-in hero
• Glass auth card with underline inputs
• Google OAuth button
• Password reset flow
• Bottom tab bar (PWA)
• Camera capture screen
• AI-extracted expense form (merchant, amount, currency, date, category)
• Policy violation badges
• Duplicate warning
• Trip grouping
• Expense report bundler
• Approval queue with approve/reject
• Finance pivot analytics and saved reports
• AI assistant chat

Interactions

• Camera opens immediately on new expense
• Receipt upload shows scanning progress, then prefilled fields
• Switch to manual entry
• Policy check shows inline warnings before submit
• Swipe or tap to approve or reject with comment
• Status moves draft → submitted → approved → reimbursed
• Pivot by category/person/month; save report definitions
• PWA install prompt and offline shell

Data

• Profile{id, name, role employee|manager|finance|admin, department_id, manager_id}
• Department{id, name}
• Expense{id, user_id, trip_id?, report_id?, merchant, amount, currency, date, category, receipt_path, status, policy_flags[], ai_confidence}
• Trip{id, user_id, title, start_date, end_date}
• Report{id, user_id, title, status, submitted_at}
• Approval{id, expense_or_report_id, approver_id, decision, comment, decided_at}
• PolicyRule{id, kind per_diem|category_cap|single_cap|mileage|receipt_threshold, params jsonb}
• SavedReport{id, owner_id, dimension, measure, filters}

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 **Receiptly**, a mobile-first expense reimbursement app for companies of about 10 to 500 people. Employees photograph a receipt and get a prefilled expense; policy rules catch problems before submission; managers approve from their phones; and finance marks items reimbursed and analyses spend.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Drawer/Vaul, Dialog, Tabs, Select) and lucide-react. Use TanStack Query, react-hook-form + zod, Recharts for finance analytics, Framer Motion for sheet transitions, date-fns, jsPDF for report PDFs and vite-plugin-pwa for install and offline support. Supabase provides:
- Auth: email/password and Google, with admin-provisioned accounts only.
- Postgres for expenses, trips, reports, approvals and policies.
- A private Storage bucket for receipts.
- Edge Functions for AI receipt extraction, AI policy drafting and the assistant, calling an LLM with the key held server-side.

### Pages & layout
1. **Sign in**: a black canvas with a blurred neon-green aurora, a giant uppercase stacked wordmark and a tagline on the left. On the right, a dark glass card with underline inputs, a green pill Sign in button, a divider, Continue with Google and an "accounts are provisioned by your admin" note.
2. **Home**: a summary (pending, approved, reimbursed amounts) and a big "New expense" button.
3. **New expense**: camera capture, then upload and scanning, then a prefilled form (merchant, amount, currency, date, category, trip) with policy warnings; a manual-entry toggle.
4. **Expenses list** with status chips, **Trips** and **Reports** (bundle and submit).
5. **Approvals** (managers): a queue with approve/reject and a comment.
6. **Finance**: reimburse queue, a pivot (dimension × measure × month), and saved reports.
7. **Admin**: users, roles, departments and policy rules (presets plus "describe a rule").
8. **Assistant**: chat about your own spend and the policies.
On mobile, a bottom tab bar respects safe areas; on desktop, a sidebar.

### Design system
- Dark (auth and default): `--background: #0b0a10`, `--card: #141414`, `--foreground: #ffffff`, `--muted-fg: #9ca3af`, `--primary: #10b26c` with `#0b0a10` button text, aurora `#00c805`, `--input-border: #6b7280` for the underline inputs.
- Light app option: `--background: #faf9f7`, `--foreground: #111318`.
- Status colors: draft grey, submitted blue `#3b82f6`, approved green, rejected red `#ef4444`, reimbursed teal.
- Font: Hubot Sans. Wordmark 96-128px, weight 900, uppercase, -0.025em; labels 12px uppercase with 0.12em tracking; body 16px at line-height 1.5; weights 400+ below 24px.
- Spacing on a 4px base; radius 24px on cards, full on buttons.
- Motion: 250ms bottom sheets, and a scanning shimmer while AI runs.

### Components & interactions
AuthCard (error message, loading), CameraCapture (permission-denied fallback to file input), ReceiptScanner (progress, low-confidence fields highlighted for review), ExpenseForm, PolicyBadge (warn and block levels), DuplicateAlert, StatusChip, ApprovalCard (swipe actions with button equivalents), PivotTable and chart, SavedReportList, PolicyRuleEditor, AssistantChat (streaming, error, retry), InstallPrompt, OfflineBanner. Every list needs empty and loading states.

### Data & state
Tables as in the data model: `profiles` (role, department, manager), `departments`, `expenses`, `trips`, `reports`, `approvals`, `policy_rules`, `saved_reports`, plus `user_roles` kept separate for RLS checks. Amounts are stored in minor units with an ISO currency code. Duplicate detection hashes merchant, amount and date per user.

### Accessibility
Green text on black uses `#34d399` (10.3:1); green buttons carry dark `#0b0a10` labels. Give the underline inputs visible labels (not just placeholders) and a clear focus state. Swipe gestures need buttons as alternatives. Status must not be color-only. Announce scan results through a live region. Honor reduced motion by stopping the aurora animation. Give charts tables.
Verified contrast: text: #ffffff on #0b0a10 = 19.7:1; muted: #9ca3af on #141414 = 7.3:1; button label: #0b0a10 on #10b26c = 7.1:1.

### Security
RLS:
- Employees read and write their own drafts.
- Managers read their direct reports' submitted items and can write approvals.
- Finance reads everything and updates only reimbursement fields.
- Admins manage users and policies.
Check roles with a `has_role()` security-definer function. Keep receipts in a private bucket with signed URLs, limit them to 10 MB and JPEG/PNG/HEIC/PDF, and strip EXIF location data. AI functions validate input with zod, rate-limit per user, and never send more PII than needed. Keep LLM and service keys in the function environment only. The assistant may query only rows the caller can see.

### Performance & SEO
Precache the PWA shell. Compress images before upload. Lazy-load finance and admin routes and charts. Index `(user_id, status)` and `(approver_id, decided_at)`. Noindex the app.

### Guardrails
- Write fresh copy and a fictional company; no real merchant logos.
- Don't auto-approve based on AI output.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) a photo produces a reviewable prefilled expense; (2) policy violations appear before submit; (3) a manager approves from mobile; (4) finance reimburses and the status updates for the employee; (5) RLS prevents cross-employee access.

Open the builderAll templatesThis palette on its own