Billwise

Who it is for

• Freelancers and consultants
• Small creative agencies
• Solo founders billing clients
• Developers wanting an invoicing starter

Layout

1. Top nav: logo left, Home/About/Pricing/Contact, Account dropdown, black pill 'Get Started' right
2. Centered hero on pink-peach gradient mesh: eyebrow, huge two-line headline, subcopy, black and outlined pill CTAs
3. Row of rounded portrait cards on pastel backgrounds that shift at different speeds on scroll
4. Logo marquee ('Trusted by teams')
5. Feature bento: 5 white icon cards + 1 gradient CTA card inside a large rounded light panel
6. 3-step 'how it works'
7. Pricing cards (Starter etc.)
8. Testimonial marquee, FAQ accordion, footer
9. App: dashboard stats, clients list/forms, invoice editor + preview, auth pages

Palette

Polished, bold, friendly, premium, modern. Reads like a polished SaaS landing page with soft candy gradients.

• background#ffffff
• text / primary#0a0f1a
• gradient pink#f35ba0
• gradient peach#fbc9a8
• panel / secondary#f1f5f9
• border#d9d9d9
• secondary text#5b6170
• input border#8c8c8c

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

Display

Inter Tight 700, 72–80px, tight leading, sentence/title case

Body

Inter Tight 400, 16–18px, slate grey

Single condensed-leaning grotesk; bold heavy headings against light grey body

Spacing and imagery

Wide 1200px container; large 32px-radius section panels, 24px-radius cards, fully rounded pill buttons; roomy 120px+ section rhythm

Headshot portraits on pastel tiles, blurred pink/peach gradient mesh backgrounds, faint topographic line pattern, solid glyph icons.

Components

• Pill nav with account dropdown
• Gradient mesh hero
• Parallax portrait cards
• Logo marquee
• Bento feature cards
• Gradient CTA card
• Pricing tiers
• Testimonial marquee
• FAQ accordion
• Revenue stat cards and chart
• Client form and picker
• Line-item table editor
• Live invoice preview with template/color picker
• PDF download button

Interactions

• Scroll-linked parallax with spring physics on portraits
• Infinite auto-scrolling marquees with edge fades
• Accordion expand/collapse
• Live preview updates on every keystroke
• Auto-calculated subtotal/tax/discount/total
• Template and accent color switching
• PDF generation with loading state
• Status change (draft→sent→paid) with toast

Data

• Client{id, user_id, name, email, company, address, tax_id}
• Invoice{id, user_id, client_id, number, issue_date, due_date, status(draft|sent|paid|overdue), currency, template, accent_color, notes, tax_rate, discount}
• LineItem{id, invoice_id, description, quantity, unit_price}
• Profile{business_name, logo_url, address, payment_details}

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 **Billwise**, an invoicing tool for freelancers and small studios, fronted by a bold marketing site. Signed-in users keep a client list, compose invoices in a split editor with a live branded preview, download PDFs, and see what's paid, pending and overdue. The job: get a professional invoice out in minutes and know who still owes money.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for scroll-linked parallax and marquees; Recharts for revenue; react-hook-form + zod with `useFieldArray` for line items; date-fns for due dates; jsPDF (+ html2canvas or a vector layout) for client-side PDF; TanStack Query. Supabase: Auth (email/password, Google, reset), Postgres (profiles, clients, invoices, line_items), Storage for business logos.

### Pages & layout
1. **Home** – pill nav; centered hero on a soft pink-to-peach gradient mesh with uppercase eyebrow, 80px two-line headline, subcopy, dark and outlined pill CTAs; row of 4 portrait tiles on pastel backgrounds that rise at different speeds on scroll; logo marquee; bento feature grid inside a large rounded grey panel (5 icon cards + 1 gradient CTA card); 3-step process; pricing (3 tiers); testimonial marquee; FAQ accordion; footer.
2. **About, Pricing, Contact** pages.
3. **Auth** – sign in, sign up, reset.
4. **Dashboard** – stat cards (paid, pending, overdue), monthly revenue bar chart, recent invoices table.
5. **Clients** – table + add/edit sheet.
6. **Invoice editor** – left form (client picker, dates, line items, tax, discount, notes, template + accent color), right sticky A4 preview, Download PDF.

### Design system
`--background: #ffffff`, `--foreground: #0a0f1a`, `--primary: #0a0f1a`, `--secondary: #f1f5f9`, `--border: #d9d9d9` (decorative), `--input-border: #8c8c8c`, `--muted-foreground: #5b6170`, gradient stops `#f35ba0 → #fbc9a8 → #fdf2f8`. Font: Inter Tight (400/600/700). Scale 12/14/16/18/24/40/72/80 (body 16-18px, line-height 1.6, max ~70ch; uppercase eyebrow 12-14px with 0.08em tracking), headings -0.02em. Radius: pills 999px, cards 24px, panels 32px. Shadow minimal; borders #eceff3. Motion: springs (stiffness 120, damping 20) for parallax, 200ms ease for UI, marquee 40s linear.

### Components & interactions
Navbar with dropdown, GradientHero, ParallaxPortraits, Marquee (pause on hover), BentoCard, PricingCard (highlighted tier), FaqAccordion, StatCard, RevenueChart, ClientForm (inline errors), LineItemRow (add/remove, numeric validation), InvoicePreview (3 templates), ColorPicker, PdfButton (idle/generating/done/error), StatusBadge, EmptyState ("No invoices yet -- create one").

### Data & state
Tables above; totals derived, never stored except a snapshot `total` on send. Invoice numbers sequential per user (DB function). Demo mode uses local seeded data: 5 fictional clients, 12 invoices across statuses.

### Accessibility
Contrast: dark text over the gradient must stay ≥4.5:1 -- all text on the mesh is #0a0f1a, which passes even on the darkest pink stop; the gradient CTA card also uses dark text. Marquees pause on hover/focus and stop under reduced motion; parallax disabled then too. Line-item inputs have visible labels (not placeholders), errors linked with `aria-describedby`. Charts get a data table alternative. Focus rings on all pills. Verified contrast: body text #0a0f1a on #ffffff = 19.1:1; secondary text #5b6170 on #ffffff = 6.2:1; white #ffffff on #0a0f1a = 19.1:1; dark text #0a0f1a on #f35ba0 = 6.2:1; input border #8c8c8c on #ffffff = 3.3:1.

### Security
RLS: `profiles`, `clients`, `invoices`, `line_items` owner-only (`user_id = auth.uid()`; line items via invoice ownership). zod validation on client and DB checks (non-negative quantities/prices, valid email). Logo uploads: png/jpeg/svg-sanitized, ≤2 MB, private bucket. Contact form via Edge Function with honeypot and rate limit. No payment card handling; link to hosted checkout if payments are added.

### Performance & SEO
Code-split app vs marketing; lazy-load jsPDF only on click; responsive portrait images. Meta/OG on marketing pages. Lighthouse 90+.

### Guardrails
- Original copy and generated/placeholder portraits; no real company logos in the marquee.
- Testimonials labeled as examples.
- Store only necessary client PII.
- Typed small components, no `any`, visible errors.
- Done when: a user signs up, adds a client, builds an invoice whose totals compute correctly, downloads a matching PDF, marks it paid and sees the dashboard update, with another account unable to read it.

Open the builderAll templatesThis palette on its own