La Gordita Food Truck

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

Bungee was made for signs and reads like painted lettering on a truck; Varta keeps menu prices clear.

• BungeeHeadings: the truck name, today’s stop and menu headings
• VartaBody: menu items, prices and forms

Who it is for

• Hungry people checking today’s stop
• Office managers and couples booking catering
• Brewery and event organizers

Layout

1. Header: truck name in Bungee, Menu, Where we are, Catering, and Order ahead
2. Hero: today’s stop as a big painted sign card with place, hours and a map link, beside a photo of the truck
3. This week list: day, place, hours
4. Menu preview grid of six favorites with prices
5. Order ahead band linking to the truck’s ordering page
6. Catering pricing: three packages with per-person prices
7. Footer with social links and how to book the truck for an event

Palette

Loud, sunny and hand-painted, like a truck wrap at noon: sun yellow, a chile red, a teal and a deep mole brown.

• sun#fff3d6
• mole#2a1408
• chile#c22f17
• teal#1e8c7e

Every checked pair, measured again

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

Bungee, the truck name, today’s stop and menu headings

Body

Varta, menu items, prices and forms

Spacing and imagery

Compact and punchy: 64px between sections, menu in tight columns.

The truck, the food on paper boats, the line at a brewery; hand-painted sign shapes in the palette.

Components

• Painted sign card for today’s stop, read from stops.json by date
• Menu item row with price, dietary marks and a sold-out state
• Catering package card with price per person

Interactions

• Today’s stop switches by date; with no stop today it says where the truck is next
• Menu filter by dietary mark

Data

• menu: a menu item: name, section, price, description, dietary marks (vegetarian, vegan, gluten-free, spicy), sold out (yes or no)
• stops: a stop: date, place, address, start, end, map link
• form catering: name, email, phone, event date, start time, address, guests, package (select), truck or drop-off, notes

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
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 **La Gordita Food Truck**: a site for a taco truck that answers "where are you today?" first, shows the menu with prices, links to online ordering when the truck takes it, and books catering.

### 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: today’s stop, this week, menu, order ahead, catering, follow
- `/menu` Menu: menu by section with prices and dietary marks
- `/schedule` Where we are: this week’s stops and the regular spots
- `/catering` Catering: packages and the catering request form

Home, top to bottom:
1. Header: truck name in Bungee, Menu, Where we are, Catering, and Order ahead.
2. Hero: today’s stop as a big painted sign card with place, hours and a map link, beside a photo of the truck.
3. This week list: day, place, hours.
4. Menu preview grid of six favorites with prices.
5. Order ahead band linking to the truck’s ordering page.
6. Catering pricing: three packages with per-person prices.
7. Footer with social links and how to book the truck for an event.

Copy to start from, in `content.ts`: headline "Today at Old Mill Brewery", subcopy "Tacos al pastor, birria and the green salsa people ask about. 11 AM to 3 PM, or until we sell out.", primary action "Order ahead".

### Design system
Mood: Loud, sunny and hand-painted, like a truck wrap at noon: sun yellow, a chile red, a teal and a deep mole brown.

Palette: sun `#fff3d6`, mole `#2a1408`, chile `#c22f17`, teal `#1e8c7e`. Tokens: background `#fff3d6`, foreground `#2a1408`, primary `#c22f17` with `#fff3d6` labels, cards `#f2e6ca`, accent `#1e8c7e`.

Type: Bungee for the truck name, today’s stop and menu headings; Varta for menu items, prices and forms. Load both from https://fonts.googleapis.com/css2?family=Bungee&family=Varta:wght@400;700&display=swap.

Corners: 10px on controls, 16px on cards, 24px on large panels. Spacing: Compact and punchy: 64px between sections, menu in tight columns.

Imagery: The truck, the food on paper boats, the line at a brewery; hand-painted sign shapes 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
- Painted sign card for today’s stop, read from stops.json by date
- Menu item row with price, dietary marks and a sold-out state
- Catering package card with price per person

Motion:
- Today’s stop switches by date; with no stop today it says where the truck is next
- Menu filter by dietary mark

The signature motion is: the today card swings in on load like a sign hung on a hook, settles with one small bounce, and stops. 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, price, description, dietary marks (vegetarian, vegan, gluten-free, spicy), sold out (yes or no)
- `src/content/stops.json`: a stop: date, place, address, start, end, map link

Forms:
- `catering`: Someone asks the truck to cater. Fields: name, email, phone, event date, start time, address, guests, package (select), truck or drop-off, notes.

Linked tools:
- Order ahead: the truck’s online ordering page (Square Online, Toast or similar), linked. Ordering on the site itself waits on vibld payments.
- Social links where the truck posts sell-outs.

### 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 #2a1408 on #fff3d6 15.84:1; text on cards #2a1408 on #f2e6ca 14.09:1; secondary text on muted surfaces #5f4c3c on #eee1c6 6.27:1; secondary text on the page #5f4c3c on #fff3d6 7.36:1; label on the primary action #fff3d6 on #c22f17 5.12:1; label on secondary surfaces #2a1408 on #f2e6ca 14.09:1; label on the accent #000000 on #1e8c7e 5.10:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #c22f17 on #fff3d6 5.12: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: Sombrero, cactus or piñata clichés, fake hand-drawn fonts for body text, an ordering form that pretends to take payment, and stale stops.
- 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.

Open the builderAll templatesThis palette on its own