Romp Club

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

Kanit is a lively geometric family with many weights and a little extra character, so a single family still carries the whole page.

• KanitHeadings: hero 60px 700, section titles 48px, orange keywords
• KanitBody: body 16px regular

Who it is for

• Dog daycare operators
• Boarding kennels
• Busy working dog owners
• Local pet service startups

Layout

1. Sticky header (blurs with shadow on scroll): paw logo + two-tone name, pill-highlighted links, phone and orange booking button
2. Full-bleed hero photo of a running dog under a dark gradient: bold white two-line headline with an orange last word, subcopy, an orange booking button and an outlined secondary button
3. Six credential badges row (experience, webcams, climate control, licensed)
4. Four service cards with image, description and a from-price link
5. How-it-works: three steps with numbered icon circles joined by dashed connectors
6. Three pricing tiers (single day, 10-day pack, monthly unlimited) with Most Popular badge
7. Three star-rated testimonials
8. Four-column footer with hours

Palette

lively, friendly, trustworthy, bright, active. It feels like playtime with safety built in.

• background#fcfaf8
• text#181d25
• primary orange#f97415
• secondary sky blue#0da2e7
• accent green#7eb52c
• muted beige#f5f2f0
• border#e9e6e2
• primary strong (buttons, orange text)#c2410c
• hero keyword on dark#fb923c
• secondary text#5f6672

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

Kanit Bold 700, 60px hero and 48px section titles, orange keyword highlight

Body

Kanit 16px regular, line-height 1.6; secondary text #5f6672

A single geometric family used across six weights; hierarchy comes from weight and orange accents.

Spacing and imagery

1216px container, 4-column service grid, 3-column steps and pricing, 96px sections alternating white and beige, 12px radius.

High-energy outdoor dog action photography with dark vignette; service photos in card tops; line icons inside peach circles with orange number badges.

Components

• Scroll-aware blur header
• Pill active nav link
• Dark photo hero with dual CTAs
• Credential badge grid
• Service card with price link
• Numbered step circles with dashed connectors
• Pricing tier cards with Most Popular badge
• Testimonial cards with stars
• Four-column footer with hours
• Animated mobile menu

Interactions

• Header blurs and gains shadow on scroll
• Hero tagline animates in
• Staggered fade-up reveals on sections
• Service and pricing card hover lift
• Mobile slide-down menu closes on navigation
• Arrow nudge on price links

Data

• Service{title, image, description, startingPrice, unit}
• Step{n, icon, title, body}
• Plan{name, price, unit, features[], popular}
• Badge{icon, label}
• Review{author, dog, rating, quote}

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 "Romp Club", a landing page for a local dog daycare that also offers boarding, grooming and training. Busy owners need to see at a glance that the place is safe, fun and fairly priced, understand how to get started in three steps, and book quickly from any section.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Badge, Sheet, Button), lucide-react. Framer Motion for the hero entrance and staggered reveals. No backend: "Book now" links to an external booking tool or a `mailto:` until a booking system exists. Build the colors as HSL variables so a dark theme can be added later.

### Pages & layout
1. **Header**: sticky; transparent over the hero, then white with blur and shadow after 40px. Paw icon and two-tone name, eight links with a peach pill for the active one, a phone link and an orange "Book now".
2. **Hero**: full-bleed action photo with a left-to-right dark gradient, a two-line bold white headline whose last word is orange, a subline, an orange "Book now" and a white-outlined "Learn more".
3. **Credentials**: six small icon badges in a responsive grid.
4. **Services**: four cards with a photo, title, two-line description and a `--primary-strong` "From $X/day →" link.
5. **How it works**: three steps, each a peach circle with an orange line icon and a numbered orange badge, joined by dashed connectors (hidden on mobile), then title and text.
6. **Pricing**: Single day, 10-day pack and Monthly unlimited, with the middle one highlighted.
7. **Reviews**: three cards with stars.
8. **Footer**: brand, contact, links and hours table.

### Design system
Tokens (HSL-ready): `--background: #fcfaf8`, `--foreground: #181d25`, `--primary: #f97415`, `--primary-strong: #c2410c`, `--secondary: #0da2e7`, `--accent: #7eb52c`, `--muted: #f5f2f0`, `--muted-foreground: #5f6672`, `--hero-accent: #fb923c` (hero keyword on dark only), `--border: #e9e6e2`, `--radius: 0.75rem`. Font: Kanit 400/500/600/700. Scale: 60/48/24/18/16/14px; eyebrows 13px uppercase in `--primary-strong` at 0.1em. Spacing: 8px base, 96px sections alternating white and beige. Shadow: `0 10px 30px -12px rgb(24 29 37/.15)`. Motion: 500ms fade-up with a 100ms stagger; 200ms hovers.

### Components & interactions
- Primary button: `--primary-strong` fill with white text; hover darkens further; focus ring; active scale 0.98.
- Service card: hover lifts it and nudges the arrow; the whole card is keyboard focusable.
- Step connectors are decorative (`aria-hidden`) and the steps are an ordered list.
- Pricing: "Most popular" badge on the featured card, which is also 2px outlined; each card has its own CTA.
- Mobile menu: slide-down panel with scroll lock that closes on link click and Escape.

### Data & state
Typed arrays in `content.ts`: `Service{title, image, body, from, unit}`, `Step`, `Plan{name, price, unit, features, popular}`, `Badge`, `Review{author, dog, rating, quote}`. The only state is menu open and header scrolled. Seed sample reviews with fictional names, marked as examples.

### Accessibility
White on `#f97415` is about 2.8:1, so use `--primary-strong` (#c2410c, about 5.2:1) for white-text buttons and orange text on light backgrounds. The hero gradient is at least 75% black behind the text, and the keyword uses `--hero-accent` there. Sky blue and green are decorative only. Stars need text alternatives, and the icon badges need visible labels. Provide focus rings, a skip link and reduced-motion support. Verified contrast: secondary #5f6672 on #fcfaf8 = 5.56:1; button #ffffff on #c2410c = 5.18:1; orange text #c2410c on #fcfaf8 = 4.97:1; hero keyword #fb923c on #404040 = 4.58:1.

### Security
The page is static. External booking links use `rel="noopener noreferrer"` and there are no secrets in source. If a contact form is added later, validate it with zod and protect it with a honeypot and rate limiting.

### Performance & SEO
Preload a compressed hero (WebP, under 200 KB) and lazy-load the service photos. Add LocalBusiness JSON-LD with hours, meta and OG tags, and a single H1. Target Lighthouse 95+.

### Guardrails
- Use original copy and placeholder photos only, with no trademarked names or accreditation logos.
- Do not present sample reviews as real.
- Collect no personal data on this page.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the header changes on scroll; all CTAs work; steps read correctly to screen readers; button contrast passes AA; the layout works from 360px to 1440px.

Open the builderAll templatesThis palette on its own