GiveBid

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

Commissioner is a warm, community-minded humanist grotesk with strong heavy weights, and Roboto Mono's plain tabular figures signal trust in the numbers.

• CommissionerHeadings: headings 60px 800 at -0.025em, over photos
• CommissionerBody: body 16-18px
• Roboto MonoFigures and code: money and countdown numerals

Who it is for

• Nonprofits and schools running galas
• Community foundations
• Event fundraising committees
• Agencies building donation experiences

Layout

1. Translucent sticky header: gradient gavel logo + name left, Auctions/Browse Items/Impact center, heart watchlist and teal-to-blue 'Donate Now' right
2. Full-bleed dark photo hero: 'Live now' pill, 2-line white headline, subcopy with bidder count, 4-box countdown (days/hours/min/sec), gradient 'Browse Auction' and ghost 'See Our Impact', trust line
3. Overlapping stat cards row (total raised, active items, bidders, items sold) in monospace numerals
4. Featured items: 4 cards with image, title, excerpt, current bid, bid count
5. Three cause cards with gradient progress bars
6. Footer with registration number
7. Browse catalog with category filters, item detail with bid panel, impact dashboard, results page

Palette

Hopeful, trustworthy, energetic, clean, community-minded. A modern fintech-clean UI warmed by human photography.

• background#f9fafb
• text#11151d
• primary blue#156bf4
• gradient teal#198571
• accent violet#8c35e3
• card#ffffff
• border#e5e7eb
• muted text#4b5563
• input border#8791a3

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

Commissioner 800, 60px, -0.025em tracking, white over photo

Body

Commissioner 400 16–18px; Roboto Mono for money and countdown numerals

Heavy Commissioner headings with tabular monospace figures for trust in numbers

Spacing and imagery

1250px container, 4-column card grids with 16px gaps, 12px radius cards with soft shadows, stat cards overlapping hero bottom edge, 96px sections

Warm documentary photography of community members under a dark overlay; product photos for auction items; icon badges in pale blue squares.

Components

• Live event pill
• Countdown timer boxes
• Gradient CTA
• Stat cards with icons
• Auction item card
• Category filter chips
• Bid panel with preset increments and custom input
• Bid confirmation modal
• Watchlist heart toggle
• Cause progress card
• Impact charts
• Results/winners table

Interactions

• Countdown ticks every second and flips to 'Ended'
• Preset bid buttons fill the input
• Confirmation modal before placing bid
• Toast on successful bid / outbid state
• Heart toggles watchlist
• Filters and sort in catalog
• Progress bars animate on scroll
• Page transitions with Framer Motion

Data

• Auction{id, name, starts_at, ends_at, status, goal_cents}
• Item{id, auction_id, title, description, images[], category, starting_bid_cents, increment_cents, current_bid_cents, bid_count, donor}
• Bid{id, item_id, bidder_id, amount_cents, created_at}
• Cause{id, name, description, goal_cents, raised_cents}
• Watchlist{bidder_id, item_id}

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 **GiveBid**, an online charity auction for a nonprofit's annual gala. Supporters browse donated items, place bids with quick presets, follow items on a watchlist and see where money goes. After the event, a results page shows totals and winners. The job: make bidding easy and trustworthy while keeping the cause front and center.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for page and progress animations; Recharts for impact charts; Embla for item galleries; Vaul for the mobile bid drawer; react-hook-form + zod for bids; date-fns for countdowns. Start with local state and seeded data; for production add Supabase (Auth for bidders, Postgres, Realtime for live bid updates, Edge Function for bid placement) and Stripe Checkout for winners' payments.

### Pages & layout
1. **Home** – translucent sticky header (gradient gavel mark, nav, heart, gradient "Donate"). Full-bleed photo hero with dark overlay: green-dot "Live now" pill, 60px white headline, subcopy, 4 countdown boxes, gradient primary + ghost secondary buttons, trust line. Four stat cards overlapping the hero's bottom edge. Featured items (4 cards). Causes (3 cards with gradient progress bars and "raised of" text). Footer with charity registration placeholder.
2. **Browse** – category chips, sort (ending soon, most bids, price), grid.
3. **Item** – gallery, description, donor, bid panel: current bid, min next bid, preset buttons (+$25/+$50/+$100), custom field, Place bid → confirmation modal; bid history.
4. **Watchlist**, **Impact** (charts by cause), **Results** (after end: totals, winners by masked name).

### Design system
`--background: #f9fafb`, `--foreground: #11151d`, `--primary: #156bf4`, `--teal: #198571`, `--accent: #8c35e3`, `--card: #ffffff`, `--border: #e5e7eb`, `--muted-foreground: #4b5563`, `--input-border: #8791a3` (`--border` is decorative only); gradient `linear-gradient(90deg, #198571, #156bf4)`. Fonts: Commissioner 400/600/800 + Roboto Mono for figures (tabular). Scale 12/14/16/20/30/60 (body 16-18px/1.6). Radius 12px cards, 10px buttons, full pills. Shadow `0 8px 24px rgb(17 21 29 / .08)`. Motion 200ms ease; progress fill 800ms on enter.

### Components & interactions
Header, LivePill, Countdown (running/ending soon <1h in amber/ended), StatCard, ItemCard (watch toggle, "Ending soon" badge), FilterChips, BidPanel (idle/invalid amount/confirming/placing/success/outbid/closed), ConfirmBidDialog, BidHistory, CauseCard, ImpactChart, ResultsTable, Toasts.

### Data & state
Entities: auction, items, bids, causes, watchlist. In local mode keep state in a typed store with seeded fictional items (resort weekend, wine set, photo session, art classes) and simulated bids. Current bid derived from highest bid; minimum next = current + increment.

### Accessibility
Countdown uses `role="timer"` with polite updates only each minute (not every second) and a text equivalent. White hero text sits on a `rgb(0 0 0 / .6)` overlay (≥ 5.7:1). Money in monospace with currency formatting via `Intl.NumberFormat`. Heart buttons have `aria-pressed` and item names in labels. Progress bars expose value/max. Modal focus trap; bid errors announced. Gradient buttons carry white bold text; the teal end is #198571 (4.5:1) and the blue end #156bf4 (4.7:1). Verified contrast: body text #11151d on #f9fafb = 17.4:1; muted text #4b5563 on #f9fafb = 7.2:1; white bold text #ffffff on #198571 = 4.5:1; white bold text #ffffff on #156bf4 = 4.7:1; white hero text #ffffff on #666666 = 5.7:1.

### Security
Never trust client bids: in production, place bids through an Edge Function that validates auth, auction open window, and amount ≥ current + increment inside a transaction; RLS lets bidders read items/bids but only insert via the function; mask bidder names publicly. zod validation client and server. Rate-limit bidding. Payments only via hosted Stripe Checkout; never handle card numbers. Donation receipts contain minimal PII.

### Performance & SEO
Lazy-load item images; optimize hero; code-split item and results pages. Meta/OG for event and items. Lighthouse 90+.

### Guardrails
- Fictional charity, causes and items; placeholder photos; no real registration numbers.
- Don't overstate impact or invent beneficiary quotes.
- Store only what's needed for bidding and receipts.
- Typed small components, no `any`, visible errors.
- Done when: countdown reaches "Ended" and disables bidding, bids below the minimum are rejected, presets and confirm flow work by keyboard, watchlist persists, cause progress reflects totals, and the results page lists winners with masked names.

Open the builderAll templatesThis palette on its own