Snooze & Sniff

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

Gelasio is a warm, classic serif with a hotel-like bold, and the rounded geometric Quicksand keeps the pet hotel cheerful.

• GelasioHeadings: headline 72px 700, two-tone
• QuicksandBody: body 16-18px at 500, grey-blue secondary

Who it is for

• Pet boarding hotels and kennels
• Dog and cat owners planning travel
• Multi-species boarding centers
• Local pet-care franchises

Layout

1. White top nav: paw logo + serif name and small tagline left, links center (active in deep orange), phone and orange 'Book now' right
2. Split hero: orange eyebrow, two-line serif headline with orange second word, subcopy, Quick Booking card (check-in/out date pickers, pet type pill toggles, full-width orange button), trust dots; right a square puppy photo on a yellow blob
3. Services: six icon cards (daycare, cat boarding, grooming, vet care, transport, diets)
4. Rooms: three room cards with photo, 'Popular' badge, size tag, amenity icons, $/night price and a book button; an outline button to view all rooms
5. Why-us section
6. Tiered pricing (day/week/month) with featured plan
7. Testimonials with star ratings
8. Footer with newsletter signup; sticky mobile Book Now

Palette

cheerful, warm, trustworthy, friendly, energetic. It feels like a boutique hotel for pets with a sunny personality.

