What is SoFi's primary brand color and how is it used?

Teal — `#00a2c7`, the brand voltage that fills the `Get Started` CTA at the top of every page (`a#main-nav-cta`, 127px × 40px, 12px corner radius, white text). It is the only color tagged `layer: brand` in the extraction. Frequency on the captured surface is 37 total occurrences — 14 as a fill, 12 as a border, 10 as text, 1 inside a gradient. A deeper companion `#00819d` (frequency 76, layer:structural) carries link text and the nav-link register including the `Sofi homepage` logo anchor — the brand splits the teal into a CTA register and a link register rather than running a single voltage. Body text never carries either teal; that work falls to `#212121` and `#211747`.

What typography does SoFi use, and what should I use if Larsseit isn't available?

SoFi runs two typeface families: Larsseit at the single workhorse weight 800 for every display tier (28-50px) and section heading, and TT Norms at weights 400, 500, 700 for body, nav, inputs, and button labels. Display sizes track tight: the 50px hero at -1.4px, the 36px section opener at -0.5px, the 28px scene heading at -0.784px. Body type uses zero or near-zero tracking. When Larsseit is unavailable, Inter at weight 800 is the closest open-source path; alternatively Gilroy or Greycliff CF render the same blocky-grotesque silhouette. For TT Norms substitutes, Inter at 400/700 or Roobert lands close. Clamp display line-height to roughly 1.2× (60px on 50px, 33.6px on 28px) and keep negative tracking on the heavy weights.

Why does SoFi split its teal into two hex values instead of using one?

The marketing canvas runs two teals — `#00a2c7` (layer:brand) and `#00819d` (layer:structural) — and they do different jobs. `#00a2c7` is the lighter teal reserved for filled CTA pills like `Get Started` (white text on teal, 12px radius). `#00819d` is the deeper teal reserved for link text, the `Sofi homepage` logo anchor, and the nav-link register. The split is deliberate: it keeps the brand voltage from spreading across every link on the page, which would dilute the CTA's pull. Most consumer-fintech brands use a single voltage for both jobs; SoFi reserves the brighter teal for the click and the deeper teal for the read.

What is the two-mode rhythm and how strict is it?

The marketing canvas alternates two structural background colors in full-bleed bands: white `#ffffff` for catalogue rows (product feature grids, FAQ accordions, link lists) and aubergine `#211747` for payday and storytelling bands (dark cards, the hero overlay when a photographic background is in play). The two switch with hard edges — no gradient transitions, no soft overlays. Inside aubergine bands, white `#ffffff` carries text (the `hero-heading` is white-on-dark at 50px / Larsseit 800 / -1.4px); inside white bands, `#212121` carries text and `#00819d` carries links. The deep navy `#211747` is the third structural fill, frequency 337 (148 as text, 23 as background, 166 as border).

Why does SoFi run a 20px / 12px / 4px radius scale instead of an 8px-based grid?

The captured radius scale collapses to four dominant values: 20px (frequency 18, the workhorse card corner), 12px (frequency 8, the CTA pill plus mid-size cards), 4px (frequency 10, inline tags and table chrome), and 15px (frequency 8, an oddly specific mid-step for product mockup cards). A 500px pill and a 100px softer-corner card variant complete the scale. The brand's choice of 15px alongside 12px is unusual — most systems collapse to a single mid-radius. Avoid 16px or 8px corners (they don't appear in the captured stylesheet) and never use a 0px sharp corner on a feature card.

What's missing from this DESIGN.md spec?

A few items, documented in the Known Gaps section: precise hover, pressed, and focus states across button variants are not captured — only the base CTA is documented and the extractor flagged the input component as null on the home surface. The authenticated dashboard surfaces (transactions, accounts, investing, lending) are out of scope; only the public marketing canvas at sofi.com is in this spec. The illustrated yellow `#fbd974` and salmon `#f2817d` highlight tones appear as decoration-only in product mockup tiles and are listed as accents but not assigned to interactive surfaces. Mobile-app screenshot art direction and the regulatory disclosure block are described in prose but not enumerated.

SoFi Design System

SoFi's all-in-one finance design system as a DESIGN.md file.

About SoFi DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source sofi.com

Banking & Payments
Fintech & Crypto

SoFi's marketing canvas is the visual argument for a consumer finance app that bundles banking, borrowing, and investing into one stack. The page opens on a near-white "#ffffff" canvas — the literal `theme-color` meta value — with text in "#212121" (frequency 666) and a deeper aubergine "#211747" (frequency 337) doing the secondary heavy-lift across the payday band and dark feature cards. The single brand voltage, teal "#00a2c7", lands on exactly one place at a time: the `Get Started` CTA in the top nav (`a#main-nav-cta`, 127px wide, 40px tall, 12px radius). A deeper teal "#00819d" handles link text and the logo-anchored nav-link register. Display type is Larsseit at the single workhorse weight 800 — a heavyweight grotesque scaling from 28 to 50px with tight negative tracking (-0.5 to -1.4px). Body type is TT Norms at 14/21 weight 400, with weight 700 reserved for button labels and `h3` headings.

This page packages the SoFi marketing surface into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 19 color tokens grouped into brand-voltage, structural ink, and aubergine-payday roles; 11 typography tokens spanning a 50px Larsseit 800 hero down to a 12px TT Norms caption with the full weight stack (400, 500, 700, 800); 6 radius tokens including the load-bearing 20px card corner, the 12px CTA, and a 500px pill; 9 spacing tokens climbing from a 5px micro to an 80px section band; and 19 component tokens covering buttons, the dark hero card, the rounded product feature card, top nav, FAQ rows, and the disclosure footer. Every hex is quoted; every radius and padding lands as an exact pixel string.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces SoFi's two-mode catalogue rhythm rather than a generic neobank dashboard. Tokens map onto Tailwind config or CSS variables, and components reference each other by name. The system is worth studying for one disciplined choice: where most consumer-fintech brands (Chime, Cash App, Acorns) lean on a single voltage that fills hero CTAs and inline links alike, SoFi splits the teal into two registers — bright "#00a2c7" for click-the-button moments and deeper "#00819d" for click-the-link moments. The split keeps the voltage from carpeting the page.

What makes it distinct

Teal voltage as the click#00a2c7 fills the `Get Started` CTA at 12px radius, while a deeper #00819d carries link text and the nav-link register
Larsseit 800 for displaythe 50px hero ('Save on summer stays') tracks tight at -1.4px, and the 36px and 28px tiers step down at -0.5px and -0.784px
Two-mode rhythmwhite #ffffff catalogue bands slam against an aubergine #211747 payday band with no soft transition
TT Norms 14/21 carries bodythe workhorse text token at weight 400 (98 occurrences), with weight 700 reserved for button and label text
20px and 12px radii dominate20px (frequency 18) lands on the rounded card chrome, 12px (frequency 8) on the CTA pill, with 4px on inline tags

Explore SoFi

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

SoFi design system FAQ

Common questions about SoFi's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

SoFi — official site

The all-in-one finance app marketing canvas — source of every hex, font, and radius in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use SoFi in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→