Passage is an editorial landing page template built for refugee and migration mutual aid networks. It guides newly arrived families, diaspora sponsors, and volunteer navigators through a warm, chapter-driven scroll. Resource cards, a zip code lookup section, and a volunteer intake form make the page immediately useful. The design feels calm, human, and trustworthy from the very first line.
by Rocket studio
Loading preview…
Quick summary
Passage is a single-page editorial template designed for refugee resettlement and mutual aid networks. It opens with a hand-lettered movement moment, moves through a magazine-style origin story, and delivers practical resource cards before inviting visitors to find help or offer it. The design is warm, unhurried, and built to serve people arriving with urgent, unmet needs.
Who this template is for
This template was built for community-driven organizations that work at the intersection of legal advocacy, translation support, and human connection. If your network meets families where they are and walks beside them, this page speaks your language.
Nonprofit mutual aid networks serving newly arrived refugee and asylum-seeking families
Diaspora-led community groups helping sponsors, caseworkers, and second-generation volunteers connect with resources
Volunteer translator and legal navigator programs that need a warm, trustworthy public-facing page
What problem this template solves
Most nonprofit pages either look clinical and institutional or feel like a fundraising pitch before trust has been earned. Neither works for families clutching documents they cannot read, or for caseworkers searching for a reliable warm handoff. This template solves the trust-first problem by leading with usefulness.
Visitors get practical resource cards and a localized help finder before they ever see a donation request
The narrative structure explains who you are and why you exist, in a way that invites rather than overwhelms
The multilingual subline and calm visual tone signal safety to users who may be arriving from high-stress situations
What you get with this template
You get a fully structured, single-page editorial layout ready to represent a mutual aid network with honesty and warmth. Every section has a clear purpose and a clear audience in mind.
A hero section with large movement typography, an animated SVG door illustration, and a six-language sentiment subline
A chapter-driven origin story with pull quotes, documentary-style illustrations, and plain-language legal sidebar annotations
Theme
Educational Guide
Creative direction
Origin Story
Color system
Soft Mist
Style
Editorial/Magazine
Direction
Content/Resource
Page Sections
Movement-moment Hero with Animated SVG
Magazine-style Origin Story Chapters
Tear-out Educational Resource Cards
Zip Code Localized Help Finder
Bilingual Volunteer Intake Form
Scroll-gated Support Link
Related questions
Who is this template designed for?
Can I adapt the resource cards for my own content?
Does the template support multiple languages?
Is the donation or support link included?
What makes this template different from a standard nonprofit page?
Tear-out style resource cards, a zip code help-finder section, a volunteer intake form, and a scroll-gated support link
Feature list
This template brings together editorial storytelling, practical resource delivery, and community-first interactivity in one cohesive layout.
Movement-Moment Hero Section
The hero opens with the phrase #YouAreNotAlone set in large hand-lettered serif typography in quiet sage against fog white. A subtle animated SVG illustration shows a door slowly opening with warm terracotta light spilling through. A single line beneath it repeats the sentiment in six languages, signaling welcome to multilingual visitors before any body copy appears.
Chapter-by-Chapter Origin Story
The origin story scrolls like a magazine feature across three chapters: the founding moment, the first family helped, and the network growing city by city. Each chapter uses pull quotes from volunteers and families, documentary-style illustrations that protect identities, and sidebar annotations that explain legal terms in plain language. The storytelling format builds trust gradually and naturally.
Tear-Out Educational Resource Cards
Between story chapters, resource cards appear styled like tear-out guides with rounded corners and a subtle paper texture. Cards cover topics such as what asylum means, your rights at a shelter, and how to find a pro bono lawyer. The scroll teaches while it moves, so visitors arrive at the bottom both informed and ready to act.
Zip Code Help Finder
A primary call-to-action section centers on a single zip code input field that returns localized resources, legal clinics, and volunteer contacts. This positions the template as a content and resource hub rather than a brochure. The interaction is immediate and useful, which earns trust before any ask is made.
Volunteer Intake Form
A secondary path invites bilingual community members to register as translators or navigators. The short form asks for language spoken, city, and availability. This keeps the volunteer pipeline open without requiring a separate page or a heavy form flow.
Scroll-Gated Support Link
A tertiary support link appears only after the visitor has scrolled past at least three resource cards. The placement is intentional: value is demonstrated first, and the ask follows only after it has been earned. This approach reflects the template's trust-first philosophy.
Page sections overview
Section
Purpose
Hero Movement Moment
Opens with #YouAreNotAlone typography, animated door SVG, and six-language subline
Origin Story Chapters
Magazine-style narrative from founding moment through network growth with pull quotes
Legal Sidebar Annotations
Plain-language explanations of legal terms embedded alongside story chapters
Resource Card Hub
Tear-out styled cards covering asylum, shelter rights, and pro bono legal access
Find Help Nearby
Zip code field returning localized resources, clinics, and volunteer contacts
Volunteer Intake Form
Short form for bilingual translators and navigators to register availability
Footer Arc Split
Logo and tagline on the left, navigation links on the right
Design & branding system
The visual identity follows an Educational Guide theme built on a Soft Mist color palette. Every color choice is deliberate: nothing clinical, nothing loud, just soft enough to lower a visitor's shoulders.
Colors: fog white (#F4F1ED) and washed linen (#D6CFC7) alternate as section backgrounds; quiet sage (#A3B18A) appears in iconography and pull-quote sidebars; deep charcoal (#2B2D2A) anchors body text; muted terracotta (#C4856A) guides links, callout borders, and interactive elements without ever demanding attention
Typography: Fraunces serif for headings, DM Sans for body copy, and JetBrains Mono for sidebar legal annotations, creating a layered editorial reading experience
Illustrations replace photography throughout, protecting the identities of families and volunteers while keeping the visual tone documentary and warm
Mobile & speed optimization
This template is built mobile-first, recognizing that primary users are often on phones and may be working with limited bandwidth. Every layout decision prioritizes clarity and load efficiency on smaller screens.
Static sections use server components to reduce JavaScript overhead, with CSS-native scroll handling animations and section transitions
Animations are medium in weight: the SVG door reveal, scroll-triggered text appearances, staggered card entries, and parallax pull quotes are all designed to feel natural without straining slower connections
The zip code field and volunteer form are kept intentionally lean, with minimal input steps to reduce friction for users navigating in a second language
How this template helps you convert
Passage converts by earning trust before making any ask. The page architecture is deliberately sequenced to serve first and invite action second.
The hero and origin story establish credibility and emotional connection, giving visitors a reason to keep reading before they encounter any form or request
Resource cards deliver immediate, tangible value mid-scroll, so by the time a visitor reaches the help finder or volunteer form, they already trust the network
The scroll-gated support link appears only after value has been demonstrated, making the ask feel earned rather than premature
Other information about this template
Passage is an editorial landing page template built in the Editorial/Magazine style with an Educational Guide theme. It is designed for the Community and Nonprofit category, specifically for refugee and migration mutual aid networks.
The page layout follows a Content/Resource hub direction, meaning usefulness drives the structure rather than promotion
The header concept is a Hashtag/Movement moment, which is well suited for community organizing pages that need immediate emotional resonance
The footer uses an Arc Browser Split pattern with the logo and tagline on the left and navigation links on the right
Localization is USA-primary with multilingual interface hints built into the hero section subline
No donation button appears above the fold; the support path is intentionally scroll-gated to reflect the trust-first value model
