Template
Maple Street PTA
a site for an elementary school PTA that replaces the paper flyers: what is happening this month, sign-up sheets that fill themselves, the fundraiser, and how to join, in English and Spanish.
School PTA site with sign-up sheets and a fundraiser · Website · Small business site · 6 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
Baloo 2 is round and friendly without being babyish; Atkinson Hyperlegible was designed for readers with low vision, which suits a parent reading a slot list in the car line.
- Baloo 2Headings: headlines and card titles
- Atkinson HyperlegibleBody: everything parents read: dates, slots, forms
Who it is for
- Parents and caregivers, often on a phone at pickup
- Teachers asking for help in class
- PTA board members who post updates
Layout
- Ribbon above the nav: next general meeting date, time and room
- Nav: wordmark, Sign-ups, Calendar, Fundraiser, Meetings, Join, and an EN / ES switch
- Split hero: headline left, a "This month" card right listing the next five dates
- Open sign-ups grid: cards for each sheet with slots filled out of total
- Calendar list grouped by week
- Fundraiser stats: amount raised as words, what it buys this year, with a give link
- Join form band with dues and one sentence on what the PTA pays for
- Footer with school address, PTA email and board names
Palette
Cheerful, practical and legible, like a bulletin board somebody keeps tidy: notebook paper, a school-bus yellow highlight, a navy that means business.
- notebook paper
#fffdf6 - navy
#1d2a44 - classroom blue
#1f5fbf - bus yellow
#ffd23f
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 14.07:1 | 4.5:1 |
| Aa | text on cards | 12.55:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.43:1 | 4.5:1 |
| Aa | secondary text on the page | 6.31:1 | 4.5:1 |
| Aa | label on the primary action | 5.98:1 | 4.5:1 |
| Aa | label on secondary surfaces | 12.55:1 | 4.5:1 |
| Aa | label on the accent | 9.91:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.98: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
- Baloo 2, headlines and card titles
- Body
- Atkinson Hyperlegible, everything parents read: dates, slots, forms
Spacing and imagery
Comfortable and scannable: 64 to 88px between sections, cards with clear headings.
Hand-drawn feel without clip art: crayon-textured shapes, kids’ artwork the PTA uploads, a photo of the school front. Never posed stock families.
Components
- Sign-up sheet card: title, date, a row per slot option with "3 of 6 taken" and a progress pip row
- This month card with date chips in bus yellow
- Language switch that keeps the current page
Interactions
- Each sign-up card reads the slots endpoint and grays out full options
- After a sign-up the page returns with a thank-you and the slot count updated
Data
events: an event: title, date, start, end, room, summary, sign-up form name if anyminutes: meeting minutes: date, title, summary, PDF URLboard: a board member: role, first name, email aliasform teacher-appreciation-lunch: name, email, item (radio), child’s classroom, noteform field-day-volunteer: name, email, phone, station (select), shirt sizeform join: name, email, children’s grades (checkboxes), how you would like to help (checkboxes), preferred language
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 **Maple Street PTA**: a site for an elementary school PTA that replaces the paper flyers: what is happening this month, sign-up sheets that fill themselves, the fundraiser, and how to join, in English and Spanish.
### 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: next meeting ribbon, hero with this month, open sign-ups, calendar, fundraiser, join
- `/sign-ups` Sign-up sheets: every open sheet with its slots and places left
- `/calendar` Calendar: events by month, each with its page
- `/fundraiser` Fundraiser: what it pays for, how to give, thank-you list
- `/meetings` Meetings: next meeting, minutes archive
- `/join` Join the PTA: why join, dues, board contacts, join form
Home, top to bottom:
1. Ribbon above the nav: next general meeting date, time and room.
2. Nav: wordmark, Sign-ups, Calendar, Fundraiser, Meetings, Join, and an EN / ES switch.
3. Split hero: headline left, a "This month" card right listing the next five dates.
4. Open sign-ups grid: cards for each sheet with slots filled out of total.
5. Calendar list grouped by week.
6. Fundraiser stats: amount raised as words, what it buys this year, with a give link.
7. Join form band with dues and one sentence on what the PTA pays for.
8. Footer with school address, PTA email and board names.
Copy to start from, in `content.ts`: headline "Everything happening at Maple Street this month", subcopy "Sign up to help, see what is coming, and find out where your fundraiser dollars go.", primary action "See sign-up sheets".
The site is written in English and Spanish, with a language switch in the header; every page and form exists in each language.
### Design system
Mood: Cheerful, practical and legible, like a bulletin board somebody keeps tidy: notebook paper, a school-bus yellow highlight, a navy that means business.
Palette: notebook paper `#fffdf6`, navy `#1d2a44`, classroom blue `#1f5fbf`, bus yellow `#ffd23f`. Tokens: background `#fffdf6`, foreground `#1d2a44`, primary `#1f5fbf` with `#fffdf6` labels, cards `#f1f0eb`, accent `#ffd23f`.
Type: Baloo 2 for headlines and card titles; Atkinson Hyperlegible for everything parents read: dates, slots, forms. Load both from https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap.
Corners: 10px on controls, 18px on cards, 28px on large panels. Spacing: Comfortable and scannable: 64 to 88px between sections, cards with clear headings.
Imagery: Hand-drawn feel without clip art: crayon-textured shapes, kids’ artwork the PTA uploads, a photo of the school front. Never posed stock families. 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
- Sign-up sheet card: title, date, a row per slot option with "3 of 6 taken" and a progress pip row
- This month card with date chips in bus yellow
- Language switch that keeps the current page
Motion:
- Each sign-up card reads the slots endpoint and grays out full options
- After a sign-up the page returns with a thank-you and the slot count updated
The signature motion is: a yellow highlighter stroke draws under the hero headline once on load, like a parent marking the flyer. 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/events.json`: an event: title, date, start, end, room, summary, sign-up form name if any; each has its page at `/calendar/<slug>`
- `src/content/minutes.json`: meeting minutes: date, title, summary, PDF URL
- `src/content/board.json`: a board member: role, first name, email alias
Forms:
- `teacher-appreciation-lunch`: Parents sign up to bring something for the staff lunch. Fields: name, email, item (radio), child’s classroom, note. Places are limited per item: Main dish 6, Salad 4, Dessert 5, Drinks 3, Paper goods 2.
- `field-day-volunteer`: Volunteers pick a field day station. Fields: name, email, phone, station (select), shirt size. Places are limited per station: Water station 9-11 4, Sack race 9-11 3, Water station 11-1 4, Clean-up 1-2 6.
- `join`: A parent joins the PTA. Fields: name, email, children’s grades (checkboxes), how you would like to help (checkboxes), preferred language.
Linked tools:
- Dues and fundraiser gifts: the PTA’s payment page (its bank, Zeffy, MemberHub or Givebutter), linked from Join and Fundraiser.
### 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 #1d2a44 on #fffdf6 14.06:1; text on cards #1d2a44 on #f1f0eb 12.54:1; secondary text on muted surfaces #565f71 on #edece8 5.43:1; secondary text on the page #565f71 on #fffdf6 6.30:1; label on the primary action #fffdf6 on #1f5fbf 5.98:1; label on secondary surfaces #1d2a44 on #f1f0eb 12.54:1; label on the accent #1d2a44 on #ffd23f 9.91:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #1f5fbf on #fffdf6 5.98: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: Organization and Event.
### Guardrails
- Avoid: Apple and pencil clip art, Comic Sans, photos of children who could be identified, and asking for children’s full names.
- 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.