---
name: Checkout.com
description: "The site exemplifies a premium 'dark mode' fintech aesthetic, using extreme typographic scale and high contrast to establish authority and trust."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  tertiary: "#186AFF"
  neutral: "#D9D9D9"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 101px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Global payments infrastructure for high-performance businesses.

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

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#186AFF`)** — uses `accent` token
- **Muted (`#D9D9D9`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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