Skip to content
DesignMunkDesignMunk Submit a site

Klover

joinklover.com
Cash from the future—zero interest, zero late fees, no credit check.
Finance Fintech Webflow Homepage Beatrice Panama
Share Visit site
joinklover.com DESKTOP · 1440
Klover

AI Breakdown

Design export

---
version: alpha
name: Klover
description: Cash from the future—zero interest, zero late fees, no credit check.
colors:
  primary: "#252525"
  secondary: "#78483f"
  tertiary: "#ff8166"
  neutral: "#fff76e"
  brand-white: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Panama
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1
  headline-md:
    fontFamily: Beatrice
    fontSize: 55px
    fontWeight: 600
    lineHeight: 1.37
    letterSpacing: -0.036em
  headline-sm:
    fontFamily: Beatrice
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.21
  headline-xs:
    fontFamily: Beatrice
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Beatrice
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 13.1px
spacing:
  xs: 6px
  sm: 14px
  md: 22px
  lg: 38px
  xl: 166px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.brand-white}"
    rounded: "{rounded.sm}"
    padding: 15px 30px
    height: 68px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 15px 30px
    height: 68px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fff15b"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 21.735px
---

# Klover: Lemon Surface and Coral CTAs Over Collage

## Overview

Klover's UI is playful, bright, and approachable. It targets consumer finance users who need clarity and speed, so messaging is direct and sections are short. The interface feels spacious: large display type, generous vertical spacing, and a bold lemon surface keep content energetic and readable. Coral is the action color; body text and nav remain neutral and legible in near-black.

## Colors

- Primary (#252525): Core text and nav items. Highest contrast on light surfaces.
- Secondary (#78483f): Supportive accents for headings, disclaimers, or highlights with warmth.
- Tertiary (#ff8166): Primary action color for buttons and key links.
- Neutral (#fff76e): Brand surface yellow for backgrounds and large panels.
- Brand-white (#ffffff): Text on dark backgrounds and for contrast within dense areas.
- Surface ({colors.neutral}): Default page background; pairs with on-surface for readability.
- On-surface ({colors.primary}): Text color on surface and card backgrounds.

## Typography

- Panama (headline-lg 80px/1, 700): Custom/self-hosted. Use for the main hero headline. Not freely available. Substitutes with similar display contrast: Bodoni Moda (Google), Playfair Display (Google), Cormorant (Google).
- Beatrice (headline-md 55px/1.37 -0.036em, headline-sm 38px/1.21, headline-xs 26px/1.19, body-md 18px/1.5 600): Custom/self-hosted serif used for subheads and dense copy with a sturdy semibold. Not freely available. Substitutes: Newsreader (Google), Source Serif 4 (Google), Georgia (system).
- Use Beatrice (or substitute) for all running text to keep weight and rhythm consistent; reserve Panama (or its substitute) for a single hero moment per page.

## Layout

Spacing is a compact-to-roomy scale: 6, 14, 22, 38, and a macro 166 for major section breaks. Use xs–md inside components, lg for section padding, and xl to separate major blocks (hero to features, features to testimonials). Content typically flows in one or two columns with wide margins on large screens and a single column on mobile. Keep headings tight (line-height 1–1.21) with generous space below, not above.

## Elevation & Depth

Depth is light and purposeful. Shadows are available in sm, md, and lg; xl and inner are none. Use sm for cards on the lemon surface and md when a card overlaps imagery. Reserve lg for modals or promotional spotlights; otherwise rely on tonal contrast (neutral surface vs. card yellow) and whitespace to separate sections.

## Shapes

Two radii define the language: 4px (sm) for buttons and small controls, and a distinctive 13.1px (md) for cards and feature banners. The small radius feels crisp; the 13.1px chip reads friendly without becoming pill-shaped. Keep shapes consistent across sections to reinforce brand recall.

## Components

Buttons
- Primary: Coral background (#ff8166), white text, 4px radius, 15px×30px padding, 68px fixed height. Use for the main CTA per section.
- Secondary: Text-only styling with primary text color (#252525); 4px radius; same padding/height when rendered as a filled control inside dense regions.
- Link: Unadorned text action with no radius; use for inline and tertiary actions.

Card
- Background #fff15b, text #252525, 13.1px radius, 21.735px internal padding. Pair with shadow-sm for lift on the lemon surface.

Distinctive patterns on this page
### Hero Masthead
- Background: surface yellow (#fff76e). Headline set in Panama 80px/1; sub-line in Beatrice 55px/1.37. Primary CTA uses button-primary; App Store badges sit in a horizontal row with md (22px) gap.
### Store Badge Row
- Two platform badges aligned left with sm–md spacing; keep bottom margin lg (38px) before the next section.
### Three-Step Onboarding List
- Each step uses body-md 18px/1.5 600 with sm (14px) item gaps and md (22px) section padding. End with a button-primary or secondary link.
### Points Promo Banner
- Use the card token (#fff15b, 13.1px radius) with a 38px inner column gap and a coral primary button for the CTA.
### Budget Tools Feature Row
- Headline in headline-sm (38px), supporting copy in body-md, with an optional secondary action. Use card background when the row needs emphasis.
### Data Safety Panel
- Dense paragraph copy in body-md; highlight key phrases using secondary (#78483f) for emphasis. Keep top/bottom padding lg (38px).
### Testimonial Cards
- Title in headline-sm (38px) or xs (26px) per card, quote in body-md, author name in headline-xs. Use card background and shadow-sm; 22px internal spacing keeps quotes readable.

## Do's and Don'ts

- Do reserve #ff8166 for primary CTAs and key links; using it for headings or long text reduces action salience.
- Do keep the 68px button height and 15×30 padding; changing both breaks rhythm with the nav and hero.
- Do separate major sections with xl (166px) vertical space for the brand's airy feel.
- Don't introduce new radii; use 4px for controls and 13.1px for cards/banners only.
- Don't exceed the lg shadow except for overlays; on the lemon surface, extra blur muddies edges.
- Don't add new background colors or gradients beyond the defined palette without art-direction approval.

## Agent Prompt Guide

Quick reference — Text: #252525. Background: #fff76e. Border: #252525 (when needed). Accent/CTA: #ff8166.

1) Build the hero
- Background: #fff76e.
- H1: "Cash from the future." Panama 80px/1, weight 700 (fallback: Bodoni Moda 80px/1).
- Subhead: Beatrice 55px/1.37, -0.036em (fallback: Newsreader).
- Primary button: 68px tall, 15×30 padding, 4px radius, background #ff8166, text #ffffff.

2) Create a three-card testimonial grid
- Card: background #fff15b, text #252525, radius 13.1px, padding 21.735px, shadow-sm rgba(0,0,0,0.13) 0 9px 3px 0.
- Title: Beatrice 38px/1.21.
- Quote: Beatrice 18px/1.5 600.
- 22px gap between cards; 38px section padding.

3) Compose the onboarding steps
- Section padding: 38px top/bottom.
- Step text: Beatrice 18px/1.5 600.
- Item gap: 14px.
- End with button-secondary (text color #252525, 68px tall, 15×30 padding) or button-link for a lighter touch.

4) Build the points promo banner
- Container uses card token (#fff15b) with 13.1px radius and 21.735px padding.
- Heading: Beatrice 38px/1.21.
- Body: Beatrice 18px/1.5 600.
- CTA: button-primary (#ff8166, #ffffff, 68px tall).

5) Top navigation
- Bar background #252525; links #ffffff.
- Rightmost CTA: button-primary (#ff8166, #ffffff, 4px radius) for emphasis against the dark bar.

## Similar Brands

- Dave: Bright, characterful illustrations and warm surfaces; Dave leans green where Klover uses lemon and coral.
- Earnin: Friendly consumer-finance voice with bold display type; palette skews purple, less citrus.
- Chime: Clean, minimal fintech with oversized type; calmer green palette and lighter ornamentation than Klover.
- Cash App: High-contrast black/green with minimal decoration; shares bold CTAs but far less collage.

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