Skip to content
DesignMunkDesignMunk Submit a site

Overflow

overflow.co
A Better Way to Give
Fintech Technology Webflow Homepage PP Telegraf
Share Visit site
overflow.co DESKTOP · 1440
Overflow

AI Breakdown

Design export

---
version: alpha
name: Overflow
description: A Better Way to Give
colors:
  primary: "#151515"
  secondary: "#fca484"
  tertiary: "#ff4512"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: PP Telegraf
    fontSize: 60px
    fontWeight: 300
    lineHeight: 1.1
  headline-md:
    fontFamily: PP Telegraf
    fontSize: 52px
    fontWeight: 300
    lineHeight: 1.19
  headline-sm:
    fontFamily: Universalsans
    fontSize: 45px
    fontWeight: 300
    lineHeight: 1.2
  headline-xs:
    fontFamily: Universalsans
    fontSize: 39px
    fontWeight: 300
    lineHeight: 1.21
  body-md:
    fontFamily: PP Telegraf
    fontSize: 33.7px
    fontWeight: 300
    lineHeight: 1.51
rounded:
  sm: 4.5px
spacing:
  xs: 6px
  sm: 14px
  md: 30px
  lg: 52px
  xl: 170px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 7.48491px 29.9396px
    height: 37px
  button-secondary:
    textColor: "#482945"
    rounded: "{rounded.sm}"
    padding: 7.48491px 29.9396px
    height: 37px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#de3000"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 29.9396px 14.9698px 14.9698px
---

# Overflow: Faith-Friendly UI With Split-Accent CTAs

## Overview

Overflow's UI is calm, modern, and ministry-friendly. White surfaces, dark text, and a single warm accent aim for trust and clarity over spectacle. Spacing is generous, with modules breathing on a tall page. Interactions (tabs, slider, carousel) reveal proof without overwhelming first-time visitors.

## Colors

