---
version: alpha
name: Affirm
description: Deep navy-to-near-black canvas with a periwinkle-blue brand accent, custom Axiforma at featherlight weight 300 for all display text, and fully-rounded pill CTAs — buy-now-pay-later that reads as sophisticated software, not a lender.

colors:
  # Surface / canvas
  background: "#0c0c14"           # near-black navy, the dominant canvas
  surface: "#13131f"              # slightly lifted dark surface for cards, modals
  surface-light: "#ffffff"        # white sections and product card interior
  surface-mid: "#1a1a2e"          # mid-dark band, feature sections

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas
  ink-secondary: "#9f9f9f"        # muted footnotes, legal, footer links
  ink-dark: "#0c0c14"             # text on white/light surfaces
  ink-mid: "#3a3c3d"              # body copy on white — --color-ui-colors-text-80

  # Brand accent — the signature Affirm periwinkle
  primary: "#a8a9fc"              # periwinkle blue — CTAs, active states, gradient peak
  primary-strong: "#4a4af4"       # saturated indigo — --color-primary-base, deep accent fills
  primary-darkest: "#212189"      # deep navy indigo — --color-primary-darkest
  primary-dark: "#2f2fc1"         # medium indigo — --color-primary-dark
  on-primary: "#ffffff"           # text on dark indigo fills
  on-primary-light: "#0c0c14"     # text on the light periwinkle (#a8a9fc is mid-tone)

  # Semantic
  success: "#2abc7a"              # --color-success-base, positive states
  success-dark: "#0a894c"         # --color-success-dark, Trustpilot-adjacent
  success-light: "#97e8b8"        # --color-success-light, soft confirmation tint
  warning: "#ffca61"              # --color-warning-base
  warning-dark: "#e88c31"         # --color-warning-dark
  error: "#ff6d50"                # --color-destructive-base
  error-dark: "#d34333"           # --color-destructive-dark

  # Neutral greys
  grey-90: "#383838"              # --color-greyscale-grey-90
  grey-60: "#6d6e71"              # --color-greyscale-grey-60
  grey-a11y: "#6b7280"            # --color-ui-grey-a11y, accessible mid-grey
  grey-black-70: "#57595a"        # --color-greyscale-black-70

  # Borders & interactions
  border: "#2a2a40"               # was rgba(168,169,252,0.12) — flattened; subtle periwinkle tint
  border-light: "#0c0c14"         # hairline on white surfaces
  focus-ring: "#a8a9fc"           # periwinkle focus outline — matches primary
  link-hover: "#1883fd"           # extracted from live hover states
  shadow-ambient: "#000000"       # was rgba(0,0,0,0.2) — flattened for shadow reference

typography:
  display-hero:
    fontFamily: "Axiforma for Affirm, Axiforma, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -3.2px
  display:
    fontFamily: "Axiforma for Affirm, Axiforma, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 76px
    fontWeight: 300
    lineHeight: 0.8
    letterSpacing: 0px
  heading-section:
    fontFamily: "Axiforma for Affirm, Axiforma, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 50px
    fontWeight: 300
    lineHeight: 1.17
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Axiforma for Affirm, Axiforma, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-card:
    fontFamily: "Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0px
  nav-link:
    fontFamily: "Axiforma for Affirm, Axiforma, Calibre, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.73
    letterSpacing: 0px
  button-ui:
    fontFamily: "Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.144px
  caption:
    fontFamily: "Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.64
    letterSpacing: 0.144px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 60px
  3xl: 80px

rounded:
  none: 0px
  sm: 4px
  md: 12px
  lg: 24px
  pill: 9999px   # dominant shape: 96px equivalent on large CTAs

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 23px
    border: "none"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: "2px solid {colors.primary-darkest}"
  button-outline-hover:
    backgroundColor: "{colors.primary-darkest}"
    textColor: "{colors.on-primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-light}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: "1px solid {colors.border}"
  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 20px 54px
    border: "1px solid {colors.border-light}"
  input-focus:
    border: "1px solid {colors.ink-dark}"
    boxShadow: "0 0 0 1.5px {colors.primary}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary-light}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-success:
    backgroundColor: "{colors.success-light}"
    textColor: "{colors.success-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 0px
  nav-hover:
    textColor: "{colors.primary}"
---

