CURATED · OPEN · FREE

GoCardless

A professional fintech platform designed to streamline B2B payment collection.

fintechpayments

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://gocardless.com

📦 Browse pack contents →

Identity DNA

fintechpaymentsACHautomated billingrecurring payments

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

Color

#F1F252Accent

#1C1B18Ink

#545048Ink soft

#EFECE7BG

#FAF9F7BG soft

#D4D1CDMuted

rgba(212, 209, 205, 1)Line

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

Typography

geometric-sans · humanist-sans · monospace

display56px · 700
h236px · 600
body18px · 400
small14px · 400

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 12px

lg · 24px

pill · 32px

1px solid #D4D1CD

0px 0px 0px 1px inset (button borders) · 0px 0px 1px 0px rgba(0, 0, 0, 0.1) (subtle depth on cards)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

200mssmall

400msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Quick 0.1s/0.2s transitions for background, color, and box-shadow on interactive elements. · Smooth 0.2s underline color transitions for text links.

Background color fills or border color shifts on buttons. · Immediate state change via background or border updates.

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.

Voice & Don'ts

Tone Professional, direct, and benefit-oriented.
Headlines Bold, uppercase, and punchy to grab immediate attention.
CTAs Clear and action-focused, e.g., 'Sign up' and 'Contact sales'.

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.
Avoid: Overly complex jargon
Avoid: Passive voice in headlines
Avoid: Unclear value propositions

Inside the pack — real screenshots

GoCardless — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko