Groundplan

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

Barlow is based on California highway signage, a sturdy, hard-hat grotesk for construction tech, and Chivo Mono gives the dollar figures a clear tabular look.

• BarlowHeadings: hero 48px 700, section heads 36px
• BarlowBody: body 16-18px slate
• Chivo MonoFigures and code: dollar figures

Who it is for

• General contractors and remodelers
• Home improvement service businesses
• Agencies building for construction clients
• Homeowners budgeting a project

Layout

1. Hero on faint blueprint grid: bold three-line headline with the last line in amber, subcopy, amber 'Get Your Estimate' button and text link, three trust stats with icons
2. Hero visual: browser-window card with a dark estimate panel (total, range, materials and labor progress bars) and an amber accuracy badge
3. How It Works: four numbered steps (select project, add details, get estimate, connect with pro)
4. Five-step calculator flow: project category (8 types), size, material tier comparison, complexity, location + timeline, then animated results and lead form
5. What Contractors Say: dark navy band with three testimonial cards and initials avatars
6. FAQ accordion (six items)
7. Footer

Palette

Trustworthy, practical, confident, clear, energetic. It feels like a modern construction-tech tool with hard-hat amber highlights.

• background#f8fafc
• text (navy ink)#0f1729
• primary (safety amber)#fbbd23
• accent (blue)#156af4
• dark panel#141c2e
• border#e1e7ef
• muted text#64748b

Every checked pair, measured again

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

Barlow 700, 48px hero, 36px section heads; highlighted phrase in amber

Body

Barlow 16-18px slate; monospace-style numerals for dollar figures

Plain, sturdy sans throughout signals trust and clarity; color (amber) does the emphasis.

Spacing and imagery

Standard SaaS landing rhythm, 1216px container, 50/50 hero, 8px radius buttons and cards, soft large shadows on the mock window.

No photos; a UI mock of the estimate result on a subtle blueprint grid, lucide icons for stats, initials avatars.

Components

• Blueprint grid hero background
• Two-tone headline
• Primary amber CTA
• Trust stat row
• Estimate preview card with progress bars
• Accuracy badge
• How-it-works steps
• Multi-step calculator with progress
• Project category tiles
• Material tier comparison cards
• Animated cost breakdown chart
• Lead capture form with phone formatting
• Testimonial cards
• FAQ accordion

Interactions

• Step-by-step wizard with back/next and progress
• Smart location detection with manual override
• Live recalculation as options change
• Animated number count and bar fill for results
• Phone number auto-formatting
• Form validation and success screen
• Page/step transitions (Framer Motion)
• Accordion expand/collapse

Data

• ProjectType{id, label, baseCostPerSqFt, icon}
• MaterialTier{id, label, multiplier, description}
• Complexity{id, label, multiplier}
• RegionFactor{zipPrefix/state, multiplier}
• Estimate{total, low, high, materials, labor, permits, contingency}
• Lead{name, email, phone, zip, projectType, size, tier, timeline, estimateTotal}

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 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 **Groundplan**, a landing page for a fictional regional contractor network whose centerpiece is an interactive cost estimator. Homeowners get a ballpark price in about three minutes; the business gets a qualified lead with project details and timeline. The page must earn trust fast and make the calculator feel precise without overpromising.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Button, Card, RadioGroup, Slider, Select, Accordion, Progress, Form), lucide-react, Framer Motion for step transitions and number animation, Recharts for the cost breakdown chart, react-hook-form + zod, a phone formatting helper (libphonenumber-js). Pricing logic runs client-side from a typed config. Leads post to a serverless function or Supabase Edge Function that stores them and notifies the contractor.

### Pages & layout
1. **Hero** – very light slate background with a faint blueprint grid; bold headline whose final line is amber; subcopy; amber "Get your estimate" button and a text link; trust stats with icons. Right: a browser-window card showing an example estimate (total, range, material and labor bars) with a small amber badge about accuracy range.
2. **How it works** – four numbered steps.
3. **Estimator** (anchor or route) – stepper with progress: (1) project category tiles (kitchen, bathroom, addition, roof, deck, basement, new build, other); (2) size in square feet with a slider and input; (3) material tier comparison (standard, premium, luxury) with what's included; (4) complexity; (5) ZIP code (optional geolocation suggestion) and start timeline. Results: animated total, low–high range, breakdown chart (materials, labor, permits, contingency), assumptions list, then a lead form (name, email, phone, best time to call, consent).
4. **Testimonials** – dark navy band with three sample cards (clearly labeled as examples).
5. **FAQ** accordion and footer with license/insurance placeholders.