# Affirm Design System

## Overview

Affirm operates in the deep end of the dark-canvas spectrum. The dominant background is a near-black navy (`{colors.background}`) that reads closer to a premium software product than a traditional financial brand — closer in spirit to a high-end streaming app than a lender. Against this darkness, periwinkle blue (`{colors.primary}`) does double duty: it anchors CTAs, pulses through radial glows and gradient halos, and reappears in the product-card UI visible inside the phone mockup on the hero. The result is an atmosphere of calm, soft-glowing confidence.

The typographic choice is equally deliberate. Axiforma for Affirm at weight 300 is the entire display voice — an ultra-light geometric sans that creates negative space in headlines rather than commanding attention. Where a bank would go bold, Affirm goes light, trusting the color contrast and halo effects to carry visual weight. The body and UI text falls back to Calibre, a squarish humanist sans with strong legibility at small sizes. Together the pairing feels precise without being cold.

The signature design element is the periwinkle radial glow — a recurring `radial-gradient` bloom that centers on `{colors.primary}` and fades to transparent, used behind phone mockups, section transitions, and bento-grid cards. Everything about the system is rounded: large CTAs use fully-rounded `{rounded.pill}` shapes at `96px` radius, cards use `{rounded.lg}` at `24px`, and even the product-card screenshot shows consistent pill inputs. There are no sharp corners at any interactive layer.

**Key Characteristics:**
- Near-black navy canvas (`{colors.background}`) with periwinkle `{colors.primary}` as the single expressive accent
- `{typography.display-hero}` uses weight 300 at 80px — anti-bold confidence in a financial brand
- Fully pill-shaped CTAs (`{rounded.pill}`) are the only button shape in the system
- Signature radial glow effect: `radial-gradient` centered on `{colors.primary}` appears throughout hero, cards, and section transitions
- Dual typeface system: Axiforma for Affirm (display, nav) + Calibre (body, UI labels)
- White surface sections (`{colors.surface-light}`) create high-contrast alternation with the dark canvas
- 8px base spacing scale; generous whitespace at `{spacing.2xl}` / `{spacing.3xl}` between major sections
- Semantic color system with full success/warning/error ramps (dark/light/darkest variants per hue)
- `{colors.link-hover}` applied uniformly across all link types on hover — a consistent periwinkle-to-blue shift
- Pill inputs on white surfaces mirror the pill button language — rounded shapes top to bottom
- Motion is conservative: 0.2s ease for most transitions, 8s shine-border keyframe for subtle shimmer effects
- PrimeReact/PrimeVue component foundations underneath the custom skin

## Colors

### Primary

- **Near-black navy** (`{colors.background}`): The dominant canvas. Absorbs nearly all ambient light, creating the "software at night" atmosphere that separates Affirm from consumer finance brands with white backgrounds.
- **White** (`{colors.surface-light}`): Counter-surface for testimonial bands, product card sections, and the in-app payment UI mockup. High contrast against the dark canvas.
- **Lifted dark** (`{colors.surface}`): Cards, modals, and inner panels that sit one visual layer above the base canvas.

### Brand Accent

- **Periwinkle blue** (`{colors.primary}`): The single expressive accent. Used for CTAs, gradient halos, active states, and the in-app product UI. At mid-tone lightness, it works on both dark and light surfaces, though `{colors.on-primary-light}` (near-black) is preferred for text on it.
- **Saturated indigo** (`{colors.primary-strong}`): The deeper, web-safe complement used in high-saturation fills and hover targets (`--color-primary-base`).
- **Deep indigo** (`{colors.primary-darkest}`): Outline button borders and darkest anchor color (`--color-primary-darkest`).

### Text States

- **White ink** (`{colors.ink}`): All text on the dark canvas.
- **Muted grey** (`{colors.ink-secondary}`): Legal footnotes, footer links — neutral at low visual priority.
- **Near-black text** (`{colors.ink-dark}`): Body copy on white surface sections.
- **Link hover** (`{colors.link-hover}`): Live-extracted hover color for all link types — a bright, saturated blue.

### Semantic

- **Success** (`{colors.success}`) / dark (`{colors.success-dark}`) / light (`{colors.success-light}`): Payment confirmation, Trustpilot-adjacent positive states.
- **Warning** (`{colors.warning}`) / dark (`{colors.warning-dark}`): Alert and notice contexts.
- **Error** (`{colors.error}`) / dark (`{colors.error-dark}`): Destructive actions, validation failures.

### Borders & Shadow

- **Border** (`{colors.border}`): Hairline tint separators on dark surfaces — approximated from the periwinkle inset shadow at 12% opacity.
- **Shadow ambient** (`{colors.shadow-ambient}`): Standard drop shadow base at 0% saturation.

## Typography

### Font Family

- **Display / Nav**: `Axiforma for Affirm` — a custom cut of Axiforma, a geometric-humanist sans. Fallbacks: `Axiforma, Calibre`. Weight 300 is the display default; weight 400-500 for nav and mid-hierarchy.
- **Body / UI**: `Calibre` — a squarish humanist sans with a generous x-height. Fallbacks: `-apple-system, BlinkMacSystemFont, sans-serif`.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero headline, above-fold statement |
| `display` | Large lockup headlines, alternate hero with tight leading (0.8) |
| `heading-section` | Section titles, feature category heads |
| `heading-sub` | Sub-section labels, benefit headers |
| `heading-card` | Card titles in bento grid |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard prose, FAQs |
| `nav-link` | Global navigation items |
| `button-ui` | All CTA and button labels |
| `caption` | Legal, metadata, timestamps |

### Principles

- Weight 300 is the dominant display weight — Affirm deliberately avoids bold weight for authority, preferring spatial scale instead.
- Negative letter-spacing (`-3.2px` at hero size) tightens the display headline into a coherent block; body text runs at zero or near-zero tracking.
- The display/body typeface split is deliberate: Axiforma carries brand personality; Calibre handles legibility at scale.
- Line-height drops below 1.0 (`0.80`) for the alternate display lockup — used only where a photo-mode tight headline is needed.
- Calibre's `0.144px` letter-spacing at caption sizes compensates for its naturally tight optical fit at small renderings.

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Affirm's layout reads as spacious in both directions. At the section level, `{spacing.3xl}` (80px) vertical gaps dominate. Card-internal padding typically lands at `{spacing.lg}` (24px). The generous negative space supports the near-black canvas — compression would collapse the "premium software" atmosphere into something dense and anxious.

### Grid & Container

- Max content width: approximately 1280px with gutter-based centering
- Desktop: alternating full-bleed dark / white section bands with contained inner grids
- Bento grid: asymmetric 2–3 column layouts for feature cards
- Hero: single full-bleed dark section; phone mockup centered or right-offset
- Breakpoints span from 400px to 1601px with 27 distinct values — fine-grained across mobile/tablet/desktop

### Whitespace Philosophy

- Dark canvas breathes — `{spacing.2xl}` and `{spacing.3xl}` vertical rhythm gives content room before the next section
- Card interiors are tighter than section-level spacing, using `{spacing.md}` to `{spacing.lg}`
- Compact horizontal items (nav links, button groups) use `{spacing.md}` gaps — horizontal density contrasts with vertical generosity

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Base dark canvas, section bands |
| Subtle (Level 1) | `rgba(156,173,252,0.1) 0 0 0 1.5px inset` | Card inset ring — periwinkle glow border |
| Card (Level 2) | `rgba(0,0,0,0.2) 0 0 18px 0` | Floating cards on dark surface |
| Elevated (Level 3) | `rgba(22,31,39,0.42) 0 60px 123px -25px, rgba(19,26,32,0.08) 0 35px 75px -35px` | Phone mockup deep lift |
| Dialog (Level 4+) | `rgba(6,8,9,0.32) 0 6px 16px 0` | Dropdowns, modal trays |
| Focus Ring | `1.5px periwinkle inset + outline` | Interactive focus indication |

**Shadow Philosophy**: Affirm's depth system leans on periwinkle-tinted inset rings rather than classic outset box-shadows for cards. The signature inset `rgba(156,173,252,0.1)` glow reappears in gradients and radial halos, making shadows feel luminous rather than heavy. Real drop-shadows appear only for the phone hero mockup (a multi-layer deep lift) and dropdown overlays. The overall effect is that UI elements seem to emit faint light rather than cast shadow.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed section images, horizontal dividers |
| `sm` | 4px | Focus ring helpers, small internal tags |
| `md` | 12px | Image crops inside cards, minor UI elements |
| `lg` | 24px | Cards, bento grid cells, modals |
| `pill` | 9999px | All interactive elements: buttons, inputs, search bar, badges |

