Template
Sparrow Corner Café
a site for a neighborhood café and bakery that shows today’s bakes and the menu, sends regulars to order ahead for pickup through the café’s ordering page, and takes cake and catering orders.
Cafe and bakery site · Website · Small business site · 3 pages
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
Caprasimo is a warm, soft-serif display that feels like a painted window; Inclusive Sans was drawn for legibility, so menus and hours read easily.
- CaprasimoHeadings: the café name, headlines and menu sections
- Inclusive SansBody: menu items, hours and forms
Who it is for
- Regulars ordering ahead on the way in
- Neighbors checking hours and the menu
- People ordering a birthday cake
Layout
- Header: café name in Caprasimo with the sparrow, Menu, Cakes, Hours, and Order ahead
- Split hero: headline and today’s hours left, a photo of the counter in an arched window right
- Today’s bakes list with the next batch time
- Menu preview in two columns: drinks and bakes with prices
- Order ahead band linking to the café’s ordering page
- Cakes grid with lead time and a request link
- Hours and location with a map link, and footer
Palette
Cozy and characterful, like a corner café with a painted window: oat cream, a roasted brown, and a sage green.
- oat cream
#fbf3e8 - roast
#2e1f14 - toffee
#7a3e1d - sage
#cfe3d0
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 14.44:1 | 4.5:1 |
| Aa | text on cards | 12.87:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.71:1 | 4.5:1 |
| Aa | secondary text on the page | 6.64:1 | 4.5:1 |
| Aa | label on the primary action | 7.53:1 | 4.5:1 |
| Aa | label on secondary surfaces | 12.87:1 | 4.5:1 |
| Aa | label on the accent | 11.76:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 7.53: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
- Caprasimo, the café name, headlines and menu sections
- Body
- Inclusive Sans, menu items, hours and forms
Spacing and imagery
Cozy: 72px between sections, menu in two columns.
Pastries on the counter in morning light, the painted window, the barista at work; a small sparrow drawn in the palette.
Components
- Arched window photo frame
- Menu row with dotted leader to the price
- Next batch chip that reads the bake times and says which is next
Interactions
- The hours line says open now or opens at
- Cake order pickup date refuses dates inside the cake’s lead time
Data
menu: a menu item: name, section (coffee, tea, bakes, food), price, description, dietary markscakes: a cake: name, sizes and prices, lead time in days, photoform cake-order: name, email, phone, cake (select), size, pickup date, message on the cake, allergies to avoid
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
Each niche site prompt describes a whole small site for one kind of owner: its pages, the records it keeps, the forms it collects and the tools it links to. The rules below apply to every one of them.
### Niche site principles
- The site does the one job its owner needs most (a sign-up, an RSVP, a request, a visit) on the first screen, and every page leads back to it.
- Records the owner adds often (sermons, events, listings, galleries, menus, tour dates) are content collections in `src/content/`, each record with a slug, so a new record gets its page with no code change.
- Tools the owner already pays for or uses (giving, tickets, booking, listing search, ordering) are linked, or framed in an `<iframe>` whose address is in `content.ts`, never rebuilt. With no address, a plain button links out instead, and nothing pretends to work.
- Copy is written for the owner's visitors, specific and plain. Dates, times and places are real fields, never baked into prose.
- The design is this site's own. Its layout, type and motion follow the brief, not a shared template.
### Forms
Every form is a plain HTML form, `<form method="post" action="/__vibld/forms/<name>">`, named as the brief names it (lowercase letters, digits and hyphens). Fields are ordinary named inputs; checkboxes repeat their name; no file uploads. Add a hidden `_next` input with the path to land on, and show a thank-you there when the address has `?submitted=<name>`. Add an empty hidden `_gotcha` input. A script may post it instead with `fetch(form.action, { method: 'POST', body: new FormData(form), headers: { accept: 'application/json' } })`, which answers `{ ok: true }` or `{ ok: false, error }`. A form with limited places lists them in `public/vibld.forms.json` (`{"forms":{"<name>":{"slots":{"field":"<field>","options":{"<value>":<places>}}}}}`), the field a select or radio whose values match those keys exactly; `GET /__vibld/forms/<name>/slots` returns `{ field, options: [{ value, capacity, taken, left }] }`, which the page reads to show what is left and disable full options. vibld adds bot protection when the page is served.
### Engineering baseline
- TypeScript strict mode, small typed components, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- All copy lives in typed content files, so the owner can edit words without touching layout.
- Every form validates on the client, says what went wrong in plain words beside the field, and never claims success it has not had.
- No secrets in the bundle and no third-party scripts beyond Google Fonts; an owner's tool comes in only as a link or a framed page.### Goal
Build **Sparrow Corner Café**: a site for a neighborhood café and bakery that shows today’s bakes and the menu, sends regulars to order ahead for pickup through the café’s ordering page, and takes cake and catering orders.
### Stack
React + TypeScript + Vite, Tailwind CSS and React Router, one route per page. Content collections in `src/content/`, forms posting to vibld (see Forms in the baseline). No backend of its own.
### Pages & layout
- `/` Home: hero, today’s bakes, menu, order ahead, cakes, hours and location
- `/menu` Menu: drinks, bakes and food by section with prices
- `/cakes` Cakes: cake menu, lead times and the cake order request
Home, top to bottom:
1. Header: café name in Caprasimo with the sparrow, Menu, Cakes, Hours, and Order ahead.
2. Split hero: headline and today’s hours left, a photo of the counter in an arched window right.
3. Today’s bakes list with the next batch time.
4. Menu preview in two columns: drinks and bakes with prices.
5. Order ahead band linking to the café’s ordering page.
6. Cakes grid with lead time and a request link.
7. Hours and location with a map link, and footer.
Copy to start from, in `content.ts`: headline "Good coffee, warm bakes, your corner", subcopy "Open 7 to 3 every day on Wren Street. Croissants out of the oven at 7, 9 and 11.", primary action "Order ahead".
### Design system
Mood: Cozy and characterful, like a corner café with a painted window: oat cream, a roasted brown, and a sage green.
Palette: oat cream `#fbf3e8`, roast `#2e1f14`, toffee `#7a3e1d`, sage `#cfe3d0`. Tokens: background `#fbf3e8`, foreground `#2e1f14`, primary `#7a3e1d` with `#fbf3e8` labels, cards `#efe6db`, accent `#cfe3d0`.
Type: Caprasimo for the café name, headlines and menu sections; Inclusive Sans for menu items, hours and forms. Load both from https://fonts.googleapis.com/css2?family=Caprasimo&family=Inclusive+Sans&display=swap.
Corners: 8px on controls, 16px on cards, 999px on large panels. Spacing: Cozy: 72px between sections, menu in two columns.
Imagery: Pastries on the counter in morning light, the painted window, the barista at work; a small sparrow drawn in the palette. Use the owner's photos where the project has them. Without them, use the project's stock photos, or shapes and color from the palette; never a stock photo of people at desks.
### Components & interactions
- Arched window photo frame
- Menu row with dotted leader to the price
- Next batch chip that reads the bake times and says which is next
Motion:
- The hours line says open now or opens at
- Cake order pickup date refuses dates inside the cake’s lead time
The signature motion is: the little sparrow beside the name hops once when the page loads, then sits still. Keep it to that one; everything else is a 150 to 300ms state change. With prefers-reduced-motion, it and every reveal are still.
### Data & state
Collections:
- `src/content/menu.json`: a menu item: name, section (coffee, tea, bakes, food), price, description, dietary marks
- `src/content/cakes.json`: a cake: name, sizes and prices, lead time in days, photo
Forms:
- `cake-order`: A customer asks for a cake. Fields: name, email, phone, cake (select), size, pickup date, message on the cake, allergies to avoid.
Linked tools:
- Order ahead: the café’s pickup ordering page (Square Online, Toast or similar), linked from every Order ahead button. Ordering on the site itself waits on vibld payments.
### Accessibility
WCAG 2.2 AA. Every control has a visible focus ring and a 44px target, every form field a visible label, and errors are announced. Dates and times are written out ("Sunday, March 8, 10:30 AM"), not only shown in a grid. Images have alt text that says what is in them. Verified contrast: body text on the page #2e1f14 on #fbf3e8 14.43:1; text on cards #2e1f14 on #efe6db 12.86:1; secondary text on muted surfaces #615449 on #ebe2d7 5.70:1; secondary text on the page #615449 on #fbf3e8 6.64:1; label on the primary action #fbf3e8 on #7a3e1d 7.53:1; label on secondary surfaces #2e1f14 on #efe6db 12.86:1; label on the accent #2e1f14 on #cfe3d0 11.76:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #7a3e1d on #fbf3e8 7.53:1.
### Security
No third-party scripts other than Google Fonts. Framed tools are `<iframe>`s from the owner's own address with a `title`, `loading="lazy"` and `referrerpolicy="strict-origin-when-cross-origin"`. Forms cap input length and carry the empty `_gotcha` field.
### Performance & SEO
Images as AVIF or WebP with width and height, the first one eager and the rest lazy. Preconnect to Google Fonts. Each page has its own title and description from content, and records' pages take theirs from the record. Structured data where it fits: LocalBusiness with opening hours.
### Guardrails
- Avoid: Coffee-bean clip art, latte-art stock photos, chalkboard textures, and an ordering form that takes payment on the site.
- One primary action per screen, one accent color, at most six top-level links.
- No carousel in the hero, no mega menu, no emoji or clip-art icons, no hard offset shadows, no purple-to-blue gradient.
- The names in it are invented. Use no real organization's or person's name, logo or trademark.