Template
Brightwater Family Dental
a site for a three-dentist family practice that answers what new patients ask (insurance, hours, what a first visit is like), introduces the team, and sends booking to the practice’s scheduling tool or a simple call-back request, without collecting any health information.
Family dental practice site with no health data collected · Website · Small business site · 5 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
Lexend was designed to reduce reading strain, which suits a page people read while nervous; Noto Sans keeps lists and hours plain and compact.
- Lexend DecaHeadings: headlines and service names
- Noto SansBody: body, hours, insurance list and forms
Who it is for
- New patients choosing a dentist, often parents
- Current patients looking for hours or directions
- Anxious patients who want reassurance
Layout
- Header: practice name, Services, New patients, Team, Contact, a tap-to-call number and Book a visit
- Split hero: headline and subcopy left, a photo of the front desk team right, an apricot "New patients welcome" chip
- Why patients stay: three short reasons as cards
- Services grid: eight services with simple line icons
- Your first visit: four steps in a row
- Insurance list: plans accepted as text, with a "not listed? call us" line
- Team grid and a hours-and-location block with a map link
- Footer with address, phone, hours and the accessibility statement
Palette
Clean, calm and kind, like a bright waiting room with a view of water: pale aqua, deep teal ink, a soft apricot that warms it up.
- pale aqua
#f4f9fb - deep teal ink
#0f2b36 - brightwater teal
#0f6e8c - apricot
#ffd6a5
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 13.95:1 | 4.5:1 |
| Aa | text on cards | 14.80:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.50:1 | 4.5:1 |
| Aa | secondary text on the page | 6.37:1 | 4.5:1 |
| Aa | label on the primary action | 5.45:1 | 4.5:1 |
| Aa | label on secondary surfaces | 14.80:1 | 4.5:1 |
| Aa | label on the accent | 10.86:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.45: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
- Lexend Deca, headlines and service names
- Body
- Noto Sans, body, hours, insurance list and forms
Spacing and imagery
Open and reassuring: 96px between sections, cards with generous padding.
The real office and team, natural light, smiling but not posed; simple line illustrations for services. No close-ups of teeth or tools.
Components
- Service card with a two-tone line icon
- First-visit step row with numbered apricot dots
- Hours table with today highlighted
Interactions
- Header phone number is a tap-to-call link on phones
- Hours table marks "Open now" or "Opens at" from today’s hours
Data
services: a service: name, summary, what happens, how long, who it is forteam: a team member: name, role, photo, a few lines, languages spokenform call-back: name, phone, preferred time to call (morning, afternoon), new or current patient, short note (with a hint: please do not include medical details)
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 **Brightwater Family Dental**: a site for a three-dentist family practice that answers what new patients ask (insurance, hours, what a first visit is like), introduces the team, and sends booking to the practice’s scheduling tool or a simple call-back request, without collecting any health information.
### 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, why patients stay, services, first visit, insurance, team, hours and location
- `/services` Services: each service with its page, in plain words
- `/new-patients` New patients: what to expect, what to bring, insurance and payment
- `/team` Our team: dentists and hygienists
- `/contact` Contact: hours, map link, phone and the call-back request
Home, top to bottom:
1. Header: practice name, Services, New patients, Team, Contact, a tap-to-call number and Book a visit.
2. Split hero: headline and subcopy left, a photo of the front desk team right, an apricot "New patients welcome" chip.
3. Why patients stay: three short reasons as cards.
4. Services grid: eight services with simple line icons.
5. Your first visit: four steps in a row.
6. Insurance list: plans accepted as text, with a "not listed? call us" line.
7. Team grid and a hours-and-location block with a map link.
8. Footer with address, phone, hours and the accessibility statement.
Copy to start from, in `content.ts`: headline "Gentle dentistry for the whole family", subcopy "New patients welcome, kids from age one. Open early on weekdays and two Saturdays a month on Harbor Road.", primary action "Book a visit".
### Design system
Mood: Clean, calm and kind, like a bright waiting room with a view of water: pale aqua, deep teal ink, a soft apricot that warms it up.
Palette: pale aqua `#f4f9fb`, deep teal ink `#0f2b36`, brightwater teal `#0f6e8c`, apricot `#ffd6a5`. Tokens: background `#f4f9fb`, foreground `#0f2b36`, primary `#0f6e8c` with `#f4f9fb` labels, cards `#ffffff`, accent `#ffd6a5`.
Type: Lexend Deca for headlines and service names; Noto Sans for body, hours, insurance list and forms. Load both from https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@500;700&family=Noto+Sans:wght@400;600&display=swap.
Corners: 12px on controls, 20px on cards, 32px on large panels. Spacing: Open and reassuring: 96px between sections, cards with generous padding.
Imagery: The real office and team, natural light, smiling but not posed; simple line illustrations for services. No close-ups of teeth or tools. 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
- Service card with a two-tone line icon
- First-visit step row with numbered apricot dots
- Hours table with today highlighted
Motion:
- Header phone number is a tap-to-call link on phones
- Hours table marks "Open now" or "Opens at" from today’s hours
The signature motion is: a soft ripple spreads once from the "New patients welcome" chip when the hero loads, like a drop landing in still water. 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/services.json`: a service: name, summary, what happens, how long, who it is for; each has its page at `/services/<slug>`
- `src/content/team.json`: a team member: name, role, photo, a few lines, languages spoken
Forms:
- `call-back`: Someone asks the office to call them to book. Fields: name, phone, preferred time to call (morning, afternoon), new or current patient, short note (with a hint: please do not include medical details).
Linked tools:
- Booking: the practice’s scheduling tool (NexHealth, Zocdoc, LocalMed or its practice software’s online booking), linked from every Book a visit button.
- New patient paperwork: the practice’s secure forms link, never a form on this site.
Health information: This is a health site, so it collects no health information. No form asks about symptoms, conditions, treatments, medications, insurance or date of birth, and nothing about anyone's health is stored. Appointments go to the practice's own booking tool by link; the only form asks for a name, a phone number, a preferred time and an optional short note, and its label says not to include medical details.
### 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 #0f2b36 on #f4f9fb 13.94:1; text on cards #0f2b36 on #ffffff 14.79:1; secondary text on muted surfaces #485f67 on #e2e9eb 5.49:1; secondary text on the page #485f67 on #f4f9fb 6.36:1; label on the primary action #f4f9fb on #0f6e8c 5.45:1; label on secondary surfaces #0f2b36 on #ffffff 14.79:1; label on the accent #0f2b36 on #ffd6a5 10.86:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #0f6e8c on #f4f9fb 5.45: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: LocalBusiness with opening hours.
### Guardrails
- Avoid: Close-ups of teeth, drills or needles, before-and-after smiles, any symptom checker or intake form, and stock photos of perfect smiles.
- 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.