Affirm's shape language is functionally binary at the interactive layer: everything you can touch is a pill. Card chrome uses `{rounded.lg}` for a softer but not circular feel. There are no corners in the 4–16px range on any prominent element — the gap between `{rounded.sm}` and `{rounded.lg}` is empty by design.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Periwinkle pill with near-black text; the canonical CTA. `{rounded.pill}` at full radius. Appears white-background version on dark sections ("See plans").
- **`button-secondary`** — White-fill pill with near-black text on light surfaces; inherits same pill radius.
- **`button-outline`** — Transparent fill with `{colors.primary-darkest}` 2px border; used for "Sign up" alongside a solid CTA.
- **`button-outline-hover`** — Fills to `{colors.primary-darkest}` on hover, text flips to `{colors.on-primary}`.

### Cards

Card variants split between `{components.card}` (dark, for content on the dark canvas) and `{components.card-light}` (white, for the product illustration sections). Both use `{rounded.lg}` and `{spacing.lg}` padding. The periwinkle inset ring (`rgba(156,173,252,0.1) inset`) distinguishes dark cards from the canvas.

### Inputs

`{components.input}` uses the same pill radius as buttons — `{rounded.pill}` at 36px — creating visual continuity between form and action. Focus state adds a `{colors.primary}` outer ring. The hero search input extends the pill with 20px/104px asymmetric padding to accommodate an embedded icon and action button.

### Badges / Tags

`{components.badge}` and `{components.badge-success}` follow the pill rule — `{rounded.pill}` with `{spacing.xs}` vertical padding. The APR-option tag visible inside the product mockup uses the success palette.

### Navigation

`{components.nav}` is a transparent dark strip with `{typography.nav-link}` at weight 500. Links transition to `{colors.primary}` on hover. On mobile the navigation collapses behind a hamburger, with a 0.3s ease-out modal animation.

## Do's and Don'ts

### Do

- Use `{colors.primary}` (periwinkle) exclusively for interactive elements, gradient halos, and focus rings — it carries all the brand warmth against the dark canvas
- Apply weight 300 via `{typography.display-hero}` for all large headlines — it is the primary display voice and must not be upweighted
- Use `{rounded.pill}` on every interactive element (buttons, inputs, badges, chips) — shape consistency is the system's strongest pattern
- Keep section backgrounds alternating between `{colors.background}` (dark) and `{colors.surface-light}` (white) for rhythm and contrast
- Apply the periwinkle radial halo behind major imagery (`radial-gradient` from `{colors.primary}` to transparent) to connect sections to the brand accent
- Use `{spacing.3xl}` between major sections — compression breaks the "premium software" atmosphere
- Reference `{colors.success}` / `{colors.warning}` / `{colors.error}` for all state feedback; never invent one-off semantic colors
- Keep CTA button labels in `{typography.button-ui}` at weight 400 — don't bold CTAs; scale and color carry emphasis

### Don't

- Don't add border-radius values in the 4–20px range to interactive elements — the system is pill-or-nothing at the interactive layer
- Don't introduce a third typeface; Axiforma + Calibre is the complete pairing
- Don't use `{colors.primary}` as a large fill area or background surface — it is a point accent only; filling an entire section with periwinkle breaks the dark-canvas atmosphere
- Don't apply heavy drop shadows to cards on the dark canvas — use the periwinkle inset glow instead; outset shadows fight the depth language
- Don't use bold (700+) weight for display text set in Axiforma — weight 300–400 is the entire Affirm display voice
- Don't use the near-black `{colors.ink-dark}` directly on the dark `{colors.background}` — it vanishes; dark surfaces require `{colors.ink}` (white)
- Don't mix the success / warning / error light variants (`{colors.success-light}`, `{colors.warning-light}`, `{colors.error-light}`) with dark canvas sections — they only work on `{colors.surface-light}` (white) backgrounds
- Don't introduce white or light-grey card borders on the dark canvas — the periwinkle inset ring is the dividing surface, not a solid border

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <426px | Single column, nav collapses to hamburger, hero text scales down |
| Mobile | 426–768px | Single column maintained; phone mockup shrinks to 80% width |
| Tablet | 768–1024px | 2-column bento grid; nav links begin appearing |
| Desktop | 1024–1280px | Full bento grid; hero reaches max visual expression |
| Large Desktop | >1280px | Centered container caps; extra margins absorb extra space |

