About this template
A single-page site for a high-end safari lodge, built like a film: charcoal ground, ochre and olive accents, warm grain over everything, and full-bleed landscape photography shot at first and last light. The first screen is a golden-hour savanna with the lodge glowing on a river bend, a refined serif headline over the haze, and a stay price set quietly beneath the buttons. From there the page tells one stay, end to end: an editorial strip on how the lodge behaves as a guest in its own conservancy; a suites gallery of canvas tents at dawn, dusk and lantern light; a day-at-the-lodge timeline that walks down the page — dawn drive, brunch on the deck, siesta, sundowners, night drive — with a rail that fills like the sun crossing the sky. Experience cards cover drives, walking safaris, birding mornings and a community visit, priced as sample data and honest about promising light rather than sightings. A seasonal rates table compares green, shoulder and dry season per suite, drawn in code with hairlines instead of card chrome, and the inquiry form collects season, nights, party size and a note, saving to local storage only and saying so. Fraunces carries the display voice over Work Sans; motion is slow and restrained — hero parallax, 700ms reveals, the filling timeline rail — all honoring prefers-reduced-motion. Swap lodge, conservancy, suite count and starting rate in one content file; the second demo case turns the same layout into a photography-first safari lodge to prove the design holds.
The template prompt
The live demo was built from exactly this text — nothing added.
# Safari Lodge Website Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief A single-page marketing site for a luxury safari lodge: golden-hour cinematic identity (ochre, olive, charcoal, warm grain), a full-bleed dusk savanna hero, an editorial conservancy strip, a suites gallery of tented suites at dawn and dusk, a vertical day-at-the-lodge timeline, game drive and experience cards with sample pricing, a seasonal rates table, and a client-side inquiry form. - Audience: Safari lodges, tented camps, wilderness retreats and the studios who build for them; also photo-safari and expedition outfits. - Goal: Sell the feeling first — golden light, space and quiet — then make planning feel certain: see the suites, live a day at the lodge, understand the seasons and rates, and leave an inquiry. - Tone: Quiet, warm, unhurried; short declarative sentences with the precision of a field notebook; luxury expressed through restraint and light, never superlatives. ## Stack - Framework: Vite 5 + React 18 + TypeScript - Styling: Tailwind CSS 3.4 - Libraries: tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/fraunces (OFL), @fontsource/work-sans (OFL) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Scaffold with npm create vite@latest safari-lodge-website -- --template react-ts; add [email protected], postcss and autoprefixer as dev dependencies; add motion, lucide-react, @fontsource/fraunces and @fontsource/work-sans as dependencies. - vite.config.ts: base './', build.sourcemap false, build output dist/. - tailwind.config.js: extend colors charcoal #1C1A16, charcoal-raised #26231D, fieldline #3A372F, ochre #C98A3B, ochre-light #E4B36A, olive #6E6F4C, bone #EFE7D8, sandmist #A79C88; fontFamily display 'Fraunces' and sans 'Work Sans'; set the default borderRadius to 2px (rounded-sm). - postcss.config.js: tailwindcss + autoprefixer. - Warm grain overlay: in src/index.css define .grain-overlay as a fixed, inset-0, pointer-events-none layer with opacity 0.08, mix-blend-mode soft-light and a repeating background-image built from an inline SVG data URI (feTurbulence type fractalNoise, baseFrequency 0.8, 280px tile); render it once in App above every page and photograph — this warm grain is the signature of the site. - src/lib/motion.ts: shared Motion variants — reveal (opacity 0→1, y 26→0, 700ms cubic-bezier(0.16,1,0.3,1), 90ms stagger, whileInView once), hoverLift (y -2px, 200ms) — with useReducedMotion falling back to plain 200ms opacity fades. - src/components/Timeline.tsx: the vertical day rail — a 1px fieldline track with five 10px ochre dots that fill as their stop crosses 45% of the viewport (IntersectionObserver, once per stop, 200ms). - Keep every user-facing string (brand, conservancy, suites, rates, timeline stops, experiences, inquiry copy, contact email) in src/content.ts; sections read from it so values swap in one place. - index.html: <title>[BRAND] — Safari Lodge, [REGION]</title> plus a drawn-in-code favicon.svg (a simple ochre acacia-tree silhouette on the charcoal ground); no other meta work. ## Variables - [BRAND] — Lodge name (default: "Mopane Reach"). Invented lodge name used for the wordmark, page title, day-at-the-lodge heading and contact email ([email protected], from content.ts). - [REGION] — Conservancy name (default: "Karoha Conservancy"). The invented private conservancy the lodge sits in — hero label, intro copy and footer line. - [SUITES] — Number of suites (default: "8"). Small-lodge promise in the hero and intro strip ('[SUITES] tented suites'); the gallery shows three of them. - [RATE_FROM] — Starting nightly rate (default: "$740"). High-season starting rate — hero sub-line ('stays from [RATE_FROM] per suite, per night') and the Dry season column in the rates table. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/safari-lodge-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.
Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
Join Pro early access →DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Safari Lodge Website"
colors:
charcoal: "#1C1A16"
charcoal_raised: "#26231D"
field_line: "#3A372F"
ochre: "#C98A3B"
ochre_light: "#E4B36A"
olive: "#6E6F4C"
bone: "#EFE7D8"
sand_mist: "#A79C88"
typography:
display_headlines_suite_names_timeline_stop_titles_refined_serif: { family: "Fraunces", weights: [500, 600] }
text_body_copy_table_cells_form_labels_uppercase_section_labels_tracked_0_16em: { family: "Work Sans", weights: [400, 500, 600] }
spacing: "Wide and slow: sections py-32 (128px) desktop / py-20 (80px) mobile; content max-w-6xl px-6/px-10; photos bleed full-width; 1px fieldline hairlines carry structure instead of boxes."
radius: "Almost square: 2px on images, cards, buttons and inputs — the cinematic look depends on it; nothing rounder anywhere."
---
# Safari Lodge 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
- **Charcoal** `#1C1A16` — Page ground everywhere — warm near-black, never pure #000; base of the hero scrim.
- **Charcoal raised** `#26231D` — Rates table header, suite card hovers, inquiry panel ground.
- **Field line** `#3A372F` — Hairlines, table rules, timeline track, card borders — structure instead of shadows.
- **Ochre** `#C98A3B` — Primary golden accent: section labels, prices, timeline dots, active chips, the CTA underline.
- **Ochre light** `#E4B36A` — Hover and emphasis states on ochre: link hover, price emphasis, the active timeline stop's time.
- **Olive** `#6E6F4C` — Secondary accent: suite tags, experience icons' color, the 'sample data' chips.
- **Bone** `#EFE7D8` — Primary text — warm off-white for headlines and body on charcoal.
- **Sand mist** `#A79C88` — Secondary text: intros, captions, meta rows, table body copy.
## Typography
- **Display — headlines, suite names, timeline stop titles (refined serif)** — Fraunces (OFL), weights 500/600. Self-host the font files.
- **Text — body copy, table cells, form labels, uppercase section labels (tracked 0.16em)** — Work Sans (OFL), weights 400/500/600. Self-host the font files.
## Spacing & shape
- Spacing: Wide and slow: sections py-32 (128px) desktop / py-20 (80px) mobile; content max-w-6xl px-6/px-10; photos bleed full-width; 1px fieldline hairlines carry structure instead of boxes.
- Radius: Almost square: 2px on images, cards, buttons and inputs — the cinematic look depends on it; nothing rounder anywhere.
## Motion
- Hero: the photograph scales 1.05→1 over 3s on load and parallaxes at 0.12 of scroll (capped 14%); the bottom scrim deepens slightly as the headline settles.
- Reveals: sections, cards and table rows fade up (y 26→0, 700ms cubic-bezier(0.16,1,0.3,1)) with 90ms stagger via Motion whileInView, once.
- Day timeline: each dot fills ochre (200ms) as its stop crosses 45% of the viewport, and that stop's time label brightens to ochre light; past dots rest at 50% ochre.
- Suite and experience cards hover-lift 2px and turn their fieldline border to ochre (200ms); arrows nudge 2px.
- Inquiry chips toggle to ochre ground with charcoal text (200ms); steppers tick with a small y-bounce.
- The grain overlay never animates — it is the constant of the page.
- prefers-reduced-motion: parallax and load zoom off, all reveals become plain 200ms opacity fades, timeline dots fill without transition.
## Imagery
One shoot, one hour of light: cinematic golden-hour landscape photography — warm ochre sun low over olive bush and charcoal shadow, hazy amber skies, backlit dust, visible warm grain, wide filmic compositions. Animals only distant in frame; people at most a ranger silhouette from behind; no identifiable faces, no text, no logos. The six photographs are generated by VibeFather, downloaded into public/images, with the warm grain overlay sitting over them too.
## Tone
Quiet, warm, unhurried; short declarative sentences with the precision of a field notebook; luxury expressed through restraint and light, never superlatives.
---
— Prompt by VibeFather · https://vibefather.ai/t/safari-lodge-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown