Sudsbury

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

Prompt is a rounded-feeling geometric with a strong ExtraBold for friendly punch, and Atkinson Hyperlegible Next keeps prices and tables very clear.

• PromptHeadings: hero 60px 800, section titles 36px bold
• Atkinson Hyperlegible NextBody: body 16px, pricing tables

Who it is for

• Grooming salons that also board
• Pet resorts and spas
• Dog and cat owners comparing prices
• Multi-service pet businesses

Layout

1. Header: round teal bathtub logo + two-tone name, pill-highlighted links (Home, Grooming, Spa, Boarding, Packages, Gallery, About, Contact), phone and coral booking button; transparent over hero then white
2. Full-width photo hero with dark wash: centered bold sans headline with a teal second line, subcopy, coral grooming button and translucent boarding button
3. Four trust badge cards (certified groomers, 24/7 care, climate control, vet approved)
4. Service cards (grooming salon, spa, boarding, day play)
5. Coral gradient promo banner for combo savings with a white packages button
6. Testimonials with stars and avatars
7. Loyalty rewards teaser
8. Contact block; inner pages for pricing tables, packages, loyalty, gallery, about, contact with map and hours

Palette

cheerful, clean, friendly, upbeat, professional. It feels like a bright pet spa with clear prices.

• background cream#fffaf0
• primary teal#2ba195
• accent coral#ff6b6b
• text#1f2937
• teal tint#edf7f6
• hero headline mint#5eead4
• star yellow#fbbf24
• primary strong (buttons, links)#1f7a70
• accent strong (buttons)#d03a3a
• secondary text#475569

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

Prompt ExtraBold 800, 60px hero; 36px Bold section titles

Body

Atkinson Hyperlegible Next 16px, weight 400, line-height 1.6, slate #475569 for secondary text

A geometric rounded sans for friendly punch and Atkinson Hyperlegible Next for clean pricing tables.

Spacing and imagery

1152px container, 4-column badge row, 3-column testimonials, 96px sections, 12px radius, rounded 16px banners.

Warm close-up pet photography in the hero; small round pet avatars on reviews; line icons in teal; masonry gallery with hover captions.

Components

• Transparent-to-white header with pill active link
• Dual CTA hero
• Trust badge cards
• Service cards
• Size-based pricing table (small/medium/large/XL)
• Combo package cards with savings badges
• Boarding suite tier cards
• Day-play pass bundles
• Gradient promo banner
• Testimonial cards
• Loyalty tier breakdown and how-it-works
• Filterable masonry gallery
• Hours table + map + emergency notice
• Add-on service list

Interactions

• Header background change on scroll
• Gallery filter by category with hover captions
• Pricing tab switch by pet size
• Click-to-call and mailto links
• Mobile drawer navigation (Vaul)
• Toast on contact submit
• Card hover lift

Data

• GroomService{name, prices{small, medium, large, xl}, duration, includes[]}
• AddOn{name, price}
• Suite{tier, nightly, features[]}
• Package{name, includes[], price, savingsPct}
• LoyaltyTier{name, threshold, perks[]}
• GalleryItem{src, alt, category, caption}
• Review{author, pet, rating, quote, avatar}

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 "Sudsbury", a marketing site for a business that combines grooming, spa treatments, overnight boarding and daycare. Owners should quickly find prices for their pet's size, see bundle savings, trust the facility, and call or request a booking. It is a clear, cheerful site designed around pricing.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Table, Card, Badge, Drawer via Vaul, Toast via Sonner, Form), lucide-react. Framer Motion for light reveals. react-hook-form + zod for the contact and booking request form, delivered by one serverless email function. The map loads as a click-to-activate embed.

### Pages & layout
1. **Header**: round teal logo, two-tone name, eight links with a tinted pill for the active one, phone and coral "Book now". It is transparent over the hero and white after scrolling.
2. **Home**: full-width photo hero with a dark wash, a two-line bold sans headline with the second line in mint `#5eead4`, a subline, a coral "Book grooming" button and a glassy "Book boarding" button. Then a row of four trust badges, four service cards, a coral gradient combo-savings banner, three reviews, a loyalty teaser and a contact strip.
3. **Grooming**: pricing Tabs by size (Small, Medium, Large, XL), each showing a table of services, durations and prices, plus an add-ons list.
4. **Spa**: treatment cards.
5. **Boarding**: suite tier cards and day-play pass bundles.
6. **Packages**: bundle cards with savings badges and a subscription plan.
7. **Loyalty**: how it works in three steps, a tier table and redemption options.
8. **Gallery**: masonry grid with five category filters.
9. **About**: team, certifications and safety standards.
10. **Contact**: form, hours table, map and emergency notice.

### Design system
Tokens: `--background: #fffaf0`, `--foreground: #1f2937`, `--primary: #2ba195`, `--primary-strong: #1f7a70`, `--accent: #ff6b6b`, `--accent-strong: #d03a3a`, `--secondary: #edf7f6`, `--muted: #f1f5f9`, `--border: #e1e7ef` (decorative), `--muted-foreground: #475569`, `--radius: 0.75rem`. Fonts: Prompt 700/800 for headings and Atkinson Hyperlegible Next for body and tables. Scale: 60/36/24/18/16/14px. Spacing: 8px base, 96px sections. Shadows: soft `0 8px 24px -12px rgb(31 41 55/.18)`. Motion: 200ms hovers and 500ms reveals. Light theme.

### Components & interactions
- Size tabs: keyboard arrows; the selection persists in the URL.
- Pricing table: sticky header on mobile scroll and a "From" label for variable prices.
- Package card: savings badge, included-service list and a "Request" button that prefills the form.
- Gallery: filter chips with an active state, captions on hover and focus, an empty state and lightbox navigation.
- Buttons: hover darkens, focus ring, and a loading spinner on submit.
- Header phone link: `tel:` with an icon.

### Data & state
Typed data files: `GroomService{name, prices: Record<Size, number>, minutes, includes}`, `AddOn`, `Suite`, `Package{name, includes, price, savingsPct}`, `LoyaltyTier`, `GalleryItem{src, alt, category}`, `Review`. UI state (tab, filter) lives in the URL. Seed sample reviews labelled as examples, with fictional names.

### Accessibility
White on coral `#ff6b6b` fails, so use `--accent-strong` for filled buttons, or use dark text. The hero wash is at least 65% black so white and mint headline text pass 4.5:1. Filled teal buttons use `--primary-strong` with white text. Tables need `<th scope>` and captions. Gallery filters use `aria-pressed`, and the lightbox traps focus and closes on Escape. Stars use text alternatives. Respect reduced motion. Verified contrast: secondary #475569 on #fffaf0 = 7.28:1; teal button #ffffff on #1f7a70 = 5.15:1; coral button #ffffff on #d03a3a = 4.83:1; mint on wash #5eead4 on #595959 = 4.74:1.

### Security
Validate the contact and booking request with zod in the client and the function, and add a honeypot and rate limit. The map iframe loads only after a click, and its host is allow-listed. Collect no payments and keep no secrets in the client. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Use responsive images, lazy-load the gallery and preload the hero only. Add LocalBusiness/PetStore JSON-LD with hours, and give each page its own title. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder photos only, with no real certifying-body logos or brand names.
- Do not present sample reviews as real customers.
- Collect only the booking details needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: size tabs switch prices; package buttons prefill the form; gallery filters and the lightbox work by keyboard; button contrast passes AA; every page is responsive.

Open the builderAll templatesThis palette on its own