Checkout.com — design system & UI screens

Fintech · 1 screen · 13 sections · https://www.checkout.com/

Dark hero with oversized type framed by a photo collage and an adidas/IKEA/Klarna logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/checkout-com.

Decoded design system

Checkout.com's decoded design system: background #000000, text #ECECEE, accent #186AFF, link #BBFF00, primary #186AFF; type scale h1 90px / h2 90px / body 12px; 4px spacing base; 10px base radius. The single interactive/action color is #186AFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#0E0E0E`
border	`#232323`
text	`#ECECEE`
text_muted	`#929293`
primary	`#186AFF`
accent	`#186AFF`
link	`#BBFF00`
secondary	`#0C1142`
button_bg	`#186AFF`
button_text	`#FFFFFF`

Using these colors

Action color #186AFF — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #186AFF — one role, not several (the action color).
accent #186AFF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #BBFF00 — inline text links and link-styled controls.
secondary #0C1142 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Inter
Body: Inter
Mono: Checkout Apercu SemiMono
h1: 90px
h2: 90px
body: 12px

Spacing

base unit: 4px
scale: 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 64px

Radii

base: 10px
button: 6px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 300ms (dominant) with ease.

durations: 300ms · 200ms · 250ms
easings: ease · cubic-bezier(0.23, 1, 0.32, 1)
animated properties: color, background-color, opacity, max-height

Native design tokens

Token	Value
`--component-library-checkout-x-flowninja-2026_theme---color--surface--bkg-elevated-1`	`#eeeff1`
`--component-library-checkout-x-flowninja-2026_theme---color--surface--bkg-main-0`	`#fff`
`--component-library-checkout-x-flowninja-2026_button-style---border`	`#186aff`
`--component-library-checkout-x-flowninja-2026_button-style---background`	`#186aff`
`--component-library-checkout-x-flowninja-2026_button-style---text`	`#fff`
`--component-library-checkout-x-flowninja-2026_button-style---border-hover`	`#0055d4`
`--component-library-checkout-x-flowninja-2026_button-style---background-hover`	`#0055d4`
`--component-library-checkout-x-flowninja-2026_button-style---text-hover`	`#fff`
`--component-library-checkout-x-flowninja-2026_colors---color--primary--neutrals--800`	`#363636`
`--component-library-checkout-x-flowninja-2026_colors---color--primary--neutrals--1000`	`#181818`

…and 62 more measured on the page.

Button states (measured)

primary hover: background #1B5DD6
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1328px
nav: 126px sticky
common grid: 12 columns

Motion choreography (measured)

Load order: div.swiper-slide×9 → div.swiper-slide×27 → img.new-announcement-banner- → a.rb-25-brand → a.rb-25-brand → div.swiper-slide×24

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 375px · 400px · 414px · 480px · 677px · 768px
mobile (390px): hero 40px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Where the world checks out