# Checkout.com · Design system migration spec

> Source: https://www.checkout.com  ·  Curated by OpenDesign  ·  en

> The site exemplifies a premium 'dark mode' fintech aesthetic, using extreme typographic scale and high contrast to establish authority and trust.

## 1. Identity DNA

The design system for Checkout.com operates with the structural integrity of a premium financial infrastructure provider. Like a surgical instrument, its components are defined by absolute precision, where every color, type choice, and interaction serves a singular purpose: to conduct high-performance transactions with unwavering authority.

**One-liner:** Global payments infrastructure for high-performance businesses.
**Keywords:** payments · global · performance · fintech · checkout
**Analogy:** A premium financial infrastructure provider that treats every transaction with surgical precision.

## 2. Color

The color system is a study in stark contrast, built upon a foundational duality of pure black and white. A single, high-vibrancy blue is reserved exclusively as a functional accent, guiding primary actions with the clarity of a beacon in a dark field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#D9D9D9` | placeholder |
| `--accent` | `#186AFF` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with a single functional blue accent for primary actions.

This constrained palette rejects decorative variation in favor of a high-contrast environment where color is a directive, not an ornament.

## 3. Typography

Typography establishes voice through a deliberate category split: a bold geometric sans-serif commands attention in display contexts, while a legible humanist sans-serif carries the weight of body copy. The scale is extreme, utilizing massive, tightly tracked headings to assert presence against the dark canvas.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** semi-monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 101px | 1.0 | 500 | -1px | Hero headline |
| h1 | 56px | 1.1 | 500 | -0.5px | Section headings |
| body | 18px | 1.44 | 400 | 0 | Main body text |
| caption | 14px | 1.5 | 400 | 0 | Fine print and metadata |

## 4. Spacing

An 8px vertical rhythm underpins the layout, creating a consistent baseline grid that structures text blocks and enforces disciplined, generous whitespace between major sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm for standard text blocks, generous whitespace between major sections.

## 5. Surfaces

Surfaces are defined by high-contrast separation rather than applied decoration. Depth is suggested through floating modules and collage, with minimal borders used only for explicit component definition.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** Minimal, relying on background contrast for separation. 1px borders used only for specific card definitions.

## 6. Layout

The structural skeleton is a full-bleed dark canvas, designed to hold centered content and floating image modules. This creates a layered, almost diorama-like composition where graphic assets appear as vignettes against the deep background.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of restrained utility, favoring sharp, 0.2-second transitions for immediate feedback over elaborate sequences. Eased color shifts and opacity changes are the primary tools, ensuring interactive states feel responsive without becoming theatrical.

- **Durations:** micro 200ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.755, 0.05, 0.855, 0.06)`
- **Patterns:**
  - Hover state color shifts (0.2s)
  - Eased transitions for interactive elements

- **Hover:** Color transitions on links and buttons (0.2s).
- **Click:** Immediate visual feedback via state changes.
- **Transition:** 0.2s duration for standard interactive elements.
- **Keyboard:** Standard focusable elements with blue outlines.

## 8. Voice & Don'ts

The editorial voice is confident, precise, and authoritative, matching the system's visual directness. Headlines are large, all-caps statements, and calls to action are stripped of hedging or jargon.

- **Tone:** Confident, precise, and authoritative.
- **Headline style:** Large, all-caps, punchy statements that command attention.
- **CTA style:** Direct and action-oriented (e.g., 'Get in touch').
- **Avoid:** Jargon / Hedging / Playfulness / Excessive adjectives

### Don'ts
- ❌ 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.

The system deliberately avoids decorative serif typography, muted palettes, and playful tone, cementing its identity through disciplined exclusion.

## System Prompt (paste into AI tool)

```
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.
```