2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Campground and RV Park Website is a single-page outdoor hospitality template for an invented woodland park. It suits independent campground owners, RV resorts, cabin operators, and small rural hospitality teams that need to explain both the feeling of a stay and the practical details behind it. The page moves from a scenic photographic hero and quick date search to accommodation choices, an interactive site map, amenities, nearby trails, arrival guidance, park rules, and a focused reservation request.
The visual system uses warm oat, deep spruce, moss, clay, and muted gold with expressive serif headlines and clear interface typography. Six generated photographs form one consistent Pacific Northwest-inspired shoot, covering the park, tent sites, RV pads, cabins, shared spaces, and trails. An original inline SVG map provides the main interactive anchor without external map tiles or a mapping service.
Twelve individual sites have their own capacity, features, sample nightly rate, and blocked date ranges. Visitors can compare tent, RV, and cabin options, filter by dates and useful features, select a site on the map or in the accessible list, review an estimated stay total, and prepare a reservation request. The finished request can be copied or downloaded on device; nothing is transmitted, no site is held, and no payment is collected.
Brand, park type, location, hero line, audience, and contact email are variables. All accommodation records, availability, amenities, trail details, rules, prices, and contact copy live in one content file. Adapt them for another woodland campground, lakeside RV resort, or small cabin park while retaining the same layout and interactions.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Campground and RV Park Website
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
Build a polished single-page website for [BRAND], a [PARK_TYPE] in [LOCATION]. Lead with the line '[TAGLINE]' and a scenic park photograph, then let visitors compare tent, RV, and cabin stays, inspect an original SVG site map, filter sample availability by dates and features, and prepare a client-side reservation request. Write for [AUDIENCE] and use [CONTACT_EMAIL] as the fictional contact.
- Audience: The primary visitors are [AUDIENCE]. The template is also for independent owners and small hospitality teams who need an adaptable site that answers stay, arrival, amenity, trail, and policy questions clearly.
- Goal: Help a visitor choose the right kind of stay, understand the park before arrival, find an available sample site for specific dates, and leave with a complete reservation request they can copy or download without a backend.
- Tone: Warm, grounded, practical, and quietly confident. Use concrete details about sites, hookups, trails, and routines rather than vague escape language, urgency, superlatives, or unverified hospitality claims.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL), @fontsource-variable/inter (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Set vite.config.ts to use React, base: './', build.outDir: 'dist', and build.sourcemap: false.
- Configure tailwind.config.ts with content for index.html and src/**/*.{ts,tsx}; define the listed colors, spacing, and font families as theme tokens.
- Import the self-hosted font packages in src/main.tsx and the Tailwind directives plus small global focus and reduced-motion rules in src/index.css.
- Put every headline, paragraph, label, site record, blocked range, amenity, trail, rule, FAQ, contact detail, link, and image path in src/content.ts keyed by section; derive variable-dependent copy and the brand-derived contact details from the supplied values.
- Build small section components and keep quick-search, map-filter, selected-site, accordion, mobile-menu, reservation-drawer, and request-confirmation state in React; use Motion only for the specified reveals and transitions.
- Represent each blocked range as non-negative arrival and departure day offsets from the visitor's current local date, with departure treated as checkout-exclusive; default the quick search to arrival in 14 days and departure in 17 days, use native date inputs, and format dates in US English without an external date API.
- Use an original inline SVG viewBox='0 0 960 600' for the park diagram, with every site geometry and label defined in content.ts; do not add a map library, map tiles, geocoding, or real geographic claims.
## Variables
- [BRAND] — Park name (default: "Moss & Meadow"). Use an invented campground or RV park name without a location brand or real business identity.
- [PARK_TYPE] — Park description (default: "woodland campground and RV park"). A short lowercase description used in the eyebrow, introduction, and footer.
- [LOCATION] — Park location (default: "Fern Hollow, Oregon"). Use a plausible fictional locality and adapt area, address, and arrival copy consistently.
- [TAGLINE] — Hero headline (default: "Find your patch of quiet."). A concise original outdoor welcome line that works as the large hero heading.
- [AUDIENCE] — Primary guests (default: "weekend campers, RV travelers, and families planning an easy cabin stay"). A lowercase audience phrase used in a complete sentence and reflected in the stay copy.
- [CONTACT_EMAIL] — Reservation email (default: "[email protected]"). Use an invented .example address for the fictional park.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/campground-and-rv-park-website 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
- Oat `#F3EFE4` — Primary page background, light text on dark imagery, and quiet form surfaces
- Spruce `#18372B` — Headlines, body copy, primary buttons, footer, and dark section backgrounds
- Moss `#526B4D` — Secondary accents, available-site fills, icons, and active filter states
- Clay `#B95F3F` — Small editorial accents, links on light surfaces, and trail difficulty markers
- Honey `#E2B85B` — Selected map sites, key highlights, and focus accents with dark text
- Lichen `#DCE3D2` — Alternating panels, map clearings, selected cards, and soft status backgrounds
- River `#9BBBC0` — The illustrated creek and lake in the original park map
- Stone `#C9C5B8` — Borders, unavailable sites, form outlines, and subtle separators
### Typography
- Display: Fraunces Variable (OFL), weights 500/600/700
- Body and interface: Inter Variable (OFL), weights 400/500/600/700
### Layout & motion
- Spacing: Use an 8px base grid, a 1320px maximum content width, 40px desktop gutters, and 20px mobile gutters. Sections have 104px vertical padding on desktop and 68px on mobile. Use 12-column desktop grids with 24px gaps, 16px form-field gaps, and 56–72px between major headings and content. Keep body measure near 68 characters.
- Radius: Use 18px corners on photographs and major cards, 12px on the map and reservation panels, 8px on inputs and site buttons, and fully rounded shapes only for small filter chips and status labels. Avoid nested rounded cards, large floating bubbles, and heavy shadows.
- Motion: On first load, fade the hero copy upward by 18px over 600ms while the photograph settles from scale 1.035 to 1 over 1000ms; stagger the eyebrow, headline, paragraph, and action by 70ms.
- Motion: Reveal section headings and photographic cards with a 20px rise and opacity transition over 500ms when they enter the viewport, once only, with no scroll hijacking.
- Motion: Give map sites, filter controls, and stay-card actions a 160ms fill, border, or color response; update result counts and availability immediately without animated number ticking.
- Motion: Open the reservation drawer with a 240ms opacity and 24px horizontal transition, trap focus, close on Escape and backdrop click, and return focus to the triggering control.
- Motion: Expand accordions over 200ms with height and opacity, and use smooth anchor scrolling only when reduced motion is not requested.
- Motion: Disable nonessential transforms, staggered reveals, smooth scrolling, and drawer movement under prefers-reduced-motion; never delay form errors, site details, or availability text.
- Imagery: Use the six supplied generated images as one coherent editorial outdoor shoot: a wide park hero, one photograph for each accommodation type, a communal campfire area, and a woodland trail. They share warm late-afternoon light, tall pines, natural materials, deep green and honey tones, and an unposed sense of space. Crop with object-fit: cover and keep the hero scene spacious. Add the original SVG site map and small code-drawn trail elevation profiles as informational graphics. Do not add recognizable people, vehicle or equipment brands, readable signs, logos, or identifiable landmarks.
## Pages & Sections
### [BRAND] — Campground and RV Park in [LOCATION] (`index.html`)
1. **Header, photographic hero, and quick availability** — Create a 34px Spruce utility strip reading 'CAMP HOST ON SITE · 8 AM–8 PM' and '[LOCATION]', followed by a 76px Oat header with the text wordmark '[BRAND]', anchor links 'Stay', 'Site map', 'Amenities', 'Trails', and 'Good to know', plus a Spruce 'Check availability' button. On mobile use a Menu icon and accessible dropdown. Over the hero photograph place the eyebrow '[PARK_TYPE] · [LOCATION]', the display headline '[TAGLINE]', and supporting copy 'Twelve wooded sites for tents, RVs, and cabin weekends, with hot showers, trailheads, and a camp host who knows the place. Made for [AUDIENCE].' Use one light-outline action 'Explore the sites' pointing to the stay section and a small line 'Open April through October · Sample park content'. Overlay a quick-availability panel titled 'Start with your dates' with native Arrival and Departure inputs, a Guests select from 1–6, accommodation options All sites, Tent, RV, and Cabin, and a Honey 'Show available sites' button. Include 'Sample availability · No payment collected'. Submitting applies the filters to the map, scrolls to its heading, and moves keyboard focus there.
Layout: Keep utility and navigation outside the photograph. Use a full-width hero inside the page gutters, at least 650px tall at 1440×900, with hero.webp covering the frame and a left-to-right Spruce gradient for legible light text. Position copy in columns 1–7 near the lower left, set the headline at 76px/0.98 with a five-line maximum but target two lines, and place the quick-availability panel across the bottom with a five-column desktop control grid. On mobile stack the controls in two columns, make the button full width, use a 46px headline and a 600px minimum hero, and avoid covering the photographic focal point with unnecessary badges.
Motion: Run the specified hero entrance once and gently settle the photograph. The mobile menu fades and slides down 8px over 180ms. Do not add parallax or autoplay media.
2. **Choose a basecamp** — Eyebrow: 'THREE WAYS TO STAY'. Heading: 'Pick your kind of outside.' Intro: 'From a simple tent pad to a full-hookup pull-through or a cabin with a real door, every option keeps the practical details in view.' Create exactly three photographic cards. Tent sites use tent.webp, 'From $38 / night', '4 sites · 2–6 guests', and features 'Level tent pad', 'Picnic table and fire ring', 'Drinking water nearby', with action 'Show tent sites'. RV sites use rv.webp, 'From $62 / night', '4 sites · up to 45 ft rigs', and features '30/50 amp options', 'Water and sewer on full-hookup sites', 'Pull-through and back-in pads', with action 'Show RV sites'. Cabins use cabin.webp, 'From $118 / night', '4 cabins · 2–6 guests', and features 'Real beds and heating', 'Kitchenette and dining nook', 'Bathhouse or private bathroom by cabin', with action 'Show cabins'. Each action sets the matching map filter, preserves valid dates, scrolls to the map, and focuses its result count. Label all prices 'illustrative sample rates'.
Layout: Use a 4-column section heading above three equal cards. Each card has a 4:3 image, a small type label, a 30px Fraunces title, a price row, a short metadata line, three Lucide Check details, and a text-arrow action. Use fine Stone borders and no floating shadows. On mobile stack the cards and keep images at 16:10 so the content does not become excessively long.
Motion: Reveal cards with a 70ms stagger. Scale only the inner photograph to 1.025 on hover and return over 240ms; disable the effect for reduced motion and keyboard-only navigation.
3. **Interactive site map and availability planner** — Eyebrow: 'THE SITE MAP'. Heading: 'See your spot before you arrive.' Intro: 'Choose dates, compare features, and select a site on the original illustrated map. Availability and prices are sample data for this fictional park.' Repeat synchronized Arrival, Departure, Guests, and Accommodation controls, then add feature checkboxes 'Full hookups', 'Pull-through', 'Lake view', and 'Step-free access', plus 'Clear filters'. Validate that departure is after arrival and show an inline error instead of results when invalid. Define exactly 12 records: T01 Fern Tent / tent / 2 guests / $38 / shaded, near bathhouse / blocked 0–4; T02 Creek Tent / tent / 4 / $44 / creekside, water nearby / no blocked dates; T03 Meadow Tent / tent / 6 / $48 / step-free access, sunny clearing / blocked 14–17 and 28–31; T04 Ridge Tent / tent / 4 / $42 / lake view, fire ring / blocked 7–10. R01 Alder Pull-Through / RV / 4 / $64 / up to 40 ft, full hookups, pull-through / no blocked dates; R02 Creek Back-In / RV / 6 / $68 / up to 35 ft, full hookups, creekside / blocked 14–18; R03 Meadow Pull-Through / RV / 6 / $72 / up to 45 ft, full hookups, pull-through, lake view, step-free access / no blocked dates; R04 Ridge Back-In / RV / 4 / $62 / up to 30 ft, 30 amp and water, lake view / blocked 3–7. C01 Fern Cabin / cabin / 2 / $118 / queen bed, kitchenette, nearby bathhouse / no blocked dates; C02 Creek Cabin / cabin / 4 / $146 / queen and bunks, kitchenette, private bathroom / blocked 14–17; C03 Meadow Cabin / cabin / 6 / $168 / two queens and bunks, kitchenette, private bathroom, step-free access / no blocked dates; C04 Ridge Cabin / cabin / 4 / $152 / queen and loft, kitchenette, private bathroom, lake view / blocked 21–24. Blocked offsets use checkout-exclusive ranges and overlap the requested stay when arrivalOffset < blockedDeparture and departureOffset > blockedArrival. The default 14–17 day search therefore has 9 available sites. Dim feature-incompatible sites, hatch unavailable ones, and show a live '9 of 12 sites available' count that changes with input. Draw a winding River creek, pale internal roads, a lodge, bathhouse, four tent clearings, four rectangular RV pads, and four cabin footprints with site codes. Available sites are Lichen with Spruce strokes; the selected site is Honey with a 3px Spruce outline. Each site is keyboard operable with Enter or Space and has an accessible name containing code, type, price, and state. Also provide a synchronized list view of all matching sites for mobile and assistive technology. Initially select R01; if later filters make it incompatible, clear the selection and show a useful prompt. The detail panel shows the selected record, every feature, nightly rate, selected dates, night count, estimated lodging subtotal, 'Taxes not included in this demo', and a 'Prepare reservation request' button. When no sites match, show 'No sites fit those dates and features' and a reset action.
Layout: Place the filter controls in an Oat panel with a five-column primary row and a wrapping feature row. Below, use an 8-column SVG map and a 4-column sticky detail panel inside a 12-column layout. Keep the map at a 960:600 aspect ratio with labels at least 13px at desktop scale; include a small legend for Available, Selected, Unavailable, and Filtered out. The detail panel stays beside the map rather than becoming a modal. Below 800px stack map, list-view toggle, and details; provide the list as an equivalent non-tiny interaction rather than forcing horizontal scrolling or pinch zoom.
Motion: Use immediate state changes with 160ms color transitions. Draw the creek and roads once with a 600ms stroke reveal when the map enters the viewport, but show completed geometry immediately under reduced motion. Never animate blocked ranges or rearrange the map when filtering.
4. **Amenities and daily rhythms** — Eyebrow: 'AT THE PARK'. Heading: 'The useful things are already here.' Copy: 'Arrive with the basics and settle in quickly. The camp host is at the lodge from 8 AM to 8 PM, with clear arrival instructions for later check-ins.' Use gathering.webp with alt 'Woodland campfire circle with timber benches and a simple picnic shelter.' Add eight compact Lucide-icon amenities: 'Hot showers' / 'Bathhouse open 6 AM–10 PM'; 'Dishwashing station' / 'Warm water beside the lodge'; 'Drinking water' / 'Refill points in every camping loop'; 'RV dump station' / 'Included with full-hookup stays'; 'Camp store basics' / 'Ice, kindling, coffee, and toiletries'; 'Wi-Fi at the lodge' / 'Porch seating, no streaming promise'; 'Dog-friendly loop' / 'Leashed pets welcome on Fern Loop'; 'Recycling and waste' / 'Sorted bins at the main entrance'. Add a small note 'Amenities and hours are illustrative sample content for this fictional park.'
Layout: Use a 6-column photograph at 4:3 and a 6-column content area. Arrange the eight amenities in a 2×4 grid with fine top rules, 20px icons, concise labels, and one-line explanations rather than separate cards. On mobile order the heading and copy first, then the image, then a two-column amenity grid that collapses to one column below 360px.
Motion: Use the standard viewport reveal for the photograph and one combined reveal for the amenity grid. Icons remain still; links and focus states use simple color changes.
5. **Nearby trails** — Eyebrow: 'FROM THE TRAILHEAD'. Heading: 'Three ways into the woods.' Intro: 'Start from the north gate or drive to a nearby trailhead. Distances and conditions below are sample guide content, not live safety information.' Feature trail.webp with alt 'Fern-lined woodland trail leading through tall pines toward a quiet lake.' Define three trail rows with original data-driven SVG elevation profiles: Fern Loop / Easy / 1.8 mi / 180 ft gain / about 45 min / starts behind the lodge / leashed dogs welcome; Creekline Ramble / Moderate / 3.6 mi / 520 ft gain / about 2 hr / north gate trailhead / rocky after rain; North Ridge Climb / Hard / 5.2 mi / 1,240 ft gain / about 3 hr / 6-minute drive / carry water and an offline map. Add a practical note 'Check local conditions before setting out. Tell someone your route and expected return.'
Layout: Use a 5-column sticky image and a 7-column list. Each trail row contains the name and difficulty, a four-stat grid, a 96px-high elevation profile drawn as a simple Moss area and Spruce line, and trail notes. Use row separators rather than cards. On mobile remove sticky behavior, place the photograph first, and keep each stat grid at two columns.
Motion: Reveal the three trail profiles together with a 500ms stroke and opacity entrance once; render the final paths without animation when reduced motion is requested. Do not imply live GPS tracking.
6. **Arrival information and park rules** — Eyebrow: 'GOOD TO KNOW'. Heading: 'A smoother arrival starts here.' Create two information panels. 'Before you arrive' lists Check-in 2 PM–8 PM, Checkout by 11 AM, Gate code provided with a confirmed real-world booking, Camp host at the lodge 8 AM–8 PM, and Late arrivals follow the envelope instructions at the lodge. Add 'This demo never issues a gate code or confirms a stay.' 'Good neighbors make great camps' lists Quiet hours 10 PM–7 AM, Fires only in provided rings and never during a burn ban, Maximum two vehicles per site, Pets on a leash no longer than 6 ft, and Use local firewood to protect the forest. Follow with an accessible five-item FAQ: 'Is my reservation confirmed when I prepare a request?' / 'No. This static demo creates a request summary only. It does not contact a park, hold a site, or take payment.'; 'What is included in the nightly estimate?' / 'The estimate multiplies the sample nightly rate by the number of nights. Taxes and optional extras are not included.'; 'Can I bring my dog?' / 'The fictional park allows leashed dogs on tent and RV sites and on Fern Loop. The sample cabins do not accept pets.'; 'What happens if my rig is longer than 40 ft?' / 'Choose R03 Meadow Pull-Through for the sample 45 ft capacity, then include the exact rig length in your request note.'; 'Can I change my dates after preparing a request?' / 'Yes. Close the confirmation, change the dates, and prepare a new summary. Nothing has been sent or booked.' Keep only one FAQ item open at a time.
Layout: Use a 5-column arrival panel on Lichen and a 7-column rules list on Oat, followed by a full-width accordion with strong top and bottom rules. Questions use 18px medium Inter and answers use 16px/1.7. On mobile stack all panels and keep rules and answers free of horizontal scrolling.
Motion: Expand and collapse answers with a 200ms height and opacity transition, rotating the Plus icon 45 degrees; keep content immediately available with reduced motion.
7. **Reservation request drawer** — Opening 'Prepare reservation request' from a selected site launches a labeled dialog titled 'Prepare your stay request'. Show the selected site, dates, guest count, nightly rate, and estimated subtotal in a compact summary. Include editable native Arrival and Departure inputs synchronized with the planner, Guests limited to the site capacity, required Name and Email fields, optional Phone and Note fields, and a required checkbox reading 'I understand this is a request, not a confirmed booking.' The primary action is 'Prepare request'. Validate dates, required fields, email format, capacity, and checkbox inline, then move focus to the first invalid field. Include the persistent note 'Demo only: nothing is sent, no site is held, and no payment is collected.' On success keep personal fields in memory only and replace the form with 'Your request is ready', a complete plain-text summary, 'Copy request', 'Download .txt', and 'Make another request' actions. Copy uses the Clipboard API with a visible fallback; download creates a local text file. Never claim an email was sent or a reservation confirmed.
Layout: Use a right-side drawer 520px wide on desktop with an Oat background, Spruce text, a clear close button, and a scrollable form area. On mobile make it a full-screen dialog. Keep the stay summary at the top, use visible labels above every field and 48px minimum controls, and make phone and note full width. Prevent background scrolling while open without causing layout shift.
Motion: Use the specified 240ms drawer transition and a 180ms form-to-confirmation crossfade. Show validation errors immediately, preserve all values after errors, respect reduced motion, and restore focus on close.
8. **Closing call to action and footer** — Use a Spruce closing panel with the eyebrow 'YOUR NEXT WEEKEND', the heading 'The right site is waiting on the map.', copy 'Compare the clearings, pads, and cabins for your dates, then prepare a request when you are ready.', and a Honey 'Find your site' button that focuses the map controls. In the footer repeat '[BRAND]', '[PARK_TYPE] in [LOCATION]', and the fictional address '1840 Fern Hollow Road, Fern Hollow, Oregon 97400'. Show '[CONTACT_EMAIL]', 'Camp host · 8 AM–8 PM', and anchor links Stay, Site map, Amenities, Trails, and Good to know. Finish with 'Fictional park demonstration. Sites, prices, availability, trails, policies, and contact details are sample content.' Keep the optional [CREDIT] link small in the final row.
Layout: Place the closing copy in a 7-column block and the action at the right of a full-width dark panel. The footer below uses 5-column brand, 4-column contact, and 3-column navigation blocks with one low-opacity Stone rule above the fine print. Stack all blocks on mobile, wrap the email and address safely, and ensure the map action does not open an empty reservation form.
Motion: No footer entrance animation. Use simple underline and color hover states with clear focus-visible outlines; the closing panel may use the standard single viewport reveal.
## Assets
- image: hero.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/hero.webp to public/images/hero.webp. Alt: 'Wide woodland campground beside a quiet lake with tents, unbranded RVs, and timber cabins in warm evening light.' Used as the photographic hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the path, source URL, credit, and license note in ASSETS.md.
- image: tent.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/tent.webp to public/images/tent.webp. Alt: 'Spacious woodland tent site with a simple tent, picnic table, and unlit fire ring.' Used on the tent accommodation card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: rv.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/rv.webp to public/images/rv.webp. Alt: 'Level gravel RV pad with a generic unbranded travel trailer among tall pines.' Used on the RV accommodation card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: cabin.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/cabin.webp to public/images/cabin.webp. Alt: 'Small timber cabin with a covered porch and warm windows in a pine clearing.' Used on the cabin accommodation card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: gathering.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/gathering.webp to public/images/gathering.webp. Alt: 'Woodland campfire circle with timber benches and a simple picnic shelter.' Used in the amenities section. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: trail.webp — download https://media.vibefather.ai/assets/48eca278-1530-440c-b7dd-c6a0d71e893e/trail.webp to public/images/trail.webp. Alt: 'Fern-lined woodland trail leading through tall pines toward a quiet lake.' Used in the nearby trails section. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- icon: Use only lucide-react (ISC) for interface and amenity icons, including ArrowUpRight, ArrowRight, CalendarDays, MapPin, TentTree, Caravan, House, Users, Check, Menu, X, Plus, ShowerHead, Droplets, Store, Wifi, Dog, Recycle, Flame, Clock, Copy, and Download. Draw the site map and three trail elevation profiles as original inline SVG; do not use brand icons, external map tiles, or copied map geometry.
- font: Fraunces Variable 500/600/700 via @fontsource-variable/fraunces (OFL), self-hosted through the npm package for display headings; list the package and license in ASSETS.md.
- font: Inter Variable 400/500/600/700 via @fontsource-variable/inter (OFL), self-hosted through the npm package for body and interface text; list the package and license in ASSETS.md.
## Don'ts
- Do not add a backend, server code, API routes, authentication, database, third-party API, external map service, analytics, payment collection, or real form transmission; the reservation request remains on device and is explicitly labeled as a demo.
- Do not hotlink images, fonts, icons, scripts, styles, maps, or any other runtime asset. Download the six supplied generated images into public/images and serve everything locally with relative paths.
- Do not use Unsplash, Pexels, Pixabay, Google Images, CC BY-NC or CC BY-SA assets, placeholder-image services, real campground photography, or images with readable signs, logos, recognizable people, branded vehicles or equipment, or identifiable landmarks.
- Do not use real campground names, logos, slogans, mascots, site maps, testimonials, guest identities, reservation records, or branded palettes. The default and alternate parks, the SVG geography, and all site and trail data must remain invented.
- Do not copy website code, exact copy, signature illustrations, protected trail artwork, custom fonts, unique iconography, or restricted component source; implement the visual system and interactions from scratch with the listed permissive packages.
- Do not load fonts from Google Fonts or another CDN and do not use commercial typefaces; self-host only the specified OFL Fontsource packages.
- Do not hard-code variable-dependent copy inside components. Keep all copy, prices, policies, inventory, links, image paths, and contact details in src/content.ts and rewrite them coherently when variable values change, including the alternate park type, location, audience, and email.
- Do not present sample rates, availability, amenities, trail conditions, policies, or the reservation flow as verified live services; retain the fictional-park and sample-content notes.
- Do not collect identity documents, payment details, precise home addresses, or other sensitive guest information. Do not persist personal form fields, and never show a success message claiming a request was sent, a site was held, a gate code was issued, or a booking was confirmed.
- Do not use bare-directory links, client-side routes that require a server fallback, external navigation for core sections, random availability, or an empty state without a reset. Use ./index.html anchor links and deterministic local offset-based availability.
- Do not make the tiny SVG sites the only way to select a stay. Provide keyboard-operable SVG controls, an equivalent accessible list, visible focus, useful empty states, and mobile layouts without horizontal scrolling.
- Do not add scroll hijacking, custom cursors, autoplay media, heavy 3D, continuous parallax, animated availability numbers, or animation that ignores prefers-reduced-motion.
- Do not ship source maps, src/ files, remote dependencies, console errors, or a dist/ over 20 MB. The production site must work at 1440×900 and 390×844 with keyboard navigation, accessible dialog semantics, sufficient contrast, and zero console errors.
---
— Prompt by VibeFather · https://vibefather.ai/t/campground-and-rv-park-website · 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: "Campground and RV Park Website"
colors:
oat: "#F3EFE4"
spruce: "#18372B"
moss: "#526B4D"
clay: "#B95F3F"
honey: "#E2B85B"
lichen: "#DCE3D2"
river: "#9BBBC0"
stone: "#C9C5B8"
typography:
display: { family: "Fraunces Variable", weights: [500, 600, 700] }
body_and_interface: { family: "Inter Variable", weights: [400, 500, 600, 700] }
spacing: "Use an 8px base grid, a 1320px maximum content width, 40px desktop gutters, and 20px mobile gutters. Sections have 104px vertical padding on desktop and 68px on mobile. Use 12-column desktop grids with 24px gaps, 16px form-field gaps, and 56–72px between major headings and content. Keep body measure near 68 characters."
radius: "Use 18px corners on photographs and major cards, 12px on the map and reservation panels, 8px on inputs and site buttons, and fully rounded shapes only for small filter chips and status labels. Avoid nested rounded cards, large floating bubbles, and heavy shadows."
---
# Campground and RV Park Website — 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
- **Oat** `#F3EFE4` — Primary page background, light text on dark imagery, and quiet form surfaces
- **Spruce** `#18372B` — Headlines, body copy, primary buttons, footer, and dark section backgrounds
- **Moss** `#526B4D` — Secondary accents, available-site fills, icons, and active filter states
- **Clay** `#B95F3F` — Small editorial accents, links on light surfaces, and trail difficulty markers
- **Honey** `#E2B85B` — Selected map sites, key highlights, and focus accents with dark text
- **Lichen** `#DCE3D2` — Alternating panels, map clearings, selected cards, and soft status backgrounds
- **River** `#9BBBC0` — The illustrated creek and lake in the original park map
- **Stone** `#C9C5B8` — Borders, unavailable sites, form outlines, and subtle separators
## Typography
- **Display** — Fraunces Variable (OFL), weights 500/600/700. Self-host the font files.
- **Body and interface** — Inter Variable (OFL), weights 400/500/600/700. Self-host the font files.
## Spacing & shape
- Spacing: Use an 8px base grid, a 1320px maximum content width, 40px desktop gutters, and 20px mobile gutters. Sections have 104px vertical padding on desktop and 68px on mobile. Use 12-column desktop grids with 24px gaps, 16px form-field gaps, and 56–72px between major headings and content. Keep body measure near 68 characters.
- Radius: Use 18px corners on photographs and major cards, 12px on the map and reservation panels, 8px on inputs and site buttons, and fully rounded shapes only for small filter chips and status labels. Avoid nested rounded cards, large floating bubbles, and heavy shadows.
## Motion
- On first load, fade the hero copy upward by 18px over 600ms while the photograph settles from scale 1.035 to 1 over 1000ms; stagger the eyebrow, headline, paragraph, and action by 70ms.
- Reveal section headings and photographic cards with a 20px rise and opacity transition over 500ms when they enter the viewport, once only, with no scroll hijacking.
- Give map sites, filter controls, and stay-card actions a 160ms fill, border, or color response; update result counts and availability immediately without animated number ticking.
- Open the reservation drawer with a 240ms opacity and 24px horizontal transition, trap focus, close on Escape and backdrop click, and return focus to the triggering control.
- Expand accordions over 200ms with height and opacity, and use smooth anchor scrolling only when reduced motion is not requested.
- Disable nonessential transforms, staggered reveals, smooth scrolling, and drawer movement under prefers-reduced-motion; never delay form errors, site details, or availability text.
## Imagery
Use the six supplied generated images as one coherent editorial outdoor shoot: a wide park hero, one photograph for each accommodation type, a communal campfire area, and a woodland trail. They share warm late-afternoon light, tall pines, natural materials, deep green and honey tones, and an unposed sense of space. Crop with object-fit: cover and keep the hero scene spacious. Add the original SVG site map and small code-drawn trail elevation profiles as informational graphics. Do not add recognizable people, vehicle or equipment brands, readable signs, logos, or identifiable landmarks.
## Tone
Warm, grounded, practical, and quietly confident. Use concrete details about sites, hookups, trails, and routines rather than vague escape language, urgency, superlatives, or unverified hospitality claims.
---
— Prompt by VibeFather · https://vibefather.ai/t/campground-and-rv-park-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown