Stack \- Platform: Webflow (hosted on cdn.prod.website-files.com) \- CSS framework: Webflow-generated custom CSS (checkout-v5-2024.webflow.\*.min.css) \- No utility framework (no Tailwind/Bootstrap classes observed) \- JavaScript: Minimal; Webflow interactions + Google Tag Manager

Typography \- Primary font: Custom/brand sans-serif (likely "Neue Haas Grotesk" or similar geometric grotesque based on visual identity) \- Secondary: System fallback sans-serif stack \- Headings: Large, bold, uppercase accents on hero sections (e.g. "ACCEPT PAYMENTS. ACCESS SCALE.") \- Scale: Dramatic size contrast between H1 (60–96px) and body (16–18px) \- Letter-spacing: Wide tracking on uppercase labels and section tags \- Line-height: Tight on headings (~1.1), relaxed on body (~1.6)

Color Philosophy \- Dark navy primary: #00122C — deep trust-conveying financial brand color \- White: #FFFFFF — dominant background on light sections \- Black: #000000 — used for footer backgrounds and logo lockup \- Accent blue: Bright electric blue (~#0070FF or similar) for CTAs and highlights \- Neutral grey: Used for secondary text and borders \- Palette signals authority, performance, fintech trust

Spacing \- Generous section padding: 80–160px vertical \- Component gaps: 24–48px \- Grid gutters: 24–32px \- Max content width: ~1280px centered

Component Defaults \- Buttons: Pill/rounded with solid fill (primary) or outlined (secondary); uppercase or title-case labels \- Cards: White on dark or dark on white; subtle borders or shadows; rounded corners (~8–12px) \- Navigation: Full-width mega-menu with categorized columns; sticky on scroll \- Hero: Full-viewport height, dark navy background, bold headline, dual CTA buttons \- Icons: SVG line icons from Webflow assets, consistent stroke weight

Layout \- 12-column CSS grid \- Alternating light/dark sections throughout marketing pages \- Image-right / text-left alternating content blocks \- No sidebar layouts — full-width sections only \- Footer: multi-column link grid on dark background

:root { / ── Brand Colors ── / --color-navy: #00122C; / primary brand / dark bg / --color-black: #000000; / footer bg / logo on light / --color-white: #FFFFFF; / page background / --color-blue-accent: #0066FF; / CTA buttons, links, highlights / --color-blue-light: #E8F0FF; / tinted section backgrounds / --color-grey-100: #F5F5F5; / light section fills / --color-grey-200: #E8E8E8; / dividers, borders / --color-grey-500: #6B7280; / secondary body text / --color-grey-700: #374151; / primary body text on light bg / --color-text-on-dark: #FFFFFF; / text on navy/black backgrounds / --color-text-primary: #00122C; / default heading color / --color-text-muted: #6B7280; / captions, meta, secondary labels /

/ ── Typography ── / --font-family-primary: 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-md: 18px; --font-size-lg: 24px; --font-size-xl: 32px; --font-size-2xl: 48px; --font-size-3xl: 64px; --font-size-hero: 80px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --letter-spacing-wide: 0.08em; --letter-spacing-wider: 0.12em;

/ ── Spacing ── / --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px;

/ ── Border Radius ── / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --radius-full: 50%;

/ ── Shadows ── / --shadow-sm: 0 1px 3px rgba(0, 18, 44, 0.08); --shadow-md: 0 4px 12px rgba(0, 18, 44, 0.12); --shadow-lg: 0 8px 32px rgba(0, 18, 44, 0.16); --shadow-xl: 0 16px 48px rgba(0, 18, 44, 0.20);

/ ── Layout ── / --container-max-width: 1280px; --container-padding: 32px; --grid-columns: 12; --grid-gap: 24px;

/ ── Transitions ── / --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; }

