Groundwork Collective

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

Catamaran runs from a brutal black to an easy text weight, and Philosopher stays for the soft calligraphic italic that balances it.

• CatamaranHeadings: headline 160px 900 uppercase at -0.05em
• CatamaranBody: body 16-18px, 14px uppercase nav
• PhilosopherAccent: italic section titles at display sizes

Who it is for

• Yoga, pilates and movement studios
• Multi-location wellness brands
• New members exploring classes
• Companies buying corporate wellness

Layout

1. Branded intro splash: blush screen with centered dark wordmark before the page reveals
2. Header: bold sans wordmark left, uppercase links (New Members, Pricing, Studios, Practitioners, FAQ), 'Account' link and terracotta pill 'Book a session' right
3. Hero: gigantic 160px black uppercase headline (two or three short words), subcopy and a get-started arrow link
4. Story section: huge italic serif heading with an offset portrait card, right-aligned blurb and an arrow link
5. Full-bleed moody city image band with one oversized word
6. Inner pages: new members welcome with discovery gallery, pricing gradient cards, studio detail with amenities grid and daily schedule, practitioner directory with live search and profile pages, careers with sticky application form, corporate wellness with stats, FAQ accordion, contact, legal/diversity pages

Palette

bold, warm, grounded, editorial, energizing. It is fitness-magazine drama softened by earthy wellness colors.

• background cream#faf8f5
• text#282c34
• primary sage#7a9876
• CTA terracotta#a65a44
• accent coral#ff8e6b
• blush splash#f9c8bd
• secondary sand#f3eee8
• terracotta light (decorative)#c97a63
• secondary text#5b5f66

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

Catamaran Black 900 at 160px with -0.05em tracking, uppercase; Philosopher italic serif at display sizes for section titles

Body

Catamaran 16 to 18px, weight 400, line-height 1.6, #5b5f66 secondary text; uppercase nav at 14px (one or two words per link)

Brutal heavy grotesk against a soft calligraphic serif italic, pairing strength with softness.

Spacing and imagery

Full-bleed sections, asymmetric overlaps (photo card behind a giant heading), 128px vertical rhythm, 12px radius cards, pill buttons.

Soft studio portraits of practitioners in movement wear, moody cityscapes as full-bleed bands, gradient backgrounds in sage/terracotta/cream.

Components

• Intro wordmark splash
• Header with Account and pill CTA
• Giant uppercase hero headline
• Overlapping portrait card + italic serif heading
• Full-bleed image band with oversized word
• Pricing gradient cards (packs, memberships, gift cards)
• Studio cards and detail pages with amenities grid
• Daily class schedule list
• Practitioner directory with live search
• Practitioner profile with sticky image and related practitioners
• Careers list and sticky application form
• Corporate program cards with stats
• FAQ accordion
• Contact form with success state

Interactions

• Intro splash fades out to reveal the page
• Live filtering of practitioners by name, style or specialty
• Card image scale and shadow lift on hover
• FAQ accordion animation
• Sticky elements on profile and careers pages
• Form success states and toasts
• Mobile drawer navigation

Data

• Studio{slug, name, address, description, amenities[], schedule[{day, time, className, practitionerId}]}
• Practitioner{slug, name, styles[], specialties[], bio, photo, studios[]}
• PricingOption{type: pack|membership|giftcard, name, price, sessions?, perks[]}
• Job{slug, title, studio, salaryRange, responsibilities[], requirements[]}
• Application{jobId, name, email, resumeUrl, note}
• CorporateProgram{title, description, stat}
• FAQ{question, answer}

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 "Groundwork Collective", a website for a wellness and movement studio brand with several locations (yoga, pilates, breathwork, strength). It should feel bold yet warm. It helps newcomers understand how to start, compare pricing, pick a studio and class time, find a practitioner who fits, and lets the business recruit staff and sell corporate programs.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Accordion, Input, Card, Tabs, Drawer via Vaul, Toast via Sonner, Form), lucide-react. Framer Motion for the intro splash and reveals. react-hook-form + zod for contact, careers and corporate inquiries. TanStack Query. Supabase: Postgres (studios, classes, practitioners, pricing, jobs, applications, inquiries), Storage (resumes and photos), and Auth for member accounts and staff editing.