### Design system
- Tokens: `--background: #f8fafc`, `--foreground: #0f1729`, `--primary: #fbbd23`, `--primary-foreground: #1a1405`, `--primary-text: #946a03`, `--input-border: #64748b`, `--accent: #156af4`, `--secondary: #f1f5f9`, `--border: #e1e7ef`, `--muted-foreground: #64748b`, `--panel: #141c2e`, `--radius: 0.5rem`.
- Fonts: Barlow (400/600/700) and Chivo Mono for dollar figures. Scale: 12 / 14 / 16 / 18 / 24 / 36 / 48.
- Spacing: 8px base; sections 96px; hero 50/50; cards 24px padding; mock window shadow `0 24px 48px rgb(15 23 41 / .12)`.
- Motion: step slide 250ms; counts 800ms ease-out; bars grow 600ms.

### Components & interactions
Stepper (complete/current/upcoming; next disabled until valid), category tile (selected ring, hover, focus), size slider with numeric input kept in sync, tier card (selected, "most popular" tag), location field (detecting, detected, denied → manual), results (loading shimmer, final numbers, recalculates when going back), lead form (inline errors, formatted phone, submitting, success page with next steps, server error), accordion, sticky mobile "Get estimate" bar.

### Data & state
Config: `ProjectType{id,label,costPerSqFt:{low,high}}`, `Tier{id,multiplier,includes[]}`, `Complexity{id,multiplier}`, `Region{prefix,multiplier}`. Computed `Estimate{low,high,total,breakdown{materials,labor,permits,contingency}}`. Wizard state in one reducer persisted to sessionStorage. `Lead{…inputs, estimate, consent, createdAt}`. Seed plausible but clearly illustrative numbers and state a disclaimer.

### Accessibility
Amber `#fbbd23` is a fill and dark-panel color only: buttons use `#1a1405` text on it (10.8:1) and amber text on the `#141c2e` panel is 10:1. The highlighted hero line on the light background uses `--primary-text: #946a03` (4.5:1+). The blue accent is `#156af4` (4.56:1 as text; white labels 4.8:1). Inputs use `--input-border: #64748b` (4.55:1); `#e1e7ef` borders are decorative. Tiles are radio buttons in a fieldset. Slider has a paired number input. Results are announced with `aria-live="polite"` once, and the chart has a data table. Step changes move focus to the step heading. Reduced motion disables count-ups and slides.
Verified contrast: body text on page background #0f1729 on #f8fafc = 17.08:1; muted text on page background #64748b on #f8fafc = 4.55:1; dark label on amber button #1a1405 on #fbbd23 = 10.82:1; amber headline highlight on light background #946a03 on #f8fafc = 4.64:1; amber text on dark estimate panel #fbbd23 on #141c2e = 10.04:1.

### Security
Validate the lead with zod on client and in the function; recompute the estimate server-side from submitted inputs instead of trusting the client total. Honeypot, rate limiting and optional captcha on submission. Store leads in a table with RLS allowing inserts only via the function; contractor access is authenticated. Geolocation only on user action; store ZIP, not coordinates. No keys in the client. Explicit consent checkbox before contact.

### Performance & SEO
No heavy imagery; code-split the estimator and Recharts. Meta title/description, OG image of the estimate card, FAQPage JSON-LD. Lighthouse 95+.

### Guardrails
- Fictional company, contractor names and example numbers; label estimates as non-binding.
- Testimonials marked as samples, not real customers.
- Collect only contact fields you use; no sensitive data.
- Small typed components, no `any`, visible errors.
- Done when: the five steps validate and allow going back without losing data; the result updates correctly for every input; amber contrast is fixed; the lead submits and the server recomputes the estimate; the whole flow works by keyboard.

Open the builderAll templatesThis palette on its own