---
title: "GoCardless design system"
variant: extended
source: https://gocardless.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/gocardless-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# GoCardless · Design System

> Calm, confident payments with a sharp contrast of light and ink.

**Theme:** light · **Industry:** fintech · **Source:** https://gocardless.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

GoCardless pairs a bright, spacious canvas with crisp typography and rounded, dark calls to action. Product imagery and compact feature cards bring practical payment tools to life, while a deep navy footer anchors the long page.

## North star

Use generous white space and restrained dark contrast to make the payment product feel clear, dependable, and easy to act on.

## Overview

The homepage builds trust through a predominantly white canvas, restrained neutral surfaces, and a strong near-black/navy contrast. The hero is centered and typographic: a large Haffer XH SemiBold headline sits above concise Inter copy and paired pill-shaped actions. Blue is used sparingly for announcement and trust cues, while yellow is a small, high-visibility accent rather than a broad brand field. The first product image is a wide, rounded lifestyle photograph with a payment interface layered into the scene; lower sections use pale cards and dark interface mockups to make features tangible. Layout alternates broad areas of breathing room with compact, clearly grouped content. Cards rely more on fine pale borders than pronounced shadows, and the dark footer provides a decisive visual endpoint. Keep illustrations and interface mockup colours subordinate to the core palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and broad light sections, especially the hero and open content areas. |
| Slate Text | `#374151` | `--color-slate-text` | neutral | Primary body copy and navigation text against light backgrounds. |
| Soft Hairline | `#f3f4f6` | `--color-soft-hairline` | neutral | Fine card and navigation borders that separate content without adding visual weight. |
| Midnight Ink | `#0f1521` | `--color-midnight-ink` | surface | Deep inverse sections and dark interface surfaces, including the footer treatment. |
| Night Navy | `#111827` | `--color-night-navy` | brand | Dark links, footer surfaces, and high-contrast primary actions. |
| Quiet Gray | `#9ca3af` | `--color-quiet-gray` | neutral | Muted footer and supporting text that sits behind primary content. |
| Cloud Surface | `#f9fafb` | `--color-cloud-surface` | surface | Subtle pale cards and soft transitions between white and gray sections. |
| Signal Yellow | `#ffe500` | `--color-signal-yellow` | accent | Small high-visibility CTA and text accent, including the product-builder prompt. |
| Graphite Panel | `#1f2937` | `--color-graphite-panel` | surface | Secondary dark panels and inverse links within lower-page content. |
| Mist Gray | `#e5e7eb` | `--color-mist-gray` | neutral | Supporting text and subtle UI details; keep it secondary to body text. |
| Muted Slate | `#6b7280` | `--color-muted-slate` | neutral | Occasional subdued text and supporting interface details. |
| Clear Blue | `#1a88ff` | `--color-clear-blue` | accent | Small announcement, link, and trust cues; not a dominant section background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#111827` (Night Navy) · `--color-surface-2` → `#0f1521` (Midnight Ink) · `--color-surface-3` → `#1f2937` (Graphite Panel) · `--color-surface-4` → `#f9fafb` (Cloud Surface) · `--color-text` → `#374151` (Slate Text) · `--color-text-muted` → `#9ca3af` (Quiet Gray) · `--color-text-subtle` → `#0f1521` (Midnight Ink) · `--color-border` → `#f3f4f6` (Soft Hairline) · `--color-accent` → `#ffe500` (Signal Yellow) · `--color-accent-2` → `#1a88ff` (Clear Blue) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#374151` | `#ffffff` | 10.31:1 | AAA |
| `#374151` | `#111827` | 1.72:1 | fail |
| `#374151` | `#0f1521` | 1.77:1 | fail |
| `#374151` | `#1f2937` | 1.42:1 | fail |
| `#9ca3af` | `#ffffff` | 2.54:1 | fail |
| `#9ca3af` | `#111827` | 6.99:1 | AA |
| `#9ca3af` | `#0f1521` | 7.2:1 | AAA |
| `#9ca3af` | `#1f2937` | 5.78:1 | AA |
| `#0f1521` | `#ffffff` | 18.27:1 | AAA |
| `#0f1521` | `#111827` | 1.03:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(249, 250, 251) 19.6034%)`
- `linear-gradient(rgb(31, 41, 55) 0%, rgb(15, 21, 33) 100%)`
- `radial-gradient(50% 118% at 31.2% -40.4%, rgba(26, 136, 255, 0.1) 0%, rgba(255, 246, 228, 0.3) 48.3824%, rgba(249, 250, 251, 0) 87.3874%)`
- `linear-gradient(rgb(211, 229, 254) 0%, rgb(239, 246, 254) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700 | Body, navigation, links, and most headings | Inter |
| sans-serif | `--font-sans-serif` | system | 400, 600 | System fallback and incidental interface text | Arial |
| Haffer XH SemiBold | `--font-display` | webfont | 600 | Hero headline and selected display headings | Inter |

- **Inter:** Use regular for body and links, semibold navigation, and bold section headings; compact negative tracking is measured across common roles.
- **sans-serif:** Use as a neutral fallback; retain straightforward sentence case and avoid decorative styling.
- **Haffer XH SemiBold:** Semibold display face with clean, compact forms; use for prominent headlines rather than dense body copy.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 600 | 1.2 | 0 | — | Haffer XH SemiBold | Centered hero headline introducing the core payment proposition. |
| h2 | 42px | 700 | 1.19 | 0.012em | — | Inter | Major section headings, including the feature overview. |
| h3 | 36px | 600 | 1.22 | 0 | — | Haffer XH SemiBold | Selected sub-section and feature headings. |
| h4 | 24px | 700 | 1.33 | -0.021em | — | Inter | Compact card and supporting content headings. |
| body | 16px | 400 | 1.5 | -0.012em | — | Inter | Hero supporting copy, feature descriptions, and explanatory paragraphs. |
| caption | 14px | 400 | 1.57 | -0.014em | — | Inter | Small trust notes, card details, and footer metadata. |
| nav | 16px | 600 | 1.5 | -0.012em | — | Inter | Primary navigation labels and header actions. |
| link | 16px | 400 | 1.5 | -0.012em | — | Inter | Inline calls to action and text links. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09"`, `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 21, 24, 32, 48, 64 px.
- Section rhythm 32px · element gap 10px · card padding 48px · max content width 1360px.

Use a centered content frame capped at the measured 1360px maximum width, with the hero copy aligned centrally and feature content arranged in grouped columns. The page density is compact within cards but spacious between major content areas. Preserve the measured 32px section gap as a rhythm cue and use broad vertical breathing room where the screenshot shows open transitions. Keep alignment disciplined and let media span wider than text blocks. The lower-page statistics sit in a dark horizontal band above the footer.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · nav `9999px` · link `11px` · xs `4px` · sm `8px` · md `10px` · lg `11px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.02) 1px 1px 2px 0px`
- Shadow `hairline-2` (card, other): `rgba(0, 0, 0, 0.05) 1px 1px 2px 0px`
- Shadow `hairline-3` (other): `rgba(0, 0, 0, 0.05) 0px 1px 2px 1px`
- Motion: standard transition `0.2s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The interface is mostly flat. Pale one-pixel borders define the feature cards, with only faint measured hairline shadows where present. Dark sections and UI mockups create layering through contrast rather than heavy elevation. Use rounded cards and pill controls, but keep overlays and media framing visually quiet.

## Imagery

Lead with a wide lifestyle photograph of a real workspace, framed with rounded corners and a payment interface visible within the scene. Supporting visuals are product UI mockups, payment-state illustrations, flags, charts, and partner marks. Treat these as demonstrations of the service rather than brand colour references; keep their varied colours contained within cards or media. Avoid glossy 3D styling.

## Components

### Announcement strip

A slim, pale header band pairs a blue acceptance label with short payment messaging and an underlined link.

### Navigation

Brand mark and grouped navigation sit on white; compact outlined and dark pill actions align at the right.

### Hero

Centered trust cue, large display headline, short supporting copy, and paired dark-filled and outlined rounded actions.

### Feature cards

Pale, lightly bordered cards organize payment recovery, fraud protection, international payments, checkout, and integrations.

### Product builder panel

A broad dark panel pairs explanatory copy and a yellow action with a bright payment-interface preview.

### Statistics band

Four compact dark metric cards display scale and support proof points above the footer.

### Footer

Deep navy surface groups links into columns, followed by muted legal and company details.

### Measured component styles

- **Primary button** (“Begin”): background #ffe500 · text #0000ee · radius 24px · padding 0px · 400 12px sans-serif
- **Link** (“Pay by Bank”): transparent background · text #111827 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Instead of system maintenance and chasin”): transparent background · text #000000 · border 1px solid #f3f4f6 · radius 12px · padding 48px · 400 12px sans-serif
- **Navigation item** (“Accept Better Stop accepting high card f”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the hero copy centered and concise.
- Use white and pale gray for the main canvas.
- Reserve dark fills for strong actions and inverse sections.
- Use blue sparingly for trust and announcement cues.
- Give cards fine borders and restrained shadows.
- Contain colourful interface mockups within their media.

## Don't

- Do not turn the page into a saturated blue layout.
- Do not use yellow as a large background field.
- Do not crowd the hero with extra navigation or copy.
- Do not add heavy shadows to otherwise flat cards.
- Do not treat screenshot illustration colours as brand palette.
- Do not use decorative display fonts for body text.

## Agent prompt

Build a new GoCardless-style fintech page with a predominantly #ffffff canvas, subtle #f9fafb surfaces, and fine #f3f4f6 borders. Use #374151 for readable body copy and #111827 or #0f1521 for dark actions and inverse panels. Reserve #1a88ff for small trust or announcement cues and #ffe500 for a limited CTA accent. Set most text in Inter; use a close Inter-like semibold display treatment for prominent headlines. Keep the hero centered with a concise headline, supporting copy, and rounded paired actions. Arrange practical product features in lightly bordered cards, and use realistic payment UI mockups or workspace photography inside rounded media frames. Maintain open section transitions, restrained elevation, and a dark metric/footer area. Ensure mockup colours remain contained rather than redefining the palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White centered hero beneath announcement and navigation; wide rounded product photograph follows the paired CTAs. | Trust proof, Primary and secondary actions, Product demonstration | Centered display headline, Pill buttons, Rounded media frame, Slim announcement bar |
| 2 | stats | Four metric cards in a horizontal band above a multi-column dark footer. | Scale proof, Quick-scan metrics, Footer navigation | Dark metric cards, Column link groups, Muted legal text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/gocardless-com