Guides / Adapt a template / Climate
How to adapt an animated website template for a climate project
To adapt an animated website template for a climate project, start from Lodgepole Live Contour Map Climate Fund, Canopy Carbon Climate Platform, Tidemark Coastal Flood Map or the closest fit, keep the data or map hero, hide stock imagery of globes and leaves, add a methodology page, and apply the climate style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit climate tech companies and sustainability projects best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Lodgepole Live Contour Map Climate Fund
A live contour map under your cursor suits a fund or research group that works with real data.
Pick 2 · Pro
Canopy Carbon Climate Platform
A slow rainforest dawn loop gives a carbon or conservation project a human setting.
Pick 3 · Pro
Tidemark Coastal Flood Map
A flood map you can raise street by street makes risk concrete for a resilience or insurance tool.
What to change for a climate project
Keep
- The data or map hero
- The method section
- The project list
- The contact block
Hide
- Stock imagery of globes and leaves
- Any claim chapter without a source
Add
- A methodology page
- Source links for each number
- Project locations
- An annual report download
Copy angles
- Say exactly what is measured, by whom and when.
- Lead with one project, then scale up.
- Prefer specific verbs over words like green or eco.
Trust elements
- Third-party verification names
- Dated data with sources
- Named scientists and staff
- Financial reports for nonprofits
Compliance notes to check
- The FTC Green Guides discourage vague claims such as eco-friendly and expect support for carbon claims.
- Some states have their own rules for carbon and climate claims.
- Dates and sources should sit next to every statistic.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Lodgepole Live Contour Map Climate Fund and works for the other two picks if you change the name and slug. The example client is Tidewater Carbon Trust, a coastal restoration nonprofit in Savannah, Georgia.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "lodgepole-climate-fund", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Lodgepole Live Contour Map Climate Fund" (slug: lodgepole-climate-fund) into a website for a climate project.
Example client: Tidewater Carbon Trust, a coastal restoration nonprofit in Savannah, Georgia. Replace it with my real business details, which I will give you.
Keep:
- The data or map hero
- The method section
- The project list
- The contact block
Hide:
- Stock imagery of globes and leaves
- Any claim chapter without a source
Add:
- A methodology page
- Source links for each number
- Project locations
- An annual report download
Copy angles:
- Say exactly what is measured, by whom and when.
- Lead with one project, then scale up.
- Prefer specific verbs over words like green or eco.
Trust elements to include only if I can supply them:
- Third-party verification names
- Dated data with sources
- Named scientists and staff
- Financial reports for nonprofits
Style: use the CSS variables and fonts from the Climate style pack. Motion intensity: Medium. Motion should reveal data, not decorate it. Charts can animate once, then stay still.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Climate style pack
Earthy, factual and calm. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#a8431f
Accent
Pale Lime
#dfe3d3
Surface
Pale Citrine
#f1efe6
Background
Deep Verdant
#1c2a22
Text
Type pairing (Google Fonts)
- Display NewsreaderSpecimen ↗
- Body IBM Plex SansSpecimen ↗
Motion intensity: Medium
Motion should reveal data, not decorate it. Charts can animate once, then stay still.
The CSS export includes the Google Fonts import and motion variables.
# Climate style pack, Style Reference > Earthy, factual and calm **Theme:** light · **Template:** Climate style pack (https://animatedwebs.com/guides/adapt/climate) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#a8431f` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Lime | `#dfe3d3` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Pale Citrine | `#f1efe6` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Deep Verdant | `#1c2a22` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Newsreader, Newsreader 600 - **Body:** IBM Plex Sans, IBM Plex Sans 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Motion should reveal data, not decorate it. Charts can animate once, then stay still. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#a8431f`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Newsreader + IBM Plex Sans
Questions
Which template is best for a climate project?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a climate project site keep, hide and add?+
Keep the data or map hero and the method section. Hide stock imagery of globes and leaves. Add a methodology page and source links for each number.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.