Daybreak Roasters

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

The design asks for one rounded, friendly face everywhere, so Fredoka takes the body too and gives the dark roast brand its bubbly personality.

• FredokaHeadings: giant uppercase marquee words 80px+, wordmark 20px
• FredokaBody: body 16px cream, line-height 1.6

Who it is for

• Independent coffee shops
• Cafés with pastry counters
• Small roasters offering pickup
• Hospitality designers prototyping ordering

Layout

1. Dark espresso header: Menu/Location/About left, rounded wordmark center, cart icon right
2. Full-bleed coffee photo band
3. Espresso-brown marquee strip with giant cream two-word phrases scrolling
4. More photo bands alternating with marquee strips
5. Featured items rail: square photos, name, price, light-blue 'Order now' pill
6. Sample testimonials, location + hours table, footer
7. Menu page: 3-column grid with category filter, product modal, slide-in cart, pickup time picker, checkout

Palette

Warm, bold, cozy, playful, confident. A dark roast brand with bubbly, oversized type.

• background espresso#2d2220
• header / darker#1f1715
• text cream#f9f5ee
• button sky#afcde6
• button text#1f1715
• muted text#cbbfb2
• border#4a3a36
• input border#856861

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–700, giant (~80px+) uppercase marquee words; 20px wordmark

Body

Fredoka 400 16px cream, line-height 1.6

One rounded friendly face everywhere gives a playful, bold café personality

Spacing and imagery

Full-bleed stacked bands (photo / marquee / rail), 0 radius on images, pill buttons, ~64px horizontal rail spacing, generous vertical rhythm

Top-down and close-up coffee and pastry photography (latte art, croissants, matcha, iced coffee) shown full-bleed and square.

Components

• Centered-wordmark header
• Full-bleed photo band
• Scrolling marquee strip
• Featured product rail
• Order now pill
• Category filter
• Product detail modal with options
• Slide-in cart with qty controls
• Pickup time selector
• Checkout form
• Store hours table
• Testimonials
• Contact form

Interactions

• Infinite horizontal marquee
• Header transparent-to-solid on scroll
• Rail horizontal scroll/drag
• Add to cart opens drawer
• Quantity stepper updates totals
• Out-of-stock disables add
• Pickup times filtered by hours
• Order submit loading and confirmation

Data

• Product{id, name, category(coffee|tea|bakery), price_cents, image_url, description, options[], in_stock, featured}
• Order{id, name, email, phone, pickup_at, items[], total_cents, status, created_at}
• StoreHours{weekday, open, close}
• ContactMessage{name, email, message}

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 **Daybreak Roasters**, a bold ordering site for a neighborhood coffee shop. The home page stacks big food photos with oversized scrolling words; customers then pick drinks and pastries from a filtered menu, choose a pickup time and submit an order stored in a database. Staff sign in to see incoming orders. The job: sell the vibe and make pickup ordering take under a minute.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for marquees and header transitions; Zustand (or context) with localStorage for the cart; react-hook-form + zod for checkout/contact; date-fns for pickup slots; TanStack Query. Supabase: Postgres (products, orders, hours), Auth for staff only, Edge Function for order submission and staff notification; optional dnd-kit for staff order board.

### Pages & layout
1. **Home** – dark header: text links left, rounded wordmark center, cart icon with count right (transparent over photos with a `rgb(31 23 21 / .7)` top scrim, solid after scroll). Alternating full-bleed photo bands and espresso marquee strips with giant cream uppercase words. Featured rail: square photos with name, price, light-blue "Order now" pill. Testimonials (3 sample quotes), "Visit us" with address, map link and hours table, footer.
2. **Menu** – category tabs (Coffee, Tea, Bakery), 3-column grid; product modal with size/milk options.
3. **Cart drawer & checkout** – items, qty, subtotal, pickup time (next available 10-minute slots during open hours), name/phone/email, submit → confirmation.
4. **Location**, **About**, **Contact**.
5. **Staff** – login, today's orders list with status.

### Design system
`--background: #2d2220`, `--surface: #1f1715`, `--foreground: #f9f5ee`, `--button: #afcde6`, `--button-foreground: #1f1715`, `--muted-foreground: #cbbfb2`, `--border: #4a3a36` (decorative), `--input-border: #856861`. Font: Fredoka 400/600/700 (all UI); marquee words clamp(56px, 8vw, 96px) uppercase (2-3 words each); body 16px/1.6, labels 12px minimum; Fredoka or system-ui fallback for body. Radius 0 for images, 999px buttons, 12px modals. No shadows; rely on contrast. Motion: marquee 30s linear loop, drawer 250ms ease-out, button hover darken.

### Components & interactions
Header (transparent/solid), PhotoBand, Marquee (pauses on hover and reduced motion), ProductRail, ProductCard (in stock/out of stock), CategoryTabs, ProductModal (option validation), CartDrawer (empty/items/submitting/success/error), QtyStepper, PickupSelect (closed state "We're closed -- order for tomorrow"), CheckoutForm, HoursTable (today highlighted), TestimonialCard, ContactForm, StaffOrderList.

### Data & state
`products`, `orders` (items as JSONB snapshot with prices), `store_hours`. Cart client-side and persisted. Server recomputes totals. Seed 12 products with generated photos and fictional prices; make sure each image matches its product name.

### Accessibility
Cream on espresso ≈ 12:1. Light-blue pill with near-black text is 10.6:1. Marquee text is decorative duplication -- render once for screen readers (`aria-hidden` on repeats) and stop motion under reduced motion. Drawer and modal trap focus and restore it. Pickup select labeled with store timezone. Product images have alt matching the item. Verified contrast: cream text #f9f5ee on #2d2220 = 14.2:1; muted text #cbbfb2 on #2d2220 = 8.5:1; near-black text #1f1715 on #afcde6 = 10.6:1; cream nav text #f9f5ee on #625d5b = 5.9:1; input border #856861 on #2d2220 = 3.0:1.

### Security
Orders inserted only via Edge Function: validate with zod, recompute prices from DB, check pickup time within hours, rate-limit by IP, honeypot field. RLS: products public read; orders no public read, staff role read/update; hours public read, staff write. No payment data (pay at pickup) or hosted Stripe Checkout if added. Service key only in function env.

### Performance & SEO
Serve photo bands as responsive AVIF/WebP with lazy loading beyond the first; limit marquee DOM copies. LocalBusiness/CafeOrCoffeeShop schema with hours, meta/OG. Lighthouse 90+.

### Guardrails
- Fictional shop name, address and menu; placeholder images; testimonials marked as samples.
- Keep customer data to name and one contact method; purge after 30 days.
- Typed small components, no `any`, visible errors.
- Done when: cart persists across reloads, out-of-stock items can't be ordered, pickup slots respect hours, an order lands in the DB with server-computed totals, staff can view it, and the marquee stops with reduced motion.

Open the builderAll templatesThis palette on its own