Affirm Design System

Overview

Affirm's marketing surface opens on indigo-black "#101820" with a circular periwinkle "#9cadfc" halo behind the hero paddleboard photography — the brand's signature gesture. The page is a dark canvas where every reading surface is "#ffffff" on near-black, and the chromatic action happens not in button fills but in gradient and shadow uses of the periwinkle glow. The lighter wash "#e2e2ff" carries the indigo tag-pill background; the darkest indigo "#212189" appears as a gradient mid-stop pulling toward black.

The color system has two primary roles. Indigo-black ({colors.canvas} — "#101820") is the universal canvas, the most-used token at 328 occurrences across text, border, and one bg fill. Periwinkle glow ({colors.primary-glow} — "#9cadfc") is the brand's atmospheric depth medium, surfacing in 46 gradient stops and 15 shadow declarations, never as a button fill. The load-bearing CTA voltage indigo "#4a4af4" sits inside --color-primary-base and only appears as the focus-ring outline and on the secondary on-dark CTA — Affirm prefers white-on-black for primary action and lets the glow carry the brand voltage.

Typography is built around Axiforma for Affirm at weight 300 with negative letter-spacing on the largest display tier — the brand's editorial-density display signature. The 80px hero headline runs -3.2px tracking; the 30px heading runs -0.6px; mid-display sizes (48–56px) sit at zero tracking. Body copy hands off to Calibre at 14–20px / weight 400 with normal tracking. Axiforma at weight 500 carries 14–15px caption and label work — bold weights above 500 are absent.

Glow-as-depth: Affirm replaces the conventional drop-shadow stack with a periwinkle glow token "{colors.primary-glow}" applied at low alpha. The radial halo behind the hero, the linear-stroke gradient along card edges, and the carousel ambient lift all come from the same rgba(168, 169, 252, .25) voltage. Where most fintech sites use neutral gray shadows to build a surface ladder, Affirm uses chromatic glow — depth is brand atmosphere, not lift.

Key Characteristics:

• Indigo-black canvas as default — every marketing surface sits on "{colors.canvas}" ("#101820"), the workhorse token at 328 occurrences across the page.
• Periwinkle glow as depth medium — "{colors.primary-glow}" ("#9cadfc") shows up in 46 gradient stops and 15 shadow declarations, kept off button fills.
• Single-voltage CTA hierarchy: white-on-black pill is the primary action; the indigo "#4a4af4" fill is reserved for one secondary on-dark CTA per band.
• Axiforma thin (weight 300) display tier with -3.2px letter-spacing at 80px — the inverse of the heavier defaults most consumer-fintech brands ship.
• 96px full-pill geometry on a 24px workhorse card radius — radii cluster on two values, with 36px reserved for the search capsule.
• Calibre body type at 18px / weight 400 with normal tracking — a wider, humanist register than the Axiforma display work, deliberately less compressed.
• Cream-bordered scene cards "{colors.canvas-elevated}" ("#0c0c14") introduce a slightly darker product-mockup surface above the canvas — the brand's surface ladder runs darker, not lighter.

Colors

Source pages: home (/), /pay-with-affirm, /apple-pay, /buy-now-pay-later.

Brand & Accent

• Indigo Primary ("{colors.primary}" — "#4a4af4"): frequency 0 on the page, but declared in --color-primary-base and --outline: 2px solid #4a4af4. Reserved for focus rings and the on-dark secondary CTA fill — never a body-text color.
• Indigo Dark ("{colors.primary-dark}" — "#2f2fc1"): frequency 0 on the surface, declared in --color-primary-dark. Used as a gradient mid-stop in the hero radial wash.
• Indigo Darkest ("{colors.primary-darkest}" — "#212189"): frequency 0 surface, declared in --color-primary-darkest. Anchors the deepest indigo end of --color-gradient-right-indigo which pairs "#212189" against pure black at the right edge.
• Periwinkle Glow ("{colors.primary-glow}" — "#9cadfc"): frequency 69. Used as gradient (46), shadow (15), border (4), text (4). The brand's atmospheric depth medium — appears in the radial hero halo, the linear-stroke card edge, and as the carousel-pagination active dot.
• Indigo Wash ("{colors.primary-wash}" — "#e2e2ff"): frequency 3, used as bg (3). The pale fill for --background-accent-subtle indigo tag pills.
• Indigo Subtle ("{colors.primary-subtle}" — "#e6e6fc"): frequency 0 surface, declared as --color-primary-lightest. Reserved for the lightest indigo tag-pill background variant.

Canvas & Surface

• Indigo-Black Canvas ("{colors.canvas}" — "#101820"): frequency 328. Used as text (160), border (160), bg (1), gradient (7). The dominant surface — Affirm's universal canvas, declared as --color-greyscale-black-100 and --content-neutral.
• Canvas Elevated ("{colors.canvas-elevated}" — "#0c0c14"): frequency 26. Used as border (13), text (12), shadow (1). The darker product-mockup surface — Affirm's surface ladder runs darker, not lighter.
• Glass Background ("{colors.canvas-glass}" — "#1b1b30"): frequency 1 (gradient). Declared as --glass-background-color at 80 percent alpha — the low-alpha glass-blur fill on overlay scene cards.
• Canvas Light ("{colors.canvas-light}" — "#ffffff"): frequency 285. Used as text (139), border (139), bg (7). The inverted track — text on dark canvas plus the rare light-surface input fill.
• Surface Neutral 1 ("{colors.surface-neutral-1}" — "#f0f5f7"): declared as --color-ui-colors-background-neutral-2. Cool-tinted off-white for the light dashboard product UI.
• Surface Neutral 3 ("{colors.surface-neutral-3}" — "#ede9e6"): declared as --color-ui-colors-background-neutral-3. Warm-tinted off-white used on light product cards.

Ink

• Ink Inverse ("{colors.ink-inverse}" — "#ffffff"): the universal text color on the dark canvas.
• Ink Caption ("{colors.ink-caption}" — "#6d6e71"): frequency 6. Used as text (3), border (3). Caption and helper text on light surfaces.
• Ink Disabled ("{colors.ink-disabled}" — "#9f9f9f"): frequency 26. Used as text (13), border (13). Disabled state and carousel-pagination inactive dot.
• Ink Grade 80 ("{colors.ink-grade-80}" — "#3a3c3d"): declared as --color-ui-colors-text-80. Mid-emphasis text on light surfaces.
• Ink Grade 30 ("{colors.ink-grade-30}" — "#bbbdbe"): declared as --color-greyscale-black-30. Low-emphasis text in the dashboard surface.

Hairline & Semantic

• Hairline Cool ("{colors.hairline-cool}" — "#d3e3ea"): declared as --color-ui-colors-border-neutral-2. 1px hairline borders on form chrome.
• Success ("{colors.success}" — "#2abc7a"): declared as --color-success-base. Approval state in the dashboard product.
• Success Dark ("{colors.success-dark}" — "#0a894c"): the darker success ink.
• Warning ("{colors.warning}" — "#ffca61"): declared as --color-warning-base. Awaiting-approval state.
• Destructive ("{colors.destructive}" — "#ff6d50"): declared as --color-destructive-base. Rejection and error states.

Typography

Font Family

The display and UI tier is Axiforma for Affirm (proprietary, declared in --font-family-display: "Axiforma for Affirm", "Axiforma", "Calibre", sans-serif). Body copy hands off to Calibre (declared in --font-family-body: "Calibre", sans-serif). The monospace voice is Alma Mono (--font-family-monospace: "Alma Mono", Courier, monospace) and surfaces only inside the developer-API documentation, not on the marketing top of funnel.

When Axiforma is unavailable, fall back to Inter Variable at weight 300 with -3.2px tracking on the 80px display tier; Inter's open-source weight 300 carries the closest letter shape to Axiforma's thin register. Avoid Helvetica or Roboto — both are too geometric for Axiforma's slightly humanist silhouette.

Hierarchy

Principles

• Thin weight is the brand. Display tiers always render at weight 300. Bumping to 400+ on display sizes collapses the brand's editorial register.
• Negative tracking only at 80px. -3.2px at 80px and -0.6px at 30px are the only negative-tracked tiers; mid-display sizes (48–56px) stay at zero tracking.
• Two-family contrast. Axiforma carries display and caption; Calibre carries body and paragraph copy. The contrast between Axiforma's slightly humanist display and Calibre's more neutral body register is deliberate.
• No bold above 500. Weights 600/700/800/900 are declared in the variable layer but never render on the marketing surface — the brand stays under 500.

Note on Font Substitutes

Axiforma is proprietary. Use Inter Variable at weight 300 with letter-spacing: -3.2px on the 80px display tier — Inter is the closest open-source analogue. For body sizes, Inter at weight 400 with zero tracking substitutes for Calibre. Avoid Helvetica, Arial, or system-ui defaults — their stems read too geometric and even-width against Axiforma's slightly humanist silhouette.

Layout

Spacing System

