Catalyst is a modular card grid landing page built for ocean conservation research and policy institutes. It translates deep-ocean science into accessible policy resources through a structured scroll journey of research areas, legislation timelines, and a gated resource library. The design uses an editorial dark-water aesthetic to earn trust and drive email signups from policy advisors, researchers, journalists, and funders.
by Rocket studio
Loading preview…
Quick summary
Catalyst is a single-page content and resource hub designed for a marine conservation research institute. It moves visitors through a deliberate scroll sequence: from research data to policy impact to a gated library. The Editorial Guide aesthetic, modular card grid layout, and signal coral call-to-action system work together to turn informed curiosity into committed signups.
Who this template is for
This template is built for organizations that sit at the intersection of rigorous science and public policy. It works best when your audience arrives with a specific professional need rather than casual interest.
Environmental policy advisors and marine biology graduate students who need citable, plainly written data sources
Foundation program officers and conservation grant-makers evaluating where to direct funding
Journalists on deadline who need a credible, accessible research voice they can quote with confidence
What problem this template solves
Research institutes often struggle to communicate complex findings to non-specialist audiences without losing credibility. A generic website template cannot carry both the analytical weight of a policy brief and the urgency of a fundraising appeal at the same time.
Visitors leave before understanding the depth of available resources because the value is buried below the fold
Conversion paths force a choice between friction-free browsing and meaningful lead capture
Design inconsistency makes rigorous scientific content feel untrustworthy to policy and journalism audiences
What you get with this template
You get a complete, ready-to-customize landing page structured around a teach-prove-equip scroll narrative. Every section is intentional and sequenced to build confidence before asking for a commitment.
A full-viewport manifesto hero, three modular card grid sections, an inline signup form, and a persistent scroll-depth call-to-action bar
A Teal Catalyst color system with clearly assigned roles for each palette value, including signal coral reserved strictly for action triggers
Theme
Educational Guide
Creative direction
Movement & Cause
Color system
Teal Catalyst
Style
Card Grid (Modular)
Direction
Content/Resource
Page Sections
Full-viewport Manifesto Hero
Asymmetric Bento Research Grid
Expandable Policy Timeline Cards
Live-filterable Resource Library
Inline and Scroll-activated Signup
Related questions
Can I customize the research topic cards without redesigning the layout?
How does the gated library work in this template?
Are the free preview path and the gated path both included?
Who is the primary audience this template was designed for?
Can the tag filtering in the resource library be adjusted for different topics?
Fraunces editorial serif headlines paired with DM Sans body text for a balance of authority and readability
Feature list
A paragraph introducing the feature set: Every feature in this template is grounded in the content and conversion needs of a policy-facing research organization. The components below reflect what the brief specifies and what this layout actually delivers.
Full-Viewport Manifesto Hero
The hero occupies the entire screen with white editorial serif text on abyssal teal. A single high-stakes sentence anchors the page. A bioluminescent aqua pulse line animates once beneath the quote before the scroll cue appears. No imagery competes with the words.
Asymmetric Bento Research Card Grid
The first card grid presents research areas in a modular bento layout. Each card carries an icon, a stat drawn from real datasets, and a one-line finding. The asymmetric arrangement creates visual hierarchy without requiring custom illustration.
Expandable Policy Impact Timeline Cards
The second grid shows before-and-after legislation timelines. Each card is expandable so visitors can read the full context of a policy change without leaving the page. This section demonstrates real-world outcomes from the institute's work.
Filterable Resource Library Grid
The third grid is a live-filterable resource library. Visitors sort cards by topic tags to find downloadable reports, data dashboards, and recorded briefings. Free preview cards with executive summary download buttons provide an ungated entry path.
Inline and Persistent Signup Form
A lightweight form appears inline after the second card grid and again as a persistent bottom bar that activates after 40 percent scroll depth. The form collects email, professional role via dropdown, and primary interest area via tag selector.
Scroll-Depth Call-to-Action Bar
The persistent bottom bar rises into view once a visitor has scrolled past 40 percent of the page. It stays visible without blocking content, giving returning visitors a low-friction path to access the full library.
Page sections overview
Section
Purpose
Manifesto Hero
Sets tone and anchors the institute's mission with a single editorial statement
Research Areas Grid
Introduces core topics through stat-backed modular cards
Policy Impact Cards
Shows before-and-after legislation outcomes in expandable timeline format
Resource Library Grid
Delivers filterable reports, dashboards, and briefings with free previews
Inline Signup Form
Captures email and role after the policy section with minimal friction
Persistent call to action Bar
Activates at 40 percent scroll depth for continuous conversion opportunity
Footer
Single-row linear footer with essential links and attribution
Design & branding system
The Teal Catalyst color system is built around the visual logic of a satellite reef image: vast dark water with punctuations of living color. Every color value has a defined role, and that discipline is what makes the palette feel trustworthy rather than decorative.
Abyssal teal (#0B4F5C) fills primary backgrounds; bioluminescent aqua (#2DD4A8) marks dividers and progress indicators; research-paper white (#F7FAFA) carries body sections; signal coral (#FF6B5A) appears only on action triggers and urgent data callouts
Backgrounds alternate between abyssal teal and research-paper white to create a reading rhythm that guides the eye down the page
Fraunces sets editorial serif headlines for authority; DM Sans handles body copy in desaturated slate (#2C3E50) for long-form legibility
Mobile & speed optimization
The template is designed desktop-first to serve policy researchers working on workstations, but it includes full mobile support so no audience segment is excluded. Interactive components are handled client-side while static sections use server components to keep initial load lean.
The card grid layout reflows cleanly from multi-column desktop to single-column mobile without losing hierarchy
The persistent call-to-action bar and inline form remain accessible and functional across screen sizes
GSAP ScrollTrigger animations, staggered card reveals, and the aqua pulse line are built for medium-to-high animation fidelity on capable devices
How this template helps you convert
The conversion architecture is designed around the principle that trust precedes commitment. Every visible card is a proof point that the full library is worth an email address.
The teach-prove-equip scroll sequence moves visitors from curiosity through credibility before presenting the signup gate, reducing drop-off at the conversion moment
The dual-path approach offers three free executive summary downloads for visitors not ready to sign up, while the inline form and persistent bar capture those who are ready at different scroll depths
Other information about this template
This template is categorized under Community and Nonprofit, specifically within the Ocean Conservation Nonprofit subcategory. It is well suited for policy resource hubs, academic research institutes, and environmental advocacy organizations that need to communicate scientific findings to mixed professional audiences.
The template style is Card Grid (Modular), making it straightforward to add or remove research topic cards as your institute's focus areas evolve
The Educational Guide theme and Movement and Cause creative direction mean the visual language is built to inspire action, not just inform
The Content and Resource landing page direction means the primary metric this layout is optimized for is qualified email capture, not pageview volume
Social proof elements are designed to reference real data citations such as IUCN species threat percentages, UNCLOS policy milestones, and NOAA dataset findings, giving the page the factual density that policy audiences expect
