2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Moving Company Quote Page is a single-page website for a local mover that wants to answer practical questions before asking for contact details. It suits residential movers, apartment specialists, and small relocation teams. Visitors can choose a home size, adjust a room-by-room inventory, enter mileage, and see the recommended truck, crew, labor time, and price range update together. A booking request carries the current estimate into a clear final step. A persistent ledger explains labor, truck, and mileage charges instead of hiding the logic behind a single number.
The visual direction combines warm ivory surfaces, deep spruce typography, restrained apricot accents, and editorial photography of real moving-day scenes. Fraunces headings give the page a human voice, while DM Sans keeps form controls and price breakdowns easy to scan. The quote studio is the central feature: a spacious working area sits beside a sticky estimate ledger on desktop and becomes an expandable summary on mobile. Small number transitions, section reveals, and responsive stepper controls provide feedback without slowing down the task.
The prompt includes exact inventory presets, cubic-foot values, calculation rules, sample reviews, service details, FAQs, and four coordinated image prompts. Default content presents an invented Portland-area mover, with an alternative Austin-area case for a second build. Adapt the brand, service area, audience, hourly rate, and phone number through the variables, then revise the centralized content to match. Everything runs as a static React site; inventory, estimate state, and the demo booking request stay in the browser, with no backend or external form service.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Moving Company Quote Page Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief Build an original single-page lead-generation website for [BRAND], an invented moving company serving [SERVICE_AREA]. The page helps [AUDIENCE] create a transparent instant estimate from home size, editable room inventory, and driving distance, then save a booking request with that estimate attached. Use the default English copy specified below, and rewrite all copy, examples, reviews, and contact details when the variable values change. - Audience: People comparing local movers who want a useful planning range before speaking to a coordinator, plus moving-company owners who need a credible, high-intent quote and booking page. - Goal: Make the quote calculator the primary interaction, explain how the numbers are produced, build trust with concrete service details and invented reviews, and convert the completed estimate into a client-side booking request. - Tone: Calm, capable, warm, and precise. Sound like an experienced move coordinator rather than a sales page. Use plain US English, specific inclusions, realistic sample details, and no pressure tactics. ## Stack - Framework: Vite 6 + React 19 + TypeScript - Styling: Tailwind CSS 4 - Libraries: react (MIT), react-dom (MIT), tailwindcss (MIT), @tailwindcss/vite (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/dm-sans (OFL-1.1) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Configure vite.config.ts with base './', build.sourcemap false, and the React and Tailwind Vite plugins; the production entry is index.html and all asset URLs must be relative. - Use Tailwind CSS 4 with a small src/index.css theme for the exact colors, font families, keyframes, focus rings, and reduced-motion overrides; keep layout components in src/components. - Put every variable default, headline, button label, review, FAQ, contact detail, inventory item, move-size preset, and pricing constant in src/content.ts. Rewrite default-specific content when variables change; never leave the old brand, location, audience, rate, or phone number behind. - Implement the pure calculation functions in src/lib/estimate.ts and shared React state in src/App.tsx. Persist the current inventory, distance, and booking draft in localStorage, with safe defaults if storage is unavailable. - Import the self-hosted Fraunces Variable and DM Sans Variable packages in src/main.tsx. Use Motion for React through motion/react and Lucide React for all interface icons. - Create an original favicon from three simple offset rectangular outlines in spruce and apricot; do not imitate an existing moving-company mark. ## Variables - [BRAND] — Moving company name (default: "Juniper Lane Movers"). An invented local moving-company name used throughout the site. - [SERVICE_AREA] — Service area (default: "Portland and the Willamette Valley"). The city or region the company serves. - [AUDIENCE] — Primary customers (default: "Apartment renters, growing families, and small offices"). A short phrase describing the people and organizations the mover serves. - [BASE_RATE] — Two-mover hourly rate in USD (default: "145"). Numeric only. The calculator adds 45 per additional mover per hour. - [PHONE] — Booking phone number (default: "(503) 555-0148"). A display and telephone-link number; use fictional sample contact details. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/moving-company-quote-page in the footer (default: yes; delete this line to remove it) The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described. Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components. ## Design ### Colors - Canvas `#F3F0E7` — Warm ivory page background and alternating section field. - Paper `#FFFDF8` — Cards, form controls, quote ledger, and header surface. - Spruce `#193C35` — Primary text, dark buttons, footer, and strong icon strokes. - Muted Pine `#63736C` — Secondary copy and helper text; never use for tiny low-contrast labels. - Sage Wash `#DDE6D8` — Selected move-size cards, room tabs, progress accents, and soft badges. - Apricot `#E88962` — Small editorial accents, active step markers, and estimate highlights; pair with spruce text. - Hairline `#D4D8CD` — One-pixel borders, table rules, input outlines, and separators. ### Typography - Display and editorial headings: Fraunces Variable (OFL), weights 500/600/700 - Body, navigation, forms, and numbers: DM Sans Variable (OFL), weights 400/500/600/700 ### Layout & motion - Spacing: Use a centered 1280px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 104px vertical padding, mobile sections 68px. Hero uses 56px top and 72px bottom padding. Cards use 24–32px padding, form rows 16px gaps, and inventory item rows 12px vertical gaps. - Radius: Use 28px corners for major photography, 20px for the quote studio and booking panel, 14px for cards and inputs, and fully rounded pills only for compact tags and step labels. All bordered surfaces use a 1px Hairline outline rather than heavy shadows. - Motion: Reveal major sections once with Motion whileInView: opacity 0 to 1 and y 18 to 0 over 500ms, stagger direct children by 70ms, viewport amount 0.18. - Motion: Animate quote-range digits and the truck, crew, and hour values with a 280ms crossfade/slide whenever state changes; keep the layout width stable and never animate every keystroke excessively. - Motion: Use 180–220ms transitions for room tabs, quantity steppers, accordion height, mobile navigation, hover arrows, and the expanded mobile estimate bar. - Motion: The hero photograph may scale from 1.025 to 1 on entry over 700ms; do not add continuous parallax or autoplay carousels. - Motion: When prefers-reduced-motion is enabled, remove transforms and number tweens, show final values immediately, and keep all controls fully usable. - Imagery: Use four coordinated photorealistic editorial images generated specifically for this template. The shared look is warm natural window light, restrained ivory/sage/apricot colors, realistic moving materials, subtle film grain, and a 35mm documentary-lifestyle feel. Show functioning spaces and careful work rather than posed advertising. No text, logos, watermarks, branded uniforms, recognizable truck models, visible faces, or recognizable people. Crop the hero to a large 4:3 scene, use the packing photograph in a split service section, the unmarked truck in a wide service-area band, and the settled room beside the booking panel. Download all four locally and list them in ASSETS.md with the supplied generated-asset credit. ## Pages & Sections ### [BRAND] — Moving estimates (`index.html`) 1. **Header and photographic hero** — Create a 72px sticky Paper header with a thin Hairline bottom border. Left: the original offset-box favicon and [BRAND] in DM Sans 700. Center desktop anchors: Estimate, What's included, Reviews, Service area, FAQ. Right: [PHONE] as a compact text link and a spruce button labeled Start my estimate. On mobile show the brand, phone icon with accessible label, and a Menu button opening a Paper dropdown with the same anchors. Hero eyebrow: LOCAL MOVES · [SERVICE_AREA]. H1 in Fraunces 600: A clearer move starts with a clearer quote. Supporting copy: Tell us what is coming with you. We will turn your rooms and mileage into a practical crew, truck, and budget plan. Primary CTA: Build my quote. Secondary text link: See how pricing works. Trust line: No deposit to estimate · A coordinator reviews every request. Under the CTAs, place four compact move-size buttons labeled Studio, 1 bedroom, 2 bedrooms, and 3+ bedrooms; 2 bedrooms is selected initially. Selecting one applies the corresponding inventory preset and scrolls to the quote studio. Use hero-move.webp as the visual anchor with alt text: Movers carrying plain boxes through a sunlit apartment. Add a small Paper caption card over the photograph's lower-left corner: Thoughtful planning, before moving day. Layout: Hero is a 12-column grid, 5 columns for copy and 7 for the image, with 64px between columns. Copy vertically centers within a minimum 590px hero body. H1 is clamp(48px, 5.2vw, 76px), line-height 0.98, letter-spacing -0.035em, with a maximum of 11 characters per line where natural. Image fills its 4:3 frame with object-fit cover. The floating caption is 220px wide and offset 24px from the edges. At 390px, stack copy before the photo, use a 44px H1, full-width primary CTA, a horizontally scrollable move-size row with no clipped controls, and a 4:3 image below. Motion: Fade the eyebrow, headline, copy, and actions in with 70ms stagger. Scale the photo from 1.025 to 1 over 700ms. Move-size selection gives a brief Sage Wash highlight before smooth-scrolling to Estimate; use instant scrolling for reduced motion. 2. **Assurance strip** — Add three concise assurances with Lucide ShieldCheck, PackageCheck, and CalendarCheck icons: Padding and floor protection included; Clear arrival windows; Flexible rescheduling. Small supporting text respectively: For furniture and shared hallways. So your day stays predictable. Because plans can change. Layout: A full-width Spruce band with three equal columns inside the standard container, 28px vertical padding, warm Paper text, and vertical dividers on desktop. On mobile stack the three rows with 16px gaps and no dividers. Motion: Simple 400ms reveal on entry; no looping motion. 3. **Interactive quote studio** — Section eyebrow: YOUR MOVE, ITEMIZED. H2: Build an estimate you can actually use. Intro: Start with a home size, fine-tune each room, then add the distance. The estimate updates as you go. The studio has three working stages in one continuous panel, not separate routes. Stage 1 Home: repeat the four move-size cards with short labels Studio / Up to 400 sq ft, 1 bedroom / 400–700 sq ft, 2 bedrooms / 700–1,100 sq ft, 3+ bedrooms / 1,100+ sq ft. Display the note: Presets are a starting point; every item below is editable. Stage 2 Inventory: room tabs Living room, Bedroom, Kitchen, and Office, each with its live cubic-foot subtotal. Use plus/minus steppers with visible quantities and aria-labels. Exact item volumes in cubic feet: Living room — sofa 50, armchair 20, coffee table 15, TV and stand 20, standard box 5 each. Bedroom — queen bed 70, dresser 35, nightstand 10, wardrobe box 8 each. Kitchen — dining table 40, dining chair 8 each, kitchen box 6 each, microwave 5. Office — desk 35, office chair 12, bookcase 30, file box 5 each. Include Reset room and Apply preset buttons with confirmation only for resetting a nonempty room. Exact preset quantities in item order above: Studio = Living [0,1,1,1,4], Bedroom [1,1,1,3], Kitchen [0,0,4,1], Office [0,0,0,1]. 1 bedroom = Living [1,0,1,1,6], Bedroom [1,1,2,4], Kitchen [1,2,6,1], Office [0,0,1,2]. 2 bedrooms = Living [1,1,1,1,8], Bedroom [2,2,2,6], Kitchen [1,4,8,1], Office [1,1,1,3]. 3+ bedrooms = Living [1,2,1,1,12], Bedroom [3,3,4,9], Kitchen [1,6,12,1], Office [1,2,2,5]. Stage 3 Distance: a numeric input and synchronized range slider for one-way miles, minimum 1, maximum 500, default 18. Label: Approximate distance between addresses. Helper: Not sure? A rough mileage is enough for this planning range. All three stages remain visible on desktop as stacked blocks with anchored stage numbers 01, 02, 03; on mobile they can be collapsible but the first incomplete stage starts open. Layout: The quote studio is a 12-column grid: 8 columns for controls and 4 for a sticky estimate ledger aligned 24px below the section header. Controls sit in one Paper 20px-radius panel with Hairline separators between stages. Move sizes are a 2×2 grid. Inventory rows have item name, cubic feet each, and a 132px stepper; alternate no background colors. Distance input is 140px wide beside a flexible slider. The ledger is Spruce with Paper text and stays sticky at top 96px. At 390px use one column, 20px padding, full-width room tabs in a 2×2 grid, and a fixed bottom estimate bar showing the range plus View breakdown; it expands into a bottom sheet and never covers focused inputs. Motion: Changing rooms crossfades item rows over 180ms. Pressing steppers gives a 120ms scale feedback and updates totals immediately. Stage anchors smooth-scroll without hiding headings behind the sticky header. Respect reduced motion. 4. **Live estimate ledger and calculation** — This is the sticky right-hand ledger within the quote studio, not a separate standalone section. Label: YOUR PLANNING RANGE. Show a large animated low–high USD range, then three icon rows: recommended truck, crew size, and estimated crew hours. Add volume and distance rows. Include a View price breakdown disclosure with labor, truck fee, and mileage. Calculate entirely in TypeScript: totalVolume is the sum of quantity × item cubic feet. Truck: 12 ft at volume ≤250, 16 ft at ≤500, 20 ft at ≤800, otherwise 26 ft. Crew: 2 movers at volume ≤550, 3 at ≤850, otherwise 4. loadHours = max(2, ceil((1.5 + totalVolume / 180) × 2) / 2). driveHours = max(0.5, ceil((distance / 30) × 2) / 2). crewHours = loadHours + driveHours. crewRate = numeric [BASE_RATE] + (crewSize − 2) × 45. labor = crewHours × crewRate. Truck fee by size: $85 / $115 / $145 / $185. Mileage = max(0, distance − 15) × 2. Subtotal = labor + truck fee + mileage. Low = ceil(subtotal × 0.90 / 5) × 5; high = ceil(subtotal × 1.15 / 5) × 5. With default 2 bedrooms and 18 miles, the initial UI must read $1,250–$1,595, 20 ft truck, 3 movers, 6.5 hours, 640 cu ft. Breakdown: labor $1,235, truck $145, mileage $6. Below the breakdown write: Planning range adjusts the subtotal by −10% / +15%. CTA: Request this move. Disclaimer: This is an illustrative estimate, not a binding quote. A coordinator confirms access, timing, and final pricing. Layout: Use a dark 20px-radius card with 28px padding. The range uses DM Sans 700 at 36px desktop and 30px mobile, with tabular numerals. Divider lines are Paper at 18% opacity. Keep all ledger content in normal flow so long values never overlap. The expanded mobile sheet uses the same component, a close button, focus trap, and Escape-to-close. Motion: Crossfade updated values over 280ms with stable tabular-number alignment. Expand the breakdown with a measured height transition. Reduced motion shows immediate values and an instant disclosure. 5. **Pricing explanation** — Anchor this section as pricing. Eyebrow: NO MYSTERY LINE ITEMS. H2: The math stays on the table. Three numbered cards: 01 Your inventory — We use cubic feet to understand the load, not just the number of bedrooms. 02 Your route — Mileage adds drive time and a $2 per-mile charge after the first 15 miles. 03 Your crew — Two movers start at $[BASE_RATE] per hour; larger loads add hands rather than hiding labor in a flat fee. Add a quiet note: Stairs, specialty items, and packing materials are reviewed before a final quote. Layout: Three equal Paper cards in a row with large apricot 01/02/03 numerals, 24px gaps, and 32px padding. On mobile stack them. Keep this section compact at approximately 480px desktop height including heading. Motion: Cards reveal with 70ms stagger; hovering lifts a card only 3px and is disabled for reduced motion and touch. 6. **Included moving care** — Use packing-care.webp with alt: Hands wrapping a ceramic bowl beside plain moving boxes. Eyebrow: CARE IN EVERY CARRY. H2: The things we bring, besides the truck. Four checklist rows with Lucide Check icons: Furniture padding and stretch wrap; Floor and doorway protection; Room-by-room unloading labels; One confirmation call before moving day. Supporting copy: Your coordinator reviews access, fragile pieces, and timing before the crew arrives. Small callout: Have a piano, safe, or oversized piece? Mention it in your request so the estimate can be reviewed properly. Layout: Two equal columns with 64px gap: a 4:3 photo on the left and copy on the right. Checklist rows use Hairline separators and generous 18px vertical padding. On mobile place the image after the heading and before the checklist, with no floating text over it. Motion: Reveal image and checklist from opposite 12px offsets over 500ms; no parallax. 7. **Customer reviews** — Eyebrow: NOTES FROM RECENT MOVES. H2: Less guessing makes for calmer moving days. Display three invented five-star reviews, each with five small Lucide Star icons and no portrait or external review badge. Review 1: The inventory list caught two bookcases I would have forgotten. The crew arrived inside the window and the final price matched the confirmed quote. — Maya R., two-bedroom move. Review 2: I could adjust the boxes myself instead of explaining everything over the phone. Booking the follow-up was straightforward. — Elena T., apartment move. Review 3: They labeled every carton by room and protected the shared hallway. Our small office was ready to unpack that afternoon. — Jordan Lee, office relocation. Footer note: Customer names and reviews shown here are invented sample content for this demo. Layout: A Sage Wash section with the heading left-aligned and three Paper review cards below in equal columns. Cards use 20px radius and 28px padding; quote text is Fraunces 500 at 23px with 1.35 line height. On mobile use a vertical stack, never a clipped horizontal carousel. Motion: Single staggered reveal only; no auto-rotating testimonials. 8. **Service area and working hours** — Use moving-truck.webp as a wide photographic banner with alt: An unmarked moving truck outside a quiet residential building. Overlay a Spruce panel rather than placing text directly on a busy part of the photo. Eyebrow: CLOSE TO HOME. H2: Moving across [SERVICE_AREA]. Copy: From walk-ups to family homes and compact offices, we plan the route, access, and crew before moving day. Details: Dispatch area — [SERVICE_AREA]. Office visits — By appointment. Hours — Monday–Saturday 7:00 AM–7:00 PM; Sunday 9:00 AM–4:00 PM. Phone — [PHONE]. CTA: Check your address with us, scrolling to the booking form. Layout: Use a 16:9 image field inside the standard container with 28px radius. Place a 440px-wide Spruce information panel overlapping the left edge by 32px and centered vertically; keep the truck visible on the right. On mobile make the image 4:3 and place the panel below it without overlap. Motion: Fade the image and slide the information panel 16px on entry; no constant motion. 9. **Frequently asked questions** — H2: Before you put us on the calendar. Use five accessible accordion items, first open initially: Is the instant range a final price? — No. It is a planning estimate based on your inventory and mileage. A coordinator confirms access, specialty items, dates, and final pricing. Why does my home size not set the price by itself? — Two homes with the same bedroom count can hold very different loads, so the editable inventory gives a better starting point. What is included in the hourly rate? — The crew, standard moving equipment, furniture padding, and basic floor protection. Truck and mileage appear separately in the estimate. Can I change my inventory after requesting a booking? — Yes. Bring the updated list to your confirmation call so the coordinator can revise the plan. How far ahead should I book? — Two to three weeks is helpful for the widest choice of arrival windows, but short-notice requests are welcome. Layout: Two-column section with a 4-column sticky heading and an 8-column accordion. Each question is a full-width button with Plus/Minus icon, aria-expanded, and a Hairline bottom border. Answers are DM Sans at 17px with 1.65 line height. On mobile use one column and remove sticky positioning. Motion: Animate answer height and opacity over 200ms; rotate the Plus icon 45 degrees when open. Instant under reduced motion. 10. **Booking request** — Anchor as booking. Eyebrow: READY WHEN YOU ARE. H2: Turn your estimate into a moving plan. Copy: Share a few details and keep a copy of your current inventory and planning range. The form carries forward total volume, distance, truck, crew, hours, and price range into a read-only estimate summary. Fields: Full name, Email, Phone, Preferred move date, Starting address or ZIP, Destination address or ZIP, and Notes about access or special items. Mark Full name, Email, Starting address or ZIP, and Destination address or ZIP required. Use inline validation, autocomplete attributes, and a native date input. Consent checkbox: I understand this range is an estimate and the final quote will be confirmed by a coordinator. Submit button: Save my booking request. Because this is a static demo, on valid submit save the form and estimate snapshot to localStorage and show an in-page confirmation: Request saved on this device. No message was sent. Your estimate is ready to review with [BRAND] at [PHONE]. Include Start a new request to clear only the booking form while retaining the inventory. Use settled-home.webp beside the form with alt: A calm furnished room with unpacked chairs and plain moving boxes. Layout: A 12-column Paper panel with a 5-column image and 7-column form. The image covers the full left height with rounded left corners. Form fields are two columns for name/email, phone/date, and origin/destination, with Notes full width. The estimate summary sits above the fields as a Sage Wash strip. At 390px stack image, summary, and form; every field is one column with a minimum 48px control height. Motion: Reveal once, then replace the form with the confirmation using a 240ms fade. Focus the confirmation heading after submit and never show a fake server success state. 11. **Footer** — Use a Spruce footer with [BRAND], the short line Careful moving for [AUDIENCE], and anchor links Estimate, Reviews, Service area, FAQ, and Booking. Show [PHONE] and Serving [SERVICE_AREA]. Bottom line: Illustrative prices and sample business content. Include the optional [CREDIT] link unobtrusively; do not mention VibeFather anywhere else. Layout: Standard container with a large brand line above a 3-column link/details grid and a Hairline-equivalent translucent top border. Use 56px vertical padding desktop and 40px mobile. Stack on small screens with readable 16px links and at least 44px tap targets. Motion: No reveal required; simple link color and underline transitions only. ## Assets - image: Download https://media.vibefather.ai/assets/7f1950a3-398e-46e0-aae7-420fc83a2e16/hero-move.webp to public/images/hero-move.webp. Alt: Movers carrying plain boxes through a sunlit apartment. Use as the large hero photograph. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the path, exact source URL, author, and this credit in ASSETS.md. - image: Download https://media.vibefather.ai/assets/7f1950a3-398e-46e0-aae7-420fc83a2e16/packing-care.webp to public/images/packing-care.webp. Alt: Hands wrapping a ceramic bowl beside plain moving boxes. Use in Included moving care. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md. - image: Download https://media.vibefather.ai/assets/7f1950a3-398e-46e0-aae7-420fc83a2e16/moving-truck.webp to public/images/moving-truck.webp. Alt: An unmarked moving truck outside a quiet residential building. Use in Service area and working hours. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md. - image: Download https://media.vibefather.ai/assets/7f1950a3-398e-46e0-aae7-420fc83a2e16/settled-home.webp to public/images/settled-home.webp. Alt: A calm furnished room with unpacked chairs and plain moving boxes. Use beside the booking request. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md. - icon: Use locally bundled lucide-react icons only: ArrowRight, ArrowUpRight, Menu, X, Phone, ShieldCheck, PackageCheck, CalendarCheck, Plus, Minus, Check, Truck, Users, Clock, MapPin, Star, ChevronDown, RotateCcw, and ClipboardCheck. Do not import brand icons. List lucide-react and its ISC license in ASSETS.md. - font: Self-host Fraunces Variable and DM Sans Variable through @fontsource-variable/fraunces and @fontsource-variable/dm-sans. Import the required weights locally, include no Google Fonts URLs, and list both packages and their OFL-1.1 licenses in ASSETS.md. ## Don'ts - Do not copy any real moving company's name, identity, logo, slogan, palette, copy, reviews, photographs, illustrations, or code. Keep the company and customer content invented and rewrite default-specific content when variables change. - Do not show branded uniforms, branded vehicles, recognizable truck models, visible faces, recognizable people, real people's likenesses, third-party logos, or watermarks in any asset. - Do not use stock-photo services, external image URLs at runtime, placeholder-image services, Google Images, Unsplash, Pexels, Pixabay, CC BY-NC or CC BY-SA assets. Use only the four specified generated images and locally bundled Lucide icons. - Do not load fonts, scripts, styles, icons, images, analytics, or any other runtime asset from a CDN. Self-host the specified Fontsource packages and keep every asset local. - Do not add a backend, database, authentication, API route, serverless function, external form service, real submission, tracking, or third-party API. Calculations, persistence, validation, and booking confirmation must remain client-side and must state that no message was sent. - Do not present the instant range as a binding quote, guaranteed price, or confirmed reservation. Keep the estimate disclaimer and coordinator-review step visible. - Do not replace the specified calculator with random prices or unrelated formulas. Every control must work, the default 2-bedroom/18-mile state must produce $1,250–$1,595, and zero-quantity inventories must remain valid with the formula's minimums. - Do not use commercial fonts, restricted component-library source, copied Aceternity or Tailwind Plus code, or dependencies outside the permitted licenses. - Do not create extra pages, bare-directory links, source maps, or copied src files in dist. Use index.html with anchored sections, relative asset paths, minified production output, and a total dist size under 20 MB. - Do not use typography alone as the hero, auto-playing carousels, excessive parallax, horizontal card clipping, blocked reading, or motion that ignores prefers-reduced-motion. - Do not leave console errors, nonfunctional buttons, inaccessible disclosures, low-contrast helper text, or horizontal overflow. Verify 1440×900 and 390×844, keyboard operation, visible focus, and 48px mobile form targets. - Do not write SEO metadata, Open Graph tags, JSON-LD, sitemaps, keyword-stuffed copy, or non-English site content. A plain [BRAND] document title and the original favicon are sufficient. --- — Prompt by VibeFather · https://vibefather.ai/t/moving-company-quote-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Moving Company Quote Page"
colors:
canvas: "#F3F0E7"
paper: "#FFFDF8"
spruce: "#193C35"
muted_pine: "#63736C"
sage_wash: "#DDE6D8"
apricot: "#E88962"
hairline: "#D4D8CD"
typography:
display_and_editorial_headings: { family: "Fraunces Variable", weights: [500, 600, 700] }
body_navigation_forms_and_numbers: { family: "DM Sans Variable", weights: [400, 500, 600, 700] }
spacing: "Use a centered 1280px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 104px vertical padding, mobile sections 68px. Hero uses 56px top and 72px bottom padding. Cards use 24–32px padding, form rows 16px gaps, and inventory item rows 12px vertical gaps."
radius: "Use 28px corners for major photography, 20px for the quote studio and booking panel, 14px for cards and inputs, and fully rounded pills only for compact tags and step labels. All bordered surfaces use a 1px Hairline outline rather than heavy shadows."
---
# Moving Company Quote Page — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Canvas** `#F3F0E7` — Warm ivory page background and alternating section field.
- **Paper** `#FFFDF8` — Cards, form controls, quote ledger, and header surface.
- **Spruce** `#193C35` — Primary text, dark buttons, footer, and strong icon strokes.
- **Muted Pine** `#63736C` — Secondary copy and helper text; never use for tiny low-contrast labels.
- **Sage Wash** `#DDE6D8` — Selected move-size cards, room tabs, progress accents, and soft badges.
- **Apricot** `#E88962` — Small editorial accents, active step markers, and estimate highlights; pair with spruce text.
- **Hairline** `#D4D8CD` — One-pixel borders, table rules, input outlines, and separators.
## Typography
- **Display and editorial headings** — Fraunces Variable (OFL), weights 500/600/700. Self-host the font files.
- **Body, navigation, forms, and numbers** — DM Sans Variable (OFL), weights 400/500/600/700. Self-host the font files.
## Spacing & shape
- Spacing: Use a centered 1280px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 104px vertical padding, mobile sections 68px. Hero uses 56px top and 72px bottom padding. Cards use 24–32px padding, form rows 16px gaps, and inventory item rows 12px vertical gaps.
- Radius: Use 28px corners for major photography, 20px for the quote studio and booking panel, 14px for cards and inputs, and fully rounded pills only for compact tags and step labels. All bordered surfaces use a 1px Hairline outline rather than heavy shadows.
## Motion
- Reveal major sections once with Motion whileInView: opacity 0 to 1 and y 18 to 0 over 500ms, stagger direct children by 70ms, viewport amount 0.18.
- Animate quote-range digits and the truck, crew, and hour values with a 280ms crossfade/slide whenever state changes; keep the layout width stable and never animate every keystroke excessively.
- Use 180–220ms transitions for room tabs, quantity steppers, accordion height, mobile navigation, hover arrows, and the expanded mobile estimate bar.
- The hero photograph may scale from 1.025 to 1 on entry over 700ms; do not add continuous parallax or autoplay carousels.
- When prefers-reduced-motion is enabled, remove transforms and number tweens, show final values immediately, and keep all controls fully usable.
## Imagery
Use four coordinated photorealistic editorial images generated specifically for this template. The shared look is warm natural window light, restrained ivory/sage/apricot colors, realistic moving materials, subtle film grain, and a 35mm documentary-lifestyle feel. Show functioning spaces and careful work rather than posed advertising. No text, logos, watermarks, branded uniforms, recognizable truck models, visible faces, or recognizable people. Crop the hero to a large 4:3 scene, use the packing photograph in a split service section, the unmarked truck in a wide service-area band, and the settled room beside the booking panel. Download all four locally and list them in ASSETS.md with the supplied generated-asset credit.
## Tone
Calm, capable, warm, and precise. Sound like an experienced move coordinator rather than a sales page. Use plain US English, specific inclusions, realistic sample details, and no pressure tactics.
---
— Prompt by VibeFather · https://vibefather.ai/t/moving-company-quote-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown