Crumb & Co.

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

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

1. Header: leaf logo + name left, Menu/Catering/Location/About center, Cart with count badge right
2. Split hero on cream: rounded chunky display headline, one-line subcopy, dark green 'Order now' pill; rounded bread photo right
3. 'Featured items' with rule: 4 product cards with image, name, price
4. Catering section: rounded panel with copy + package cards and photo
5. Three sample testimonial cards
6. 'Find us': address, hours, live open/closed, directions + Order now
7. Full menu page with category tabs, cart drawer, pickup time grid, checkout
8. 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

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

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|cancelled), 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.

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 **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.

Open the builderAll templatesThis palette on its own