Second Leash

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

Frank Ruhl Libre is a classic, warm high-contrast serif with a solid bold for heartfelt headlines, and Lexend is a very readable friendly geometric body.

• Frank Ruhl LibreHeadings: hero 56px 700, H2 40px
• LexendBody: body 16px on light and dark sections

Who it is for

• Dog rescues and animal shelters
• Prospective adopters
• Volunteers and foster families
• Donors and supporters

Layout

1. Fixed transparent header: serif wordmark left, centered links (Mission, Team, Services, Get involved, Blog), peach 'Donate' button right; turns dark on scroll
2. Full-screen photo hero with a darkened overlay, centered two-line serif headline, subcopy and a peach 'Get involved' button
3. Mission statement section on adoption benefits
4. 'Meet the dogs' dark section: 3-column grid of dog cards (photo, peach serif name, temperament blurb)
5. Services summary grid linking to service detail pages with stat cards
6. Team grid linking to bio pages
7. Get Involved page: form toggling volunteer vs adoption with a conditional dog dropdown
8. Donate page: preset amount radio group plus custom amount
9. Blog index (3-column cards) and article pages with 'More articles'
10. Footer with contact and links

Palette

warm, heartfelt, trustworthy, cozy, hopeful. Golden-hour photography and dark sections make it feel intimate.

• dark background#1c1917
• light background#ffffff
• text#14181f
• accent peach#e2af8d
• muted surface#f3f4f6
• muted text on dark#a8a29e
• link blue (primary token)#2662d9
• text on dark#d6d3d1
• accent strong (text on light)#a56840

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

Frank Ruhl Libre Bold 700, 56px hero, 40px H2, sentence case

Body

Lexend 16px, weight 400, line-height 1.6; #d6d3d1 on dark sections, #a8a29e only for secondary notes

A classic high-contrast serif for warmth and trust, with a friendly geometric sans for readability.

Spacing and imagery

1150px container, 3-column card grid with ~40px gutters, 96px section padding, 12px radius on buttons and images.

Soft golden-hour dog photography; full-bleed hero with a dark wash; square-ish portrait crops of each dog on dark backgrounds.

Components

• Transparent-to-solid header with Donate CTA
• Mobile hamburger drawer
• Full-bleed photo hero
• Mission text block
• Adoptable dog card
• Service cards with stat cards
• Team portrait grid and bio page
• Volunteer/adoption toggle form
• Donation amount radio group with custom input
• Blog card grid
• Article page with related posts
• Context-aware light/dark header and footer

Interactions

• Header switches from transparent to solid on scroll
• Staggered fade-up reveals on cards
• Card image zoom on hover
• Form toggles volunteer vs adoption and reveals the dog dropdown
• Custom donation input animates in when 'Other' is selected
• Toast on form submit
• Mobile drawer open/close

Data

• Dog{id, name, breed, age, sex, size, temperament, goodWithKids, photo, status}
• Service{slug, title, summary, stats[]}
• TeamMember{slug, name, role, bio, photo}
• Post{slug, title, excerpt, cover, date, body}
• Application{type: volunteer|adoption, name, email, phone, dogId?, message}
• Donation{amount, frequency}

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 "Second Leash", a website for a small nonprofit dog rescue. Prospective adopters browse available dogs, supporters learn the mission, and visitors can apply to adopt or volunteer, donate, and read rescue stories. Every page should nudge toward adopting, volunteering or donating.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Sheet, RadioGroup, Select, Tabs, Toast), lucide-react. Framer Motion for staggered reveals. react-hook-form + zod for the application and donation forms. TanStack Query for fetching dogs and posts. Supabase: Postgres for dogs, posts and applications, Storage for dog photos, Auth only for staff who manage listings, and an Edge Function that creates a hosted Stripe Checkout session for donations.

