Skip to content
DesignMunkDesignMunk Submit a site

Rainforest Pay Pricing

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

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: 56.7px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Inter Variable Font
    fontSize: 37.8px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Inter Variable Font
    fontSize: 28.4px
    fontWeight: 400
    lineHeight: 1.06
  headline-xs:
    fontFamily: Inter Variable Font
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Inter Variable Font
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 12px
  sm: 20px
  md: 30px
  lg: 44px
  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: Calculator-Led Pricing in Deep Evergreen Tones

## Overview

Rainforest Pay targets vertical SaaS teams comparing embedded payment economics. The interface should feel confident, transparent, and financially literate—serious but approachable. Density sits in the form and tables; surrounding whitespace stays generous. Accent green is reserved for CTAs and interactive controls to keep the tone professional rather than promotional.

## Colors

- Primary (#00473c): Evergreen ink for headings, body text, and icons.
- Secondary (#7b9f9c): Muted sage for secondary text and subdued accents.
- Tertiary (#00b011): Signal green for primary CTAs, sliders, and key emphasis.
- Neutral (#ffffff): Paper background for pages, cards, and tables.
- Border (#e5e7eb): Light mist for table rules, input outlines, and separators.
- Brand-thunder-bay (#cad9d7): Pale teal wash for light, branded section backgrounds.
- Surface (#ffffff): Default surface color for cards and form containers.
- On-surface (#00473c): Text and icon color when placed on surfaces.

## Typography

Inter Variable Font is used across all levels and is provided via custom files in font_sources; it's open-source and can be loaded as supplied. Roles: headline-lg 56.7px/1.2 for hero statements; headline-md 37.8px/1.2 for section headers; headline-sm 28.4px/1.06 for key figures and subheads; headline-xs 18px/1.22 for labels and small titles; body-md 16px/1.5 at weight 300 for paragraphs and legal copy. If Inter is unavailable, use close substitutes: Source Sans 3, Manrope, or IBM Plex Sans.

## Layout

Spacing follows a simple scale: 12, 20, 30, 44, and 100px. Use xs (12) for tight label–control gaps and chip paddings; sm (20) for small stack spacing; md (30) as the default block gap inside cards and between sections; lg (44) for section padding and hero inner spacing; xl (100) for major vertical breaks between page bands. A standard multi-column grid with wide outer gutters keeps dense tables readable while hero and CTA blocks breathe.

## Elevation & Depth

Shadows are minimal: only a subtle small shadow (rgba(0,0,0,0.2) 1px 2px 8px) appears on key overlays or sticky cards. Most hierarchy is conveyed through whitespace, the Light Mist border (#e5e7eb), and tonal shifts using Pale Teal Wash (#cad9d7). Avoid heavy elevation—md/lg/xl shadows are none.

## Shapes

Corners are calm and consistent. Use 8px (rounded.md) for primary surfaces like cards and the primary button. Use 4px (rounded.sm) for secondary buttons and smaller inputs. Links and text-only elements remain square (0px) to reduce visual noise.

## Components

- Button — Primary: #00b011 background, #ffffff text, 8px radius, 52px height, 17×24px padding. Use for Start/Book Demo actions.
- Button — Secondary: text-only style in #00473c with 4px radius and the same 52px height; place next to a primary action without competing.
- Button — Link: inline action with #00473c text and 0px radius; no container.
- Card: #ffffff surface with #00473c text, 8px radius, 16px internal padding; optional small shadow for prominence.

### ROI Calculator Form
A multi-question card using body-md labels (16px), green sliders and inputs. Primary accents (#00b011) highlight interactive controls; borders and input lines use #e5e7eb. Spacing: md (30px) between field groups.

### ROI Summary Panel ("Your return")
A dense results block. Headline-sm (28.4px) for dollar figures, negative values in standard text color; background sections may invert to deep #00473c for emphasis with #ffffff text.

### Interchange-Plus Fee Tables
Tables with #e5e7eb rules, 16px body text, and 20–30px padding. Use headline-xs (18px) for column headers; avoid zebra striping—tone stays clean on white.

### Quick-fire Answers (FAQ)
Accordion or stacked Q&A using headline-sm for questions and body-md for answers. Keep borders at #e5e7eb and 8px corners on containers.

### Sticky Top Banner
A slim announcement bar spanning the viewport; body-md text, #00473c on #ffffff or Pale Teal Wash background. Dismissible with no heavy shadow.

### Download ROI Block
A compact card with copy and a primary button (#00b011). Maintain 8px corners and md (30px) internal spacing.

### Cookie Consent Modal
Centered card using 8px radius, small shadow, and secondary choices styled as secondary buttons; primary action stays #00b011.

## Do's and Don'ts

- Do reserve #00b011 for primary CTAs, sliders, and key emphasis; overuse weakens its meaning.
- Do use #e5e7eb borders to structure tables and forms instead of heavy dividers or shadows.
- Do keep buttons 52px tall with 17×24px padding for consistency.
- Don't apply medium/large shadows; only the small shadow is permitted.
- Don't round everything to 8px—use 4px on secondary actions to preserve hierarchy.
- Don't place text over busy artwork; keep headlines on solid #ffffff or #cad9d7 for contrast.

## Agent Prompt Guide

Quick color reference — Text: #00473C; Background: #FFFFFF; Border: #E5E7EB; Accent/CTA: #00B011; Wash: #CAD9D7.

1) Build a hero with an H1 and CTA
- Font: Inter Variable Font; H1 56.7px/1.2, weight 400; body 16px/1.5, weight 300.
- Background: #FFFFFF; Text: #00473C.
- Primary button: 52px height, 17px 24px, 8px radius, background #00B011, text #FFFFFF.
- Section padding: 44px top/bottom.

2) Create a calculator card with two sliders and inputs
- Card: background #FFFFFF, text #00473C, radius 8px, padding 16px + 30px internal gaps, small shadow rgba(0,0,0,0.2) 1px 2px 8px.
- Inputs: border #E5E7EB; active slider/knob #00B011.
- Labels: Inter 16px/1.5; group title: 18px/1.22.

3) Style an interchange pricing table
- Table background #FFFFFF; cell borders #E5E7EB 1px.
- Header: Inter 18px/1.22; rows: Inter 16px/1.5.
- Padding: 20–30px cells; corners 8px; no row stripes.

4) Add a FAQ accordion
- Question: Inter 28.4px/1.06 in #00473C; answer: Inter 16px/1.5.
- Container: background #FFFFFF, border #E5E7EB, radius 8px, spacing 20–30px.
- Icons/chevrons in #7B9F9C on idle, switch to #00B011 on open.

5) Footer with secondary action
- Background #CAD9D7 wash; text #00473C.
- Secondary button: text #00473C, 4px radius, 52px height, 17px 24px padding.

## Similar Brands

- Stripe: similar evergreen-on-white clarity and transparent pricing tables; Stripe leans more blue and uses heavier gradients.
- Adyen: enterprise feel with restrained color and dense tables; Adyen's typography trends narrower and more compact.
- Plaid: infrastructure tone with minimal shadows and green accents; Plaid uses more geometric illustration and colder greens.
- Paddle: clear pricing explanations and soft cards; Paddle employs purple accents and more marketing flourish than Rainforest.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 15 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 · 5 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 days ago