Affirm Design System

Affirm's marketing surface opens on indigo-black "#101820" — a near-black warmed with a faint blue undertone that anchors the entire site, never pure "#000000". The hero photography of paddleboarders sits under a circular periwinkle "#9cadfc" halo that announces the brand's signature gesture: a soft indigo glow used as atmosphere rather than fill. The single brand voltage, indigo "#4a4af4", lives inside the CSS variable layer as `--color-primary-base` and surfaces only on focus rings and a small handful of CTA states — the page itself prefers the white-on-near-black hierarchy and lets the glow do the chromatic work. Inverted text "#ffffff" carries every reading surface, with "#9f9f9f" and "#6d6e71" handling the secondary register. Where most buy-now-pay-later brands push retail-cheerful palettes, Affirm pushes the inverse and trusts the periwinkle glow to telegraph approachability.

This page packages the full system into a single DESIGN.md file. Inside: 22 color tokens, 12 typography levels across the proprietary Axiforma for Affirm and Calibre families, 5 corner radii, 9 spacing values, and 18 components — the hero pill nav, the cream-bordered scene cards, the 36px capsule search bar, the carousel pagination dots, and the indigo-glow gradient stops. Every hex is quoted; every Axiforma weight (300, 400, 500) is reproducible. The format is the Google Labs DESIGN.md spec — plain text, machine-readable, grep-friendly.

Feed the file to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Affirm's particular dialect — indigo-black-canvas-first surfaces, the 300-weight display register with negative tracking, 96px pill CTAs, and the periwinkle-glow gradient as the brand's depth medium — instead of a generic fintech dark theme. Inter Variable at weight 300 with -3.2px tracking on the 80px display tier is the closest open-source path; the Axiforma family is proprietary and not licensed for redistribution.