UI Skillbook
2

Affirm DESIGN.md

Brands

Buy-now-pay-later fintech with deep blue trust, consumer-retail clarity, and installment-friendly messaging. Affirm's public site uses navy and blue accents, white surfaces, rounded cards, and purchase-focused…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#1a5cffBlue design systems
Fonts
CalibreSF Mono

Colors in this file

  • #102a43

    Unnamed

  • #dce5f5

    Unnamed

  • #1a5cff

    Unnamed

  • #ffffff

    Unnamed

  • #f5f8ff

    Unnamed

  • #6b7280

    Unnamed

Buy-now-pay-later fintech with deep blue trust, consumer-retail clarity, and installment-friendly messaging. Affirm's public site uses navy and blue accents, white surfaces, rounded cards, and purchase-focused financial education.

1. Visual Theme & Atmosphere

Overall Aesthetic

Affirm feels like consumer financing made transparent, modern, and approachable.

Mood & Feeling

  • Trustworthy
  • Consumer-friendly
  • Clear
  • Financially modern
  • Purchase-oriented

Design Density

Medium density. Merchant and payment-plan information is structured and easy to scan.

Visual Character

  • Deep blue trust frame
  • White rounded cards
  • Installment and purchase education modules
  • Clean consumer-fintech polish

2. Color Palette & Roles

TokenHexRole
--affirm-blue#1A5CFFPrimary action accent
--affirm-navy#102A43Trust anchor
--affirm-white#FFFFFFMain surface
--affirm-surface#F5F8FFSoft background
--affirm-ink#102A43Text
--affirm-muted#6B7280Secondary text
--affirm-border#DCE5F5Borders

3. Typography Rules

Font Stack

css--font-display: "Calibre", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Calibre", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 54/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#1a5cff; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#102a43; border:1px solid #dce5f5; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #dce5f5; border-radius:20px; box-shadow:0 12px 24px rgba(16,42,67,.06); }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

  • Lead with how-pay-over-time works
  • Keep merchants, terms, and trust cues simple
  • Use blue to reinforce transparency and action

6. Depth & Elevation

Affirm uses light fintech-card elevation with rounded educational and merchant modules.

7. Do's and Don'ts

Do

  • Keep it transparent, consumer-readable, and trust-first
  • Use navy and blue consistently
  • Preserve shopping-and-payment clarity

Don't

  • Don’t make it flashy crypto or startup-finance UI
  • Don’t bury education and terms beneath aggressive promo styling

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Keep payment-plan explanations and CTAs close together
  • Stack merchant and education cards cleanly

9. Agent Prompt Guide

textDesign this like Affirm: deep-blue consumer-finance UI with rounded white cards, clear pay-over-time education, trust-first messaging, and simple mainstream fintech purchase flows.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/affirm.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "affirm" })

Related Design.md files

Brex

Brands · Brex Sans

Intelligent finance for high-speed companies. Brex's current public site pairs deep ink and white surfaces with saturated electric-blue accents, rounded enterprise product cards, AI-forward messaging, and…

Tailscale

Brands · Inter

Secure networking design with calm infrastructure clarity, friendly mesh diagrams, and low-friction admin surfaces.

GitBook

Brands · Inter

Knowledge-layer design with polished documentation surfaces, AI-ready content tools, and warm editorial accents.

Character.AI

Brands · At Hauss

Consumer AI entertainment design with conversational surfaces, creator discovery, and a lively blue-led interaction system.

Algolia

Brands · Inter

AI search and discovery design with deep navy trust, electric blue action, and fast, relevance-first product structure.

Snyk

Brands · Inter

Developer security design with dark product confidence, bright green remediation cues, and clear vulnerability-to-fix workflows.

All Design.md filesBrowse by font