SoFi Design System

Overview

SoFi's marketing surface opens on a near-white "#ffffff" canvas — the literal theme-color meta value — carrying "#212121" body text at frequency 666 and a deep aubergine "#211747" (frequency 337) doing the secondary structural work on payday bands and dark feature cards. The single brand voltage, teal "#00a2c7", appears on exactly one place at a time: the Get Started CTA in the top nav (a#main-nav-cta), rendered as a 127px × 40px pill at 12px radius with white text. A deeper teal "#00819d" (frequency 76, layer:structural) carries link text and the nav-link register including the Sofi homepage logo anchor. Display type runs Larsseit at the single workhorse weight 800 — a heavyweight grotesque — scaling from a 28px section opener up to a 50px hero with tight negative tracking. Body type runs TT Norms 14/21 at weight 400, with weight 700 reserved for button labels and h3 headings.

Split voltage as discipline: Where most consumer-fintech brands (Chime, Cash App, Acorns) run a single voltage that fills CTAs and inline links alike, SoFi splits its teal into two registers — bright "#00a2c7" reserved for the click-the-button moments, deeper "#00819d" reserved for the click-the-link moments. The split keeps the voltage from carpeting the page and preserves the CTA's pull. Weight 800 as the only display register: Where Mercury runs Arcadia Display at weight 480 and Stripe runs Sohne at weight 300, SoFi runs Larsseit at a single committed weight 800 across every display tier from 28 to 50px — no medium, no semibold, no italic. The system signals confidence through heavyweight typographic uniformity. Negative tracking on the heavy weights: Larsseit 800 at 50px tracks -1.4px, at 36px tracks -0.5px, at 28px tracks -0.784px — the heavier the weight, the tighter the leading, which is the inverse of the looser-tracked display convention that Mercury and Monzo follow.

Key Characteristics:

• Two-teal split — "#00a2c7" reserved for CTA fills, "#00819d" reserved for link text and nav anchors, never crossed.
• Larsseit 800 as the only display weight — every heading 20-50px renders at the same heavyweight grotesque.
• Negative tracking scales with weight — -1.4px at 50px down to -0.5px at 36px, locked to display sizes only.
• Two-mode rhythm — white "#ffffff" catalogue bands slam against the aubergine "#211747" payday band with no soft transition.
• 12px CTA radius on a 20px card scale — the button pill is tighter than the card it sits inside.
• TT Norms 14/21 as the body workhorse — frequency 98, weight 400, never bolded for body prose.
• One filled CTA per band — the Get Started pill repeats but the cyan voltage never doubles within a single hero.

Colors

Source pages: home (/), top nav with the Get Started CTA, the aubergine payday hero band, the white product feature grid (Banking / Loans / Invest / Credit Card), the logo strip, and the disclosure footer.

Brand & Accent

• Teal ({colors.primary} — "#00a2c7") — frequency 37. Used as text (10), bg (14), border (12), gradient (1). The brand's load-bearing voltage. Reserved for filled CTAs — a#main-nav-cta Get Started at 12px radius, white text, 127px wide. Tagged layer: brand in the extraction, the only color so tagged.
• Teal Deep ({colors.primary-deep} — "#00819d") — frequency 76. Used as text (38), border (38). The link register: Sofi homepage logo anchor, inline nav links, body-prose hyperlinks. Tagged layer: structural because it never fills a button. The two teals are the same family, two stops apart, and the brand keeps them off each other's territory.
• Accent Butter ({colors.accent-butter} — "#fbd974") — frequency 4. Used as text (2), border (2). A pale yellow scoped to illustrated product-mockup highlights and accent dots inside product feature cards. Decoration-only, never on buttons.
• Accent Salmon ({colors.accent-salmon} — "#f2817d") — frequency 2. Used as text (1), border (1). A warm coral-pink scoped to illustration art and seasonal-promotion accents.
• Accent Sky ({colors.accent-sky} — "#6699cc") — frequency 1. A pale blue used in illustrated product mockups only.

