Skip to content
DesignMunkDesignMunk Submit a site

Rainforest Pay

rainforestpay.com
Boost revenue with Rainforest—payments, optimized for vertical SaaS growth.
Finance Fintech Webflow Homepage Inter Variable Font
Share Visit site
rainforestpay.com DESKTOP · 1440
Rainforest Pay

AI Breakdown

Design export

---
version: alpha
name: Rainforest Pay
description: Boost revenue with Rainforest—payments, optimized for vertical SaaS growth.
colors:
  primary: "#00473c"
  secondary: "#7b9f9c"
  tertiary: "#00b011"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-thunder-bay: "#cad9d7"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter Variable Font
    fontSize: 47px
    fontWeight: 400
    lineHeight: 1.21
  headline-md:
    fontFamily: Inter Variable Font
    fontSize: 37px
    fontWeight: 400
    lineHeight: 1.53
  headline-sm:
    fontFamily: Inter Variable Font
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Inter Variable Font
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Inter Variable Font
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 12px
  sm: 20px
  md: 44px
  lg: 66px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 17px 24px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 17px 24px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Rainforest Pay: Forest-Green CTAs in a Spacious Grid

## Overview

Rainforest Pay targets vertical-SaaS founders, product managers, and developers evaluating embedded payments. The brand voice is confident and technical, favoring clarity over flourish. Interfaces should feel calm, serious, and spacious with decisive CTAs. Use white surfaces, deep green text, and a single bright accent to guide action.

## Colors