• Base unit: 4px (with 1.5 / 2 sub-tokens for fine carousel-dot work).
• Tokens: "{spacing.xxs}" 2px · "{spacing.xs}" 4px · "{spacing.sm}" 8px · "{spacing.md}" 12px · "{spacing.base}" 16px · "{spacing.lg}" 20px · "{spacing.xl}" 24px · "{spacing.xxl}" 30px · "{spacing.huge}" 60px.
• Section padding: 40–240px (declared in --section-spacing-xs through --section-spacing-xxl); the 80px and 120px stops carry most marketing rhythm.
• Card internal padding: 30px on scene cards (declared in spacing stack as 30px 30px 0px); 24px on content tiles; 14px x 23px on pill buttons.

Grid & Container

• Marketing pages center in a 1320px max-content-width container (declared as --max-content-width: 1320px and --grid-base-width: 1440px).
• Hero photography extends edge-to-edge above the dark canvas.
• Carousel sections use a 378px card width on a 442px slide offset.

Whitespace Philosophy

The dark canvas absorbs whitespace differently — Affirm uses generous 80–160px section gaps so the periwinkle glow has room to radiate. Content tightens to 30–40px on the dashboard product surface where users compare and act.

Elevation & Depth

Decorative Depth

The periwinkle glow IS the depth system. The radial halo behind hero photography (--color-2025-radial-gradient: radial-gradient(44.05% 43.36% at 52.67% 56.72%, #9cadfc 0%, #296a7d 54.81%, #13131f 100%)) is the brand's signature lift; the linear-stroke gradient along card hairlines (--LINEAR-STROKE-GRADIENT: linear-gradient(90deg, rgba(74,74,244,.1), #4a4af4 50%, rgba(74,74,244,.1))) carries the same voltage at smaller scale. Literal gray drop-shadows are absent.

Shapes

Border Radius Scale

Photography Geometry

The brand uses outdoor photography more than product screenshots — paddleboarders against dawn water, retail scenes, customer portraits. Photography is treated as full-bleed background inside {rounded.lg} 24px containers with a periwinkle glow halo composited on top. Product UI mockups (the credit card preview, Apple Pay scene) appear as composited cards with a subtle indigo-glow shadow.

Components

Buttons

button-primary-pill — the dominant CTA across the dark canvas.

• Background "{colors.canvas-light}" ("#ffffff"), text "{colors.canvas}" ("#101820"), type "{typography.label-md}", padding 14px 23px, rounded "{rounded.pill}" 96px.
• Hover state button-primary-pill-hover shifts background to "{colors.primary-glow}" ("#9cadfc") — the rare moment indigo glow becomes a fill.

button-on-dark — the indigo secondary on dark surfaces.

• Background "{colors.primary}" ("#4a4af4"), text "{colors.canvas-light}", same pill geometry. The only place the load-bearing indigo "#4a4af4" surfaces as a fill.

button-secondary-ghost — outline-style alternative.

• Background "{colors.canvas}", text "{colors.ink-inverse}", 1px #ffffff stroke border, same pill geometry.

Inputs & Forms

search-capsule — the homepage search bar.

• Background "{colors.canvas-light}", text "{colors.canvas-elevated}", type "{typography.body-md}", padding 20px 104px 20px 54px, rounded "{rounded.capsule}" 36px, height 54px. The lone surface using the intermediate 36px radius.

text-input — standard form field.

• Background "{colors.canvas-light}", text "{colors.canvas-elevated}", type "{typography.body-md}", padding 12px 16px, rounded "{rounded.xs}" 4px, height 48px (declared as --input-height: 48px).

Cards & Containers

card-scene-dark — the dominant product-mockup container.

• Background "{colors.canvas-elevated}" ("#0c0c14"), text "{colors.ink-inverse}", padding 30px 30px 0px, rounded "{rounded.lg}" 24px, optional periwinkle-glow Level 2 shadow.

card-scene-elevated — the glass-blur variant.

• Background "{colors.canvas-glass}" ("#1b1b30") at .8 alpha, text "{colors.ink-inverse}", padding 30px, rounded "{rounded.lg}", --glass-backdrop-blur: blur(clamp(8px, 2vw, 18px)).

card-content-tile — feature explanation card.

• Background "{colors.canvas-elevated}", text "{colors.ink-inverse}", padding 24px, rounded "{rounded.md}" 16px.

Pills, Tags, and Chips

tag-pill-soft — subdued indigo tag.

• Background "{colors.primary-wash}" ("#e2e2ff"), text "{colors.primary-darkest}" ("#212189"), type "{typography.micro}", padding 4px 8px, rounded "{rounded.pill}".

Navigation

top-nav — top nav floating over the dark canvas.

• Background "{colors.canvas}", text "{colors.ink-inverse}", padding 14px 4px, height 64px (declared as --header-height: 64px). Wordmark left, nav center, sign-in right.

Signature Components

Hero Halo — circular periwinkle "{colors.primary-glow}" radial gradient composited behind hero photography. Implemented as the --color-2025-radial-gradient SVG/CSS layer at 44.05% × 43.36% with a #9cadfc → #296a7d → #13131f stop sequence. The brand's most-photographed feature.

Divider Stroke — the brand's linear-stroke gradient hairline --LINEAR-STROKE-GRADIENT: linear-gradient(90deg, rgba(74,74,244,.1), #4a4af4 50%, rgba(74,74,244,.1)). Runs along the bottom edge of feature sections at 1px height; the indigo midpoint is the only on-surface appearance of the load-bearing "#4a4af4".

Carousel Pagination Dot — 10px circular dot at "{colors.primary-glow}" for active state, "{colors.ink-disabled}" at 0.2 opacity for inactive. The active dot is the smallest on-surface appearance of the periwinkle glow.

link-on-dark — inline links on the dark canvas.

• Text "{colors.ink-inverse}" ("#ffffff") rendered in "{typography.body-md}", underlined on hover.

footer-dark — site-wide footer.

• Background "{colors.canvas}", text "{colors.ink-caption}" ("#6d6e71"), type "{typography.body-sm}", padding 60px 24px. Holds 4–6 columns of link groups, social icons, and a small legal row.

Do's and Don'ts

Do

• Reserve "{colors.primary}" ("#4a4af4") for focus rings and the on-dark secondary CTA — it should appear sparingly, not as a primary fill.
• Apply the periwinkle radial halo behind every hero photograph; a flat dark canvas without the halo reads as wrong-brand.
• Render display tiers at weight 300 with -3.2px tracking at 80px — the thin negative-tracked register is the typographic signature.
• Use "{colors.canvas-light}" ("#ffffff") as the primary CTA fill on the dark canvas — white-on-black is the default, indigo is the exception.
• Pair every feature explanation with outdoor photography or a composited product scene; the brand argues through atmosphere, not feature lists.
• Apply the periwinkle glow shadow (rgba(168, 169, 252, 0.25)) instead of gray drop-shadows on every elevated card.

Don't

• Don't bump display weight above 300 — at 400 the brand's editorial air collapses. Use Calibre at weight 400 for body, not Axiforma at 400 for display.
• Don't fill primary CTAs with "{colors.primary}" ("#4a4af4") on the dark canvas — it's a focus-ring and secondary-CTA color, not the dominant button voltage. The dominant pill is "{colors.canvas-light}" white.
• Don't use 16px or 20px corners on a card — neither value appears in the extracted radii. Stick to 24px on cards and 96px on pills, with 36px reserved for the search capsule.
• Don't apply a gray drop-shadow to any elevated surface — Affirm's depth medium is the periwinkle glow, not neutral shadow.
• Don't render body copy in Axiforma — body is Calibre territory. Axiforma above 18px is display only.
• Don't square off pills at 16px or 24px — the brand pill is 96px and reads as approachable consumer-fintech action.

Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons hit ≥ 48×48px on mobile via --input-height-mobile: 48px. The 96px pill radius preserves the approachable consumer-fintech read at any size.
• Form fields stay at 48px minimum height on mobile.

Collapsing Strategy

• Display tiers stair-step 80 → 56 → 48 → 30 → 22px through the breakpoints.
• The hero halo re-centers on mobile but does not disappear — the glow is non-negotiable.
• Scene cards stair-step 3-up → 2-up → 1-up.
• Photography crops shift from full-bleed landscape on desktop to centered portrait on mobile.

Image Behavior

Outdoor photography uses srcset with art-direction crops at major breakpoints. Mobile crops focus tight on the subject; desktop crops show the full atmospheric scene with the periwinkle halo intact.

Known Gaps

• Hero radial gradient precision: treated here as a single composite token (--color-2025-radial-gradient); the multi-layer SVG halo with its blur and noise textures is not fully captured.
• Dashboard product semantic palette: approval / pending / rejected transaction states live inside the authenticated affirm.com checkout widget, not the marketing surface.
• Motion specs: the carousel pagination drift, the search-bar focus transition, and the scene-card hover lift are not captured.
• Sub-brand palettes: Affirm Card, Pay in 4, Adaptive Checkout, and the Apple Pay integration each carry small accent shifts not present on the core marketing surface.
• Loading skeleton tokens: the dashboard skeleton screens are absent from the public marketing capture.
• Code-block / mono usage: Alma Mono is declared in the variable layer but appears only inside the developer-API documentation pages, which are not part of this top-of-funnel spec.