Wrenchwell Plumbing

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

The expanded bold of the Encode family gives a punchy trade-grotesk headline, and its normal width keeps the body clean: one family, as the design wants.

• Encode Sans ExpandedHeadings: headings 72px 700 at -1.8px, title case
• Encode SansBody: body 16-18px, slate secondary

Who it is for

• Plumbing and home-repair companies
• Homeowners and property managers needing repairs
• Office staff managing leads
• Trades businesses hiring technicians

Layout

1. Royal-blue header: droplet logo left, links (Home, About, Service, Work, Blogs, Pages dropdown), outlined lime phone and sign-in pills right
2. Hero on royal blue: huge white bold headline with a lime last line, paragraph, a lime quote button and an outlined services button, avatar cluster with a client counter; right side two vertical marquee columns of circular and rounded technician photos
3. About/intro with stats counters
4. Services section: left heading and CTA, right stacked white numbered service cards (01, 02, 03...)
5. Featured completed works
6. Trust section with founding year
7. Service grid, Blog cards, contact section
8. Footer
9. Inner pages: service/work/career/blog details, pricing, quote calculator, auth, dashboard

Palette

energetic, dependable, bold, clean, trade-professional. Its high-contrast blue and lime reads as fresh and fast.

• hero/brand navy-blue#00378f
• deep navy background#0a143d
• accent lime#a8f000
• light section#f3f3f6
• card#ffffff
• slate secondary#5c7284
• text#000000
• dark mode muted text#a3b3c2

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

Clash Grotesk-style heavy grotesk, 700, 72px with -1.8px tracking, title case (Clash Grotesk is not on Google Fonts; a vibld project loads Encode Sans Expanded)

Body

Encode Sans 16 to 18px, weight 400, line-height 1.6; slate #5c7284 only for secondary text on white or #f3f3f6

A single punchy grotesk, with color (lime on blue) used for emphasis instead of a second typeface.

Spacing and imagery

1216px container, 50/50 split sections, big 100px+ section padding, 24px-radius cards, pill buttons.

Friendly technician photos in circle and rounded-rectangle masks scrolling in marquee columns; job-site photos in rounded cards.

Components

• Header with Pages mega-dropdown
• Outlined pill call and sign-in buttons
• Dual vertical image marquee
• Avatar social-proof cluster with counter
• Animated stat counters
• Numbered service cards
• Featured work cards
• Blog cards with category filter
• Quote calculator (rate x complexity x hours)
• Careers list + application form
• Auth screens
• Dashboard with leads table, charts and blog editor (React Quill)
• Collapsible dashboard sidebar

Interactions

• Hero image columns auto-scroll in opposite directions
• Counters animate up on view
• Buttons invert fill on hover
• Quote calculator updates the estimate live
• Dashboard lead status changes and filters
• Role-based route guarding
• Rich text blog editing with category filter
• Mobile hamburger and collapsible sidebar

Data

• Service{slug, title, summary, body, image}
• Project{slug, title, location, images, scope}
• Post{slug, title, category, cover, body, published}
• Job{slug, title, type, location, description}
• Application{jobId, name, email, resumeUrl}
• Lead{id, source: contact|quote|service, name, email, phone, details, estimate, status}
• Profile{userId, name, phone}
• UserRole{userId, role: admin|moderator|user}

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 "Wrenchwell Plumbing", a marketing site and back office for a local plumbing company. Homeowners explore services, get an instant estimate and request work; staff triage every lead, publish articles and review applicants from one dashboard.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (NavigationMenu, Card, Table, Tabs, Dialog, Sidebar, Toast), lucide-react. Framer Motion for marquees and counters. react-hook-form + zod for every form. TanStack Query for data. Recharts for dashboard charts. A rich-text editor (Tiptap or React Quill) for posts. Supabase: Auth (email sign-up with a name and phone profile), Postgres (services, projects, posts, jobs, applications, leads, profiles, user_roles), Storage (resumes, post covers) and Edge Functions (lead notification emails).

