Sanctuary is a hero-dominant landing page template built for animal rights international nonprofits. It guides visitors from emotional awareness to a donation portal through documentary-style storytelling, mission vignettes, and a real-time rescue counter. The design uses a muted Healing Space palette with a single warm amber glow reserved for the primary call to action.
by Rocket studio
Loading preview…
Quick summary
Sanctuary is a single-page, click-through landing page for an animal rights international nonprofit. The design holds ninety percent of the viewport in a full-bleed documentary hero, then breathes through a vision statement, three mission vignettes, and a live counter before delivering a solid call-to-action button that routes visitors to a dedicated donation portal.
Who this template is for
This template is built for organizations doing serious, cross-border animal protection work that needs to earn donor trust before asking for a click. It suits mission-led teams who want storytelling to do the heavy lifting.
International animal rights nonprofits running multi-country rescue and legal campaigns
Nonprofit communications teams managing empathy-driven donors such as veterinary students, suburban parents, and retired professionals
Organizations that route donations through a segmented external portal rather than an on-page form
What problem this template solves
Most nonprofit landing pages either drown visitors in data or rely purely on emotion without evidence. Neither approach builds the trust needed to convert a skeptic into a donor. Sanctuary solves both sides of that problem.
Visitors who need emotional grounding get a documentary hero and a slow, generous vision section before any ask appears
Visitors who need evidence get location-pinned mission vignettes with real statistics and a secondary link to legal victories
Organizations without a dedicated web team get a structured, ready-to-use page that guides scroll pacing without custom development
What you get with this template
You get a fully structured, hero-dominant landing page with five distinct sections, a defined visual identity, and interactive scroll-linked animations built in. Every section has a clear job in the donor journey.
A full-viewport hero with the #UntilEveryCage hashtag in large thin-weight type, a ghost call-to-action button, and a three-stat scale line
Three documentary-still mission vignette cards with statistics and location pins, plus a real-time counter section with a solidified amber call-to-action button
Theme
Healing Space
Creative direction
Vision & Mission
Color system
Cloud Canvas
Style
Hero-Dominant (90/10)
Direction
Click-Through
Page Sections
Full-viewport Documentary Hero
Scroll-linked Reveal Animations
Three-card Mission Vignette Layout
Real-time Rescue Counter
Dual Call-to-action Pathway
Healing Space Color and Type System
Related questions
Does this template include a donation form?
Can I update the hashtag and hero image for a new campaign?
What animations are included in the template?
Is the template suitable for both desktop and mobile visitors?
Does the template use video in the hero section?
A linear single-row footer and a secondary text link routing skeptics to a legal victories evidence path
Feature list
This template packages the following built-in capabilities drawn directly from its design and interaction brief.
Full-Viewport Documentary Hero
The hero occupies ninety percent of the visible screen on load. It layers the #UntilEveryCage hashtag in oversized, thin serif type over a desaturated rescue image. A ghost call-to-action button and a single scale-stat line fade in on load, creating immediate emotional and factual context before any scrolling happens.
Scroll-Linked Reveal Animations
Section content appears through scroll-linked fade-ins triggered by an Intersection Observer. Vignette cards reveal in a staggered sequence. The hero headline uses a timed fade-in on entry. These animations are medium-weight, using minimal JavaScript to keep the page light.
Three-Card Mission Vignette Layout
Below the vision statement, three documentary-style cards alternate between emotional stillness and factual weight. Each card pairs a photograph with a single statistic and a location pin. The alternating rhythm is intentional: it prevents donor fatigue while maintaining credibility.
Real-Time Rescue Counter
A count-up animation displays cages emptied this quarter. The counter activates when the section enters the viewport. It sits directly above the solidified amber primary call-to-action button, making the impact figure the last thing a visitor reads before deciding to click.
Dual Call-to-Action Pathway
The primary call-to-action, labeled "Join the Rescue," appears first as a ghost button in the hero and then solidifies into full ember amber at the page midpoint. A secondary text link, "Read Our Legal Victories," provides an evidence path for visitors who are not yet ready to donate.
Healing Space Color and Typography System
The template uses a four-color Cloud Canvas palette: vast sky white (#F7F5F0), breath fog gray (#D6D1CA), deep sanctuary green (#2C4A3E), and ember amber (#D4915D). Fraunces serif handles all headlines. DM Sans handles all body text. The pairing creates a warm, unhurried reading environment that feels documentary rather than promotional.
Page sections overview
Section
Purpose
Documentary Hero
Establishes emotional scale and hashtag identity at full viewport height
Vision Statement
Centers a single sentence with generous white space to slow the reader
Mission Vignettes
Delivers three location-pinned documentary cards with statistics
Counter and Call to Action
Shows live impact data and presents the solidified primary button
Linear Footer
Closes the page with a single-row pattern and secondary navigation
Design & branding system
The visual identity follows a Healing Space theme. Every color and type choice is chosen to feel like morning mist lifting off a rescue pasture: muted, unhurried, and warm only where it matters most.
Four-color Cloud Canvas palette: sky white (#F7F5F0) for backgrounds, breath fog gray (#D6D1CA) for surfaces, deep sanctuary green (#2C4A3E) for anchoring text and structure, and ember amber (#D4915D) reserved strictly for buttons and progress indicators
Fraunces serif for all display and headline type, DM Sans for all body and caption text, creating a documentary-editorial feel without borrowing from generic nonprofit aesthetics
Hero imagery is desaturated just enough to read as documentary rather than staged, keeping the emotional weight honest and the warm amber glow visually isolated
Mobile & speed optimization
The template is built desktop-first with full mobile responsiveness. Hero typography scales dramatically between breakpoints so the hashtag headline remains dominant on smaller screens without breaking layout.
Static hero image replaces video dependency, removing the largest potential performance bottleneck while preserving the documentary visual quality
CSS-only parallax suggestion keeps scroll effects smooth without heavy JavaScript libraries
Minimal JavaScript footprint covers only the Intersection Observer reveals and the count-up counter animation, keeping the interaction layer lean
How this template helps you convert
Sanctuary is designed to earn the click, not demand it. The conversion logic is built into the page's scroll rhythm.
The hero establishes scale and identity immediately, so first-time visitors understand the mission before reading a single paragraph of body copy.
The vision and vignette sections build emotional and factual credibility in alternating doses, so the visitor arrives at the call-to-action button already convinced rather than being asked to trust on faith.
The real-time rescue counter directly above the amber button makes the impact tangible at the moment of decision, turning an abstract donation into a countable outcome.
Other information about this template
Sanctuary is a strong fit for organizations presenting campaign work at international conferences, sharing landing page links in grant applications, or running social media campaigns tied to movement hashtags. A few additional details worth knowing:
The page is localized for English (United States) and intentionally displays no currency on this page, routing all financial interaction to a separate segmented donation flow
The header concept is built around a Hashtag/Movement framework, making the template reusable across different campaign cycles by updating the hashtag and hero image
Animation intensity is set at medium: scroll reveals, staggered vignette entries, and a hero fade-in are all included without requiring a JavaScript-heavy build
The footer follows Pattern 1: Linear Single-Row, keeping the close of the page clean and consistent with the unhurried design language throughout
This template is categorized under Community and Nonprofit, with a specific niche alignment to animal rights international NGO work, making it a purpose-built option rather than a repurposed general charity template
