Billsmith

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

Anton keeps the condensed poster voice, and Space Mono has quirky, designed letterforms that suit a designer's invoicing tool better than a plain code mono.

• AntonHeadings: uppercase titles 24-40px
• Space MonoBody: body 16px, controls 14px, 12px uppercase labels

Who it is for

• Freelancers and solo consultants
• Creative professionals who prefer visual workflows
• People billing clients in several countries
• Anyone replacing spreadsheet invoicing

Layout

1. Centered auth on near-black: condensed uppercase title, mono subtitle
2. Square-edged dark card: uppercase 'SIGN IN' heading, mono uppercase field labels, dark inputs, full-width emerald 'SIGN IN' button, 'OR' divider, white 'Continue with Google' button, uppercase sign-up link
3. App: onboarding (business, first client, first invoice), infinite canvas of invoice cards with pan/zoom and perspective, invoice editor with live A4 preview, clients list and detail with payment insights, revenue dashboard, settings (payment templates, numbering, currency)
4. Public invoice page behind optional 6-digit PIN

Palette

bold, dark, crafted, technical, confident. A designer's invoicing tool rather than accounting software.

• background#0a0a0a
• card#141414
• secondary surface#1f1f1f
• text#ffffff
• primary emerald#009969
• border#2e2e2e
• muted label#a3a3a3

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

Anton uppercase 36px title and 24px section heads

Body

Space Mono 16px body; 12px uppercase mono labels with 0.05em tracking

A condensed poster face with a monospace UI reads like a printed ledger and a terminal combined.

Spacing and imagery

450px square-edged card (2-4px radius), 48px inputs, 32px padding, generous empty dark space; the canvas is full-bleed.

No photos; A4 invoice previews rendered as white paper cards on a dark canvas; charts on the dashboard.

Components

• Dark auth card with Google button
• Onboarding wizard
• Infinite pan/zoom invoice canvas
• Invoice card with status
• Invoice editor with line items
• Live A4 preview
• PDF export
• Client list and client detail with payment behavior
• Revenue flow dashboard
• Status chips (draft, sent, viewed, paid, overdue)
• Payment template manager (bank details)
• Invoice numbering settings
• Share link with PIN
• Currency selector

Interactions

• Pan and zoom the canvas; click an invoice to focus
• Edit line items and see the A4 preview update live
• Auto-numbering with manual override
• Currency auto-detected from locale with override
• Export PDF
• Create a share link with optional PIN; status moves to 'viewed' when opened
• Mark paid; status and dashboard update
• Guided onboarding

Data

• Business{id, owner_id, name, address, tax_id, logo_path, default_currency, next_number}
• Client{id, owner_id, name, email, address, currency}
• Invoice{id, owner_id, client_id, number, issue_date, due_date, currency, status draft|sent|viewed|paid|overdue, notes, payment_template_id, share_token, pin_hash?, viewed_at?, paid_at?}
• LineItem{id, invoice_id, description, qty, unit_price, tax_rate}
• PaymentTemplate{id, owner_id, label, account_name, iban, swift, instructions}

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 **Billsmith**, a dark, design-led invoicing app for freelancers and small studios. Users set up their business once, add clients, create invoices against a live A4 preview, export to PDF or share by a PIN-protected link, and track who has paid.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Dialog, Select, Popover, Tabs) and lucide-react. Use react-zoom-pan-pinch (or a custom transform layer) for the canvas, Framer Motion for focus transitions, react-hook-form + zod (useFieldArray for line items), @react-pdf/renderer for PDF, Recharts for the dashboard, date-fns and Intl.NumberFormat for currency. Supabase provides:
- Auth: email and Google.
- Postgres for business, clients, invoices, line items and payment templates.
- Storage for logos.
- Edge Functions: `public-invoice` (token + PIN check, marks viewed) and a daily overdue sweep.