Surface

• Canvas Light ({colors.canvas-light} — "#ffffff") — frequency 1082. The marketing default. Used as text (551 — for white-on-dark text inside aubergine bands), bg (24), border (504). Pure white, with a meta theme-color token to match.
• Canvas Mist ({colors.canvas-mist} — "#eae9e9") — frequency 1 (bg). A pale gray scoped to soft pill-tag fills and the rare second-step interlude card on the light track.
• Surface Payday ({colors.surface-payday} — "#211747") — frequency 337. Used as text (148), bg (23), border (166). The aubergine band fill, dark feature card background, and dark-mode text token on inverted-light surfaces.

Text

• Ink ({colors.ink} — "#212121") — frequency 666. Used as text (347), border (319). The workhorse body color, carries every catalogue paragraph and section opener on the light canvas. Off-black, never pure "#000000".
• Ink Mute ({colors.ink-mute} — "#424242") — frequency 42. Used as text (21), border (21). Secondary text — captions, footer columns, table labels.
• Ink Faint ({colors.ink-faint} — "#575757") — frequency 10 (shadow only). A shadow color, scoped to drop shadows on elevated cards and floating panels rather than text. The brand's shadow color isn't gray-on-white — it's a mid-gray scoped to depth specifically.

Hairlines

• Hairline Light ({colors.hairline-light} — "#b9b9b9") — frequency 10 (border). The 1px border on form inputs, FAQ row dividers, and the rare light-track card outline. WordPress preset --wp--preset--color--cyan-bluish-gray.
• Hairline Deep ({colors.hairline-deep} — "#211747") — frequency 166 (border). The aubergine doubles as the 1px border color on payday-card chrome.

Semantic

• Scrim ({colors.scrim} — "#000000") — frequency 22 (17 of which are shadow). Used as shadow color on box-shadows. Pure black is reserved for shadow only — never used as a text or fill color anywhere on the captured surface.

Typography

Font Family

SoFi runs two families: Larsseit for every display tier (28-50px) and the section-heading register at 20px / 700, and TT Norms for body, nav, inputs, button labels, and captions. Larsseit ships as a heavyweight grotesque at the single workhorse weight 800; the brand never drops to 600 or steps up to a 900. TT Norms runs at weights 400 (body), 500 (the nav-link Sofi homepage anchor), and 700 (button labels, h3 headings, strong emphasis).

When Larsseit is unavailable, Inter at weight 800 is the closest open-source path; alternatively Gilroy, Greycliff CF, or General Sans render the same blocky-grotesque silhouette. For TT Norms substitutes, Inter at 400/500/700 lands close, or Roobert if a slightly humanist alternative is preferred. Clamp display line-height to roughly 1.2× (60px on the 50px hero, 33.6px on the 28px scene heading) and keep negative tracking on the heavy weights.

Hierarchy

Principles

• Larsseit 800 across every display tier. No medium-weight display variant exists in the captured stylesheet. The brand commits to one heavy weight for the entire display register.
• Negative tracking scales with size. The 50px hero tracks -1.4px; the 36px section opener tracks -0.5px; the 28px scene heading tracks -0.784px. Drop tracking to zero at 20px and below.
• TT Norms 14/21 carries body. The workhorse body token is 14px / 400 / 21px line-height, never bolded for body prose. Bold weight 700 is reserved for button labels and h3 headings.
• Two families, no overlap. Larsseit never appears at body sizes; TT Norms never appears at display sizes 28px and up.

Note on Font Substitutes

Larsseit is a commercial license (Type Dynamic). Inter at weight 800 with letter-spacing: -1.4px at 50px is the closest open-source analogue. TT Norms (TypeType) substitutes well to Inter at 400/500/700 with zero tracking. Avoid Helvetica or Roboto — both lack Larsseit's slightly squared grotesque silhouette.

Layout

Spacing System