### Pages & layout
1. **Header**: royal blue, droplet logo, six links with a "Pages" dropdown, and outlined lime pills for the phone number and "Sign in".
2. **Home hero**: blue background, a huge white headline whose final line is lime, a paragraph, a lime "Get a quote" button and an outlined "All services" button, and an overlapping avatar cluster with a client counter. On the right, two vertical photo columns scroll in opposite directions and mix circles with rounded rectangles.
3. About with animated stats; Services (sticky left heading, stacked numbered cards right); work gallery; blog cards; contact form.
4. **Inner pages**: services and service detail, work and work detail, about, careers and career detail with an apply form, blog and blog detail, pricing, quote calculator, contact, privacy and 404.
5. **Dashboard** (authenticated): collapsible sidebar with Overview (KPI cards and a leads-by-source chart), Leads (filterable table with a status Select), Posts (list and editor), Careers (jobs and applicants) and Profile.

### Design system
Tokens: `--brand: #00378f`, `--navy: #0a143d`, `--accent: #a8f000` (lime), `--surface: #f3f3f6`, `--card: #ffffff`, `--slate: #5c7284`, `--foreground: #0b0b0b`, `--radius: 1.5rem` for cards, and pills for buttons. Font: "Encode Sans" or another heavy grotesk at 700 for headings with -0.025em tracking, and Encode Sans for body. Scale: 72/48/32/22/16/14px. Spacing: 8px grid, 112px sections. Motion: marquee 30s linear, counters 1.2s ease-out, hover 200ms. The dashboard supports dark mode (`--navy` background, `#f3f3f6` text, `#a3b3c2` muted).
- Typeface: Encode Sans Expanded (Google Fonts) for headings 72px 700 at -1.8px, title case.

### Components & interactions
- Buttons: lime fill with navy text; outline variants invert on hover. Focus ring lime on blue and navy, navy on light sections. Disabled and loading states.
- Quote calculator: service Select, complexity tier (Basic ×1, Standard ×1.4, Complex ×1.9) and an hours slider. The live estimate range uses the formula `base rate × tier × hours`. "Send this estimate" creates a lead.
- Leads table: search, source and status filters, pagination, empty state and a row detail Dialog.
- Editor: autosave draft indicator and publish toggle; shows an error toast if saving fails.

### Data & state
Tables are listed above. `leads(id, source, name, email, phone, details jsonb, estimate numeric, status: new|contacted|won|lost, created_at)`, `user_roles(user_id, role app_role)`. Server state goes through TanStack Query and form state stays local. Seed realistic fictional content and 25 demo leads.

### Accessibility
Lime on blue passes for large text, and navy text on lime is AAA. Never place white text on lime or lime on white. The marquee is `aria-hidden` with a static alternative. Tables need captions and sortable header buttons, form fields need labels, and the calculator's result is announced via `aria-live`. Use a keyboard-reachable sidebar, focus-visible rings and one H1 per page. Verified contrast: slate #5c7284 on #f3f3f6 = 4.52:1; lime on blue #a8f000 on #00378f = 7.79:1; button #0a143d on #a8f000 = 12.82:1; dark muted #a3b3c2 on #0a143d = 8.29:1.

### Security
RLS on every table. Content tables are public-read with staff-only writes. `leads` and `applications` accept anon insert, and only admins and moderators can read them. Profiles can be read and updated only by their owner. Roles live in a separate `user_roles` table and are never read from the client profile. Validate with zod in the client and in Edge Functions, and rate-limit public forms with a honeypot. Resume uploads are PDF only, 5 MB maximum, in a private bucket served through signed URLs. Sanitize rich text with DOMPurify before rendering and keep service keys only in function env.

### Performance & SEO
Code-split the dashboard from the marketing bundle and lazy-load marquee images. Add per-page meta and LocalBusiness JSON-LD. Target Lighthouse 90+ on marketing pages.

### Guardrails
- Use original copy and placeholder photos only, with no real company names or logos.
- Do not present invented client counts or reviews as verified facts; label them as demo content.
- Store only the lead details needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the calculator creates a lead; anon users cannot read leads; roles gate the dashboard routes; posts render sanitized; the marketing site works at 360px.

Open the builderAll templatesThis palette on its own