- Primary (#00473c): Deep forest for headings, links, and dominant text.
- Secondary (#7b9f9c): Muted teal-gray for supportive UI elements and subdued badges.
- Tertiary (#00b011): Accent green for primary CTAs and positive states.
- Neutral (#ffffff): Base surface for pages, cards, and sections.
- Border (#e5e7eb): Hairline dividers, input outlines, and section separators.
- Brand-thunder-bay (#cad9d7): Soft teal wash for subtle section backgrounds or chips.
- Surface ({colors.neutral}): Default page and card background.
- On-surface ({colors.primary}): Default text and icon color on light backgrounds.

## Typography

Inter Variable Font is used for all levels. It is open-source and widely available; if self-hosting is not possible, load Inter from Google Fonts. Suitable substitutes with similar metrics: Source Sans 3, IBM Plex Sans, or Roboto.
- Headline-lg (47px/1.21, 400): Primary hero headlines and key section leads.
- Headline-md (37px/1.53, 400): Section headers on desktop.
- Headline-sm (28px/1.21, 400): Subsection titles and card group headers.
- Headline-xs (22px/1.18, 400): Small section intros, feature names.
- Body-md (17px/1.5, 400): All paragraph copy, nav items, and control labels. Prefer normal weight; rely on size and spacing for hierarchy rather than bolding.

## Layout

Spacing follows a roomy scale: 12, 20, 44, 66, 100px. Use 66–100px for section padding, 44px for inner stacks, and 20px or 12px for tight element clusters. Desktop layouts favor a two-column split for hero and feature sections; collapse to a single column on mobile with 20–44px vertical rhythm. Keep text max-width moderate and let logos/imagery sit in the opposite column to maintain balance.

## Elevation & Depth

No shadows are used. Depth and separation are achieved with whitespace, 1px borders in #e5e7eb, and occasional tonal blocks using #cad9d7. Emphasize hierarchy with size, spacing, and the strong text color #00473c. Cards sit on pure white to keep the system flat and crisp.

## Shapes

Two radii define the language: 4px (sm) for subtle controls and quiet buttons; 8px (md) for cards, images, and the primary CTA. Avoid circular or overly rounded treatments; corners should read sturdy and product-focused.

## Components

Buttons
- Primary: Background #00b011, text #ffffff, 8px radius, 52px height, 17px×24px padding. The default call to action throughout.
- Secondary: Text #00473c, 4px radius, 52px height, 17px×24px padding. No background; use near primary actions.
- Link: Text #00473c, 0px radius. For inline or low-emphasis actions.

Card
- Background #ffffff, text #00473c, 8px radius, 16px padding. Use for calculators, investor logos, or feature callouts.

### Announcement Bar
- Background #00473c with #ffffff text, full-width at the very top. Use xs–sm padding and body-md type.

### Global Navigation
- White surface with primary text, border bottom #e5e7eb. Right-aligned primary CTA (button-primary), optional sign-in as secondary.

### Hero Split
- Left column: headline-lg and body-md; one button-primary. Right: image framed with 8px radius. Section padding lg–xl.

### Trusted-by Logos Row
- A horizontal logo list on white. Use border-top #e5e7eb, stack spacing md and item gaps sm.

### Feature Bullets Grid
- 2–4 columns of short headlines (headline-xs) with body-md details. Use md gaps and sm internal paddings; no shadows.

### Compliance & Risk Block
- Text-first section with headline-md and concise paragraph copy. Keep background white; consider a thin divider above.

### Component Studio Promo
- Split layout promoting low-code components; include one button-link or button-secondary plus a primary if needed.

### Revenue Calculator CTA
- Card treatment with headline-sm/md, supporting copy, and a single button-primary. Use md padding and 8px radius.

### Footer
- Multi-column links on white with border-top #e5e7eb and md–lg vertical padding.

## Do's and Don'ts

- Do reserve #00b011 exclusively for primary CTAs and success states.
- Do keep headlines at the specified sizes (47/37/28/22px) and weight 400; use spacing, not bold, for hierarchy.
- Do separate sections with 66–100px padding and #e5e7eb dividers where needed.
- Don't introduce shadows; rely on borders and whitespace.
- Don't mix additional accent colors; secondary emphasis should use #7b9f9c or typography only.
- Don't over-round elements; stick to 4px or 8px radii.

## Agent Prompt Guide

Quick color reference
- Text: #00473c
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA: #00b011

1) Build a hero split
- Page background #ffffff. Grid: two columns on desktop.
- Left: h1 using Inter Variable Font at 47px, line-height 1.21, weight 400, color #00473c; paragraph at 17px/1.5; primary button 52px tall, 17px×24px, radius 8px, background #00b011, text #ffffff.
- Right: image with 8px corner radius. Section padding 100px top/bottom, 44px internal gaps.

2) Trusted-by logo strip
- Container on #ffffff with border-top 1px #e5e7eb, padding 44px top/bottom.
- Title in Inter 22px/1.18, color #00473c. Logo row uses gaps of 20px; keep logos monochrome.

3) Feature bullets grid
- Four items in two columns (mobile one). Each item: title Inter 22px/1.18, body 17px/1.5, color #00473c. Use 44px row gaps, 20px column gaps. No shadows; optional thin dividers #e5e7eb.

4) Revenue calculator CTA card
- Card background #ffffff, 8px radius, 16px internal padding, border 1px #e5e7eb optional.
- Heading Inter 28px/1.21, copy 17px/1.5. Primary button as above. Surround with 66px section padding.

5) Footer
- White background with border-top 1px #e5e7eb. Columns of link lists using Inter 17px/1.5, color #00473c. Vertical padding 66px and 20px gaps between columns.

## Similar Brands

- Stripe: similarly flat, type-led with clear developer focus; Stripe leans purple gradients, while Rainforest keeps a single green accent and stricter borders.
- Adyen: enterprise payments with calm typography and green accents; Adyen skews denser and more corporate.
- Paddle: SaaS monetization with friendly headlines and big CTAs; Paddle uses blues and illustrations where Rainforest stays photographic and green.
- Plaid: API-first finance site with simple grids and documentation emphasis; Plaid relies on dark blues and patterns, Rainforest on deep green and flat whites.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 14 hours ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 days ago