Bidwell

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

Two friendly geometric faces: Urbanist for punchy headlines and the minimal Mulish for readable UI copy, keeping the polished B2B tone.

• UrbanistHeadings: headlines 800 at 60px, section titles 700 at 36px
• MulishBody: UI copy 16px, slate-grey secondary text

Who it is for

• Freelancers and consultants
• Small creative and dev agencies
• Service-business sales teams
• Growing teams needing proposal roles

Layout

1. Frosted sticky nav: blue rounded-square logo + wordmark left, 'Sign in' text and blue 'Get started' button right
2. Centered hero: sparkle badge chip, two-line 60px headline with the second line in a blue gradient, subcopy, primary 'Start for free' + outline 'Sign in'
3. Large framed product UI mock on a soft blue gradient panel
4. Logo strip of fictional placeholder companies
5. A 3x2 grid of white feature cards with indigo icon tiles
6. Three-step Create / Send / Accept section
7. Comparison block contrasting the tool with ad-hoc documents and spreadsheets
8. Final CTA and footer
9. App: dashboard with stats, proposals list by status, 5-step builder (template, client, content, pricing, review), client directory, templates library, public proposal view

Palette

Polished, optimistic, professional, friendly. A bright, trustworthy B2B product page that feels ready to show to clients.

• background#f9fafb
• card#ffffff
• text#131720
• primary indigo-blue#3550d4
• accent tint#eef0fb
• hero gradient light blue#b3c8fb
• border#e5e7eb

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

Urbanist 800, 60px, -1.5px tracking; section titles 700 at 36px

Body

Mulish 400 at 16px, slate-grey secondary

Two friendly geometric sans faces: Jakarta for punchy headlines, Mulish for readable UI copy; gradient text used once for emphasis. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Comfortable SaaS rhythm in a ~1100px container; 3-column cards with ~32px gaps; 10px radius cards, 8px buttons; thin grey borders instead of heavy shadows.

A product UI mock of a proposal document set in a browser window over a periwinkle gradient; line icons in pale indigo tiles; placeholder company wordmarks.

Components

• Announcement badge chip
• Gradient headline text
• Framed product UI mock
• Logo cloud
• Feature card grid
• Step-by-step section
• Multi-step proposal wizard with progress
• Rich-text section editor with AI generate button
• Line-item table with qty, unit price, discount, totals
• Status badges (draft/sent/viewed/accepted/rejected)
• Share dialog with password + expiry
• Client directory table
• Dashboard stat cards and charts
• Public proposal viewer with accept/decline

Interactions

• Wizard next/back with per-step validation
• AI generate with streaming text and regenerate
• Add/remove/reorder line items with live totals
• Copy share link toast
• Password gate on public link
• View events logged and shown in activity feed
• Accept/decline with confirmation
• Filter proposals by status

Data

• Organization{id, name, logo_url, brand_color, tax_rate, currency}
• Member{org_id, user_id, role: owner|editor|viewer}
• Client{org_id, name, company, email, notes}
• Template{org_id, name, category, sections[]}
• Proposal{org_id, client_id, title, status, sections[], valid_until, created_by}
• LineItem{proposal_id, position, description, qty, unit_price, discount_pct}
• ShareLink{proposal_id, token, password_hash, expires_at}
• ViewEvent{share_link_id, viewed_at, ip_hash}

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 **Bidwell**, a proposal and quoting tool for freelancers and small agencies. Users start from reusable templates, attach a client, write or AI-draft sections, price deliverables with quantities, discounts and tax, then send a secure link. They see when the client opens it and whether it was accepted, so proposals become a trackable pipeline rather than loose attachments.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-hook-form + zod for the wizard and line items (`useFieldArray`), TanStack Query, dnd-kit for reordering items and sections, Recharts for win-rate and pipeline charts, a lightweight rich-text editor (Tiptap) for sections. Supabase: Auth, Postgres, Storage for org logos, and Edge Functions for AI section drafting (call the model provider server-side) and for serving public proposals by token.

### Pages & layout
1. **Landing**: frosted sticky nav; centered hero with a sparkle badge, two-line headline whose second line uses a blue-to-violet gradient (`#3550d4` to `#6d3fd1`), subcopy, two buttons; large product UI mock on a soft gradient panel; logo strip of fictional companies; 3x2 feature cards; three-step section; comparison block; CTA; footer.
2. **Dashboard**: stat cards (open value, sent this month, win rate, avg response time), recent activity, pipeline bar chart.
3. **Proposals**: table with status filter tabs and search.
4. **Builder**: five-step wizard with a top stepper: Template → Client → Content → Pricing → Review. Pricing shows the line-item table with subtotal, discount, tax and grand total pinned to the bottom.
5. **Templates** and **Clients**: CRUD lists with detail drawers.
6. **Settings**: organisation name, logo, brand colour, tax rate, currency, members.
7. **Public proposal** `/p/:token`: branded read-only document, optional password gate, Accept / Decline buttons.

### Design system
Light. Tokens: `--background: #f9fafb`, `--card: #ffffff`, `--foreground: #131720`, `--primary: #3550d4`, `--primary-foreground: #ffffff`, `--accent: #eef0fb`, `--border: #e5e7eb`; status colours for draft (slate), sent (blue), viewed (amber), accepted (green), rejected (red). Fonts: Urbanist 700/800 headings, Mulish 400/500 body. Scale 14/16/18/24/36/60. Radius 10px cards, 8px inputs and buttons. Borders over shadows; hover shadow `0 4px 12px rgb(19 23 32 / .06)`. Motion 150-200ms ease-out. Add `--muted-foreground: #5b6477` for slate secondary text and `--input-border: #8891a3` for inputs and line-item fields. Status badges use 700-level text on 100-level tints (e.g. viewed `#92400e` on `#fef3c7`). Gradient headline stops `#3550d4` to `#6d3fd1`.

### Components & interactions
Stepper (complete, current, upcoming, error). Line-item rows with drag handle, numeric inputs that reject negatives, remove button, and totals that update as you type. AI button shows a loading shimmer, streams text, and offers Insert or Discard; failures show a retry toast. Share dialog: toggle password, date picker for expiry, copy link. Empty states for no proposals/templates/clients with a clear first action.

### Data & state
Organization, Member(role), Client, Template(sections JSON), Proposal(status enum, sections JSON, valid_until), LineItem(position, qty, unit_price, discount_pct), ShareLink(token, password_hash, expires_at), ViewEvent. Compute totals in one pure, unit-tested function used by both builder and public view. Seed three templates (web design, retainer, workshop) and a few fictional clients.

### Accessibility
Stepper announces "Step 3 of 5". Line-item table uses proper `th` headers and labelled numeric inputs; drag reordering has keyboard alternatives. Both gradient headline stops pass 4.5:1 on the page background, so the gradient never dips below AA. Status badges include text. Public view is fully readable with zoom to 200%. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #131720 on #f9fafb = 17.16:1; muted slate text #5b6477 on #f9fafb = 5.69:1; white text #ffffff on #3550d4 = 6.46:1; primary link text #3550d4 on #f9fafb = 6.18:1.

### Security
RLS: org members read/write their org's rows; viewers read only; owners manage members. Public proposals are never read directly by the anon role; an Edge Function looks up the token, checks expiry and a bcrypt-hashed password, returns a sanitized payload, and logs a view with a hashed IP. Rate-limit password attempts. Sanitize rich-text HTML with DOMPurify before rendering. AI keys live only in function secrets; cap prompt length and per-user daily calls. Logo uploads: PNG/SVG-sanitized/JPEG, ≤1 MB. Validate money fields with zod on client and function.

### Performance & SEO
Code-split builder and editor; lazy-load charts. Public proposal pages are `noindex`. Landing gets meta and OG image; compress the hero image.

### Guardrails
- Original copy; fictional logos and clients; no invented testimonials.
- Typed components, no `any`, visible error states.
- Don't store client data beyond what a proposal needs.
- Done when: a proposal can be built through all five steps with correct totals; a password-protected link opens only with the right password and expires on time; opening it logs a view; accepting updates status on the dashboard; viewers cannot edit.

Open the builderAll templatesThis palette on its own