Skip to content
DesignMunkDesignMunk Submit a site

Lovey

lovey.com
Surprisingly easy business loans: paid in as little as 4 hours
Finance Fintech Webflow Homepage Nimbus Sans Outfit
Share Visit site
lovey.com DESKTOP · 1440
Lovey

AI Breakdown

Design export

---
version: alpha
name: Lovey
description: "Surprisingly easy business loans: paid in as little as 4 hours"
colors:
  primary: "#333333"
  secondary: "#bcaccc"
  tertiary: "#7159a1"
  neutral: "#f8f1ec"
  border: "#dcd2cb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Nimbus Sans
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: Outfit
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.36
    letterSpacing: -0.023em
  headline-sm:
    fontFamily: Outfit
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.21
  headline-xs:
    fontFamily: Nimbus Sans
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 10px
  md: 16px
spacing:
  xs: 6px
  sm: 14px
  md: 22px
  lg: 32px
  xl: 64px
components:
  button-primary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    height: 52px
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#373249"
    rounded: "{rounded.sm}"
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 25px
---

# Lovey: Pastel Lilac Cards for a 60-Second Enquiry

## Overview

Lovey targets UK SMEs with a warm, trustworthy feel: calm neutral surfaces, a single purple accent, and friendly illustrations. Density is moderate — roomy sections with concise copy blocks. When no token covers a case, default to clarity: neutral backgrounds, primary text, and a single accent per section. Components are card-based, with repeated enquiry and proof patterns to reduce friction.

## Colors

