Template
Commons Day 2027
a site for a one-day, single-venue conference for neighborhood organizers that sells its three ticket tiers, shows a clear schedule by track, and makes speakers, sponsors and volunteers easy to bring in.
Community conference site · Website · Events and bookings · 7 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
Geologica is a sturdy geometric sans with strong numerals for dates; Martian Mono makes times and rooms line up like signage.
- GeologicaHeadings: headlines, the date and session titles
- Martian MonoBody: times, rooms, labels and body
Who it is for
- Organizers deciding whether to buy a ticket
- Speakers and sponsors checking the event out
- Attendees on the day, on a phone, looking for the next session
Layout
- Top bar: event name, Schedule, Speakers, Sponsor, Volunteer, and Get tickets
- Hero: the date set in huge numerals on a green block, the headline, venue, and a countdown in days
- Four tracks as color-coded cards with one line each
- Featured speakers grid: eight portraits with names and talk titles
- Schedule preview: the morning as a time grid with a link to the full schedule
- Tickets pricing: three tiers (community, standard, supporter) with what is included
- Sponsors: tiers of names as text, then the venue and travel block with a map link
- Footer with code of conduct, contact and last year’s recap
Palette
Systematic and energetic, like Swiss conference signage: a strict grid, big numerals, blocks of green and orange that mean something.
- white
#ffffff - signage ink
#111827 - commons green
#0a7d4f - signal orange
#ff7a1a
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 17.74:1 | 4.5:1 |
| Aa | text on cards | 16.07:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 6.68:1 | 4.5:1 |
| Aa | secondary text on the page | 7.83:1 | 4.5:1 |
| Aa | label on the primary action | 5.17:1 | 4.5:1 |
| Aa | label on secondary surfaces | 16.07:1 | 4.5:1 |
| Aa | label on the accent | 6.80:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.17: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
- Geologica, headlines, the date and session titles
- Body
- Martian Mono, times, rooms, labels and body
Spacing and imagery
Grid-led: a 12-column grid, 80px between sections, schedule rows 64px tall.
Speaker portraits treated consistently (same crop, palette tint), and photos from last year’s event; a venue photo for the travel section.
Components
- Schedule grid: tracks as columns on desktop, a track switcher and a single column on phones
- Session card with time, room, track color and speaker avatars
- Countdown in days that becomes "Today" and then "Thanks for coming"
Interactions
- On the day, the schedule scrolls to now and marks the current and next session in each track
- Track filter chips on /schedule, kept in the address
Data
speakers: a speaker: name, role, organization, portrait, bio, linkssessions: a session: title, track, room, start, end, speakers (slugs), summary, kind (talk, workshop, break)sponsors: a sponsor: name, tier, URLform volunteer: name, email, phone, role (radio), shirt size, accessibility needsform sponsor-inquiry: name, organization, email, tier of interest (select), 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 **Commons Day 2027**: a site for a one-day, single-venue conference for neighborhood organizers that sells its three ticket tiers, shows a clear schedule by track, and makes speakers, sponsors and volunteers easy to bring in.
### 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 with countdown, tracks, featured speakers, schedule preview, tickets, sponsors, venue
- `/schedule` Schedule: time grid by track, with now and next on the day
- `/speakers` Speakers: every speaker, each with their page and sessions
- `/tickets` Tickets: three tiers, what is included, the ticket checkout framed or linked, FAQ
- `/sponsor` Sponsor: tiers, last year’s numbers, sponsor inquiry form
- `/volunteer` Volunteer: roles and the volunteer form with places left
- `/code-of-conduct` Code of conduct: the code in plain words and how to report
Home, top to bottom:
1. Top bar: event name, Schedule, Speakers, Sponsor, Volunteer, and Get tickets.
2. Hero: the date set in huge numerals on a green block, the headline, venue, and a countdown in days.
3. Four tracks as color-coded cards with one line each.
4. Featured speakers grid: eight portraits with names and talk titles.
5. Schedule preview: the morning as a time grid with a link to the full schedule.
6. Tickets pricing: three tiers (community, standard, supporter) with what is included.
7. Sponsors: tiers of names as text, then the venue and travel block with a map link.
8. Footer with code of conduct, contact and last year’s recap.
Copy to start from, in `content.ts`: headline "One day. Four tracks. Every neighborhood.", subcopy "Saturday, May 15, 2027 at the Eastside Union Hall. Talks and workshops for people who organize where they live.", primary action "Get tickets".
### Design system
Mood: Systematic and energetic, like Swiss conference signage: a strict grid, big numerals, blocks of green and orange that mean something.
Palette: white `#ffffff`, signage ink `#111827`, commons green `#0a7d4f`, signal orange `#ff7a1a`. Tokens: background `#ffffff`, foreground `#111827`, primary `#0a7d4f` with `#ffffff` labels, cards `#f3f4f1`, accent `#ff7a1a`.
Type: Geologica for headlines, the date and session titles; Martian Mono for times, rooms, labels and body. Load both from https://fonts.googleapis.com/css2?family=Geologica:wght@500;900&family=Martian+Mono:wght@400;600&display=swap.
Corners: 0px on controls, 8px on cards, 12px on large panels. Spacing: Grid-led: a 12-column grid, 80px between sections, schedule rows 64px tall.
Imagery: Speaker portraits treated consistently (same crop, palette tint), and photos from last year’s event; a venue photo for the travel section. 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
- Schedule grid: tracks as columns on desktop, a track switcher and a single column on phones
- Session card with time, room, track color and speaker avatars
- Countdown in days that becomes "Today" and then "Thanks for coming"
Motion:
- On the day, the schedule scrolls to now and marks the current and next session in each track
- Track filter chips on /schedule, kept in the address
The signature motion is: the hero’s date numerals slide up into place one digit at a time, like a mechanical departure board settling. 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/speakers.json`: a speaker: name, role, organization, portrait, bio, links; each has its page at `/speakers/<slug>`
- `src/content/sessions.json`: a session: title, track, room, start, end, speakers (slugs), summary, kind (talk, workshop, break); each has its page at `/schedule/<slug>`
- `src/content/sponsors.json`: a sponsor: name, tier, URL
Forms:
- `volunteer`: Someone volunteers for a role on the day. Fields: name, email, phone, role (radio), shirt size, accessibility needs. Places are limited per role: Registration desk 7:30-11 6, Room host morning 8, Room host afternoon 8, Teardown 5-7 10.
- `sponsor-inquiry`: An organization asks about sponsoring. Fields: name, organization, email, tier of interest (select), message.
Linked tools:
- Tickets: the organizer’s ticketing page (Luma, Ticket Tailor or Eventbrite), framed on /tickets when the tool allows it, otherwise a Get tickets button per tier.
### 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 #111827 on #ffffff 17.73:1; text on cards #111827 on #f3f4f1 16.06:1; secondary text on muted surfaces #4d525d on #ecedee 6.68:1; secondary text on the page #4d525d on #ffffff 7.83:1; label on the primary action #ffffff on #0a7d4f 5.17:1; label on secondary surfaces #111827 on #f3f4f1 16.06:1; label on the accent #111827 on #ff7a1a 6.80:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #0a7d4f on #ffffff 5.17: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: Event and Person.
### Guardrails
- Avoid: Stock photos of conference audiences from behind, a sponsor logo wall above the fold, a carousel of speakers, and dark mode by default.
- 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.