PawPoint Network

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

Brygada 1918 is a classic book serif with real italics and a semibold for card titles, signalling premium care, and Hind keeps nav and forms neutral.

• Brygada 1918Headings: hero 80px 400 with italic first line, section titles 36px, card titles semibold
• HindBody: body 16px, navigation, search and forms

Who it is for

• Multi-location pet care franchises
• Pet owners looking for a nearby center
• Prospective franchisees
• Regional marketing teams

Layout

1. Dark teal utility bar: location count and phone left, Login / Sign Up right
2. Transparent header over hero: paw + two-tone serif wordmark, links (Services, Locations, About, Blog, Franchise, Contact), an outlined center-finder button and a coral booking button
3. Hero: photo of staff with dogs in an indoor play area under a dark wash, pill badge, italic serif headline line plus bold coral second line, subcopy, glass search bar with pin icon and coral search button, carousel dots
4. Four service cards overlapping the hero bottom with pastel icon tiles
5. Trust / welcome stats section
6. Getting-started section: four steps: white icon circles on a connecting line with coral number badges
7. Testimonials grid with stars
8. Split dual CTA with slide-in animation
9. Footer with newsletter signup

Palette

premium, welcoming, established, organized, warm. It reads like a national brand with local warmth.

• background#ffffff
• primary deep teal#295151
• utility bar#1e3a3a
• accent coral#f49c7c
• soft section#f7f7f7
• text#1a1a1a
• amber CTA panel#fcc98a
• accent strong#b85a3a
• input border#6b7280

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

Brygada 1918 400, 80px hero (italic first line), 36px section titles; card titles Brygada 1918 semibold

Body

Hind 16px, weight 400, line-height 1.6

A classic serif with italics signals premium care; Hind keeps navigation, search and forms neutral.

Spacing and imagery

1216px container, 4-column grids, 96px sections, cards overlapping section edges, 10-12px radius, soft shadows.

Bright indoor facility photography with uniformed staff and playing dogs in a hero carousel; pastel icon tiles; white icon circles with coral line icons.

Components

• Utility bar with location count and auth links
• Transparent header with dual CTAs
• Hero image carousel with dots
• Glass location search bar (zip/city)
• Overlapping service cards with pastel icon tiles
• Trust stats
• Four-step process with connector line and numbered badges
• Testimonial cards with ratings
• Split dual CTA panels
• Newsletter footer
• Mobile slide-down drawer
• Locations finder page with list/map

Interactions

• Hero images rotate with dot indicators
• Location search submits zip/city and routes to results
• Service cards lift on hover with smooth scroll reveals
• Split CTA panels slide in from sides
• Header gains backdrop blur on scroll
• Newsletter subscribe feedback
• Mobile hamburger drawer

Data

• Location{id, slug, name, address, city, state, zip, lat, lng, phone, hours, services[]}
• Service{slug, name, description, icon, fromPrice}
• Testimonial{author, location, rating, quote}
• Post{slug, title, excerpt, cover, date}
• FranchiseInquiry{name, email, phone, market, capital, message}
• Booking{locationId, serviceSlug, date, petName, ownerEmail}

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 "PawPoint Network", the national website for a franchise of pet care centers. Its main job is to connect a pet owner with the nearest center fast (zip or city search), then explain the services and the onboarding process. Secondary goals are capturing franchise leads and newsletter signups.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Input, Button, Card, Carousel via Embla, Sheet, Calendar via react-day-picker, Form, Toast), lucide-react. Framer Motion for reveals and the split-CTA slide-ins. React Router with about 18 routes: home, services and service detail, locations with search results, location detail, book, about, blog and post, franchise, contact, and login/signup placeholders. v1 uses typed JSON for locations with a client-side distance sort. Production should move to Supabase Postgres with PostGIS and a geocoding Edge Function.