### Pages & layout
1. **Auth**: near-black canvas with a condensed uppercase title and a mono subtitle. A square-edged dark card holds an uppercase heading, mono labels, dark inputs, an emerald full-width button with dark label, an OR divider, a white Google button and an uppercase sign-up link.
2. **Onboarding**: business details, the first client, then the first invoice.
3. **Canvas**: all invoices as paper cards on an infinite dark plane, grouped by status or month, with pan, zoom and a subtle 3D tilt on hover. There is a toolbar (new, filter, zoom to fit).
4. **Invoice editor**: form on the left (client, dates, currency, line items, tax, notes, payment template), live A4 preview on the right; then Export PDF and Share.
5. **Clients**: list, then detail with outstanding balance, average days to pay and a follow-up suggestion.
6. **Dashboard**: outstanding vs paid, monthly cash-in, status breakdown.
7. **Settings**: payment templates, numbering, currency.
8. **Public invoice**: `/i/:token`, with a PIN prompt if one is set.

### Design system
- Tokens: `--background: #0a0a0a`, `--card: #141414`, `--secondary: #1f1f1f`, `--muted: #262626`, `--border: #2e2e2e` (decorative), `--input-border: #666666`, `--foreground: #ffffff`, `--muted-fg: #a3a3a3`, `--primary: #009969` with `#0a0a0a` button labels, `--ring: #009969`.
- Status colors: draft grey, sent blue `#3b82f6`, viewed violet `#8b5cf6`, paid emerald, overdue red `#ef4444`.
- The A4 preview is white paper (`#ffffff` background, `#111111` text).
- Fonts: Anton (uppercase display, 24-40px) and Space Mono (body 16px at line-height 1.5, controls 14px; labels 12px uppercase with 0.05em tracking).
- Spacing on a 4px base; radius 2-4px.
- Shadows: paper cards `0 30px 60px -20px rgb(0 0 0 / .6)`.
- Motion: 300ms zoom to focus, 150ms hovers.

### Components & interactions
AuthCard (errors, loading), OnboardingSteps, InvoiceCanvas (zoom limits, fit-to-screen, keyboard pan with arrows and +/-), InvoiceCard (status chip, overdue badge), InvoiceForm (line item add, remove and reorder; running totals; validation), A4Preview (updates live; print-accurate margins), PdfExportButton (generating state), ShareDialog (copy link, optional PIN, revoke), ClientInsights, RevenueCharts, PaymentTemplateForm (IBAN/SWIFT format validation), CurrencySelect. Include empty states ("No invoices yet; create your first").

### Data & state
Tables as in the data model. Invoice numbers come from `business.next_number`, incremented in a transaction; manual overrides must stay unique per owner. Totals are computed in integer minor units in a shared, tested function used by both the preview and the PDF.

### Accessibility
The canvas has a list-view alternative with the same actions. Mono labels in `#a3a3a3` reach 7.3:1 on `#141414`; emerald buttons carry dark labels because white on `#009969` is only 3.7:1. Every field has a label. The PIN input is labelled and supports paste. Status is never color-only. Honor reduced motion.
Verified contrast: text: #ffffff on #0a0a0a = 19.8:1; muted: #a3a3a3 on #141414 = 7.3:1; button label: #0a0a0a on #009969 = 5.4:1; paper: #111111 on #ffffff = 18.9:1.

### Security
RLS makes every table owner-only. Public invoices are served only through the Edge Function: random 32-byte tokens, a PIN stored as a hash, PIN attempts rate-limited and locked after 5 failures, and only the invoice's own fields returned. Bank details are visible to the owner and on shared invoices only. Validate with zod on the client and in functions. Logo uploads are PNG/SVG-sanitized/JPEG, 2 MB or less. Keep only the anon key in the client.

### Performance & SEO
Virtualize the canvas (render cards in view only). Lazy-load the PDF renderer. Index `(owner_id, status, due_date)`. Noindex both the app and public invoice pages; the auth page gets a title and meta.

### Guardrails
- Write fresh copy; use fictional businesses and clients, and no real bank names.
- Store the minimum banking info needed to get paid.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) preview and PDF totals match exactly; (2) shared links respect the PIN and mark the invoice viewed; (3) numbering never duplicates; (4) overdue status updates daily; (5) the canvas has a working keyboard and list alternative.

Open the builderAll templatesThis palette on its own