- **primary (#151515):** Primary ink for headlines, navigation, and core text.
- **secondary (#fca484):** Warm peach tint for backgrounds, badges, and subtle emphasis.
- **tertiary (#ff4512):** Action accent for primary buttons and key highlights.
- **neutral (#ffffff):** Pure white used for page background and cards.
- **surface (#ffffff):** Default container surface; pair with primary text.
- **on-surface (#151515):** Text and icon color when placed on surface elements.

## Typography

- Display and body: PP Telegraf (custom, 300). Used for the largest headlines and primary body copy. Sizes: headline-lg 60px/1.1, headline-md 52px/1.19, body-md 33.7px/1.51. Availability: self-hosted; agents should substitute Space Grotesk, Sora, or Outfit.
- Secondary headings: Universalsans (custom). Used for headline-sm 45px/1.2 and headline-xs 39px/1.21. Availability: self-hosted; agents should substitute Inter, Plus Jakarta Sans, or Manrope for similar x-height and neutrality.
- Pairing guidance: Use PP Telegraf (or Space Grotesk) for hero and key claims; use Universalsans (or Inter) for supporting headings to keep contrast while staying geometric and friendly.

## Layout

Spacing scale is asymmetric and spacious: xs 6px for micro gaps; sm 14px for control padding and inline gaps; md 30px for card padding and intra-section rhythm; lg 52px for section gutters; xl 170px for hero and major dividers. A 12-column responsive grid works well, with feature blocks spanning 6–12 columns and consistent 14–30px gutters. Keep vertical rhythm in multiples of 6/14/30 to match the measured DOM.

## Elevation & Depth

Hierarchy leans on soft multi-layer shadows and tonal contrast on white. Use sm shadow for small tiles and buttons, md for cards and floating UI panels, and lg for large device mockups or hero compositions. xl is none—flat sections rely on whitespace and color, not depth. The inner shadow can be used sparingly to add inset definition to images or inputs.

## Shapes

Corner radius is a consistent 4.5px across buttons, pills, inputs, and cards. It reads as friendly without feeling bubbly. Avoid mixing larger radii; use square corners only for links and text-only elements.

## Components

- Button — Primary: height 37px, padding 7.48491px 29.9396px, radius 4.5px, background #ff4512, text #ffffff. Use for main CTAs.
- Button — Secondary: height 37px, same padding and radius, text #482945 on neutral or lightly tinted backgrounds. Use for supportive actions.
- Button — Link: text-only, #151515, radius 0. Use for in-line navigational prompts.
- Card: background #de3000 with #ffffff text when used as a promotional highlight; default content cards can stay on surface with borders or shadows.

Distinctive modules on this page:
### Top Navigation Bar
Single-line nav with centered links and a right-aligned CTA. Links use #151515 on #ffffff with 6–14px gaps; the CTA uses the button dimensions above.
### Centered Hero
Headline set at headline-lg (60px) on white, one line of supporting copy, and a single CTA. Vertical spacing uses lg–xl.
### Product Mockup Gallery
A large desktop mockup with side tiles. Use lg shadow for the main monitor and md for side tiles; 14–30px internal padding.
### Stats Reveal Tiles
A 3–4 column grid of KPIs that reveal details on tap. Use sm shadow or a 1px border with 14–30px padding; numbers can use headline-sm (45px).
### Giving Methods Grid
Six tiles (Card & ACH, Apple/Google Pay, Stock, Crypto, RoundUps, DAFs), each with a short line and a link action. Tiles use md spacing and 4.5px corners.
### Overflow Tap Word Cycler
A headline with a changing verb stack (give/register/connect/serve/check-in/text). Keep transitions subtle; the core line remains stable to avoid layout shift.
### Impact Slider
A revenue slider paired with calculated uplift. Use a wide track, 4.5px thumb corners, and headline-xs (39px) for figures.
### Testimonial Carousel
Pastor quotes with names and orgs. One card visible on small screens, multi-card on desktop; md shadow and 30px padding.

## Do's and Don'ts

- Do use #ff4512 for the primary action and keep button height at 37px with 7.48491px × 29.9396px padding.
- Do reserve #fca484 for soft emphasis and section tints; keep text in #151515 for readability.
- Do space sections in 30px and 52px steps; use 170px only for major breaks like the hero.
- Don't mix additional radii; stick to 4.5px or square for text links.
- Don't introduce extra shadow sizes; pick from sm, md, or lg based on component scale.
- Don't style secondary CTAs to outshine the primary; avoid competing fills next to the main orange action.

## Agent Prompt Guide

Quick color reference:
- Text: #151515
- Background: #ffffff
- Border: #151515 (use low opacity if needed)
- Accent: #ff4512

1) Build a centered hero
- Container: max 1200px, center, padding-top/bottom 170px.
- Headline: 60px/1.1 Space Grotesk (as substitute for PP Telegraf), weight 300, color #151515.
- Copy: 33.7px/1.51 Space Grotesk, color #151515 at 80%.
- Primary CTA: 37px tall button, padding 7.48491px 29.9396px, radius 4.5px, background #ff4512, text #ffffff.

2) Create the "View as donor / organization" switch
- Horizontal pill group with two items, each 37px tall, radius 4.5px, gap 14px.
- Unselected: background #ffffff, text #151515, 1px border (use #151515 at low opacity).
- Selected: fill #ff4512, text #ffffff.

3) Stats grid (3 columns)
- Each card: 30px padding, radius 4.5px, background #ffffff, sm shadow.
- Stat number: 45px/1.2 Inter (as substitute for Universalsans), weight 300, color #151515.
- Label: 33.7px/1.51 Space Grotesk, color #151515 at 80%.

4) Primary button spec for reuse
- Height 37px; padding 7.48491px 29.9396px; radius 4.5px.
- Fill #ff4512; text #ffffff; no extra shadow. Hover: darken fill slightly; Focus: 2px outline using #151515 at low opacity.

## Similar Brands

- Pushpay — Similar church-giving focus and proof-led homepage; Pushpay leans heavier on purple accents where Overflow pairs orange with a contrasting header CTA.
- Tithely — Also donation tools for ministries; more compact modules and brighter greens, while Overflow prefers airy spacing and warm oranges.
- Donorbox — Broad nonprofit fundraising platform; Donorbox uses cooler blues and dense sections versus Overflow's warmer, more spacious layout.
- Classy — Enterprise-grade fundraising with strong social proof; Classy's dark-on-light typography is similar, but it relies more on photography than UI mockups.

More like this

Browse Fintech →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 6 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago