The visual approach
Affirm's homepage design system opens with a weight split that most fintech products avoid. The hero typographic scale runs at 72px / 300—unusually light for a finance brand—while the display treatment sits at 64px / 700, almost twice the weight at a smaller size. That pairing, set in Favorit, creates a rhythm where restraint alternates with emphasis rather than stacking authority on authority.
The color palette keeps #4E54F2 as the primary, a saturated blue that reads more consumer-tech than traditional finance. The secondary is #FFBB00, a warm yellow-gold that appears in accents and CTAs. Most fintech brands reserve warm tones for error states or avoid them entirely; Affirm runs it as a confidence signal. The dark anchor is #1B2333, a near-black navy that holds structure without the severity of true black.
Buttons use a 24px radius, enough to read as pills rather than rectangles. Cards sit at 12px, softer than the 8px standard but not so round they lose geometric clarity. The spacing system spans 4px to 96px in a conventional scale, nothing novel, but the application shows discipline—large gaps between sections, tight spacing within components.
What works
The type weight contrast does two things well. First, it avoids the trap of heavy-everywhere, which fintech brands often use to project seriousness but which flattens hierarchy and tires the eye. Affirm's 300 hero weight forces the viewer to slow down, which paradoxically reads as confidence—the brand doesn't need to shout. Second, when the 700 display weight arrives, it lands with impact because the page hasn't burned the reader's contrast budget. That alternation sustains attention longer than a monotone heavy treatment.
The #FFBB00 secondary works because Affirm's product is opt-in flexibility, not a bank account or credit card. The warm accent differentiates the brand from the blue-gray sameness of institutional finance. It's not a trust play; it's a "this is a different kind of offer" play. The risk is looking promotional, but the token appears sparingly enough—button states, small iconography—that it registers as optimism rather than sale urgency.
Pill buttons at 24px radius communicate approachability without sacrificing clarity. A 12px radius would read neutral; 24px crosses into friendly. For a product that asks users to split payments, that tonal shift matters. The border-radius choice also pairs well with the light hero type—both signals say "we're not trying to intimidate you into trusting us."
The 16px / 400 body type and 16px / 600 button labels maintain readability without decoration. Favorit's proportions stay legible at that size, and the 600 button weight is just enough differentiation from body copy to mark interactivity. No one will write about the button type, but no one will misread it either, which is the goal.
What a builder can borrow
The weight-pairing principle transfers across typefaces. If your hero or H1 runs light (300 or 400), give your next tier—display, H2, or callout—a bold treatment (600 or 700). The alternation builds contrast without requiring color or size jumps. If you're using a variable font, test a 200-point spread between weights; anything less risks looking like a rendering bug rather than intentional rhythm.
Warm secondaries are underused in finance and SaaS products, where blue-gray dominates. If your product's value is flexibility, ease, or opt-in choice—rather than security or compliance—consider a yellow, orange, or warm red as the secondary. Keep it out of the primary CTA unless your brand skews playful, but use it in hover states, progress indicators, or success confirmation. The token #FFBB00 is high-chroma; if that feels too loud, desaturate by ten percent and test.
Pill buttons work when approachability or consumer focus is part of the brand position. The token 24px is a safe starting radius for standard button heights (40px–48px). Below 20px, pills flatten into soft rectangles; above 28px, they start looking like tags. If your product sells to enterprises or developers, skip pills—they'll read as consumer-grade. If you're selling to end users who associate finance with friction, the softness helps.
Spacing discipline matters more than the scale itself. Affirm's 4px / 8px / 16px / 24px / 32px / 48px / 64px / 96px progression is unremarkable, but the application—large vertical gaps between sections, tight clustering within cards—creates breathing room that reinforces the light type. If you copy the tokens but stack sections without whitespace, the design collapses. Audit your margins; if everything sits on 16px or 24px, you're compressing hierarchy.