Barkley Grand

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

Fredoka keeps the playful, rounded luxury, and Mukta is a calm, legible humanist body.

• FredokaHeadings: hero 72px 700, section titles 48px, gold two-tone
• MuktaBody: body 16-18px, warm grey

Who it is for

• Luxury pet resorts
• Dog owners seeking upscale boarding
• Pet hotels adding daycare and spa
• Marketing teams for pet franchises

Layout

1. Frosted sticky header: paw logo + rounded wordmark, centered links, phone and golden booking pill
2. Full-viewport hero: warm lounge photo with a cream wash, star rating line, rounded bold headline with gold highlight words, subcopy, a gold booking button and an outlined tour button, wave divider at bottom
3. Four-column trust badges (certified, 24/7 vet support, webcam, climate control)
4. Four service image cards (boarding, daycare, spa, training)
5. Three suite pricing cards with a 'Most popular' pill, $/night and check lists
6. Auto-rotating testimonial carousel with breed details
7. Gradient CTA banner with decorative shapes and two buttons
8. Four-column footer with address, phone, hours and links

Palette

luxurious, warm, playful, welcoming, polished. It feels like a boutique hotel lobby for dogs.

• background#fffcfa
• primary gold#d2a056
• text#2e2e2e
• dark secondary#1a1a1a
• section tint#f2eee9
• border#ebe6e0
• check green#15803d
• gold text / icons#8a6423
• secondary text#57534e

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

Fredoka Bold 700, 72px hero and 48px section titles, two-tone with gold words

Body

Mukta 16 to 18px, weight 400, line-height 1.6, warm gray #57534e

A rounded, friendly display face gives playful luxury; Mukta provides calm, legible body copy.

Spacing and imagery

1216px container, 4-column and 3-column grids, 96px sections, 16px card radius, pill buttons, soft wide shadows, wave SVG dividers.

Warm interior photography of dogs in upscale lounges; service cards with photos; icons in dark gold #8a6423; organic wave dividers.

Components

• Frosted sticky header with phone and Book Now
• Star rating proof line
• Two-tone rounded headline
• Dual CTA buttons
• Wave section divider
• Trust badge grid
• Service image cards
• Suite pricing cards with Most Popular pill
• Feature check lists
• Auto-rotating testimonial carousel
• Gradient CTA banner
• Four-column footer
• Mobile hamburger menu

Interactions

• Hero content animates in on load
• Sections fade up on scroll
• Service cards lift and zoom on hover
• Testimonials auto-rotate every 5s with dots
• Header gains frosted background on scroll
• Mobile menu toggle

Data

• Service{title, description, image}
• Suite{name, tagline, pricePerNight, features[], popular}
• TrustBadge{icon, title, subtitle}
• Review{author, petName, breed, rating, quote}
• ContactInfo{address, phone, hours[]}

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 "Barkley Grand", a single landing page for an upscale pet resort offering boarding, daycare, spa and training. Owners should feel their dog will be pampered. The page should establish trust fast (rating, badges), show clear suite prices, and keep "Book now" and "Schedule a tour" within reach at all times. It must be easy to extend later with a real booking system.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Badge, Sheet, Dialog), lucide-react. Framer Motion for the hero entrance and scroll reveals. Embla Carousel with autoplay for testimonials. React Router and TanStack Query are installed but idle, ready for booking pages. No backend in v1: the CTAs open a short booking-request Dialog (react-hook-form + zod) posted to a serverless email function.

### Pages & layout
1. **Header**: sticky, becomes frosted cream after scrolling. Paw icon and rounded wordmark, seven anchor links, phone and a gold pill "Book now". Hamburger Sheet on mobile.
2. **Hero**: full-viewport warm lounge photo with a cream-to-transparent wash from the left. A star row with a rating line, a two-line rounded headline with the last words in gold, a subline, a gold "Book a stay" button and an outlined "Schedule a tour" button, then a wave SVG into the next section.
3. **Trust**: four badge cards with `--primary-strong` icons.
4. **Services**: four image cards.
5. **Suites**: three pricing cards (Standard, Deluxe with a "Most popular" pill, Luxury), each with a tagline, a large gold price per night and a checklist.
6. **Reviews**: an auto-rotating carousel with stars, quote, owner and breed.
7. **CTA**: gradient banner (gold to amber) with decorative circles and two buttons.
8. **Footer**: four columns with address, phone, hours and links.

### Design system
Tokens: `--background: #fffcfa`, `--foreground: #2e2e2e`, `--primary: #d2a056` (gold), `--primary-strong: #8a6423`, `--secondary: #1a1a1a`, `--tint: #f2eee9`, `--border: #ebe6e0`, `--success: #15803d`, `--muted-foreground: #57534e`, `--radius: 1rem`. Fonts: Fredoka 600/700 for display and Mukta 400/500 for text. Scale: 72/48/28/20/16/14px. Spacing: 8px base, 96px sections. Shadow: `0 20px 40px -20px rgb(46 46 46/.18)`. Motion: hero stagger 120ms, reveals 500ms `ease-out`, carousel 5s interval. Light only.

### Components & interactions
- Buttons: gold with dark text (not white, for contrast); hover deepens; active presses; visible focus ring; the Dialog submit shows loading.
- Service card: hover lifts 4px and zooms the image 1.05.
- Suite card: the popular card is scaled 1.03 with a gold border, and each card's CTA opens the booking Dialog prefilled with that suite.
- Carousel: pauses on hover and focus, and has dots and previous/next buttons.
- Booking Dialog: dates, pet name, size, suite, contact details; success and error states.

### Data & state
Typed arrays: `Service{title, body, image}`, `Suite{name, tagline, price, features, popular}`, `Badge{icon, title, subtitle}`, `Review{author, pet, breed, rating, quote}`. Only the Dialog form is stateful. Seed reviews labelled as sample content with fictional names.

### Accessibility
White on gold `#d2a056` is only about 2.3:1, so use `#2e2e2e` text on gold buttons and `--primary-strong` for gold text on cream (price numerals are large, but still use a darker gold). The hero wash is at least 85% cream behind the text column, which keeps headline and subline above 9:1. The carousel needs a pause control, `aria-live="off"` while autoplaying, and labelled slides. Stars need text equivalents. The Sheet and Dialog trap focus. Respect reduced motion. Verified contrast: body #2e2e2e on #fffcfa = 13.29:1; button #2e2e2e on #d2a056 = 5.76:1; dark gold #8a6423 on #fffcfa = 5.23:1; hero on wash #2e2e2e on #d9d6d5 = 9.4:1.

### Security
Validate the booking request with zod on the client and in the function, add a honeypot and rate limit, and keep API keys in function env. Collect only contact and stay basics. The rating line is placeholder copy, so do not wire it to fake review markup.

### Performance & SEO
Serve the hero image responsively with a preload and lazy-load the rest. Inline the wave SVG. Add LocalBusiness JSON-LD (no AggregateRating unless real), meta and OG tags, and one H1. Target Lighthouse 90+ on mobile.

### Guardrails
- Use original copy and placeholder imagery only, with no trademarked names.
- Do not fabricate ratings or reviews as real.
- Collect no pet medical details in v1.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the header frosts on scroll; suite CTAs prefill the Dialog; the carousel pauses and is keyboard operable; gold buttons pass contrast; the page is responsive from 360px.

Open the builderAll templatesThis palette on its own