Sunnyside Kennels

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

Maven Pro is a friendly, slightly rounded geometric sans with a solid ExtraBold, keeping the kennel bright, honest and upbeat.

• Maven ProHeadings: hero 72px 800, section titles 36px bold
• Maven ProBody: body 16-18px, blue links, orange booking actions

Who it is for

• Pet boarding and daycare operators
• Owners who want visibility into their pet's stay
• Returning boarding clients
• Small pet-care teams

Layout

1. White header: round blue dog-face logo + wordmark, pill-active links (Home, Services, Why Us, About Us, Gallery), orange booking pill, blue log-in text link, phone
2. Full-bleed hero: sunny backyard dog photo with dark wash, centered bold white two-line headline, subcopy, an orange booking button and a glass-outlined gallery button
3. Stats row (boarders, rating, webcams, years)
4. 4-column rounded photo grid of recent guests with an outline gallery button
5. Reviews with aggregate rating breakdown
6. Service cards with pricing
7. Final CTA
8. Inner pages: gallery with activity filters + lightbox, about with staff and company timeline, booking wizard, auth, client dashboard with webcams and review submission

Palette

sunny, transparent, upbeat, trustworthy, modern. It is bright and honest, as if you could watch your dog play all day.

• background#f9fafb
• text#131820
• primary blue#3c83f6
• CTA orange#f97015
• card#ffffff
• muted#f3f5f7
• border#e1e7ef
• link / small text blue#2563eb
• CTA strong (filled buttons)#c2410c
• secondary text#5b6472

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

Maven Pro ExtraBold 800, 72px hero; 36px Bold section titles

Body

Maven Pro 16 to 18px, weight 400, line-height 1.6; secondary text #5b6472

One modern geometric-humanist family; blue for navigation and links, orange reserved for booking actions.

Spacing and imagery

Full-width 1248px grid, 4-column photo grid with 16px gaps, 96px sections, 12px radius, pill CTAs.

Bright, saturated photos of dogs and cats playing, swimming, being groomed and celebrating; rounded tiles in a grid/masonry with lightbox.

Components

• Header with Book Now, Login and phone
• Full-bleed hero with dual CTAs
• Stats row
• Rounded photo grid
• Gallery filter pills
• Lightbox with pet name, breed, activity
• Aggregate rating summary with category bars
• Review cards
• Service cards with features and price
• Staff profile cards
• Alternating company timeline
• Four-step booking wizard
• Auth screens
• Client dashboard with webcam cards (live badge) and bookings
• Review submission form with star picker

Interactions

• Gallery filters by activity (playtime, naptime, grooming, swim, party)
• Lightbox navigation with keyboard
• Booking wizard with validation and payment step placeholder
• Star rating picker
• Contact form writes to DB with success confirmation
• Scroll fade-up animations
• Session-aware header (Login vs Dashboard)

Data

• Service{id, name, description, features[], price, unit}
• GalleryPhoto{id, src, petName, breed, activity, caption}
• Review{id, userId, rating, cleanliness, staff, communication, value, body, approved, createdAt}
• StaffMember{name, title, certifications[], years, photo}
• Booking{id, userId, serviceId, start, end, pets[], notes, status}
• ContactMessage{name, email, phone, petName, service, message}
• Profile{userId, name, 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 "Sunnyside Kennels", a pet boarding and daycare website built around transparency. Prospective clients see lots of real-feeling photos, honest aggregate ratings and clear service prices, then book through a guided wizard. Signed-in clients get a dashboard with their bookings, webcam feed placeholders and a way to leave a review.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Tabs, ToggleGroup, Dialog, Progress, Calendar, Form, Toast), lucide-react, date-fns. Framer Motion for reveals. react-hook-form + zod. TanStack Query. Supabase: Auth (email and password), Postgres (services, gallery_photos, reviews, staff, bookings, contact_messages, profiles), Storage (gallery images), and an Edge Function that validates bookings (a Stripe Checkout deposit can be added later).

