Catalyst - Deepocean Policy Landing Page Template

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

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
  • 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

SectionPurpose
Manifesto HeroSets tone and anchors the institute's mission with a single editorial statement
Research Areas GridIntroduces core topics through stat-backed modular cards
Policy Impact CardsShows before-and-after legislation outcomes in expandable timeline format
Resource Library GridDelivers filterable reports, dashboards, and briefings with free previews
Inline Signup FormCaptures email and role after the policy section with minimal friction
Persistent call to action BarActivates at 40 percent scroll depth for continuous conversion opportunity
FooterSingle-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.

  1. The teach-prove-equip scroll sequence moves visitors from curiosity through credibility before presenting the signup gate, reducing drop-off at the conversion moment
  2. 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
Catalyst - Deepocean Policy Landing Page Template
Catalyst - Deepocean Policy Landing Page Template
Catalyst - Deepocean Policy Landing Page Template
Catalyst - Deepocean Policy Landing Page Template

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?