Template
Fernbrook Lodge
An 11-page site for a small, eco-minded pet boarding and daycare business that sells intimacy over scale. It explains its small-group philosophy, details boarding, daycare, grooming and training, shows live group capacity, and converts through a five-step booking wizard and a tour scheduler.
Small-group pet boarding and daycare site · Website · Small business site · front-end app (local state)
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
Spectral's bold and italic give a caring, boutique serif voice, and M PLUS Rounded 1c is the soft rounded sans the notes ask for.
- SpectralHeadings: headline 72px 700 with italic green emphasis line
- M PLUS Rounded 1cBody: UI and long descriptions 16px
Who it is for
- Boutique pet boarding and daycare owners
- Owners of anxious or senior pets
- Eco-conscious pet parents
- Groomers and trainers offering bundled care
Layout
- Fixed cream header: leaf icon + serif name, nine links with pill-highlighted active item, phone and green tour-booking pill
- Split hero: mint pill badge, three-line serif headline with italic green middle line, subcopy, green tour button and outline suites button, trust stats; rounded large dog photo right
- Four service cards with text links
- Small-group 2x2 benefit cards with mint icon circles on a soft radial glow
- Testimonials
- Visit CTA
- Inner pages: philosophy, boarding suites, daycare with daily schedule timeline and capacity bars, grooming packages, training tiers, facility, team bios, contact
- Multi-step booking wizard and tour booking form
Palette
calm, natural, caring, premium, reassuring. It feels like a small wellness retreat for pets.
- background cream
#f7f2e9 - text
#1d2630 - primary forest green
#0b7c57 - mint secondary
#e1f5eb - accent amber
#f59b0a - card
#faf8f4 - border
#e2dbcf - secondary text
#5b6472 - capacity amber
#c97f08 - capacity red
#b42318
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on cream | 13.72:1 | 4.5:1 |
| Aa | body text on card | 14.43:1 | 4.5:1 |
| Aa | secondary text on cream | 5.36:1 | 4.5:1 |
| Aa | white text on green buttons | 5.20:1 | 4.5:1 |
| Aa | green italic headline and links on cream | 4.67:1 | 4.5:1 |
| Aa | green text on mint badge | 4.58:1 | 4.5:1 |
| Aa | green text on card | 4.91:1 | 4.5:1 |
| amber capacity fill (with text value) | 3.04:1 | 3:1 | |
| red capacity fill (with text value) | 6.20:1 | 3:1 | |
| focus ring | 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
- Spectral Bold 700, 72px, with an italic green emphasis line
- Body
- M PLUS Rounded 1c 16px, weight 400, line-height 1.6; slate #5b6472 secondary copy
A serif with italics for a caring, boutique voice; a rounded sans for UI and long descriptions.
Spacing and imagery
1248px container, generous 112px sections, 12px card radius, 24px image radius, pill buttons and badges, soft diffuse shadows.
Soft-focus outdoor dog photography with natural greens; line icons in mint circles; subtle radial green glows behind sections.
Components
- Header with pill active state and phone
- Pill badge eyebrow
- Split hero with italic emphasis
- Service cards with Learn More
- Benefit cards with icon circles
- Capacity progress bars (color-coded)
- Daily schedule vertical timeline
- Suite/package comparison cards
- Team bio cards with certifications
- Five-step booking wizard with progress
- Tour booking with time-slot toggles and date picker
- Contact form with subject select and toast
Interactions
- Wizard steps with next/back and validation per step
- Time-slot toggle buttons
- Capacity bars animate to fill level
- Fade-up staggered reveals
- Mobile slide-down overlay menu
- Hover lift on cards and arrow nudge on links
- Toast on submit
Data
Service{slug, title, summary, priceFrom}Suite{name, size, nightlyRate, features[]}Group{name, capacity, enrolled}ScheduleItem{time, activity}TeamMember{name, role, certifications[], quote, photo}BookingRequest{service, dates, pets[{name, species, breed, age, needs}], owner{name, email, phone}, notes}TourRequest{date, slot, name, email, phone}
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 Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project. ### Engineering baseline - TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind). - Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone. - Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only. - Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables. ### Data and auth baseline (full-stack templates) - Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views. - Store roles in a separate table checked by a security-definer function, never in a user-editable profile field. - Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs. - Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms. - Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data. ### Accessibility and UX baseline - Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any color change. - Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels. - Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labeled form fields, and alt text on meaningful images. - Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives. - Build mobile-first and test at 375px, 768px and 1280px. ### Content guardrails - Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text. - Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.
### Goal
Build "Fernbrook Lodge", a website for a small pet boarding and daycare business that caps groups at a dozen animals. It must communicate calm, personal care, explain each service in depth, show how full daycare groups are, and turn interest into either a guided booking request or an in-person tour.
### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Progress, ToggleGroup, Calendar/Popover, Select, Card, Tabs, Toast, Drawer via Vaul), lucide-react, date-fns. Framer Motion for reveals and wizard step transitions. react-hook-form + zod with one schema per wizard step. Capacity data is static JSON in v1. Booking and tour requests are sent by one serverless function; Supabase can later store requests and drive live capacity.
### Pages & layout
1. **Header**: leaf mark with serif name; nine links (the active one gets a mint pill); phone; green "Book a tour" pill; a slide-down overlay on mobile.
2. **Home**: split hero with a mint badge, a three-line serif headline whose middle line is green italic, subcopy, two buttons and three trust facts; on the right, a large rounded photo. Then four service cards, a "Small on purpose" 2x2 benefit grid, reviews and a visit CTA.
3. **Philosophy**: story and values.
4. **Boarding**: suite comparison cards.
5. **Daycare**: a vertical daily schedule timeline and capacity bars per playgroup.
6. **Grooming** and **Training**: package and tier cards with prices.
7. **Facility**: gallery and a "Book a tour" link.
8. **Team**: five bios with certifications and a personal quote.
9. **Contact**: form with a subject Select.
10. **Book**: a five-step wizard (Service, Dates, Pet details, Special needs, Review). **Tour**: a date plus a time-slot toggle grid.
### Design system
Tokens: `--background: #f7f2e9`, `--foreground: #1d2630`, `--primary: #0b7c57`, `--primary-foreground: #ffffff`, `--secondary: #e1f5eb`, `--accent: #f59b0a` (decorative), `--muted-foreground: #5b6472`, `--bar-amber: #c97f08`, `--bar-red: #b42318`, `--card: #faf8f4`, `--border: #e2dbcf`, `--radius: 0.75rem`. Fonts: Spectral 700/italic and M PLUS Rounded 1c 400/500. Scale: 72/48/28/20/16/14px. Spacing: 8px base, 112px sections. Shadow: `0 20px 40px -24px rgb(11 124 87/.25)`. Motion: 450ms fade-up, 250ms step slide, capacity bars fill over 800ms. Light only.
### Components & interactions
- Capacity bar: green under 70%, `--bar-amber` at 70 to 90%, `--bar-red` above that, always with a text label ("9 of 12 spots").
- Wizard: progress indicator, Back and Next; Next is disabled until the step is valid; the review step allows editing any section; submit has loading, success and error states.
- Time slots: fully booked slots are disabled with a "Full" label.
- Cards: hover lifts 4px and the "Learn more" arrow nudges.
- Toasts confirm contact and tour requests.
### Data & state
`services.ts`, `suites.ts`, `groups.ts` (`Group{name, capacity, enrolled}`), `schedule.ts`, `team.ts`. Wizard state is held in a single form context and persisted to sessionStorage so a refresh keeps progress. Seed five fictional staff and sample reviews labeled as examples.
### Accessibility
White on green `#0b7c57` passes AA, and bright amber is decorative only. Capacity bars use `role="progressbar"` with value text. Wizard steps announce "Step 2 of 5" and move focus to the step heading. Time slots form a radio group. Italic headline text stays readable at display size. Provide focus rings, reduced motion and meaningful alt text. Verified contrast: body #1d2630 on #f7f2e9 = 13.72:1; secondary #5b6472 on #f7f2e9 = 5.36:1; button #ffffff on #0b7c57 = 5.2:1; green text #0b7c57 on #f7f2e9 = 4.67:1; mint badge #0b7c57 on #e1f5eb = 4.58:1.
### Security
Use per-step zod validation and full validation again in the function. Add a honeypot and rate limit. Collect only necessary pet health notes and state how they are used. No payments on-site. Keep API keys server-side and use `rel="noopener noreferrer"` on external links.
### Performance & SEO
Code-split the wizard and tour routes, lazy-load photos, and add per-page meta plus LocalBusiness JSON-LD. Target Lighthouse 90+.
### Guardrails
- Use original copy and placeholder imagery only, with no real business names or certification logos.
- Do not present sample reviews as genuine.
- Minimize pet and owner data and do not persist it client-side after submission.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: all 11 pages route; the wizard validates each step and survives refresh; capacity bars show text values; tour slots disable when full; the mobile menu is keyboard accessible.