Hearthside Pet Care

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

Caveat stays for the personal hero, Libre Baskerville is a warmer, homier serif for sections than Playfair Display, and DM Sans stays friendly for everything else.

• CaveatHandwriting: short hero headline 96px only
• Libre BaskervilleHeadings: section titles 36px bold
• DM SansBody: body 16px, tracked uppercase eyebrows

Who it is for

• Independent pet sitters and dog walkers
• Home-based boarding hosts
• Pet parents seeking a personal sitter
• Returning clients managing bookings

Layout

1. Transparent header over hero: paw logo + two-tone serif name, pill-active links (About, Services, My Home, Reviews, Calendar, FAQ, Contact), an outlined contact button and a teal booking button
2. Hero: warm living-room photo with dog and cat, tracked teal eyebrow with location, large handwritten-script headline, subcopy, bone-shaped booking button, wave divider
3. Personal first-person intro with photo and experience
4. Services 2x2 cards with icon tiles and 'From $/unit' prices, an outline pricing button
5. Peach wave section with a home photo gallery with blob shapes
6. Reviews with star breakdown and service filters
7. Availability calendar with legend
8. Booking CTA; FAQ with tabs + search; contact; client dashboard (bookings, pet profiles, messages)

Palette

cozy, personal, gentle, homey, trustworthy. It feels like a friend's home that happens to take bookings.

• background#fefcfb
• primary teal#83c3bd
• secondary peach#f6c6b6
• text#2e2e2e
• blush section#fbeee9
• muted#f4f2f1
• border#e7e3df
• teal text#2d7973
• secondary text#5f5a55

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

Caveat handwritten script 96px for the short hero headline only (fallback: cursive), never body text; Libre Baskerville Bold 36px for section titles

Body

DM Sans 16px, weight 400, line-height 1.6; short tracked uppercase eyebrows in #2d7973

Three voices: a personal handwritten hero, an elegant serif for sections, and a friendly sans for everything else.

Spacing and imagery

Centered ~770px card grids, 96px sections, wave and blob SVG dividers, 12px radius, 10px buttons.

Warm golden-light interior photos with pets; organic blob and wave shapes in peach and gray; icon tiles in mint.

Components

• Transparent header with dual CTAs
• Script-font hero with bone-shaped CTA
• Wave dividers
• Personal intro card
• Service cards with icon tiles and prices
• Home photo gallery with labels
• Reviews with star breakdown bar chart and filters
• Monthly availability calendar with legend
• Daily routine timeline
• Pet compatibility checklist
• FAQ with category tabs and search
• Four-step booking wizard
• Client dashboard tabs (bookings, pets, messages)

Interactions

• Wizard: service, dates, pet details, review
• Calendar shows available/booked/limited colors
• Review filters by service and star level
• FAQ real-time search and tab switching
• Scroll animations on sections
• Header solidifies on scroll
• Contact form with response time note

Data

• Service{slug, name, description, priceFrom, unit, includes[]}
• Availability{date, status: open|limited|booked}
• Review{author, service, rating, text, date, petName}
• Booking{id, clientId, serviceId, start, end, pets[], notes, status}
• Pet{id, ownerId, name, species, breed, age, needs, vaccinated}
• Message{id, bookingId, from, body, createdAt}
• FAQ{category, question, answer}

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 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 "Hearthside Pet Care", a personal booking site for one independent pet sitter who boards pets at home and offers walks, drop-ins and house sitting. Pet parents get to know the sitter and home, check dates, read reviews and book via a short wizard; returning clients sign in for bookings, pets and messages.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Calendar, Input, Select, Progress, Card, Dialog, Toast), lucide-react, date-fns. Framer Motion for reveals. Recharts for the star-breakdown bar chart. react-hook-form + zod for the wizard and contact. TanStack Query. Supabase: Auth (email magic link for clients, a sitter role), Postgres (services, availability, bookings, pets, reviews, messages, faqs), Storage (pet photos), and an Edge Function to confirm bookings and notify the sitter.

