Cedar Hollow HOA

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Spectral gives notices the authority of a printed letter; Overpass keeps document tables and dates clear and even.

• SpectralHeadings: page titles and notice headlines
• OverpassBody: body, tables, dates and forms

Who it is for

• Residents looking for a rule, a form or a date
• Buyers and agents checking documents before a sale
• Board members posting notices

Layout

1. Header: association name, Notices, Documents, Board, Dues, Requests
2. Hero kept short: name, one line, and a status board of cards (pool hours today, next trash and recycling day, next board meeting)
3. Latest notices list: date, category tag, headline, one line
4. Quick links grid: pay dues, find a document, request a change, report an issue
5. Amenities map: an illustrated SVG with numbered places and a key
6. Footer with management company contact, board email and a resident-only note

Palette

Calm, orderly and trustworthy, like a well-run town office: cool paper, deep teal, tidy tables, small brick-red flags for what is urgent.

• cool paper#f3f5f4
• slate ink#1b2a2f
• deep teal#1f5c5a
• notice brick#b4472f

Every checked pair, measured again

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

Spectral, page titles and notice headlines

Body

Overpass, body, tables, dates and forms

Spacing and imagery

Dense but airy: 56 to 72px between sections, tables with 12px row padding.

The neighborhood itself, sparingly: the entrance sign at dusk, the pool, a street of trees. A simple illustrated amenity map in the palette.

Components

• Status board card: label, today’s value and a small updated date
• Notice row with a category tag; urgent notices get a brick-red flag
• Document table with type and year filters and a search box

Interactions

• Document filters and search narrow the table instantly and keep their state in the address
• Urgent notices appear as one dismissible line above the header until their date passes

Data

• notices: a notice: title, date, category (meeting, maintenance, rule, community), urgent (yes or no), body in Markdown
• documents: a document: title, type (governing, minutes, budget, form), year, PDF URL, summary
• board: a board member: name, role, term ends
• form architectural-request: name, street address, email, phone, type of change (select: fence, paint, roof, landscaping, addition, other), description, planned start date, contractor name
• form maintenance-report: name, email, location, what is wrong, urgent (yes or no)

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### 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 **Cedar Hollow HOA**: a site for a 140-home homeowners association that answers residents’ questions before they email: the latest notices, every governing document, who is on the board, how to pay dues and how to ask to change a fence.

### 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: status board, latest notices, quick links, next board meeting, amenities map
- `/notices` Notices: filter by category, newest first, each with its page
- `/documents` Documents: governing documents, minutes, budgets, forms; filter by type and year
- `/board` Board: members and roles, meeting schedule, how to reach the board
- `/dues` Dues: amounts and due dates, how to pay through the management company
- `/requests` Requests: architectural change request form, maintenance report form

Home, top to bottom:
1. Header: association name, Notices, Documents, Board, Dues, Requests.
2. Hero kept short: name, one line, and a status board of cards (pool hours today, next trash and recycling day, next board meeting).
3. Latest notices list: date, category tag, headline, one line.
4. Quick links grid: pay dues, find a document, request a change, report an issue.
5. Amenities map: an illustrated SVG with numbered places and a key.
6. Footer with management company contact, board email and a resident-only note.

Copy to start from, in `content.ts`: headline "Cedar Hollow, at a glance", subcopy "Notices, documents, the board and dues, all in one place for the 140 homes of Cedar Hollow.", primary action "Read the latest notices".

### Design system
Mood: Calm, orderly and trustworthy, like a well-run town office: cool paper, deep teal, tidy tables, small brick-red flags for what is urgent.

Palette: cool paper `#f3f5f4`, slate ink `#1b2a2f`, deep teal `#1f5c5a`, notice brick `#b4472f`. Tokens: background `#f3f5f4`, foreground `#1b2a2f`, primary `#1f5c5a` with `#f3f5f4` labels, cards `#ffffff`, accent `#b4472f`.

Type: Spectral for page titles and notice headlines; Overpass for body, tables, dates and forms. Load both from https://fonts.googleapis.com/css2?family=Spectral:wght@500;700&family=Overpass:wght@400;500;600&display=swap.

Corners: 4px on controls, 6px on cards, 10px on large panels. Spacing: Dense but airy: 56 to 72px between sections, tables with 12px row padding.

Imagery: The neighborhood itself, sparingly: the entrance sign at dusk, the pool, a street of trees. A simple illustrated amenity map in the palette. 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
- Status board card: label, today’s value and a small updated date
- Notice row with a category tag; urgent notices get a brick-red flag
- Document table with type and year filters and a search box

Motion:
- Document filters and search narrow the table instantly and keep their state in the address
- Urgent notices appear as one dismissible line above the header until their date passes

The signature motion is: the status board’s cards flip in one after another on first load, like a departures board, then stay still. 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/notices.json`: a notice: title, date, category (meeting, maintenance, rule, community), urgent (yes or no), body in Markdown; each has its page at `/notices/<slug>`
- `src/content/documents.json`: a document: title, type (governing, minutes, budget, form), year, PDF URL, summary
- `src/content/board.json`: a board member: name, role, term ends

Forms:
- `architectural-request`: A homeowner asks to change the outside of their home. Fields: name, street address, email, phone, type of change (select: fence, paint, roof, landscaping, addition, other), description, planned start date, contractor name.
- `maintenance-report`: A resident reports a problem in a common area. Fields: name, email, location, what is wrong, urgent (yes or no).

Linked tools:
- Dues: the management company’s resident portal, linked from /dues and the quick links.

### 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 #1b2a2f on #f3f5f4 13.51:1; text on cards #1b2a2f on #ffffff 14.80:1; secondary text on muted surfaces #515d60 on #e2e5e4 5.36:1; secondary text on the page #515d60 on #f3f5f4 6.21:1; label on the primary action #f3f5f4 on #1f5c5a 7.00:1; label on secondary surfaces #1b2a2f on #ffffff 14.80:1; label on the accent #f3f5f4 on #b4472f 4.93:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #1f5c5a on #f3f5f4 7.00: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: Gated "resident login" that does not exist, legal text on the home page, real-estate stock photography, and a cluttered sidebar.
- 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.

Open the builderAll templatesThis palette on its own