# GoCardless Brand Identity

A complete profile of **GoCardless**'s visual system — colors, typography, components, and personality.

## Quick Facts

| Field      | Value     |
|------------|-----------|
| Primary    | #F1F252   |
| Accent     | #F1F252   |
| Body Font  | Haffer    |
| Heading Font| Haffer   |

## Color Palette

- primary: #F1F252
- secondary: #EAE8F9
- accent: #F1F252
- background: #EFECE7
- textPrimary: #1C1B18
- link: #8C8579

## Typography

- primary: Haffer — [Haffer Font](https://fonts.google.com/specimen/Haffer)
- heading: Haffer — [Haffer Font](https://fonts.google.com/specimen/Haffer)

## Visual Assets

- Logo: data:image/svg+xml;charset=utf-8,%3Csvg%20height='23'%20width='150'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E
- Favicon: [favicon](https://gocardless.com/content-platform/favicon-32x32.png?v=782d298e4e4d81e33987efc57ce8e4d0)
- Social card (og:image): [og:image](https://gocardless.com/content-platform/static/816e9048c2a134da3e79b8677556ad0f/f8482/og-full.png)

## UI Components

- buttonPrimary: background=#F1F252, textColor=#1C1B18, borderRadius=32px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px
- buttonSecondary: background=#1C1B18, textColor=#FAF9F7, borderRadius=32px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px

## Brand Personality

Tone: professional · Energy: medium · Audience: businesses seeking payment solutions

## GoCardless Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

- **Manage payment schedules for your templates – Support Centre**
  - Image: 
  - Source: [Source](https://support.gocardless.com/hc/en-nz/articles/17145030724636-Manage-payment-schedules-for-your-templates)
- **Welcome to our new blog | GoCardless**
  - Image: 
  - Source: [Source](https://gocardless.com/blog/welcome-to-our-new-blog/)
- **GoCardless Embed | GoCardless**
  - Image: 
  - Source: [Source](https://gocardless.com/solutions/gocardless-embed/)
- **10 ideas about 2.5 years | GoCardless**
  - Image: 
  - Source: [Source](https://gocardless.com/blog/10-ideas-about-2-point-5-years/)
- **Top articles by Neil Morgan | GoCardless**
  - Image: 
  - Source: [Source](https://gocardless.com/resources/authors/neil-morgan/)
- **How US SaaS Businesses are Leveraging Bank Debit Payments to Scale Internationally | GoCardless**
  - Image: 
  - Source: [Source](https://gocardless.com/en-us/blog/how-saas-businesses-are-leveraging-bank-debit-payments-to-scale/)

## Working with these fonts

Not found on Google Fonts? Follow these instructions if you have permission to use the fonts:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font".
3. Hard-reload the page and capture font URLs.
4. Save the font files locally.
5. Copy the matching @font-face declarations to your local path.

Programmatic alternative: Use Playwright or Puppeteer to capture font responses.

## Machine-Readable Profile

```json
{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Haffer",
   "role": "heading"
  },
  {
   "family": "Nudge",
   "role": "unknown"
  }
 ],
 "colors": {
  "primary": "#F1F252",
  "secondary": "#EAE8F9",
  "accent": "#F1F252",
  "background": "#EFECE7",
  "textPrimary": "#1C1B18",
  "link": "#8C8579"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Haffer",
   "heading": "Haffer"
  },
  "fontStacks": {
   "heading": [
    "Nudge",
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    "sans-serif"
   ],
   "body": [
    "Haffer",
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    "sans-serif"
   ],
   "paragraph": [
    "Haffer",
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "102px",
   "h2": "14px",
   "body": "20px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "5px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#F1F252",
   "textColor": "#1C1B18",
   "borderRadius": "32px",
   "borderRadiusCorners": {
    "topLeft": "32px",
    "topRight": "32px",
    "bottomRight": "32px",
    "bottomLeft": "32px"
   },
   "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
  },
  "buttonSecondary": {
   "background": "#1C1B18",
   "textColor": "#FAF9F7",
   "borderRadius": "32px",
   "borderRadiusCorners": {
    "topLeft": "32px",
    "topRight": "32px",
    "bottomRight": "32px",
    "bottomLeft": "32px"
   },
   "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
  }
 },
 "images": {
  "logo": "data:image/svg+xml;charset=utf-8,%3Csvg%20height='23'%20width='150'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E",
  "favicon": "https://gocardless.com/content-platform/favicon-32x32.png?v=782d298e4e4d81e33987efc57ce8e4d0",
  "ogImage": "https://gocardless.com/content-platform/static/816e9048c2a134da3e79b8677556ad0f/f8482/og-full.png",
  "logoHref": "/en-us/"
 },
 "personality": {
  "tone": "professional",
  "energy": "medium",
  "targetAudience": "businesses seeking payment solutions"
 },
 "designSystem": {
  "framework": "custom",
  "componentLibrary": ""
 },
 "confidence": {
  "buttons": 0.95,
  "colors": 0.9,
  "overall": 0.925
 }
}
```