Template
Glasshouse Avenue
a site for a four-piece indie band touring small rooms that sells tickets first, plays the new record second, and makes booking and press easy.
Indie band site · Website · Portfolio · 4 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
Bowlby One is fat enough to read as a poster from across a room; Chivo Mono lines up tour dates in tidy columns like a printed setlist.
- Bowlby OneHeadings: the band name, city names and headlines
- Chivo MonoBody: dates, track lists and body
Who it is for
- Fans checking whether the band is coming to their city
- Promoters and venues booking a show
- Press and playlist curators
Layout
- Header: the band name in Bowlby One, Tour, Music, Press, Merch, and Get tickets
- Full-bleed poster hero: a duotone photo with misregistered pink and blue, the band name huge across it
- Next dates table: date, city, venue and a ticket button, sold out struck through
- New release: cover, track list, and streaming links
- Video: one music video behind a click-to-load poster
- Merch strip linking to the store
- Mailing list form by city and footer with booking contact
Palette
Loud, handmade and a little crooked, like a two-color risograph gig poster: misregistered pink and blue on cheap paper.
- newsprint
#f2efe6 - press black
#141414 - riso blue
#2b3bd6 - fluoro pink
#ff4f9a
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 16.02:1 | 4.5:1 |
| Aa | text on cards | 14.22:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 6.42:1 | 4.5:1 |
| Aa | secondary text on the page | 7.58:1 | 4.5:1 |
| Aa | label on the primary action | 6.77:1 | 4.5:1 |
| Aa | label on secondary surfaces | 14.22:1 | 4.5:1 |
| Aa | label on the accent | 6.00:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 6.77: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
- Bowlby One, the band name, city names and headlines
- Body
- Chivo Mono, dates, track lists and body
Spacing and imagery
Tight and poster-like: 48 to 72px between sections, type set large and close.
Band photos turned into two-color duotones in the palette, with slight misregistration; scanned paper grain.
Components
- Tour table that collapses to stacked cards on phones, with the city first
- Click-to-load video: a poster image and play button that swaps in the youtube-nocookie player only when pressed
- Duotone image treatment from CSS blend modes on the band’s photos
Interactions
- Shows in the past drop off the list by date
- A "near me" filter narrows the tour table by country and region
Data
shows: a show: date, city, region, country, venue, with whom, ticket URL, status (on sale, few left, sold out, canceled)releases: a release: title, year, cover, kind (album, EP, single), tracks, streaming links, notes in Markdownform mailing-list: email, city, countryform booking: name, email, venue, city, date or range, capacity, offer details
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 **Glasshouse Avenue**: a site for a four-piece indie band touring small rooms that sells tickets first, plays the new record second, and makes booking and press easy.
### 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: poster hero, next dates, new release, video, merch, mailing list
- `/tour` Tour: every date, with ticket links and sold-out states
- `/music` Music: releases, each with its page
- `/press` Press: bio, press photos to download, quotes, contacts
Home, top to bottom:
1. Header: the band name in Bowlby One, Tour, Music, Press, Merch, and Get tickets.
2. Full-bleed poster hero: a duotone photo with misregistered pink and blue, the band name huge across it.
3. Next dates table: date, city, venue and a ticket button, sold out struck through.
4. New release: cover, track list, and streaming links.
5. Video: one music video behind a click-to-load poster.
6. Merch strip linking to the store.
7. Mailing list form by city and footer with booking contact.
Copy to start from, in `content.ts`: headline "Glasshouse Avenue on tour", subcopy "New record "Low Tide Radio" out now. Twenty-two cities this spring.", primary action "Get tickets".
### Design system
Mood: Loud, handmade and a little crooked, like a two-color risograph gig poster: misregistered pink and blue on cheap paper.
Palette: newsprint `#f2efe6`, press black `#141414`, riso blue `#2b3bd6`, fluoro pink `#ff4f9a`. Tokens: background `#f2efe6`, foreground `#141414`, primary `#2b3bd6` with `#f2efe6` labels, cards `#e5e2d9`, accent `#ff4f9a`.
Type: Bowlby One for the band name, city names and headlines; Chivo Mono for dates, track lists and body. Load both from https://fonts.googleapis.com/css2?family=Bowlby+One&family=Chivo+Mono:wght@400;700&display=swap.
Corners: 0px on controls, 0px on cards, 0px on large panels. Spacing: Tight and poster-like: 48 to 72px between sections, type set large and close.
Imagery: Band photos turned into two-color duotones in the palette, with slight misregistration; scanned paper grain. 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
- Tour table that collapses to stacked cards on phones, with the city first
- Click-to-load video: a poster image and play button that swaps in the youtube-nocookie player only when pressed
- Duotone image treatment from CSS blend modes on the band’s photos
Motion:
- Shows in the past drop off the list by date
- A "near me" filter narrows the tour table by country and region
The signature motion is: the pink and blue layers of the hero photo slide a few pixels apart and back as the page scrolls, like a print slipping on the press. 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/shows.json`: a show: date, city, region, country, venue, with whom, ticket URL, status (on sale, few left, sold out, canceled)
- `src/content/releases.json`: a release: title, year, cover, kind (album, EP, single), tracks, streaming links, notes in Markdown; each has its page at `/music/<slug>`
Forms:
- `mailing-list`: A fan asks to hear about shows near them. Fields: email, city, country.
- `booking`: A promoter asks about a date. Fields: name, email, venue, city, date or range, capacity, offer details.
Linked tools:
- Tickets: each show’s ticket page on the venue’s or promoter’s site.
- Streaming: Spotify, Apple Music, Bandcamp and YouTube links on each release.
- Merch: the band’s store (Bandcamp or Shopify), linked.
### 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 #141414 on #f2efe6 16.02:1; text on cards #141414 on #e5e2d9 14.22:1; secondary text on muted surfaces #4c4b49 on #e0ddd5 6.42:1; secondary text on the page #4c4b49 on #f2efe6 7.57:1; label on the primary action #f2efe6 on #2b3bd6 6.76:1; label on secondary surfaces #141414 on #e5e2d9 14.22:1; label on the accent #141414 on #ff4f9a 5.99:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #2b3bd6 on #f2efe6 6.76: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: MusicGroup and Event.
### Guardrails
- Avoid: Autoplaying audio, a full-screen intro video, grunge brush fonts, and embedding a streaming player that loads before anyone asks.
- 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.