### Pages & layout
1. **Header**: transparent over the hero; a small paw icon and a two-tone serif name; seven links with a mint pill for the active one; an outlined "Contact" and a teal "Book now".
2. **Home hero**: a warm living-room photo, a tracked teal eyebrow with the service area, a large handwritten-script headline, a subline and a bone-shaped CTA, ending in a wave divider.
3. A personal intro ("Hi, I'm [sitter]") with portrait, years of experience and area.
4. Services: 2x2 cards with icon tile, name, one-liner and teal "From $X/unit", plus a "Full pricing" outline button.
5. A blush "Where your pet stays" home gallery, a reviews teaser and a CTA.
6. **Pages**: About (with routine timeline and house rules/compatibility checklist), Services and pricing, My home, Reviews (breakdown chart and filters), Calendar, FAQ (tabs and search), Contact, Book (a four-step wizard), and Dashboard (Bookings, Pets, Messages tabs).

### Design system
Tokens: `--background: #fefcfb`, `--foreground: #2e2e2e`, `--primary: #83c3bd` (mint-teal; pair with dark text), `--primary-strong: #2d7973` (for teal text and links), `--secondary: #f6c6b6`, `--blush: #fbeee9`, `--muted: #f4f2f1`, `--muted-foreground: #5f5a55`, `--border: #e7e3df`, `--radius: 0.75rem`. Fonts: Caveat for the hero only, Libre Baskerville 700 for section headings and DM Sans for body. Scale: 96 (script)/36/24/18/16/13px. Spacing: 8px base, 96px sections, card grids at 780px max. Motion: 500ms fade-up; wave dividers are static SVG.

### Components & interactions
- Calendar: month grid with Available, Limited and Booked states shown by color plus a pattern or icon, and a legend. Past dates are disabled.
- Wizard: Service, Dates, Pets (add multiple), Review. It validates each step, shows a price estimate, and on submit shows loading, then a success screen or a conflict error if the dates were just taken.
- Reviews: filter chips by service and rating, a chart with a data table fallback, and an empty state.
- FAQ: debounced search with a "No results" state.
- Dashboard: bookings list with status badges, a pet profile form with photo upload, and a message thread per booking.

### Data & state
Tables: `services`, `availability(date, status)`, `bookings(id, client_id, service_id, start_date, end_date, notes, status)`, `pets(id, owner_id, name, species, breed, age, needs, photo_path)`, `booking_pets`, `reviews(author_display, service_id, rating, body, created_at, approved)`, `messages(id, booking_id, sender_id, body, created_at)`, `faqs`. Seed a fictional sitter and demo reviews.

### Accessibility
Teal `#83c3bd` has low contrast with white, so use dark text on teal buttons and `--primary-strong` for teal text such as prices and eyebrows. Hero text sits on a gradient at least 60% black. Script text is display only; the H1 must still be real text and short. Calendar cells need full date and status labels. The chart needs a table alternative. The wizard announces its steps and form errors are linked to their fields. Respect reduced motion. Verified contrast: body #2e2e2e on #fefcfb = 13.28:1; button #2e2e2e on #83c3bd = 6.79:1; teal text #2d7973 on #fefcfb = 5.01:1; teal on blush #2d7973 on #fbeee9 = 4.52:1.

### Security
RLS: clients can read and write only their own `pets`, `bookings` and `messages`. The sitter role reads all of them. `availability`, `services`, `faqs` and approved `reviews` are public-read. Bookings are created through the Edge Function, which re-checks availability. Validate everything with zod on the client and server. Pet photos are limited to JPEG, PNG or WebP under 5 MB in a private bucket with signed URLs. Rate-limit and honeypot the contact form.

### Performance & SEO
Code-split the dashboard and wizard. Lazy-load gallery images. Add LocalBusiness JSON-LD and per-page meta.

### Guardrails
- Use original copy and placeholder imagery only, with no trademarked names.
- Do not present seeded reviews as genuine.
- Collect only the pet and owner data the sitter needs.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the calendar reflects DB availability; the wizard prevents double-booking; clients see only their own data; FAQ search works; teal UI text passes contrast.

Open the builderAll templatesThis palette on its own