• Base unit: a non-conventional 5px micro (frequency 81), with 12px (frequency 54) doing the mid-range work and 20px (frequency 14) carrying section-internal rhythm.
• Tokens: {spacing.xxs} 5px · {spacing.xs} 8px · {spacing.sm} 9px · {spacing.md} 12px · {spacing.base} 18px · {spacing.lg} 20px · {spacing.xl} 30px · {spacing.2xl} 40px · {spacing.3xl} 80px.
• Section padding: 80px 40px 40px is the dominant section-wrapper shorthand (frequency 13) — generous 80px above, tight 40px sides, 40px below.
• CTA padding: 8px 18px on the Get Started pill, 9px 30px on the wider payday Apply now button.
• Inline pill padding: 6px 8px on small tags (frequency 10).

Grid & Container

• The brand's WordPress-preset spacing scale runs at 0.44rem / 0.67rem / 1rem / 1.5rem / 2.25rem / 3.38rem / 5.06rem, which maps to roughly 7 / 11 / 16 / 24 / 36 / 54 / 81px on a 16px root.
• Section bands run full-bleed; content max-width is held by the 80px 40px horizontal padding shorthand and an implicit inner container.

Whitespace Philosophy

SoFi runs a non-conventional 5px micro spacing as the dominant value (frequency 81) — the brand favors tight inner gaps inside cards and pill chrome rather than the customary 4 or 8px atomic unit. Section padding climbs to 80px vertical, so the rhythm is "tight inside, loose outside" — generous air between bands, compact spacing within them.

Elevation & Depth

Decorative Depth

The captured page declares --wp--preset--shadow--natural: 6px 6px 9px rgba(0,0,0,0.2), --wp--preset--shadow--sharp: 6px 6px 0px rgba(0,0,0,0.2), --wp--preset--shadow--crisp: 6px 6px 0px rgb(0,0,0), and --wp--preset--shadow--deep: 12px 12px 50px rgba(0,0,0,0.4). SoFi prefers the offset-only shadows (sharp and crisp) for the hand-drawn-card feel on illustrated product tiles, and reserves the blur-heavy natural and deep for floating panels above the aubergine band.

Shapes

Border Radius Scale

Geometry Note

The 15px radius is the unusual one. Most systems collapse mid-range corners to a single value (Mercury runs 12px, Monzo runs 24px); SoFi runs 12px and 15px side by side, with 12px on buttons and the smaller cards and 15px on product mockup chrome. Keep the two values segregated when porting the system.

Components

Buttons

button-primary — the system-wide CTA, exactly one filled pill per band.

• Background {colors.primary} ("#00a2c7"), text {colors.on-primary} ("#ffffff"), type {typography.button-md} (16px / 700), padding 8px 18px, height 40px, rounded {rounded.sm} 12px, 1px {colors.primary} border.
• Hover state button-primary-hover shifts background to {colors.primary-deep} ("#00819d") — the deeper teal does double duty as the CTA hover.

button-secondary — outline-style alternative on the white canvas.

• Background {colors.canvas-light} ("#ffffff"), text {colors.ink} ("#212121"), 1px {colors.ink} border, same 12px radius and 40px height.

button-ghost — text-only nav-style action.

• Background transparent on {colors.canvas-light}, text {colors.primary-deep} ("#00819d"), no border. Used for Log in and inline nav anchors.

button-payday — the wider CTA on aubergine bands ("Apply now").

• Background {colors.primary} ("#00a2c7"), white text, padding 9px 30px — the only place the brand widens the CTA horizontally.

Inputs & Forms

text-input — standard form field.

• Background {colors.canvas-light}, text {colors.ink}, 1px {colors.hairline-light} ("#b9b9b9") border, padding 12px, height 44px, rounded {rounded.xs} 4px. The input component was extracted as null on the home surface — these values are inferred from the form-field treatment elsewhere on the marketing surface.

Navigation

top-nav — full-width nav floating above the hero.

• Background {colors.canvas-light} ("#ffffff"), text {colors.ink}, padding 12px 40px, height 72px. The Sofi homepage logo anchor sits on the left at {colors.primary-deep} text color; the primary nav (Banking, Loans, Invest, Credit Card, Insights) sits center; the Log in link and the filled Get Started CTA sit on the right.

nav-link — individual nav cell.

• Background {colors.canvas-light}, text {colors.primary-deep} ("#00819d") at type {typography.body-md} (16px / 500 / 24 line-height), padding 12px, height 24px. The brand uses weight 500 for the logo anchor specifically — between regular and bold.

Cards & Containers

card-feature — product feature card on the white canvas.

• Background {colors.canvas-light}, text {colors.ink}, padding 20px, rounded {rounded.lg} 20px, 1px {colors.hairline-light} border. Contains an illustrated product mockup, a 1-line title at {typography.heading-sm}, and a 2-3 line description at {typography.body-md}.

card-product-mockup — compact product feature card (Banking, Loans, Invest, Credit Card).

• Background {colors.canvas-light}, padding 20px, rounded {rounded.md} 15px. Renders a single product screenshot above the label.

card-payday — dark feature card on the aubergine band.

• Background {colors.aubergine} ("#211747"), text {colors.on-dark} ("#ffffff"), padding 30px, rounded {rounded.lg} 20px. The white-on-aubergine inversion carries the storytelling band.

Hero & Headings

hero-heading — the 50px Larsseit 800 hero h2.

• Type {typography.display-hero} (50px / 800 / -1.4px tracking), color {colors.on-dark} ("#ffffff") on the aubergine overlay. Width capped at 610px in the extracted hero.

section-heading — section opener.

• Type {typography.display-lg} (36px / 800 / -0.5px), color {colors.ink} ("#212121") on the white canvas.

Pills, Tags, and Chips

pill-tag — soft mist tag for category labels.

• Background {colors.canvas-mist} ("#eae9e9"), text {colors.ink}, type {typography.caption-bold}, padding 4px 8px, rounded {rounded.xs} 4px. The brand keeps tags on a neutral fill — the teal voltage never doubles into chip territory.

Signature Components

link-inline — inline link emphasis on the white canvas.

• Text {colors.primary-deep} ("#00819d") rendered in {typography.body-md}, no underline by default; underline on hover. The deeper teal is the link register, never the brighter #00a2c7.

disclosure-footer — the regulatory disclosure footer with FDIC text.

• Background {colors.canvas-light}, text {colors.ink-faint} ("#575757") at type {typography.caption}, padding 80px 40px 40px — the dominant section-wrapper shorthand. Holds product / company / legal columns plus the FDIC and member-disclosure block.

faq-row — single FAQ accordion row.

• Background {colors.canvas-light}, text {colors.ink}, type {typography.label-bold} (16px / 700), padding 20px 0, 1px {colors.hairline-light} border. Click expands a 14px / 400 answer paragraph.

app-download-tile — the dark Download the app tile.

• Background {colors.ink} ("#212121"), white text, type {typography.button-md}, padding 12px 30px, height 48px, rounded {rounded.xl} 100px — the soft-corner large-pill variant. The brand uses 100px specifically here, not 500px.

logo-strip-cell — customer-logo strip cell.

• Background {colors.canvas-light}, padding 20px, no card chrome. Each wordmark sits flat against white at roughly equal optical weight.

Do's and Don'ts

Do

• Reserve {colors.primary} ("#00a2c7") for filled CTAs only — one filled pill per band, never two.
• Reserve {colors.primary-deep} ("#00819d") for link text, nav anchors, and the Sofi homepage logo anchor — never apply it to a button fill.
• Render every display tier at Larsseit weight 800 — the brand commits to the single heavyweight across 28-50px.
• Apply negative tracking that scales with size: -1.4px at 50px, -0.5px at 36px, -0.784px at 28px, zero at 20px and below.
• Use the 12px CTA radius on every primary button — the corner is tighter than the 20px card chrome it sits inside, on purpose.
• Pair white catalogue bands with the aubergine {colors.aubergine} ("#211747") payday band at hard edges — no gradient transitions between the two modes.

