CURATED · OPEN · FREE

Checkout.com

Global payments infrastructure for high-performance businesses.

fintechpayments

Checkout.com screenshot

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://www.checkout.com

📦 Browse pack contents →

01

Identity DNA

paymentsglobalperformancefintechcheckout

A premium financial infrastructure provider that treats every transaction with surgical precision.

02

Color

#186AFFAccent

#FFFFFFInk

#000000BG

#D9D9D9Muted

rgba(255,255,255,0.1)Line

High-contrast dark mode with a single functional blue accent for primary actions.

03

Typography

geometric-sans · humanist-sans · semi-monospaced

display101px · 500
h156px · 500
body18px · 400
caption14px · 400

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px vertical rhythm for standard text blocks, generous whitespace between major sections.

05

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

Minimal, relying on background contrast for separation. 1px borders used only for specific card definitions.

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed dark canvas with centered content and floating image modules.

07

Motion & Interaction

200msmicro

250mssmall

800msmedium

cubic-bezier(0.755, 0.05, 0.855, 0.06)easing

Hover state color shifts (0.2s) · Eased transitions for interactive elements

Color transitions on links and buttons (0.2s). · Immediate visual feedback via state changes.

08

Components

button Solid blue primary CTA with pill radius; secondary buttons are transparent with thin borders.
card Image-heavy rounded modules with 16px-20px radius, appearing as floating vignettes.
chip Simple text links with underlines or subtle background fills.
input Minimalist dark fields with subtle borders and bright blue focus states.
hero Massive typography centered on a dark background, surrounded by a collage of dynamic photographic assets.

09

Voice & Don'ts

Tone Confident, precise, and authoritative.
Headlines Large, all-caps, punchy statements that command attention.
CTAs Direct and action-oriented (e.g., 'Get in touch').

Don't use decorative serif fonts — screenshot shows a clean, modern geometric sans-serif for all headings.
Don't use a busy background — screenshot shows a deep black, high-contrast background that prioritizes content.
Don't use rounded-square buttons — screenshot shows fully rounded 'pill' shaped buttons for primary actions.
Don't use a muted color palette — screenshot shows a stark black-and-white scheme with one high-vibrancy blue accent.
Don't use small, cramped typography — screenshot shows massive, tightly tracked display type for emphasis.
Don't use thin, fragile lines — screenshot shows clear boundaries defined by high-contrast color blocks rather than subtle strokes.
Avoid: Jargon
Avoid: Hedging
Avoid: Playfulness
Avoid: Excessive adjectives

10

Inside the pack — real screenshots

Checkout.com — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Checkout.com — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

Checkout.com is a premium fintech payments infrastructure provider. The design DNA is defined by a high-contrast dark mode canvas (#000000 background, #FFFFFF ink) and a single high-vibrancy functional accent (#186AFF) for primary calls to action. Typography utilizes a bold geometric sans-serif for display and a legible humanist sans-serif for body copy, maintaining a strict typographic scale. Critical constraints: Never use decorative serifs; avoid subtle color transitions in favor of sharp, high-contrast boundaries; and ensure primary buttons always use a fully rounded 'pill' radius rather than square or semi-rounded corners.

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