{
  "id": "checkout",
  "title": "Checkout.com",
  "url": "https://www.checkout.com",
  "tags": [
    "fintech",
    "payments"
  ],
  "colors": {
    "principle": "High-contrast dark mode with a single functional blue accent for primary actions.",
    "bg": "#000000",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#FFFFFF",
    "inkSoft": null,
    "muted": "#D9D9D9",
    "mutedSoft": null,
    "accent": "#186AFF",
    "line": "rgba(255,255,255,0.1)"
  },
  "typography": {
    "rules": [],
    "scaleUses": [
      "Hero headline",
      "Section headings",
      "Main body text",
      "Fine print and metadata"
    ],
    "display": "geometric-sans",
    "body": "humanist-sans",
    "mono": "semi-monospaced",
    "scale": [
      {
        "token": "display",
        "size": 101,
        "lh": 1.0,
        "weight": 500,
        "ls": "-1px"
      },
      {
        "token": "h1",
        "size": 56,
        "lh": 1.1,
        "weight": 500,
        "ls": "-0.5px"
      },
      {
        "token": "body",
        "size": 18,
        "lh": 1.44,
        "weight": 400,
        "ls": "0"
      },
      {
        "token": "caption",
        "size": 14,
        "lh": 1.5,
        "weight": 400,
        "ls": "0"
      }
    ]
  },
  "spacing": {
    "rhythm": "8px vertical rhythm for standard text blocks, generous whitespace between major sections.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [],
    "borders": "Minimal, relying on background contrast for separation. 1px borders used only for specific card definitions.",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 16,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Full-bleed dark canvas with centered content and floating image modules.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Hover state color shifts (0.2s)",
      "Eased transitions for interactive elements"
    ],
    "durations": {
      "micro": 200,
      "small": 250,
      "medium": 800
    },
    "easing": "cubic-bezier(0.755, 0.05, 0.855, 0.06)"
  },
  "identity": {
    "keywords": [
      "payments",
      "global",
      "performance",
      "fintech",
      "checkout"
    ],
    "analogy": "A premium financial infrastructure provider that treats every transaction with surgical precision.",
    "oneLiner": "Global payments infrastructure for high-performance businesses."
  },
  "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."
  },
  "interaction": {
    "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."
  },
  "voice": {
    "tone": "Confident, precise, and authoritative.",
    "headlineStyle": "Large, all-caps, punchy statements that command attention.",
    "ctaStyle": "Direct and action-oriented (e.g., 'Get in touch').",
    "avoid": [
      "Jargon",
      "Hedging",
      "Playfulness",
      "Excessive adjectives"
    ]
  },
  "donts": [
    "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."
  ],
  "systemPrompt": "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."
}