Template
Crumb & Co.
An online ordering site for a neighborhood bakery: customers browse a category-filtered menu, add items to a cart drawer, choose a pickup slot and check out without an account, or send a catering inquiry. Behind a login, the owner moves orders through a status pipeline and manages stock.
Bakery pickup ordering site · Website · Small business site · full-stack app (auth + DB)
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
Start from this templateRead the build prompt
Typefaces
Fredoka keeps the rounded bakery warmth, and Mulish is a soft, clear body for menus and prices.
- FredokaHeadings: headings 70px 600 at -0.03em
- MulishBody: menus, prices, body 16px
Who it is for
- Independent bakeries and cafés
- Small food businesses offering pickup
- Caterers taking event inquiries
- Developers building local-shop ordering
Layout
- Header: leaf logo + name left, Menu/Catering/Location/About center, Cart with count badge right
- Split hero on cream: rounded chunky display headline, one-line subcopy, dark green 'Order now' pill; rounded bread photo right
- 'Featured items' with rule: 4 product cards with image, name, price
- Catering section: rounded panel with copy + package cards and photo
- Three sample testimonial cards
- 'Find us': address, hours, live open/closed, directions + Order now
- Full menu page with category tabs, cart drawer, pickup time grid, checkout
- Owner dashboard: orders by status pipeline, menu stock
Palette
Warm, friendly, wholesome, artisanal, calm. A neighborhood bakery counter in web form.
- background cream
#f5f2e5 - text / primary forest
#172c1d - card
#efece0 - muted text
#4f5b52 - border
#dcd8c8 - accent crust
#a65a26 - input border
#92875d
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on cream | 13.23:1 | 4.5:1 |
| Aa | body text on card | 12.55:1 | 4.5:1 |
| Aa | muted text on cream | 6.34:1 | 4.5:1 |
| Aa | muted text on card | 6.01:1 | 4.5:1 |
| Aa | white on forest primary pill | 14.85:1 | 4.5:1 |
| Aa | white on crust accent badge | 5.11:1 | 4.5:1 |
| Aa | crust accent text on cream | 4.55:1 | 4.5:1 |
| Aa | success text on cream | 4.61:1 | 4.5:1 |
| Aa | white on success badge | 5.17:1 | 4.5:1 |
| Aa | danger text on cream | 5.86:1 | 4.5:1 |
| input border on cream | 3.20:1 | 3:1 | |
| input border on card | 3.04:1 | 3:1 | |
| forest focus ring on cream | 13.23:1 | 3:1 |
As vibld’s tokens
The palette on the 15+ color tokens vibld styles a project with, each text color 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
- Fredoka 600, 70px, -0.03em tracking -- rounded, friendly
- Body
- Mulish 400 16px
Soft rounded display for warmth; Mulish for clear menus and prices
Spacing and imagery
Full-width 1216px, 32px gutters, 4-column product grid, 16–20px radius cards and photos, section headings followed by a hairline rule, pill buttons
Warm, moody close-up food photography (sourdough, buns, lattes, charcuterie boards) with rounded corners.
Components
- Header with cart badge
- Split hero
- Section heading with rule
- Product card with add button
- Category tabs
- Cart drawer (4 states)
- Pickup time slot grid
- Checkout form (name, phone, email)
- Catering package cards and inquiry form
- Testimonial cards
- Open/closed status badge
- Owner order pipeline board
- Out-of-stock badge
Interactions
- Add to cart with count badge bump
- Cart drawer: empty, items, submitting, confirmed
- Pickup slot selection disables past/full slots
- Category tab filtering
- Live open/closed based on hours
- Owner drags or advances orders through statuses
- Toggle item out of stock
- Toast confirmations
Data
MenuItem{id, name, category, price_cents, image_url, description, in_stock, featured}Order{id, customer_name, phone, email, pickup_at, status(new|preparing|ready|picked_up|canceled), total_cents, notes, created_at}OrderItem{order_id, menu_item_id, qty, unit_price_cents}CateringInquiry{id, name, email, event_date, guests, package, message}PickupSlot{start, capacity}
Build prompt
The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.
The baseline
### 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 color 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, labeled 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 **Crumb & Co.**, a pickup-ordering site for an independent bakery. Customers browse the menu, fill a cart, pick a pickup time and place an order without signing up; event planners send catering inquiries. The owner signs in to a private dashboard to move orders from new to picked up and mark items sold out. The job: take orders online without a marketplace's fees.
### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. TanStack Query for menu and orders; react-hook-form + zod for checkout and catering; date-fns for hours and slots; Sonner toasts; dnd-kit (optional) for the order board. Supabase: Postgres (menu_items, orders, order_items, catering_inquiries, settings), Auth for the owner only, Edge Functions for order placement (server-side pricing and slot capacity) and notification emails.
### Pages & layout
1. **Home** – header (leaf mark + name, nav, Cart pill with count). Split hero: 70px rounded display headline, subcopy, forest-green "Order now →" pill; large rounded bread photo. "Featured items" heading with trailing hairline and a 4-card row. Catering panel with packages. Three testimonial cards (sample). "Find us" with address, hours, live Open/Closed badge, Get directions, Order now.
2. **Menu** – category tabs (Breads, Pastries, Coffee, Tea…), product grid with add/qty, sold-out state.
3. **Cart drawer & checkout** – items, subtotal, pickup slot grid (15-min slots, full/closed disabled), contact fields, notes, Place order → confirmation with order number.
4. **Catering** – packages and inquiry form.
5. **Owner** – login; orders board by status columns with counts; order detail; menu stock toggles.
### Design system
`--background: #f5f2e5`, `--foreground: #172c1d`, `--primary: #172c1d`, `--card: #efece0`, `--muted-foreground: #4f5b52`, `--border: #dcd8c8` (decorative hairlines), `--input-border: #92875d`, `--accent: #a65a26`, `--success: #2e7b4e`, `--danger: #b42318`. Fonts: Fredoka 600 (display) + Mulish 400/500. Scale 13/14/16/20/32/70 (body 16px/1.5, 13px only for badges and meta). Radius 16px cards, 20px photos, 999px buttons. Shadows soft `0 6px 20px rgb(23 44 29 / .08)`. Motion 180ms ease; drawer 250ms.
### Components & interactions
CartButton (badge bump), ProductCard (default/hover/adding/sold out), CategoryTabs, CartDrawer (empty/items/submitting/confirmed/error), QtyStepper, SlotGrid (available/selected/full/past), CheckoutForm, CateringForm, TestimonialCard, OpenStatusBadge, OrderBoard (columns, advance button, optional drag), StockToggle, EmptyStates ("No orders yet").
### Data & state
Tables listed; prices stored in cents; totals recomputed server-side. Slot capacity enforced in the Edge Function with a transaction. Cart in client state persisted to localStorage. Seed 16 menu items with generated food photos and fictional prices; hours in `settings`.
### Accessibility
Forest #172c1d on cream ≈ 13:1. Slot buttons expose time and availability ("9:15, full"). Drawer is a dialog with focus trap and returns focus to the cart button. Qty steppers labeled with item names. Order confirmation announced via live region. Owner board operable without drag (Advance / Move back buttons). Photos have descriptive alt text. Verified contrast: body text #172c1d on #f5f2e5 = 13.2:1; muted text #4f5b52 on #f5f2e5 = 6.3:1; white #ffffff on #172c1d = 14.8:1; white #ffffff on #a65a26 = 5.1:1; success text #2e7b4e on #f5f2e5 = 4.6:1.
### Security
Anonymous customers can only `insert` orders through the Edge Function (no direct table access); RLS denies public select on orders. Owner role (single admin or `profiles.role = 'owner'`) can read/update orders and menu. Validate all inputs with zod on client and in the function; ignore client prices. Rate-limit order and catering submissions, add honeypot. Phone/email used only for the order; no card data (pay at pickup, or Stripe Checkout if added). Service key only in function env.
### Performance & SEO
Menu images lazy with fixed ratios; cache menu query. LocalBusiness/Bakery structured data with hours and address, meta/OG. Lighthouse 90+.
### Guardrails
- Fictional bakery name, address and products; placeholder photos; testimonials marked as samples.
- Collect minimal customer data; purge old orders after a retention period.
- Typed small components, no `any`, visible errors.
- Done when: a guest orders for an available slot and gets a confirmation, full slots are rejected server-side, sold-out items can't be added, the owner sees the order appear and advances it to "ready", and non-owners can't read orders.