Witness is a civic justice awareness landing page template built for racial justice campaigns. It pairs personal testimonies with data visualizations in a zigzag alternating layout, guiding visitors from witness to action. Organized around three narrative acts, it gives generously before asking, then centers users on role-based resources through a single focused call to action.
by Rocket studio
Loading preview…
Quick summary
Witness is a single-page civic justice template designed to move people from awareness to action. It uses an alternating zigzag layout to pair human stories with hard data, a quiet editorial design rooted in archival dignity, and a structured three-act flow that earns trust before it asks anything in return.
Who this template is for
This template is built for groups and individuals who need a serious, purposeful digital presence around racial justice. It suits campaigns that center lived experience alongside law, policy, and community context.
Educators building anti-racism curricula who need organized, shareable resources
Community organizers mobilizing support before city council votes or legislative changes
Parents, allies, and advocacy groups who want to explore justice issues and share clear, honest information
What problem this template solves
Many justice campaigns struggle to make their website feel as urgent as the cause itself. Statistics alone rarely move people. This template closes that gap by weaving testimony and data together so visitors understand both the human cost and the systemic scope of the issue.
It is hard to design a page that gives before it asks, this template is structured to do exactly that
Campaigns often lack organized content that serves different roles like educators, organizers, and parents at once
Most templates do not support the kind of narrative arc that guides a visitor from witness to committed participant
What you get with this template
You get a fully structured, customize-ready landing page template organized around three narrative acts. Every section is designed to support justice advocacy without requiring code to deploy or modify.
A Quote/Manifesto hero section, three zigzag testimony-plus-data pairs, challenge-and-resource threshold sections, and a converging action column
A "Download the Conversation Guide" form that frames sign-up as joining a circle, not subscribing to a list
Role-based resource access through a primary call to action labeled "Enter the Library," organized by educator, organizer, parent, and ally
Theme
Civic Service
Creative direction
Hero's Journey
Color system
Cloud Canvas
Style
Zigzag/Alternating
Direction
Content/Resource
Page Sections
Quote/manifesto Hero Section
Zigzag Testimony and Data Layout
Challenge and Resource Threshold Sections
Conversation Guide Form
Role-based Resource Library Access
Civic Document Design System
Related questions
Can I customize the colors and typography in this template?
Do I need coding skills to use this template?
What is the 'Enter the Library' call to action?
How does the Conversation Guide form work?
Is this template suitable for law and public defense advocacy campaigns?
Feature list
A single paragraph introduces this section: the features below reflect exactly what the template delivers, drawn directly from its design and structure.
Quote/Manifesto Hero Section
The page opens with large display type on a cloud-white expanse. One attributed civil rights quote fills the viewport. No image, no decoration. The silence around the words is intentional, giving users time to sit with the message before they scroll.
Zigzag Testimony and Data Layout
Act One pairs personal testimony on one side with a data visualization on the other across three alternating sections. This design makes it harder to separate story from statistic. Visitors view the human and the systemic side by side, which strengthens the emotional and factual impact together.
Challenge and Resource Threshold Sections
Act Two shifts tone and structure. Each alternating pair places a justice challenge on the left and a corresponding resource or framework on the right. The layout itself becomes an argument: here is the problem, here is your next step. Users can explore tools and historical law context in sequence.
Conversation Guide Form
A light, low-friction form appears after Act Two. It asks only for a first name and email. The framing positions the exchange as joining a circle of people who share a commitment to justice, not signing up for a list. This approach reflects best practices for advocacy landing pages that provide value before gating content.
Role-Based Resource Library Call to Action
Act Three converges into a single centered column with localized action guides, conversation toolkits, and event calendar support. The primary call to action, "Enter the Library," links to a curated archive organized by role. Visitors can search and access resources matched to their specific context, whether educator, organizer, parent, or ally.
Civic Document Design System
The color system uses an expansive off-white as the dominant ground, a muted charcoal for body text, a weathered indigo for dividers and secondary type, and a deep saffron accent reserved for calls to action and pull-quotes. Typography pairs a display serif with a clean body sans-serif for editorial clarity.
Page sections overview
Section
Purpose
Quote/Manifesto Hero
Opens with a civil rights quote on a bare cloud-white field to set the tone
Testimony and Data (Act One)
Three zigzag pairs connect personal stories with data visualizations
Low-friction sign-up framed as joining a justice circle
Role-Based Action Column (Act Three)
Converging single column with library access organized by audience role
Footer
Horizontal flow pattern with persistent secondary navigation
Design & branding system
The design follows a Civic Service theme rooted in the feel of a well-worn civic document. Every color and type choice serves the weight of the subject. The palette and layout are easy to customize so organizations can reflect their own identity while keeping the core visual dignity intact.
Color system: off-white (#F4F1EC) ground, charcoal (#3B3B3B) body, indigo (#4A5568) dividers, saffron (#D4872C) accent on calls to action and pull-quotes
Typography: Fraunces display serif for headlines and quotes, DM Sans for body text
Scroll-linked reveals, stagger animations, and subtle parallax effects give the design motion without distraction
Mobile & speed optimization
The template is built desktop-first with full mobile responsiveness. Responsive design ensures the zigzag layout, form, and resource sections all reflow cleanly across screen sizes. Users on any device can access the full page experience without friction.
Mobile layout prioritizes large, readable type and easily tappable calls to action
Server Components handle static sections while Client Components manage scroll animations, keeping the site performant
Grain overlay and parallax effects are applied in a way that does not degrade readability on smaller screens
How this template helps you convert
This template is structured so that every section provides something useful before anything is asked of the visitor. That sequence builds trust and makes the calls to action feel earned rather than extracted.
Give first: every act offers usable content, testimony, tools, and resources, before the form or the library link appears, so visitors already trust the campaign by the time they reach any ask
Role-based access: the "Enter the Library" call to action directs users to resources organized by role, making it immediately relevant and reducing drop-off
Low-friction sign-up: the Conversation Guide form asks only for a name and email, framing the exchange as community participation, which increases the likelihood that visitors complete it
Other information about this template
This template was designed with the specific needs of racial justice advocacy in mind. It draws on established principles for effective social justice website design, including human-centric content structure, organized navigation, and single-focus calls to action that use contrasting color to stand out. Research shows that landing pages for civic justice causes benefit from emotional storytelling, urgent headlines, and strong visual design, all of which are built into this template from the ground up.
No-code tools enable users to create and deploy websites without traditional programming skills. This template is customize-ready, meaning organizations and agencies can apply their own colors, typefaces, testimonies, and resource links without writing code. Customization options allow groups to reflect their unique identity and mission while preserving the editorial structure that makes the design effective.
The Sixth Amendment guarantees the right to counsel for individuals facing criminal charges, yet public defense systems across the country remain underfunded and face excessive caseloads. Racial bias and disparity are pervasive in the criminal legal system, affecting law enforcement, prosecution, and sentencing alike. Campaigns advocating for justice reform need a website that can hold that complexity and still move people toward action. This template is organized to do that.
Trust indicators can include attributed testimonies, historical context citations, and the number of supporters or partner organizations
Measurable impact data such as infographics illustrating the effectiveness of advocacy efforts can be embedded in the data visualization sections
Clear navigation and organized content are essential features of effective civic justice landing pages, and both are built into this template's structure
Agencies, nonprofits, and community organizations can all use this template to amplify their message and support long-term engagement
Feedback from users and visitors can help campaigns refine their resources over time; the template's modular structure makes it straightforward to apply those changes