### Pages & layout
1. **Intro splash**: a blush full screen with a centered `#282c34` wordmark that fades out after about 800ms, once per session and never when reduced motion is set.
2. **Header**: bold wordmark; uppercase links; "Account"; a terracotta pill "Book a session".
3. **Home**: a gigantic uppercase black headline across two lines, a subline and a "Get started →" link. Then an "Our story" section with a huge italic serif title overlapping an offset portrait card and a right-aligned blurb. A full-bleed city image with one oversized word, then pricing and studio teasers.
4. **New members**: welcome hero, first-visit steps and a discovery gallery.
5. **Pricing**: class packs, memberships and gift cards on soft gradient cards.
6. **Studios**: list plus detail pages (description, amenities grid, today's schedule).
7. **Practitioners**: directory with live search and style filter; profile pages with a sticky image and related practitioners.
8. **Careers**: jobs and detail pages with a sticky application form.
9. **Corporate**: program cards and stats.
10. **FAQ** (10 items), **Contact**, and **Terms**, **Privacy** and **Diversity & inclusion** pages.

### Design system
Tokens: `--background: #faf8f5`, `--foreground: #282c34`, `--primary: #7a9876` (sage), `--cta: #c97a63` (terracotta), `--cta-strong: #a65a44`, `--accent: #ff8e6b`, `--blush: #f9c8bd`, `--secondary: #f3eee8`, `--border: #e7e2da` (decorative), `--muted-foreground: #5b5f66`, `--radius: 0.75rem`. Fonts: Catamaran 400/600/900 and Philosopher italic from Google Fonts. Scale: clamp(72px, 12vw, 160px) for the hero with -0.05em tracking, then 64/36/22/16/14px. Spacing: 8px base, 128px sections; overlaps use negative margins. Gradients: `linear-gradient(135deg, #f3eee8, #e4ebe2)`. Motion: 500ms reveals and a 300ms hover scale of 1.03.

### Components & interactions
- Practitioner search: debounced input and style chips; results count announced; empty state with a reset button.
- Schedule list: grouped by time, with "Full" classes marked by text.
- Pricing card: featured badge; the gift card CTA opens an amount picker (checkout via Stripe hosted page).
- Application form: file upload with type and size checks, progress indicator, and success and error states.
- FAQ: single-open accordion.
- CTA pill: hover darkens to `--cta-strong`, visible focus ring.

### Data & state
Tables: `studios`, `classes(studio_id, weekday, start_time, name, practitioner_id, capacity)`, `practitioners(slug, name, styles, specialties, bio, photo)`, `pricing_options`, `jobs`, `applications(job_id, name, email, resume_path, note)`, `inquiries`. Search state lives in the URL. Seed 3 studios and 12 fictional practitioners.

### Accessibility
White on terracotta `#c97a63` fails, so every filled button uses `--cta-strong`. Sage is decorative or for text of 24px and larger. The giant hero words are a real H1 with sensible screen-reader text in sentence case. The italic serif stays at 36px and above; no long passages in uppercase. The splash must not block interaction for more than a second and should be skipped for reduced motion. Use labelled search, focus rings, and alt text on portraits. Verified contrast: secondary #5b5f66 on #faf8f5 = 6.05:1; CTA #ffffff on #a65a44 = 5.04:1; link #a65a44 on #faf8f5 = 4.75:1; splash #282c34 on #f9c8bd = 9.35:1.

### Security
RLS: content tables are public-read with staff-role writes. `applications` and `inquiries` accept inserts only through Edge Functions and are staff-read only. Validate with zod on the client and server. Resumes must be PDF or DOCX under 5 MB, stored in a private bucket. Add a honeypot and rate limit. Gift cards go through hosted Stripe Checkout, with keys kept in function env.

### Performance & SEO
Code-split routes and lazy-load images. Add HealthClub/ExerciseGym JSON-LD per studio and per-practitioner meta. Preload the Catamaran 900 subset. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder imagery only, with no trademarked names.
- Do not present invented member stories as real.
- Keep only the applicant data needed and delete it on request.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: all 17 routes render; practitioner search filters live; applications upload securely; the splash respects reduced motion; CTA contrast passes AA.

Open the builderAll templatesThis palette on its own