### Pages & layout
1. **Home**: transparent fixed header (serif wordmark, five links, a peach "Donate" button). A full-screen golden-hour hero with a dark overlay, a two-line serif headline and a "Get involved" button. Then a mission paragraph, a dark "Meet the dogs" section with a 3-column grid of cards (photo, name in peach serif, two-sentence temperament note), a services teaser and a donate band.
2. **Dogs**: filterable list by size, age and good-with-kids, plus dog detail pages.
3. **Services**: a grid of three services and a detail page for each with stat cards.
4. **Team**: a two-column portrait grid and bio pages with split image layouts.
5. **Get involved**: a single form with a Volunteer/Adopt segmented toggle. Adopt shows a dog Select filled from available dogs.
6. **Donate**: preset amounts ($25/$50/$100/$250) plus "Other" with an animated custom input, a monthly toggle and a redirect to Checkout.
7. **Blog**: a 3-column index and article pages with more articles.

### Design system
Tokens: `--background: #ffffff`, `--surface-dark: #1c1917`, `--foreground: #14181f`, `--accent: #e2af8d` (peach), `--accent-strong: #a56840`, `--muted: #f3f4f6`, `--muted-on-dark: #a8a29e`, `--text-on-dark: #d6d3d1`, `--link: #2662d9`, `--radius: 0.75rem`. Fonts: Frank Ruhl Libre 700 for headings, Lexend 400/500 for body. Scale: 56/40/28/20/16/14px. 8px spacing grid with 96px section padding and a 1150px container. Motion: 500ms fade-up with a 80ms stagger. The header and footer adapt to light or dark pages.

### Components & interactions
- Dog card: image zooms to 1.05 on hover; badge shows status (Available/Pending/Adopted); keyboard-focusable link.
- Buttons: peach fill with dark text; hover darkens; focus ring; disabled while submitting with a spinner.
- Application form: inline zod errors, success toast and a clear error toast on failure.
- Donate: selected amount shown with a peach ring; custom amount validated between 5 and 10,000.
- Empty dog list: a message plus a reset-filters button.

### Data & state
Tables: `dogs(id, name, breed, age_months, sex, size, temperament, good_with_kids, photo_path, status)`, `posts(slug, title, excerpt, cover, body_md, published_at)`, `team(slug, name, role, bio, photo)`, `applications(id, type, name, email, phone, dog_id null, message, created_at)`. Form state stays local; server data comes through TanStack Query. Seed 9 fictional dogs, 12 posts and 4 staff with invented names.

### Accessibility
Peach `#e2af8d` with `#14181f` text passes AA, but white on peach does not, so never use that pairing. Hero text sits on an overlay at least 60% black. Every dog photo gets alt text describing the dog. The segmented toggle is a radio group with a label, and the donation amounts are a labelled RadioGroup. Focus rings are peach on dark sections and `#a56840` on light ones, respect reduced motion, and use one H1 per page. Verified contrast: body #14181f on #ffffff = 17.79:1; button #14181f on #e2af8d = 9.11:1; muted on dark #a8a29e on #1c1917 = 6.93:1; accent-strong #a56840 on #ffffff = 4.51:1; hero on overlay #ffffff on #666666 = 5.74:1.

### Security
RLS: `dogs`, `posts` and `team` are publicly readable, and only the `staff` role can write. `applications` accept inserts from anon but can only be read by staff. Validate with zod in the client and in an Edge Function before insert, add a honeypot and per-IP rate limit, and minimize PII (no addresses until follow-up). Donations use Stripe hosted Checkout only, with the secret key kept in Edge Function env. Sanitize markdown blog bodies with DOMPurify. Uploads are staff-only JPEG, PNG or WebP files under 5 MB.

### Performance & SEO
Lazy-load dog images with fixed aspect ratios, code-split routes and give each dog and post its own meta, OG image and NGO JSON-LD. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder dog imagery only, with no real shelter names or logos.
- Do not present made-up adopter stories as real testimonials.
- Store only the applicant data needed, and never card data.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: dogs load from the DB with filters; the Adopt toggle shows the dog dropdown; donations redirect to hosted checkout; anon users cannot read applications; pages work at 360px.

Open the builderAll templatesThis palette on its own