### Touch Targets

All pill CTAs have minimum 44px height by virtue of `14px 24px` padding on `{typography.button-ui}`. The nav icon and hamburger hit zones are padded to 44×44px.

### Collapsing Strategy

- Navigation collapses behind a hamburger modal at <768px with a 0.3s ease-out entry animation
- Hero headline steps from 80px down to approximately 36–44px on mobile
- Bento grids restack to single column; card order prioritizes the most visually impactful first
- White-section alternation is preserved on mobile — the rhythm is content-critical, not a desktop flourish

### Image Behavior

- Phone mockup images use `object-fit: cover` within fixed-ratio containers; at mobile they center-crop
- Bento card images receive `{rounded.md}` on top corners only (`16px 16px 0 0`) to maintain card chrome continuity
- Radial gradient halos scale with their containers via percentage sizing, keeping the glow proportional on all viewports

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}`
- Text (on dark): `{colors.ink}`
- Text (on light): `{colors.ink-dark}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border (dark surface): `{colors.border}`
- CTA: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build a hero section with background `{colors.background}`, a centered `{typography.display-hero}` headline in `{colors.ink}` at weight 300, a sub-line in `{typography.body-large}`, and a white pill CTA (`{rounded.pill}`, background `{colors.surface-light}`, text `{colors.ink-dark}`, padding 14px 24px). Add a radial gradient glow behind the hero image using `{colors.primary}` fading to transparent."
- "Create a bento card with background `{colors.surface}`, `{rounded.lg}` radius, `{spacing.lg}` padding, and an inset border of `rgba(168,169,252,0.1) 0 0 0 1.5px`. Title in `{typography.heading-card}` (`{colors.ink}`), body in `{typography.body}` (`{colors.ink-secondary}`)."
- "Build a pill button: background `{colors.primary}`, text `{colors.on-primary-light}`, font `{typography.button-ui}`, border-radius `{rounded.pill}`, padding 14px 24px. Hover: background `{colors.primary-dark}`, text `{colors.on-primary}`."
- "Create a navigation bar with `{colors.background}` background, logo left, links in `{typography.nav-link}` (`{colors.ink}`), a pill Sign Up button (`{components.button-outline}`), and a pill CTA (`{components.button-primary}`). Links transition to `{colors.primary}` on hover."
- "Design a payment-plan badge: background `{colors.success-light}`, text `{colors.success-dark}`, `{typography.caption}` at weight 700, `{rounded.pill}` radius, padding 4px 12px. Pair with a 0% APR label in the same pill style."
- "Build an input field with white background (`{colors.surface-light}`), `{rounded.pill}` radius, 20px top/bottom / 54px left / 104px right padding, `1px solid {colors.border-light}` border. Focus: add `0 0 0 1.5px {colors.primary}` box-shadow and `1px solid {colors.ink-dark}` border."

### Iteration Guide

1. Start with `{colors.background}` as the page canvas — the dark navy is non-negotiable for brand coherence.
2. Apply `{colors.primary}` only as point accents: CTA fills, radial halo gradients, focus rings, and active nav states.
3. Set all display text in `{typography.display-hero}` at weight 300 — resist the urge to increase weight for emphasis; use scale instead.
4. Use only `{rounded.pill}` at the interactive layer (buttons, inputs, badges) and `{rounded.lg}` for cards; leave the 4–20px radius range unused.
5. Add depth via the periwinkle inset ring (`rgba(168,169,252,0.1) inset`) rather than outset box-shadows on dark-canvas cards.
6. Alternate dark (`{colors.background}`) and white (`{colors.surface-light}`) sections for rhythm — aim for 2–3 alternations on a typical marketing page.
7. For the signature halo effect: `radial-gradient(rgba(168,169,252,0) 0%, rgba(168,169,252,0) 30%, rgba(168,169,252,0.8) 65%, rgba(168,169,252,0) 100%)` behind key imagery.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Affirm. Brand names and trademarks belong to their respective owners.