---
name: GoCardless
description: "This site is an excellent reference for balancing premium B2B professionalism with bold, modern design choices and a highly distinctive accent color."
version: alpha

colors:
  background: "#EFECE7"
  primary: "#1C1B18"
  secondary: "#545048"
  tertiary: "#F1F252"
  neutral: "#D4D1CD"
  bg-soft: "#FAF9F7"
  line: "rgba(212, 209, 205, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 12px
  lg: 24px
  pill: 32px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A professional fintech platform designed to streamline B2B payment collection.

*A professional, trust-focused fintech platform designed to streamline B2B payment collection.*

## Colors

A restrained palette of warm off-whites and dark charcoals, punctuated by a single high-chroma electric yellow accent.

- **Background (`#EFECE7`)** — uses `bg` token
- **Primary text (`#1C1B18`)** — uses `ink` token
- **Secondary text (`#545048`)** — uses `ink-soft` token
- **Accent (`#F1F252`)** — uses `accent` token
- **Muted (`#D4D1CD`)** — uses `muted` token
- **Borders (`rgba(212, 209, 205, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Headlines use a bold, geometric sans-serif for a strong, modern presence.
- Body text uses a highly legible humanist sans-serif for comfortable reading.
- Monospaced fonts are reserved for specific technical or data-related contexts.

## Layout

Two-column grid on desktop with alternating content blocks (text left/media right, media left/text right) to create visual interest.

*Rhythm:* Consistent 4px base grid with generous vertical rhythm (48px/64px) between major page sections.

## Elevation & Depth

- 0px 0px 0px 1px inset (button borders)
- 0px 0px 1px 0px rgba(0, 0, 0, 0.1) (subtle depth on cards)
- Borders: 1px solid #D4D1CD

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 24px
- `pill`: 32px

## Components

- **button:** Pill-shaped buttons with thick, solid dark borders; filled yellow for primary actions and transparent for secondary.
- **card:** Clean cards with soft drop shadows and large border-radius (24px/32px), used for testimonials and partner logos.
- **chip:** Not prominently featured.
- **input:** Not prominently featured, but expected to be clean with rounded borders.
- **hero:** Large, bold typography paired with a high-quality contextual photograph and prominent video play overlay.

## Do's and Don'ts

**Don't:**
- Don't use a dark theme — screenshot shows a light, warm off-white primary background (#EFECE7).
- Don't use thin, delicate typography — screenshot shows a bold, heavy geometric sans-serif for display text.
- Don't use subtle, muted accents — screenshot shows a single, highly saturated electric yellow accent (#F1F252).
- Don't use sharp, square corners — screenshot shows large, pill-shaped radii (24px/32px) on buttons and cards.
- Don't use complex gradients — screenshot shows flat color fills and simple photographic backgrounds.
- Don't use delicate, thin borders — screenshot shows prominent, 1px solid dark borders on interactive elements.

---

## System Prompt (paste into AI agent)

```
GoCardless is a premium B2B fintech platform for automated payments. The design DNA features a warm off-white background (#EFECE7) with deep charcoal ink (#1C1B18), punctuated by a high-chroma electric yellow accent (#F1F252). Typography relies heavily on a bold, geometric sans-serif (Haffer) for display, paired with a highly legible humanist sans-serif for body copy. Key critical constraints: 1) Never use a dark mode or purely black backgrounds for content sections. 2) Always use a heavy font-weight (700) for major headlines to maintain the brand's bold presence. 3) Strictly avoid using more than one high-chroma color; the electric yellow must be used sparingly for primary CTAs only.
```