Template
Fieldstone Home Group
a site for a three-agent real estate team that sells the team’s local knowledge: its own listings, guides to the neighborhoods it works, its sold results, and a home value request, with listing search on the team’s existing IDX tool.
Real estate agent team site with listings and neighborhoods · 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
Krona One’s wide, flat caps make neighborhood names feel like street signs; Reddit Sans keeps listing facts tidy.
- Krona OneHeadings: headlines and neighborhood names
- Reddit SansBody: body, listing facts and forms
Who it is for
- Sellers choosing an agent
- Buyers new to the area
- Past clients sending a referral
Layout
- Nav: team name, Listings, Search homes, Neighborhoods, Sell, Team, and a home value button
- Split hero: headline and subcopy left, a tall neighborhood photo right with a small "Search homes" card over its corner
- Featured listings grid: three of the team’s listings with status, price and facts
- Neighborhoods: a bento of six neighborhood tiles with one line each
- Sold results stats: homes sold, median days on market, list-to-sale ratio, each with a year
- How we sell: four steps
- Kind words: two client quotes
- Home value form band, then footer with brokerage, licenses and the equal housing statement
Palette
Confident and local, like a good neighborhood guide: deep navy, warm cream, a coral that feels like a front door.
- warm cream
#f7f1e8 - harbor navy
#13233a - front door coral
#b9472d - porch blue
#d6e2ec
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.58:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.63:1 | 4.5:1 |
| Aa | secondary text on the page | 6.53:1 | 4.5:1 |
| Aa | label on the primary action | 4.67:1 | 4.5:1 |
| Aa | label on secondary surfaces | 12.58:1 | 4.5:1 |
| Aa | label on the accent | 12.00:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 4.67: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
- Krona One, headlines and neighborhood names
- Body
- Reddit Sans, body, listing facts and forms
Spacing and imagery
Balanced: 88px between sections, cards in a 3-column grid.
The neighborhoods themselves (porches, a farmers market, a creek trail) and the team’s own listing photos; team portraits outdoors, not in an office.
Components
- Listing card with status ribbon, price, facts and agent avatar
- Neighborhood tile with photo, name and one line
- Results stat with the period it covers
Interactions
- Listings filter by status on /listings
- Each listing page carries the listing-question form with the listing filled in
Data
listings: a listing the team enters: address, status (coming soon, active, pending, sold), price, beds, baths, square feet, photos, description, agentneighborhoods: a neighborhood: name, summary, photos, schools note, places to know, typical prices as words, guide in Markdownteam: an agent: name, role, license number, photo, phone, email, bioform home-value: name, email, phone, street address, beds, baths, timeline (select), messageform listing-question: name, email, phone, listing (hidden, from the page), 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 **Fieldstone Home Group**: a site for a three-agent real estate team that sells the team’s local knowledge: its own listings, guides to the neighborhoods it works, its sold results, and a home value request, with listing search on the team’s existing IDX tool.
### 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, featured listings, neighborhoods, sold results, how we sell, kind words, home value
- `/listings` Our listings: the team’s own listings by status, each with its page
- `/search` Search homes: the team’s IDX search framed, or a link to it
- `/neighborhoods` Neighborhoods: guides, each with its page
- `/sell` Sell: how we sell, results, home value form
- `/team` Team: agents with license numbers and contact
Home, top to bottom:
1. Nav: team name, Listings, Search homes, Neighborhoods, Sell, Team, and a home value button.
2. Split hero: headline and subcopy left, a tall neighborhood photo right with a small "Search homes" card over its corner.
3. Featured listings grid: three of the team’s listings with status, price and facts.
4. Neighborhoods: a bento of six neighborhood tiles with one line each.
5. Sold results stats: homes sold, median days on market, list-to-sale ratio, each with a year.
6. How we sell: four steps.
7. Kind words: two client quotes.
8. Home value form band, then footer with brokerage, licenses and the equal housing statement.
Copy to start from, in `content.ts`: headline "We know these streets", subcopy "Fieldstone Home Group has helped 300 families buy and sell in the Millbrook valley since 2012.", primary action "What is my home worth?".
### Design system
Mood: Confident and local, like a good neighborhood guide: deep navy, warm cream, a coral that feels like a front door.
Palette: warm cream `#f7f1e8`, harbor navy `#13233a`, front door coral `#b9472d`, porch blue `#d6e2ec`. Tokens: background `#f7f1e8`, foreground `#13233a`, primary `#b9472d` with `#f7f1e8` labels, cards `#e9e5de`, accent `#d6e2ec`.
Type: Krona One for headlines and neighborhood names; Reddit Sans for body, listing facts and forms. Load both from https://fonts.googleapis.com/css2?family=Krona+One&family=Reddit+Sans:wght@400;600&display=swap.
Corners: 8px on controls, 16px on cards, 24px on large panels. Spacing: Balanced: 88px between sections, cards in a 3-column grid.
Imagery: The neighborhoods themselves (porches, a farmers market, a creek trail) and the team’s own listing photos; team portraits outdoors, not in an office. 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
- Listing card with status ribbon, price, facts and agent avatar
- Neighborhood tile with photo, name and one line
- Results stat with the period it covers
Motion:
- Listings filter by status on /listings
- Each listing page carries the listing-question form with the listing filled in
The signature motion is: the neighborhood tiles reveal their photos with a slow upward wipe as the bento enters, one after another. 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/listings.json`: a listing the team enters: address, status (coming soon, active, pending, sold), price, beds, baths, square feet, photos, description, agent; each has its page at `/listings/<slug>`
- `src/content/neighborhoods.json`: a neighborhood: name, summary, photos, schools note, places to know, typical prices as words, guide in Markdown; each has its page at `/neighborhoods/<slug>`
- `src/content/team.json`: an agent: name, role, license number, photo, phone, email, bio
Forms:
- `home-value`: A homeowner asks what their home might sell for. Fields: name, email, phone, street address, beds, baths, timeline (select), message.
- `listing-question`: A buyer asks about one of the team’s listings. Fields: name, email, phone, listing (hidden, from the page), message.
Linked tools:
- Listing search: the team’s existing IDX search page (from their IDX vendor or brokerage), framed on /search when the vendor allows framing, otherwise a Search homes button that opens it. The site never fetches listings itself.
### 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 #13233a on #f7f1e8 14.07:1; text on cards #13233a on #e9e5de 12.58:1; secondary text on muted surfaces #4c5766 on #e5e1da 5.62:1; secondary text on the page #4c5766 on #f7f1e8 6.53:1; label on the primary action #f7f1e8 on #b9472d 4.67:1; label on secondary surfaces #13233a on #e9e5de 12.58:1; label on the accent #13233a on #d6e2ec 11.99:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #b9472d on #f7f1e8 4.67: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: RealEstateAgent, and Place for a listing.
### Guardrails
- Avoid: Pulling MLS listings or presenting other brokers’ listings, the REALTOR mark unless the owner adds it, "#1 agent" claims, skyline stock photos, and chat widgets.
- 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.