• background#fcfaf8
• text#1f242e
• primary orange#f97015
• secondary green#3b9b63
• accent yellow#ffcc33
• muted#f3f1ed
• border#e5e0dc
• primary strong (text, white-text 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

Gelasio Bold 700, 72px, two-tone (dark + deep orange #c2410c word)

Body

Quicksand 16 to 18px, weight 400, line-height 1.6; gray-blue #5b6472 secondary text

A classic serif for a hotel-like premium feel, softened by a round geometric sans and playful color accents.

Spacing and imagery

Full-width 1248px container, 3-column cards with 32px gaps, 96px sections, 12px radius, 10px buttons, soft card shadows.

Cut-out and studio photos of happy dogs, bright room interiors; organic yellow blob behind the hero image; round icon chips for amenities.

Components

• Top nav with phone + Book Now
• Quick Booking widget (date range, pet type toggle)
• Trust indicators with colored dots
• Hero image with organic blob
• Service icon cards
• Accommodation card (badge, size tag, amenity icons, price, CTA)
• Tiered pricing cards with featured plan
• Testimonial cards with stars and pet type
• Newsletter form
• Sticky mobile CTA
• Animated hamburger menu

Interactions

• Date pickers open calendar popovers (react-day-picker)
• Pet type pills toggle single selection
• Check Availability validates dates and routes to booking
• Sections animate in on scroll
• Card hover lift and image zoom
• Sticky mobile Book Now appears after hero
• Newsletter submit toast

Data

• Room{slug, name, size, image, amenities[], pricePerNight, popular}
• Service{title, icon, description}
• PricingPlan{name, period, price, features[], featured}
• Testimonial{author, petName, petType, rating, quote}
• BookingRequest{checkIn, checkOut, petType, roomId?, ownerName, email, phone, notes}

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 "Snooze & Sniff", a website for a pet boarding hotel that takes dogs, cats and small pets. The homepage should let owners start a booking immediately (dates and pet type), then persuade them with rooms, services, pricing and reviews. It should work equally well on phones, where most owners browse.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Popover, Calendar via react-day-picker, ToggleGroup, Card, Badge, Dialog, Toast), lucide-react, date-fns for date math. Framer Motion for reveal animations. react-hook-form + zod for the booking request and newsletter forms. There is no backend in v1: booking requests go to a serverless email function, and a Supabase table can be added later.

### Pages & layout
1. **Nav**: paw logo, serif name and tiny tagline; six links with the active one in `--primary-strong`; phone link; orange "Book now".
2. **Hero**: split layout. The left side has a `--primary-strong` uppercase eyebrow, a two-line serif headline with the second word in `--primary-strong`, and a subline. Below it, a white **Quick booking** card with check-in and check-out date pickers, pet-type pill toggles (Dogs, Cats, Small pets, Birds) and a full-width orange "Check availability" button, followed by three trust points with green dots. The right side has a square pet photo over a soft yellow organic blob.
3. **Services**: 6 icon cards.
4. **Rooms**: 3 cards with photo, optional "Popular" badge, size chip, amenity icon chips, price per night and "Book now". A "View all rooms" outline button.
5. **Why us**: image plus a checklist.
6. **Pricing**: Day, Week and Month tiers, with the middle tier featured.
7. **Reviews**: 3 cards with stars, quote, owner and pet type.
8. **Footer**: newsletter, hours, contact. A sticky "Book now" bar appears on mobile.
9. **Booking page**: prefilled from the widget, it adds owner details, room choice, notes and a price summary.

### Design system
Tokens: `--background: #fcfaf8`, `--foreground: #1f242e`, `--primary: #f97015`, `--primary-strong: #c2410c` (orange text, white-text buttons, active states), `--muted-foreground: #5b6472`, `--secondary: #3b9b63`, `--accent: #ffcc33`, `--muted: #f3f1ed`, `--border: #e5e0dc`, `--radius: 0.75rem`. Fonts: Gelasio 700 for headings and Quicksand for text. Scale: 72/48/28/20/16/13px; eyebrows 13px uppercase at 0.12em tracking. Spacing: 8px base, 96px sections. Shadows: `0 10px 30px -15px rgb(31 36 46/.25)`. Motion: 500ms fade-up and 200ms hovers. Define dark tokens but ship light.

### Components & interactions
- Date range: check-out cannot precede check-in; past dates disabled; nights count shown.
- Pet toggles: single select with a filled `--primary-strong` active state and white text.
- "Check availability": validation errors inline, then navigate with query params.
- Room card: hover lift and image zoom; the badge is not the only indicator of popularity (text too).
- Pricing: the featured card is scaled with a ribbon.
- Newsletter: shows success and duplicate-email messages.
- Loading: button spinner on submit. Error: toast with a retry option.

### Data & state
Typed data: `Room{slug, name, size, image, amenities, pricePerNight, popular}`, `Service`, `Plan{name, period, price, features, featured}`, `Review{author, petName, petType, rating, quote}`. Booking draft state lives in the URL and form. The price summary is computed with date-fns (`nights × rate`). Seed fictional reviews clearly marked as sample content.

### Accessibility
White on `#f97015` fails, so buttons use white on `#c2410c` or `#1f242e` text on orange. Date pickers must be keyboard operable and have labels, not placeholders. The toggle group needs `aria-label` and the amenity icons need text labels or tooltips with `aria-label`. Stars are rendered as "Rated 5 out of 5" text. Use focus rings, reduced-motion support and alt text on pet photos. Verified contrast: body #1f242e on #fcfaf8 = 14.94:1; secondary #5b6472 on #fcfaf8 = 5.74:1; button #ffffff on #c2410c = 5.18:1; orange text #c2410c on #fcfaf8 = 4.97:1.

### Security
Validate with zod on the client and in the function. Add a honeypot and rate limit on booking and newsletter forms. Never collect payment on this site; deposits later go through hosted Stripe Checkout. Keep API keys out of the client and collect only the contact details needed.

### Performance & SEO
Serve responsive WebP images and lazy-load below the fold. Use LocalBusiness JSON-LD, meta and OG tags, and semantic headings. Target Lighthouse 90+ on mobile.

### Guardrails
- Use original copy and placeholder photos only, with no trademarked names.
- Label sample reviews as examples and do not present them as real.
- Store no pet medical data in v1.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the widget validates dates and passes them to the booking page; the price summary is correct; the sticky mobile CTA works; buttons meet contrast; forms show success and error states.

Open the builderAll templatesThis palette on its own