- **primary (#333333):** Core text and high-contrast headings on light backgrounds.
- **secondary (#bcaccc):** Subtle UI accents, illustration tints, and secondary highlights.
- **tertiary (#7159a1):** Action color for key affordances and emphasis moments.
- **neutral (#f8f1ec):** Page background and card surfaces for a soft, non-white canvas.
- **border (#dcd2cb):** Hairline dividers, card outlines, and subtle separators.
- **surface ({colors.neutral}):** Default panel and card fill consistent with the page background.
- **on-surface ({colors.primary}):** Text and icon color when placed on surface/neutral areas.

## Typography

- Nimbus Sans (proprietary/custom): used for large and extra-small headlines where a neutral grotesk is needed. Not Google-hosted; an agent should not assume availability. Suitable substitutes: Inter, IBM Plex Sans, Source Sans 3.
- Outfit (Google): body copy and most mid/small headlines. Load via Google Fonts. body-md runs 18px/1.5, headline-md 28px/700 with slight negative tracking, headline-sm 24px/700.
- Nimbus Sans Extd (proprietary/custom): occasional wide display for compact, emphatic labels. Not Google-hosted. Substitutes with similar wide, geometric tone: League Spartan, Montserrat, Archivo.
- Strategy: Keep hierarchy simple — Nimbus Sans for top-level claims (headline-lg, headline-xs), Outfit for everything else including paragraphs and UI labels.

## Layout

Spacing is a five-step scale used predictably: xl 64px for section padding; lg 32px for gaps between major blocks; md 22px for card inner spacing; sm 14px for compact controls; xs 6px for micro gaps. Cards form grids (three-up on desktop, stack on mobile). Content should sit in comfortable widths with generous breathing room around CTAs and illustrations.

## Elevation & Depth

Depth is gentle. Use md shadow for floating feature cards and modals, sm for small elements if needed, and lg only for focus states or hero panels. When shadow is minimal, rely on border #dcd2cb and neutral/surface contrast to separate groups. Avoid xl/inner shadows (both defined as none).

## Shapes

Corners communicate friendliness without full pills: 10px radius for interactive controls (buttons, inputs), 16px for cards and larger panels. Keep consistency — do not mix radii within a single component. Circles should be reserved for avatars or icon badges, not general containers.

## Components

Buttons and cards
- Button Primary: height 52px, radius 10px, text color {colors.tertiary}. Use for the dominant action per view. Pair with generous horizontal padding (sm–md).
- Button Secondary: white background, #373249 text, height 52px, radius 10px. Place next to primary actions for alternative paths.
- Button Link: text-only, primary color #333333, radius 0.
- Card: neutral background, primary text, radius 16px, 25px padding; apply md shadow for lift.

Distinctive components on this page
### Header bar
- Surface #f8f1ec with subtle border #dcd2cb. Menu items in primary #333333; right-aligned utility actions include a tertiary-accented CTA. Horizontal padding lg (32px), vertical padding sm (14px).
### Hero claim + CTA cluster
- Headline in Nimbus Sans (headline-lg). Supporting copy in body-md. Primary CTA uses the tertiary accent and 52px height; a secondary link sits to its right. Vertical rhythm: md (22px) between lines, lg (32px) down to illustration.
### Three-up intro cards
- "Just looking?", "Start your enquiry", "Rated excellent." Each is a Card (16px radius, 25px padding) on the neutral page background with md shadow. Headings use headline-sm (Outfit 24/700); body is body-md. Gaps between cards: lg (32px).
### Enquiry calculator card
- Prominent numeric result (use headline-md 28/700) with supporting labels in body-md. Primary action at 52px height. Inner spacing md (22px); border #dcd2cb for input rails.
### Trustpilot review card
- Card with rating summary, small list of reviews, and a link to external reviews. Use secondary #bcaccc sparingly for metadata; actions stay in tertiary.
### Three-step timeline
- Numbered 01–03 with short labels (headline-xs Nimbus Sans 21/600) and body-md copy. Connector lines use border #dcd2cb; step icons may use secondary tints.
### Product link tiles
- Compact cards linking to loan types. Use card spec with tight content: headline-sm, a short body line, and an arrow. Hover may lift with sm shadow and a slight tertiary tint on icons.
### Comparison table
- Two-column contrast (Lovey vs Banks). Table lines in #dcd2cb; checkmarks as tertiary accents. Head labels in headline-xs; rows in body-md.

## Do's and Don'ts

Do
- Use #f8f1ec as the default page surface and #333333 for all primary text.
- Reserve #7159a1 for key actions and highlights; one accent per view.
- Keep radii at 10px for controls and 16px for cards; be consistent within a component.
- Space sections with 64px top/bottom and 32px between clusters; use 22px inside cards.

Don't
- Introduce additional accent colors or high-saturation hues that compete with #7159a1.
- Use heavy shadows beyond the provided sm/md/lg or add inner shadows.
- Set body text below 18px or change families; readability relies on Outfit 18/1.5.
- Collapse content density; this system relies on comfortable whitespace to read as trustworthy.

## Agent Prompt Guide

Quick color reference
- Text: #333333
- Background: #f8f1ec
- Border: #dcd2cb
- Accent: #7159a1

Prompts
1) Build a hero
- Create a full-width section on #f8f1ec with 64px top/bottom padding. Set the H1 in Nimbus Sans, 32px, weight 700, line-height 1.19. Body copy in Outfit, 18px/1.5, #333333. Add two buttons: Primary at 52px height, 10px radius, accenting with #7159a1; Secondary white background, #373249 text, same size. Gap between elements: 22px.

2) Three-card intro strip
- Place a three-column grid on #f8f1ec with 32px gaps. Each card: background #f8f1ec, 16px radius, 25px padding, md shadow. Headings in Outfit 24px/700; body in Outfit 18px/1.5. Include a small link styled as button-link (#333333) at the end of each card.

3) Enquiry calculator panel
- Use the Card spec (16px radius, 25px padding). Show a result headline in Outfit 28px/700 with tight letterspacing (-0.023em). Inputs have 10px radius, 1px border #dcd2cb, and 14px vertical padding. Primary action uses the 52px/10px button-primary pattern with #7159a1 emphasis.

4) Three-step timeline
- Create a horizontal or vertical sequence of three items. Step numbers in Nimbus Sans 21px/600; labels in Outfit 24px/700; descriptions in Outfit 18px/1.5. Connectors are 1px #dcd2cb. Section padding 64px, item gaps 32px.

5) Comparison table
- Two side-by-side cards (Lovey vs Banks). Use border #dcd2cb for row dividers, body text #333333, and checkmarks/highlights in #7159a1. Head labels in Nimbus Sans 21px/600. Card radius 16px with md shadow.

## Similar Brands

- Funding Circle — Also SME lending with friendly illustration and soft color; Lovey is warmer with an oat background and a single purple accent.
- Tide — UK business banking that uses rounded cards and approachable copy; Tide is brighter and bluer, Lovey more muted and lilac.
- Brex — Clean fintech with bold headings and generous white space; Brex is sharper and monochrome where Lovey is softer and pastel.
- Clearco — Growth financing with card-driven layouts; Clearco skews darker with gradient accents, Lovey stays light and matte.

More like this

Browse Finance →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 2 hours ago
privy.io
Privy About Developer Tools
Privy About
The page opens with a centered hero that screams careers: a small “CAREERS” eyebrow over a huge headline, tight blurb, and twin…
About · 15 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago