Ironclad Auto Repair

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

Teko is condensed and squared like shop stencils; Archivo Narrow fits a price list in two columns on a phone.

• TekoHeadings: headlines, prices and service names
• Archivo NarrowBody: body, the price list and forms

Who it is for

• Drivers with a warning light on
• Owners due for maintenance
• Fleet managers for small businesses

Layout

1. Header: shop name in Teko, Services, Fleet, Hours, a tap-to-call number and Request service
2. Full-bleed photo hero of the shop floor with the headline and three trust chips (certified, warranty, approval first)
3. Why us: four plain promises in a row
4. Services price list in two columns: service, typical price, time
5. Request service form band
6. Warranty details and reviews
7. Hours and location block with a map link, and footer

Palette

Industrial and honest, like a clean shop floor: dark steel, a safety amber and a brake red, with stencil-like condensed type.

• steel#1b1d1f
• shop white#eceae4
• safety amber#f2a900
• gunmetal#2a2d30

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

Teko, headlines, prices and service names

Body

Archivo Narrow, body, the price list and forms

Spacing and imagery

Sturdy: 72px between sections, thick dividers like painted floor lines.

The shop itself: bays, lifts, the team in uniforms, close-ups of real work. No glossy supercars.

Components

• Price list row with a typical range and a "why it varies" tooltip
• Trust chip with a simple stencil icon
• Painted-line section dividers in amber

Interactions

• Price list filter by category (brakes, engine, tires, electrical, maintenance)
• Hours block shows open now or opens at

Data

• services: a service: name, typical price range, time, what is included, signs you need it
• form service-request: name, phone, email, year, make, model, mileage, what is going on, warning lights (checkboxes), preferred drop-off day, need a ride (yes or no)
• form fleet: name, company, email, phone, number of vehicles, vehicle types, 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
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 **Ironclad Auto Repair**: a site for an independent auto repair shop that builds trust fast (certifications, warranty, honest pricing), lists services with typical prices, and takes service appointment requests with the car’s details.

### 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, why us, services with prices, request service, warranty, reviews, hours
- `/services` Services: each service with its page and typical price
- `/request` Request service: the service request form
- `/fleet` Fleet: fleet accounts and the fleet inquiry form

Home, top to bottom:
1. Header: shop name in Teko, Services, Fleet, Hours, a tap-to-call number and Request service.
2. Full-bleed photo hero of the shop floor with the headline and three trust chips (certified, warranty, approval first).
3. Why us: four plain promises in a row.
4. Services price list in two columns: service, typical price, time.
5. Request service form band.
6. Warranty details and reviews.
7. Hours and location block with a map link, and footer.

Copy to start from, in `content.ts`: headline "Straight answers. Solid repairs.", subcopy "ASE-certified technicians, a 24-month warranty on parts and labor, and a call before any work you did not approve.", primary action "Request service".

### Design system
Mood: Industrial and honest, like a clean shop floor: dark steel, a safety amber and a brake red, with stencil-like condensed type.

Palette: steel `#1b1d1f`, shop white `#eceae4`, safety amber `#f2a900`, gunmetal `#2a2d30`. Tokens: background `#1b1d1f`, foreground `#eceae4`, primary `#f2a900` with `#1b1d1f` labels, cards `#2a2d30`, accent `#2a2d30`.

Type: Teko for headlines, prices and service names; Archivo Narrow for body, the price list and forms. Load both from https://fonts.googleapis.com/css2?family=Teko:wght@500;700&family=Archivo+Narrow:wght@400;600&display=swap.

Corners: 2px on controls, 4px on cards, 6px on large panels. Spacing: Sturdy: 72px between sections, thick dividers like painted floor lines.

Imagery: The shop itself: bays, lifts, the team in uniforms, close-ups of real work. No glossy supercars. 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
- Price list row with a typical range and a "why it varies" tooltip
- Trust chip with a simple stencil icon
- Painted-line section dividers in amber

Motion:
- Price list filter by category (brakes, engine, tires, electrical, maintenance)
- Hours block shows open now or opens at

The signature motion is: the amber floor-line dividers slide in from the left as each section enters, like tape laid on a shop floor. 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/services.json`: a service: name, typical price range, time, what is included, signs you need it; each has its page at `/services/<slug>`

Forms:
- `service-request`: A driver asks for an appointment. Fields: name, phone, email, year, make, model, mileage, what is going on, warning lights (checkboxes), preferred drop-off day, need a ride (yes or no).
- `fleet`: A business asks about a fleet account. Fields: name, company, email, phone, number of vehicles, vehicle types, message.

Linked tools:
- Reviews: links to the shop’s review profiles.

### 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 #eceae4 on #1b1d1f 14.05:1; text on cards #eceae4 on #2a2d30 11.51:1; secondary text on muted surfaces #b8b7b3 on #2c2d2f 6.86:1; secondary text on the page #b8b7b3 on #1b1d1f 8.42:1; label on the primary action #1b1d1f on #f2a900 8.41:1; label on secondary surfaces #eceae4 on #2a2d30 11.51:1; label on the accent #eceae4 on #2a2d30 11.51:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #f2a900 on #1b1d1f 8.41: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: Supercars and pin-up imagery, chrome gradients, "lowest prices" claims, and hiding prices behind "call for a quote".
- 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