### Pages & layout
1. **Utility bar**: dark teal, with location count and phone left and Log in / Sign up right.
2. **Header**: transparent over the hero, then white with blur. Paw icon and two-tone serif wordmark, six links, an outlined "Find a center" and a coral "Book now".
3. **Hero**: carousel of facility photos under a dark wash. A pill badge, a serif headline with an italic first line and a coral second line, a subline, and a glass search bar (pin icon, zip or city input, coral "Find" button) with carousel dots.
4. **Services**: four white cards overlapping the hero's bottom edge, each with a pastel icon tile, serif title and one-line description.
5. Welcome stats, then **How it works**: four steps with white icon circles on a horizontal connector and coral number badges with dark `#1a1a1a` numerals.
6. Testimonials (3), then a split CTA (book a meet-and-greet or explore franchising).
7. Footer with newsletter.
8. **Locations**: results list sorted by distance with an optional map. Each location detail page has hours, services, a phone number and a book CTA.

### Design system
Tokens: `--background: #ffffff`, `--foreground: #1a1a1a`, `--primary: #295151` (deep teal), `--utility: #1e3a3a`, `--accent: #f49c7c` (coral), `--accent-strong: #b85a3a`, `--secondary: #f0f5f5`, `--muted: #f7f7f7`, `--warm: #fcc98a`, `--border: #e5e7eb` (decorative), `--input-border: #6b7280`, `--radius: 0.75rem`. Fonts: Brygada 1918 400/600/italic for display and Hind for UI. Scale: 80/36/24/18/16/13px. Spacing: 8px base, 96px sections; the service cards use a -80px top margin. Motion: carousel 6s, reveals 500ms, slide-ins 600ms.

### Components & interactions
- Location search: accepts a 5-digit zip or a city name (zod-validated). States: empty prompt, invalid input, loading, no results with a "Request a center" link, and a results list with distance.
- Service cards: hover lifts them; the whole card is one link.
- Process steps: an ordered list; the connector is decorative.
- Carousel: pause on hover and focus, labelled dots, and no autoplay under reduced motion.
- Franchise form: name, email, phone, market and capital range, with success and error states.
- Newsletter: shows success and duplicate messages.

### Data & state
`locations.json`: `Location{id, slug, name, address, city, state, zip, lat, lng, phone, hours, services}`, with a zip-centroid lookup for distance. Also `services.ts`, `testimonials.ts` and `posts.ts`. Search state lives in the URL (`/locations?q=`). Seed about 40 fictional locations.

### Accessibility
White on coral `#f49c7c` is too low, so use dark text on coral buttons, or `--accent-strong` with white. The hero wash is at least 65% black behind the text, and the glass search must keep a visible label (sr-only is acceptable) and a clear focus ring. Header buttons must remain visible on the transparent state (avoid white-on-white). Results are announced via `aria-live`. The map is optional and supplemented by the list. Respect reduced motion. Verified contrast: button #1a1a1a on #f49c7c = 8.2:1; teal #ffffff on #295151 = 8.79:1; amber panel #1a1a1a on #fcc98a = 11.49:1; hero #ffffff on #595959 = 7.0:1; input border #6b7280 on #ffffff = 4.83:1.

### Security
Validate search, franchise and newsletter inputs with zod on the client and in the serverless handler. Add a honeypot and rate limit on forms. The geocoding API key lives server-side only. Auth routes are placeholders until Supabase Auth is wired up, with no fake login. External map links use `rel="noopener noreferrer"`.

### Performance & SEO
Pre-render or add per-location meta (title "Pet care in {city}") with LocalBusiness JSON-LD per location and a sitemap. Lazy-load carousel images after the first. Code-split routes.

### Guardrails
- Use original copy and placeholder imagery only, with no real franchise names or logos.
- Do not show sample testimonials or location counts as verified facts.
- Store only what each form needs.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: zip and city search returns sorted results with an empty state; every location page renders from data; the header CTAs are visible in both states; forms validate; coral buttons pass contrast.

Open the builderAll templatesThis palette on its own