Fernbrook Lodge

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'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

1. Fixed cream header: leaf icon + serif name, nine links with pill-highlighted active item, phone and green tour-booking pill
2. 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
3. Four service cards with text links
4. Small-group 2x2 benefit cards with mint icon circles on a soft radial glow
5. Testimonials
6. Visit CTA
7. Inner pages: philosophy, boarding suites, daycare with daily schedule timeline and capacity bars, grooming packages, training tiers, facility, team bios, contact
8. 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

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour 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.

Copy the baseline and build prompt

### 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 colour 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, labelled 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 labelled 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.

Open the builderAll templatesThis palette on its own