/ Dark sections (navy background) / [data-theme="dark"], .section--dark, .hero, .footer { --color-text-primary: #FFFFFF; --color-text-muted: rgba(255, 255, 255, 0.6); --color-bg: #00122C; --color-border: rgba(255, 255, 255, 0.12); --color-blue-accent: #4D9FFF; }

Color Tokens

Token	Value	Usage
--color-navy	#00122C	Primary brand, hero bg, nav bg
--color-black	#000000	Footer background, logo lockup
--color-white	#FFFFFF	Page background, text on dark
--color-blue-accent	#0066FF	CTAs, links, active states
--color-blue-light	#E8F0FF	Tinted section backgrounds
--color-grey-100	#F5F5F5	Alternate section fills
--color-grey-200	#E8E8E8	Borders, dividers
--color-grey-500	#6B7280	Secondary text, captions
--color-grey-700	#374151	Body text on light bg

Spacing Tokens

Token	Value	Usage
--space-2	8px	Icon gap, tight padding
--space-4	16px	Component inner padding
--space-6	24px	Card padding, grid gap
--space-8	32px	Section sub-gap
--space-12	48px	Content block gap
--space-20	80px	Section vertical padding (min)
--space-40	160px	Hero section padding

Typography Tokens

Token	Value	Usage
--font-family-primary	'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif	All UI text
--font-size-base	16px	Body text
--font-size-md	18px	Lead paragraphs
--font-size-lg	24px	Subheadings, card titles
--font-size-xl	32px	H3 headings
--font-size-2xl	48px	H2 headings
--font-size-3xl	64px	H1 headings
--font-size-hero	80px	Hero headline
--font-weight-bold	700	Headings
--font-weight-black	900	Hero text, impactful labels
--line-height-tight	1.1	Headlines
--line-height-normal	1.6	Body copy
--letter-spacing-wide	0.08em	Uppercase section labels

Border Radius Tokens

Token	Value	Usage
--radius-sm	4px	Tags, badges, small elements
--radius-md	8px	Input fields, small cards
--radius-lg	12px	Cards, panels
--radius-xl	16px	Large cards, modals
--radius-pill	999px	Buttons (primary pill shape)
--radius-full	50%	Avatar/icon circles

Shadow Tokens

Token	Value	Usage
--shadow-sm	0 1px 3px rgba(0,18,44,0.08)	Subtle lift, inputs
--shadow-md	0 4px 12px rgba(0,18,44,0.12)	Cards, dropdowns
--shadow-lg	0 8px 32px rgba(0,18,44,0.16)	Modals, popovers
--shadow-xl	0 16px 48px rgba(0,18,44,0.20)	Floating panels

Framework: Webflow — marketing site built with Webflow CMS and hosted on Webflow CDN (cdn.prod.website-files.com). CSS class naming follows Webflow conventions (BEM-lite, component-prefixed). No utility CSS framework detected.

Theme Support: No native dark/light toggle. Dark mode is implemented via hardcoded dark-background sections (navy #00122C) alternating with white sections — not a system-level prefers-color-scheme implementation. Brand tile color #00122C confirmed via meta-msapplication-TileColor.

Data Confidence: Medium-high. Core brand colors (#00122C navy, white/black) confirmed via meta tags and observed visual identity. Typography inferred from visual brand identity (geometric grotesque, likely Neue Haas Grotesk — Checkout.com's known brand font). Spacing and radius are estimated from visual inspection of layout patterns. No raw CSS variables were accessible (Webflow minified CSS returned empty from CDN).

Notable Patterns: \- Alternating dark navy / white sections create strong visual rhythm across all marketing pages \- Hero sections always use full-viewport dark navy with large white bold typography \- CTA buttons consistently use pill shape (border-radius: 999px) — primary filled blue, secondary outlined \- Uppercase section labels with wide letter-spacing used as eyebrow text above headings \- Mega-menu navigation with categorized product columns (Connect / Move / Protect / Boost / Manage) \- SVG illustrations and icons throughout — no raster icon library \- Strong typographic hierarchy with dramatic scale jumps (body 16px → hero 80px+) \- Performance/athlete metaphor drives design language: bold, direct, confident