Don't

• Don't use "#00a2c7" for link text or inline emphasis — that work belongs to {colors.primary-deep} ("#00819d"). Crossing the two teals dilutes the CTA's pull.
• Don't use "#000000" anywhere as a text or fill color — pure black is reserved for box-shadow declarations only (17 of 22 occurrences). Body text lives at {colors.ink} ("#212121"), off-black, never pure.
• Don't render display copy at weight 700 or 600 — the brand specifically uses Larsseit 800. Dropping to a lighter weight removes the heavyweight typographic tell.
• Don't apply positive letter-spacing to display sizes — every Larsseit display tier tracks negative (-1.4px to -0.5px). Positive tracking reads as Mercury or editorial-serif, not SoFi.
• Don't fill {colors.accent-butter} ("#fbd974") or {colors.accent-salmon} ("#f2817d") on buttons or interactive surfaces — they are decoration-only, scoped to illustrated product-mockup highlights. Frequencies of 4 and 2 respectively confirm the scarcity.
• Don't use a 16px or 8px corner radius on cards — the brand's scale collapses to 4 / 12 / 15 / 20 / 100 / 500, with 20px doing all the mid-range card work and 15px reserved for product mockup chrome specifically.
• Don't apply the WordPress-preset gradient tokens (--wp--preset--gradient--midnight, --wp--preset--gradient--blush-bordeaux, the cool-to-warm spectrum) to marketing surfaces — they ship in the stylesheet because the site is built on WordPress block themes, but the captured surface uses zero of them. The brand prefers flat fills over CSS gradients.

Responsive Behavior

Breakpoints

Touch Targets

• The Get Started CTA at 40px height hits 40 × 127px on desktop; on mobile the pill bumps to 44px to maintain comfortable thumb-targets.
• Form fields stay at 44px minimum height across all breakpoints.

Collapsing Strategy

• Display tiers stair-step 50 → 42 → 36 → 28 → 20px through the breakpoints, with the WordPress font-size presets (--large 36px, --x-large 42px) acting as intermediate landings.
• Product mockup grid stair-steps 4-up → 2-up → 1-up.
• Top-nav inline links collapse into a hamburger drawer at <768px; the Get Started CTA stays visible at the top right.

Known Gaps

• Input state colors: the extractor flagged the input component as null on the captured home surface. The text-input token here is inferred from the form-field treatment elsewhere on the marketing canvas; focus, hover, and error states are not directly documented.
• Authenticated dashboard palette: transaction tables, account balance displays, investing portfolio surfaces, lending dashboards, and credit-card statement UI live inside the authenticated app and are not part of this marketing-system spec.
• Hover, pressed, and focus states: only the base CTA color and an inferred hover (button-primary-hover at the deeper teal) are documented. Card hover lifts, link underline transitions, and FAQ row expand animations are not tokenized.
• Illustration art direction: the yellow #fbd974, salmon #f2817d, and sky #6699cc accents appear inside illustrated product-mockup tiles as raster art rather than CSS-rendered color. They are listed as accent tokens but not assigned to interactive surfaces.
• WordPress preset bloat: the captured :root declares ~50 WordPress block-theme color and gradient presets (--wp--preset--color--vivid-cyan-blue, --wp--preset--gradient--midnight, etc.) at frequency zero on the marketing surface. Those tokens ship in the stylesheet but the brand uses zero of them — the system is built on top of the WordPress block theme, not within it.
• Motion specs: the hero band transition, FAQ row expand, and mobile-app download tile hover use unknown easing curves and durations not captured by the extraction.
• Regulatory disclosure typography: the FDIC and member-disclosure block at the bottom of the footer uses 12px / TT Norms / 400 with weight 700 callouts for "Member FDIC" — the precise hierarchy of italicized regulatory phrases is described in prose but not enumerated as separate tokens.