Template
Harbor Light Church
a site for a neighborhood church of about two hundred people that tells a first-time visitor exactly what Sunday is like, keeps every sermon a click away, and makes giving and joining a group easy.
Neighborhood church site with sermons and giving · Website · Small business site · 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
Young Serif has the round, friendly weight of a printed bulletin without feeling antique; Sofia Sans keeps times and addresses crisp at small sizes.
- Young SerifHeadings: headlines, sermon titles and service times
- Sofia SansBody: body copy, schedules and forms
Who it is for
- First-time visitors deciding whether to come on Sunday
- Members looking for last week’s sermon or this week’s events
- Volunteers and group leaders
Layout
- Top bar: wordmark, Sermons, Events, Groups, Give, and a Plan your visit pill
- Thin service times band above the hero with this Sunday’s times and address
- Split hero: serif headline and subcopy left, a photo in an arched window frame right
- What to expect: three numbered steps (arrive, the service, after) with plain answers
- Latest sermon card: series, title, speaker, date, scripture and a play button
- This week list: the next four events with day, time and place
- Groups grid: four cards by day of week
- Giving band: one sentence, a Give button and the other ways to give
- Footer with address, map link, service times and staff email
Palette
Warm, unhurried and grounded, like a well-kept parish hall in afternoon light: limestone, wood and terracotta, with generous margins and nothing shouting.
- limestone
#f4efe6 - pew ink
#24302b - terracotta
#a4432a - sage
#dfe6d9
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 11.96:1 | 4.5:1 |
| Aa | text on cards | 10.80:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 4.92:1 | 4.5:1 |
| Aa | secondary text on the page | 5.67:1 | 4.5:1 |
| Aa | label on the primary action | 5.37:1 | 4.5:1 |
| Aa | label on secondary surfaces | 10.80:1 | 4.5:1 |
| Aa | label on the accent | 10.74:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.37: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
- Young Serif, headlines, sermon titles and service times
- Body
- Sofia Sans, body copy, schedules and forms
Spacing and imagery
Generous: 96 to 128px between sections, a 68ch reading measure for sermon notes.
The building and the people in it at ease: the doors open on a Sunday, a coffee table after the service, hands on a hymnal. Framed in an arched window shape echoing the sanctuary.
Components
- Arched photo frame (CSS mask) used on the hero and the visit page
- Sermon player: native audio element with a styled play button, speed and a notes toggle
- Series filter as chips on /sermons
- Event row with a date block (weekday, day number, month)
Interactions
- Sermon filter updates the list without a page load and keeps the series in the address
- The service times band notes "Today" on Sundays
Data
sermons: a sermon: title, series, speaker, date, scripture, audio URL, video URL, notes in Markdownevents: an event: title, start, end, place, summary, details, sign-up form name if anygroups: a group: name, day, time, neighborhood, leader first name, what it isform plan-a-visit: name, email, which Sunday (date), which service (9:00 or 11:00), number of adults, ages of kids, anything we should knowform group-interest: name, email, group (select from groups), 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 **Harbor Light Church**: a site for a neighborhood church of about two hundred people that tells a first-time visitor exactly what Sunday is like, keeps every sermon a click away, and makes giving and joining a group 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: service times band, hero, what to expect, latest sermon, this week, groups, giving
- `/visit` Plan your visit: what happens on a Sunday in order, parking, kids, accessibility, a plan-a-visit form
- `/sermons` Sermons: series filter, newest first, with audio and notes
- `/events` Events: upcoming by month, each with its page
- `/groups` Groups: small groups by day and neighborhood, with an interest form
- `/give` Give: why and how the church uses gifts, the giving tool framed or linked, other ways to give
- `/about` About: beliefs in plain words, staff, history
Home, top to bottom:
1. Top bar: wordmark, Sermons, Events, Groups, Give, and a Plan your visit pill.
2. Thin service times band above the hero with this Sunday’s times and address.
3. Split hero: serif headline and subcopy left, a photo in an arched window frame right.
4. What to expect: three numbered steps (arrive, the service, after) with plain answers.
5. Latest sermon card: series, title, speaker, date, scripture and a play button.
6. This week list: the next four events with day, time and place.
7. Groups grid: four cards by day of week.
8. Giving band: one sentence, a Give button and the other ways to give.
9. Footer with address, map link, service times and staff email.
Copy to start from, in `content.ts`: headline "Come as you are. You are welcome.", subcopy "Sundays at 9:00 and 11:00 on Alder Street. Coffee is on, kids have their own space, and nobody will put you on the spot.", primary action "Plan your visit".
### Design system
Mood: Warm, unhurried and grounded, like a well-kept parish hall in afternoon light: limestone, wood and terracotta, with generous margins and nothing shouting.
Palette: limestone `#f4efe6`, pew ink `#24302b`, terracotta `#a4432a`, sage `#dfe6d9`. Tokens: background `#f4efe6`, foreground `#24302b`, primary `#a4432a` with `#f4efe6` labels, cards `#e8e4db`, accent `#dfe6d9`.
Type: Young Serif for headlines, sermon titles and service times; Sofia Sans for body copy, schedules and forms. Load both from https://fonts.googleapis.com/css2?family=Young+Serif&family=Sofia+Sans:wght@400;600&display=swap.
Corners: 6px on controls, 14px on cards, 999px on large panels. Spacing: Generous: 96 to 128px between sections, a 68ch reading measure for sermon notes.
Imagery: The building and the people in it at ease: the doors open on a Sunday, a coffee table after the service, hands on a hymnal. Framed in an arched window shape echoing the sanctuary. 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
- Arched photo frame (CSS mask) used on the hero and the visit page
- Sermon player: native audio element with a styled play button, speed and a notes toggle
- Series filter as chips on /sermons
- Event row with a date block (weekday, day number, month)
Motion:
- Sermon filter updates the list without a page load and keeps the series in the address
- The service times band notes "Today" on Sundays
The signature motion is: the arched photo frame’s light shifts slowly from warm to bright as the hero scrolls, as morning light moves across a window. 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/sermons.json`: a sermon: title, series, speaker, date, scripture, audio URL, video URL, notes in Markdown; each has its page at `/sermons/<slug>`
- `src/content/events.json`: an event: title, start, end, place, summary, details, sign-up form name if any; each has its page at `/events/<slug>`
- `src/content/groups.json`: a group: name, day, time, neighborhood, leader first name, what it is
Forms:
- `plan-a-visit`: A visitor says they are coming so someone can meet them. Fields: name, email, which Sunday (date), which service (9:00 or 11:00), number of adults, ages of kids, anything we should know.
- `group-interest`: Someone asks to join a group. Fields: name, email, group (select from groups), message.
Linked tools:
- Giving: the church’s giving page (Tithely, Zeffy, Givebutter, Pushpay or its bank), framed on /give when the tool allows framing, otherwise a Give button that opens it.
- Sermon audio and video: the podcast host or YouTube link on each sermon.
### 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 #24302b on #f4efe6 11.96:1; text on cards #24302b on #e8e4db 10.79:1; secondary text on muted surfaces #58605a on #e3e0d7 4.91:1; secondary text on the page #58605a on #f4efe6 5.66:1; label on the primary action #f4efe6 on #a4432a 5.36:1; label on secondary surfaces #24302b on #e8e4db 10.79:1; label on the accent #24302b on #dfe6d9 10.73:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #a4432a on #f4efe6 5.36: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: Stained-glass clip art, dove or cross icons as decoration, a slideshow hero, a wall of staff headshots on the home page, and church jargon a visitor would not know.
- 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.