Template
Tempo Cycle Studio
a site for an indoor cycling and strength studio that puts this week’s timetable first, sells the intro offer, introduces the instructors and sends members to the studio’s booking app to reserve a bike.
Indoor cycling and strength studio with a class timetable · Website · Small business site · 5 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
Big Shoulders Display is tall and condensed like gym signage, so class names fit in a timetable cell; Exo 2’s squared, technical shapes read like a bike console on black.
- Big Shoulders DisplayHeadings: headlines, class names and big times
- Exo 2Body: timetable details, prices and body
Who it is for
- Newcomers looking for a first class
- Members checking today’s timetable
- Corporate wellness leads
Layout
- Nav: wordmark, Timetable, Classes, Instructors, Pricing, and Book a bike
- Full-bleed video hero: a looping, muted class clip with the headline in Big Shoulders Display
- Today’s timetable list: time, class, instructor, length and a Book button
- Class types grid: Ride, Ride + Lift, Strength, Recovery
- Intro offer band in volt with the price and what it includes
- Instructors grid with portraits and their signature class
- Pricing table: packs and memberships
- Footer with address, hours, parking and the booking app links
Palette
High-energy and nocturnal, like a dark room lit by one neon strip: black, a volt yellow-green and white type that hits hard.
- studio black
#111111 - white
#f2f2f2 - volt
#d7ff3a - graphite
#1f1f1f
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 16.87:1 | 4.5:1 |
| Aa | text on cards | 14.72:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 8.10:1 | 4.5:1 |
| Aa | secondary text on the page | 9.73:1 | 4.5:1 |
| Aa | label on the primary action | 16.41:1 | 4.5:1 |
| Aa | label on secondary surfaces | 14.72:1 | 4.5:1 |
| Aa | label on the accent | 14.72:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 16.41: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
- Big Shoulders Display, headlines, class names and big times
- Body
- Exo 2, timetable details, prices and body
Spacing and imagery
Tight and rhythmic: 64px between sections, timetable rows 56px.
Motion-blurred class photos in the studio’s own lighting, close-ups of pedals and hands; no models in a white void.
Components
- Timetable row: big start time, class name, instructor avatar, length, and a Book link
- Intensity meter of five bars
- Day switcher as a horizontal chip row, today first
Interactions
- Timetable filters by class type and instructor, kept in the address
- Today’s list hides classes that have already started
Data
classes: a class type: name, length, intensity (1 to 5), what to expect, what to bringinstructors: an instructor: name, photo, bio, music style, classestimetable: a weekly slot: day, start, class (slug), instructor (slug), room, booking linkform corporate: name, company, email, group size, preferred times, message
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 **Tempo Cycle Studio**: a site for an indoor cycling and strength studio that puts this week’s timetable first, sells the intro offer, introduces the instructors and sends members to the studio’s booking app to reserve a bike.
### 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 timetable, class types, intro offer, instructors, pricing, location
- `/timetable` Timetable: the week by day, with filters by class type and instructor
- `/classes` Classes: each class type with its page
- `/instructors` Instructors: each instructor with their page and classes
- `/pricing` Pricing: intro offer, class packs and memberships, FAQ
Home, top to bottom:
1. Nav: wordmark, Timetable, Classes, Instructors, Pricing, and Book a bike.
2. Full-bleed video hero: a looping, muted class clip with the headline in Big Shoulders Display.
3. Today’s timetable list: time, class, instructor, length and a Book button.
4. Class types grid: Ride, Ride + Lift, Strength, Recovery.
5. Intro offer band in volt with the price and what it includes.
6. Instructors grid with portraits and their signature class.
7. Pricing table: packs and memberships.
8. Footer with address, hours, parking and the booking app links.
Copy to start from, in `content.ts`: headline "Ride hard. Lift smart. Repeat.", subcopy "Forty-five minute rides and strength classes in Fairview, from 6 AM. Your first three classes are $30.", primary action "Claim the intro offer".
### Design system
Mood: High-energy and nocturnal, like a dark room lit by one neon strip: black, a volt yellow-green and white type that hits hard.
Palette: studio black `#111111`, white `#f2f2f2`, volt `#d7ff3a`, graphite `#1f1f1f`. Tokens: background `#111111`, foreground `#f2f2f2`, primary `#d7ff3a` with `#111111` labels, cards `#1f1f1f`, accent `#1f1f1f`.
Type: Big Shoulders Display for headlines, class names and big times; Exo 2 for timetable details, prices and body. Load both from https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Exo+2:wght@400;600&display=swap.
Corners: 999px on controls, 12px on cards, 20px on large panels. Spacing: Tight and rhythmic: 64px between sections, timetable rows 56px.
Imagery: Motion-blurred class photos in the studio’s own lighting, close-ups of pedals and hands; no models in a white void. 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
- Timetable row: big start time, class name, instructor avatar, length, and a Book link
- Intensity meter of five bars
- Day switcher as a horizontal chip row, today first
Motion:
- Timetable filters by class type and instructor, kept in the address
- Today’s list hides classes that have already started
The signature motion is: a thin volt line races left to right under the hero headline on load, like a cadence bar on a bike screen. 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/classes.json`: a class type: name, length, intensity (1 to 5), what to expect, what to bring; each has its page at `/classes/<slug>`
- `src/content/instructors.json`: an instructor: name, photo, bio, music style, classes; each has its page at `/instructors/<slug>`
- `src/content/timetable.json`: a weekly slot: day, start, class (slug), instructor (slug), room, booking link
Forms:
- `corporate`: A company asks about group classes. Fields: name, company, email, group size, preferred times, message.
Linked tools:
- Booking: the studio’s booking app (Mindbody, Momence, Glofox or Mariana Tek) for each class and the intro offer. The site shows the timetable from content and never takes a reservation itself.
### 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 #f2f2f2 on #111111 16.86:1; text on cards #f2f2f2 on #1f1f1f 14.72:1; secondary text on muted surfaces #bababa on #232323 8.09:1; secondary text on the page #bababa on #111111 9.72:1; label on the primary action #111111 on #d7ff3a 16.41:1; label on secondary surfaces #f2f2f2 on #1f1f1f 14.72:1; label on the accent #f2f2f2 on #1f1f1f 14.72:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #d7ff3a on #111111 16.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: Before-and-after body photos, diet talk, a slideshow hero, booking forms that look like they reserve a bike, and stock photos in white studios.
- 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.