Template
Sudsbury
A cheerful, sales-oriented site for a combined dog grooming salon and boarding resort. It lays out size-based grooming prices, spa treatments, boarding suites, day-play passes, bundled packages and a loyalty program, backed by a filterable gallery, trust badges and an easy call or book action.
Dog grooming and boarding site · Website · Small business site · static site
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
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
- 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
- Full-width photo hero with dark wash: centered bold sans headline with a teal second line, subcopy, coral grooming button and translucent boarding button
- Four trust badge cards (certified groomers, 24/7 care, climate control, vet approved)
- Service cards (grooming salon, spa, boarding, day play)
- Coral gradient promo banner for combo savings with a white packages button
- Testimonials with stars and avatars
- Loyalty rewards teaser
- 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
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on cream | 14.11:1 | 4.5:1 |
| Aa | secondary text on cream | 7.28:1 | 4.5:1 |
| Aa | body text on teal tint | 13.45:1 | 4.5:1 |
| Aa | white text on teal-strong buttons | 5.15:1 | 4.5:1 |
| Aa | white text on coral-strong buttons | 4.83:1 | 4.5:1 |
| Aa | dark text on bright coral | 5.29:1 | 4.5:1 |
| Aa | white hero text on 65% wash (worst case) | 7.00:1 | 4.5:1 |
| Aa | mint hero line on 65% wash (worst case) | 4.74:1 | 4.5:1 |
| Aa | teal-strong links and focus ring | 4.95:1 | 4.5:1 |
As vibld’s tokens
The palette on the 15+ color tokens vibld styles a project with, each text color 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.
The baseline
### 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 color 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, labeled 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 labeled 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.