### Pages & layout
1. **Header**: round blue logo and wordmark, five links with a light-blue `#dbeafe` pill with dark text on the active one, an orange "Book now" pill, a blue "Log in" link (which becomes "Dashboard" when signed in) and the phone number.
2. **Home**: full-bleed sunny photo hero with a dark wash, a centered two-line bold headline, a subline, an orange "Book now" and a glass-outlined "View gallery". Then a stats row, a 4-column rounded photo grid with a "Full gallery" button, a reviews block with an overall score, category bars and three cards, service cards with price and features, and a CTA.
3. **Gallery**: filter pills by activity plus a masonry grid with a lightbox showing pet name, breed and activity.
4. **About**: staff cards with certifications and years, and an alternating milestone timeline.
5. **Book**: four steps (Service, Dates, Pet info, Review and deposit notice).
6. **Auth**: sign in and sign up.
7. **Dashboard**: upcoming and past bookings, three webcam cards with a "Live" badge (placeholder streams) and a review form with a star picker.
8. **Contact**: seven-field form saved to the DB.

### Design system
Tokens: `--background: #f9fafb`, `--foreground: #131820`, `--primary: #3c83f6` (use `#2563eb` for small text), `--cta: #f97015`, `--cta-strong: #c2410c`, `--card: #ffffff`, `--muted: #f3f5f7`, `--muted-foreground: #5b6472`, `--border: #e1e7ef`, `--radius: 0.75rem`. Font: Maven Pro 400/600/700/800. Scale: 72/36/24/18/16/14px. Spacing: 8px base, 96px sections, 16px grid gaps. Motion: 500ms fade-up; lightbox 200ms scale and fade.

### Components & interactions
- Filter pills: ToggleGroup with `aria-pressed`, a count per filter, and an empty state.
- Lightbox: arrow keys, Escape, focus trap and a caption.
- Rating summary: overall score, count and four category bars with numeric labels.
- Star picker: radio group of 5 with keyboard arrows and a hover preview.
- Wizard: progress bar; per-step validation; loading and error states on submit.
- Webcam card: shows a "Live" badge, falls back to an "Offline" state, and never autoplays audio.
- Session-aware header and protected routes that redirect to login.

### Data & state
Tables: `services`, `gallery_photos(id, path, pet_name, breed, activity, caption)`, `reviews(id, user_id, rating, cleanliness, staff, communication, value, body, approved, created_at)`, `staff`, `bookings(id, user_id, service_id, start_date, end_date, pets jsonb, notes, status)`, `contact_messages`, `profiles(user_id, name, phone)`. Aggregate ratings come from a view over approved reviews. Flag demo reviews with `is_demo`.

### Accessibility
White on orange `#f97015` fails, so filled buttons use `--cta-strong`, and links use `#2563eb`. The hero wash is at least 65% black behind the text. Gallery images need alt text built from pet name and activity. Bars and stars have text values. The wizard announces its steps and form errors are tied to their fields. Keep focus visible on photos and pills. Respect reduced motion. Verified contrast: secondary #5b6472 on #f9fafb = 5.72:1; links #2563eb on #f9fafb = 4.95:1; button #ffffff on #c2410c = 5.18:1; hero #ffffff on #595959 = 7.0:1.

### Security
RLS: `services`, `gallery_photos`, `staff` and approved `reviews` are public-read. Users can insert reviews only for themselves (`user_id = auth.uid()`), and reviews start unapproved and are moderated by an admin role. `bookings` are owner read and insert, with admin access to all. `contact_messages` accept anon insert via the Edge Function and are admin-read only. Validate with zod on the client and server, rate-limit and honeypot public forms, and escape review text when rendering. Gallery uploads are admin-only images under 5 MB. Payments later go through hosted Checkout only.

### Performance & SEO
Serve gallery thumbnails with lazy loading and fixed aspect ratios, and code-split the dashboard. Add LocalBusiness JSON-LD (include AggregateRating only from real approved reviews).

### Guardrails
- Use original copy and placeholder imagery only, with no trademarked names.
- Keep demo reviews flagged and excluded from structured data.
- Do not store pet medical records.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: gallery filters and the lightbox work by keyboard; aggregates are computed from approved reviews; users see only their own bookings; the wizard validates; CTA contrast passes.

Open the builderAll templatesThis palette on its own