A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
22tokens
11type steps
1radius steps
12pxspacing base
Sofi, in one page
SoFi's iOS app is a premium one-stop financial command center — banking, investing, borrowing, and rewards under a single membership. The visual language signals "modern, ambitious, all-in-one wealth platform" rather than a single-purpose budgeting app, so the design leans confident and dark-native: an electric SoFi Blue (#00A0DF) sitting on a deep navy (#0A0E27) ground. This blue-on-navy pairing is so core to SoFi's marketing that the app reads like it was *designed for dark mode first* — the navy is the canonical brand canvas in both themes, and electric blue is the energy that cuts through it.
The signature screen is the member home dashboard. It opens with a full-bleed member hero — a #00A0DF → #1B53C4 → #0A0E27 diagonal gradient panel carrying a friendly greeting, the member's net worth rendered huge in white (40pt 800), and a green pill showing the month's change ("+$1,840.22 this month"). Below the gradient sits the account/product tile grid: a 2-column set of rounded cards — Checking & Savings (with APY), Invest (with today's %), Loans (with the next payment due), Credit Card (with cash-back) — each a small blue-soft icon chip, a label, a big value, and a colored sub-stat. Below that, a "Recent activity" relay list. The dashboard's job is to make a multi-product financial life feel unified and in-control on one screen — that consolidated net-worth-plus-tiles view is the heart of SoFi.
The other SoFi-defining moment is the product tile / cross-sell card — SoFi's whole business is one member using many products, so the home and the Invest/Borrow tabs surface rounded cards ("Active Invest — Stocks, ETFs & crypto", "Loan in minutes — check your rate, no credit impact") with a blue-soft icon, a title, and a one-line value prop. The second fixture is the performance treatment: gains in green (#2FD08A), losses in coral (#FF6B6B), rewards in gold (#F2C14E) — applied consistently to investment %s, account deltas, and the rewards points loop.
Typography is a clean, confident geometric sans — production SoFi uses a brand-tuned face; Manrope is the faithful free stand-in (semibold-forward, modern, tight tracking at display sizes). Hierarchy is wealth-dashboard: the net-worth hero is huge (40pt 800), screen titles 32pt, section headers 22pt, tile values 18-19pt, body 16pt, row titles 15pt, meta 14pt, captions 12pt. Numbers are always 700-800 — net worth, balances, and percentages are the data the member came for. The tone is bold, confident, dark, and consolidated.
Key Characteristics:
- Dark-native brand — electric SoFi Blue (
#00A0DF) on deep navy (#0A0E27); navy is the canonical canvas in both themes - The member hero is a
#00A0DF → #1B53C4 → #0A0E27gradient panel with net worth in white + a green month-change pill - Account/product tile grid — 2-column rounded cards (Banking, Invest, Loans, Card) each with an icon chip, value, and colored sub-stat
- Cross-sell product cards — "one member, many products" is the business; rounded cards with a blue-soft icon + value prop
- Performance colors: gains green (
#2FD08A), losses coral (#FF6B6B), rewards gold (#F2C14E) - Blue brightens to
#29C2FFfor accents, links, and active tabs so it pops on navy - Fully pill-shaped buttons (500pt radius) — premium fintech, not boxy
- Heavily rounded tiles (18pt) on lifted navy surfaces (
#121736/#1B2147) - Manrope typography — confident geometric sans; numbers always 700-800
- Bottom tab bar: Home, Invest, Banking, Borrow, Me — active in bright blue
Do's and don'ts
Do
- Treat SoFi as dark-native — electric blue
#00A0DFon deep navy#0A0E27; navy is the canonical canvas - Open the member home with the
#00A0DF → #1B53C4 → #0A0E27gradient hero carrying net worth in white - Show the consolidated 2-column account/product tile grid below the hero
- Brighten blue to
#29C2FFfor accents, links, and active tabs so it pops on navy - Color performance: gains green
#2FD08A, losses coral#FF6B6B, rewards gold#F2C14E - Use the green/coral month-change pill on the hero — it's a signature
- Make every button a full pill (500pt radius) — premium, never boxy
- Surface cross-sell product cards ("one member, many products" is the business)
- Set net worth, balances, and percentages in heavy tabular figures (700-800)
- Lift tiles off navy with a 1pt
#252C55border + soft dark shadow
Don't
- Don't use a neutral or light gray ground — the brand is navy
#0A0E27even where light mode lifts surfaces - Don't render the member hero as a flat solid — the blue→navy gradient is the signature
- Don't use boxy/sharp buttons — SoFi buttons are fully pill-shaped
- Don't make blue dull on navy — accents brighten to
#29C2FF - Don't make performance neutral — gains/losses are green/coral; that's the point of a wealth app
- Don't bury net worth — it's the loudest element, 40pt 800 white on the gradient
- Don't render amounts in proportional figures — use tabular so columns align
- Don't hide cross-sell — multi-product membership is SoFi's core model
- Don't use a Material tint pill on tabs — active is just bright-blue color + filled icon
- Don't drop the rewards-gold accent — the points/cash-back loop is a brand pillar
- Don't animate harshly — motion is smooth ease-outs and snaps, haptics measured
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Sofi design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- SoFi Blue: #00a0df
- navy: #0a0e27
- Blue Bright: #29c2ff
- Blue Pressed: #0086bc
- Blue Soft Fill: #e6f4fb
- Navy Canvas: #0a0e27
- Surface 1: #121736
- Surface 2: #1b2147
- Divider: #252c55
- Light Canvas: #f4f7fb
Type:
- families: Manrope, Fallback Stack, Numeric, Monospace
- scale: 10, 12, 13, 14, 15, 16, 18, 19, 22
- weights: 400, 600, 700, 800
Shape:
- radius: 14
- elevation: Lift tiles off navy with a 1pt `#252C55` border + soft dark shadow
Spacing: 12, 14
Rules:
- Treat SoFi as dark-native — electric blue `#00A0DF` on deep navy `#0A0E27`; navy is the canonical canvas
- Open the member home with the `#00A0DF → #1B53C4 → #0A0E27` gradient hero carrying net worth in white
- Show the consolidated 2-column account/product tile grid below the hero
- Brighten blue to `#29C2FF` for accents, links, and active tabs so it pops on navy
- Color performance: gains green `#2FD08A`, losses coral `#FF6B6B`, rewards gold `#F2C14E`
- Use the green/coral month-change pill on the hero — it's a signature
Avoid:
- Don't use a neutral or light gray ground — the brand is navy `#0A0E27` even where light mode lifts surfaces
- Don't render the member hero as a flat solid — the blue→navy gradient is the signature
- Don't use boxy/sharp buttons — SoFi buttons are fully pill-shaped
- Don't make blue dull on navy — accents brighten to `#29C2FF`
- Don't make performance neutral — gains/losses are green/coral; that's the point of a wealth app
- Don't bury net worth — it's the loudest element, 40pt 800 white on the gradient
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- SoFi Blue (
#00A0DF): Primary brand + interactive color — member-hero gradient base, primary pill buttons, logomark. - Blue Bright (
#29C2FF): Brighter blue for accents, links, "See all", active tabs, icon glyphs on navy. - Blue Pressed (
#0086BC): Pressed state on blue buttons. - Blue Soft Fill (
#E6F4FBlight /#0E2A44dark): Tinted backgrounds for soft buttons, tile icon chips.
Canvas & Surfaces (Dark-Native — canonical)
- Navy Canvas (
#0A0E27): The canonical brand canvas — deep navy, used in dark mode and as the marketing ground. - Surface 1 (
#121736): Cards, tiles, list containers on navy. - Surface 2 (
#1B2147): Elevated cards, sheets, pressed rows. - Divider (
#252C55): Hairline between rows and tile borders.
Canvas & Surfaces (Light Mode)
- Light Canvas (
#F4F7FB): The light-mode ground — a cool off-white (the brand identity still stays navy + blue). - Light Surface 1 (
#FFFFFF): Cards, tiles in light mode. - Light Surface 2 (
#EEF2F8): Pressed rows, secondary fills. - Light Divider (
#E2E7F0): Hairline dividers in light mode.
Text (on navy / dark-native)
- Text Primary (
#E8EBF7): Primary body, tile values, row titles. - Text Secondary (
#9BA3C7): Metadata, labels, captions. - Text Tertiary (
#6B7299): Disabled, low emphasis. - On-Gradient White (
#FFFFFF): All text over the member hero gradient. - On-Blue Ink (
#042235): Near-black blue ink on solid#00A0DFbuttons for contrast.
Text (Light Mode)
- Text Primary Light (
#0C1330): Primary body in light mode. - Text Secondary Light (
#5A6286): Metadata in light mode.
Semantic
| Role | Dark-Native | Light Mode | Use |
|---|---|---|---|
| Positive / Gain | #2FD08A | #0FA968 | Investment gains, "+$" deltas, "+%", APY uplift |
| Negative / Loss | #FF6B6B | #E0484D | Investment losses, "-%", payment-due warnings |
| Rewards Gold | #F2C14E | #C8920F | Rewards points, cash-back, member perks |
| Info / Link | #29C2FF | #0086BC | Links, "See all", informational accents |
| Success | #2FD08A | #0FA968 | Transfer/success confirmation |
| Attention | #FF6B6B | #E0484D | Errors, due dates, alerts |
Performance is color-coded, not neutral. Unlike a pure spending app, SoFi *does* color money movement — investment and net-worth changes use green/coral because performance is the point. The green month-change pill on the hero is a signature.
Type scaleRead the full spec
Font Family
- Primary: A confident geometric sans. Production SoFi uses a brand-tuned face;
Manrope(by Mikhail Sharanda / Mirko Velimirovic, SIL OFL) is the faithful free stand-in — semibold-forward, modern, tight at display sizes, excellent number legibility. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numeric: Use tabular/lining figures for net worth, balances, and amounts (
font-variant-numeric: tabular-nums). - Monospace: not used in product UI.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Net Worth Hero | Manrope | 40pt | 800 | 1.05 | -1.2pt | The net-worth figure on the member gradient |
| Screen Title | Manrope | 32pt | 800 | 1.15 | -0.6pt | Large nav title ("Invest", "Borrow") |
| Section Header | Manrope | 22pt | 700 | 1.2 | -0.3pt | "Recent activity", "Your accounts" |
| Tile Value | Manrope | 18pt | 700 | 1.25 | -0.4pt | Account/product tile balance (19pt on large devices) |
| Card Title | Manrope | 16pt | 700 | 1.3 | -0.1pt | Cross-sell card title |
| Body | Manrope | 16pt | 400 | 1.5 | 0pt | Descriptions, value props |
| Row Title | Manrope | 15pt | 700 | 1.3 | 0pt | Activity row name |
| Amount | Manrope | 15pt | 800 | 1.2 | 0pt | Activity amount (tabular) |
| Meta | Manrope | 14pt | 400 | 1.4 | 0pt | "Today · Auto-invest" |
| Caption / Sub-stat | Manrope | 12pt | 600 | 1.4 | 0.1pt | "3.80% APY", "+2.4% today", chip text |
| Button | Manrope | 16pt | 700 | 1.0 | 0pt | Primary / secondary pill buttons |
| Tab Label | Manrope | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Chip | Manrope | 12pt | 700 | 1.0 | 0.1pt | Status chip text |
| Link | Manrope | 13pt | 700 | 1.3 | 0pt | "See all", inline links |
Principles
- Net worth is the loudest thing: 40pt 800 in white on the gradient, tracking -1.2pt — the consolidated number is the headline.
- Numbers are always 700-800: net worth, tile values, balances, percentages — all heavy and tabular so the wealth picture is instantly scannable and aligned.
- Confident weights: 400 body, 600 captions, 700 row titles/headers/buttons, 800 hero/screen titles. Semibold-forward — modern and assured, never thin.
- Consolidated hierarchy: the eye goes net worth → account tiles → activity; the multi-product life is organized, not chaotic.
- Dynamic Type first-class: hero, titles, headers, body, row titles, meta scale; tab labels and chip text stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button ("Transfer money", "Invest now", "Continue")
- Shape: Full pill, 500pt corner radius (SoFi is pill-shaped, not boxy)
- Background:
#00A0DF(SoFi Blue) - Text:
#042235(near-black blue ink), Manrope 16pt weight 700 - Padding: 14pt vertical, 28pt horizontal; min height 52pt
- Pressed: background
#0086BC+ scale 0.98 - Disabled: background
#00A0DF35% / text#04223550%
Secondary / Outline Button ("Invest now", "Learn more")
- Background: transparent
- Text:
#29C2FF(Blue Bright), Manrope 15pt weight 700 - Border: 1.5pt
#00A0DF - Shape: full pill, 500pt radius
- Padding: 12pt vertical, 24pt horizontal
- Pressed: background
#0E2A44(Blue Soft)
Soft Button ("Add account", quick actions)
- Background:
#E6F4FBlight /#0E2A44dark (Blue Soft Fill) - Text:
#0086BClight /#29C2FFdark, Manrope 14pt weight 700 - Shape: full pill, 500pt radius; no border
- Padding: 12pt vertical, 20pt horizontal
Text Button ("See all activity")
- Font: Manrope 13-14pt weight 700
- Color:
#29C2FF(dark) /#0086BC(light) - No background, no border, no underline
Member Hero (the signature surface)
- Container: full-bleed, extends into the top safe area; rounded only at the bottom is optional (often full-bleed top, content padded)
- Background: linear gradient
#00A0DF → #1B53C4 → #0A0E27(≈165°) — blends into the navy canvas at the bottom - Top row: greeting ("Good morning, Alex") Manrope 18pt 700 white + notification/profile icons (22pt white)
- Net-worth label: "Net worth" Manrope 13pt 600
rgba(255,255,255,0.75) - Net-worth value: Manrope 40pt 800 white, tracking -1.2pt, tabular
- Change pill: "+$1,840.22 this month" Manrope 13pt 700, green
#6EF0B6onrgba(47,208,138,0.18), 500pt pill, with an up-arrow glyph
Account / Product Tile (core atom)
- Layout: 2-column grid, 12pt gap, each tile 18pt corner radius
- Container: Surface 1, 1pt divider border
- Icon chip: 36pt rounded (11pt)
#0E2A44/#E6F4FBwith an 18pt#29C2FF/#0086BCstroked glyph - Label: Manrope 12pt 600
#9BA3C7 - Value: Manrope 18-19pt 800
#E8EBF7, tracking -0.4pt, tabular - Sub-stat: Manrope 11-12pt 600 — green (
#2FD08Again/APY), coral (#FF6B6Bdue/loss), or gold (#F2C14Erewards) - Tappable → product detail screen
Cross-Sell Product Card (distinctive component)
- Container: Surface 2, 1pt divider, 18pt radius, 16pt padding
- Icon chip: 36pt rounded (11pt)
#0E2A44with an 18pt#29C2FFglyph - Title: Manrope 14-16pt 700
#E8EBF7 - Value prop: Manrope 12pt 400
#9BA3C7, 1-2 lines ("Stocks, ETFs & crypto, no commissions") - Often in a horizontal carousel of products on the home / Invest / Borrow tabs
Activity (Relay) Row
- Layout: 40pt rounded (13pt) icon tile + name/meta column + right-aligned amount
- Icon tile: gradient or blue-soft, glyph tinted by product (blue for invest/banking, gold for rewards)
- Name: Manrope 15pt 700
#E8EBF7 - Meta: Manrope 14pt 400
#9BA3C7— "Today · Auto-invest" - Amount: Manrope 15pt 800, tabular; positive green (
#2FD08A, "+$2,140.55"), negative neutral ink (#E8EBF7, "-$250.00") — investment buys are neutral, gains/income are green - Separator: 1pt
#252C55divider; no card border
Navigation
Bottom Tab Bar
- Height: 49pt + safe area
- Background: Navy / blurred, 0.5pt top divider
#252C55 - Tabs (5): Home, Invest, Banking, Borrow, Me
- Icon size: 22pt; active
#29C2FF(icon fills solid); inactive#6B7299 - Labels: Manrope 10pt weight 600, always shown
- No tint pill — just bright-blue color + filled icon swap
Top of Member Home
- The gradient hero *is* the top — no separate nav bar; greeting + icons live inside the gradient
Top Nav (sub-screens)
- Height: 44pt + safe area
- Leading back chevron (white on gradient screens, primary text elsewhere)
- Centered compact title; optional trailing action
Input Fields
Amount Entry (Transfer / Invest)
- Large centered amount, Manrope 40pt 800, blue cursor; "$" prefix
#9BA3C7 - Funding-source row below (account + balance)
- Numeric keypad sheet
Text Field
- Height: 52pt
- Background: Surface 1 / Light Surface 1
- Corner radius: 14pt
- Floating label on focus; focus ring 1.5pt
#00A0DF - Placeholder Manrope 16pt 400
#6B7299
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Net worth 34pt; gradient hero shorter; tiles slightly tighter |
| iPhone 13/14/15 | 390pt | Standard layout; net worth 40pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the in-gradient top row |
| iPhone 15/16 Pro Max | 430pt | Net worth 44pt; larger tiles; more gradient height |
| iPad (portrait) | 768pt | Content centered max 680pt; tile grid 3-col; hero scales |
| iPad (landscape) | 1024pt+ | Two-pane: dashboard + product detail; hero in the left column |
Dynamic Type
- Net worth, screen titles, section headers, tile values, body, row titles, meta: full scale
- Tab labels, chip text, the change-pill ratio: FIXED (layout-sensitive)
- Amounts scale but stay tabular so columns keep aligning
Orientation
- All screens rotate
- iPad landscape pins a master dashboard beside a detail pane
- The gradient hero re-fits and re-centers on rotation
Touch Targets
- Tab bar icons: 22pt glyph, 49pt bar, 44pt hit
- Tile: full-tile tappable, ≥ 96pt tall
- Cross-sell card: full-card tap
- Primary pill buttons: 52pt min height
- Performance chips (if interactive): 44pt hit
Safe Area Handling
- Top: the gradient hero extends into the top safe area; the in-gradient top row insets below the Dynamic Island
- Bottom: tab bar + home indicator respected; sheet CTAs sit above the home indicator
- Keyboard: amount keypad is a sheet; content scrolls above it
- Sides: 16pt tile inset, 20pt header/gradient-content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-sofi {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #374da4;
--heading-color: #374da4;
--link-color: #0074a3;
--link-hover-color: #005070;
--border-color: #dbdfef;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(55,77,164,0.06);
--card-hover-shadow: 0 6px 18px rgba(55,77,164,0.12);
--header-bg: #374da4;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6171b8;
--button-bg: #00a0df;
--button-text-color: #000000;
--button-hover-bg: #007bac;
--button-border: none;
--button-border-radius: 14px;
--button-secondary-bg: #f3f4fa;
--button-secondary-text-color: #374da4;
--button-secondary-hover-bg: #e7eaf4;
--button-secondary-border: 1px solid #dbdfef;
--prompt-bg: #f5f6fa;
--prompt-text-color: #374da4;
--base-font: var(--font-mono);
--heading-font: var(--font-mono);
--card-border-radius: 14px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.9%
- sleep cycle 80.9%
- monzo 80.2%
- skyscanner 77.8%
- kintetsu 77.4%
Where this came from
- Source document
ios/design-md/finance/sofi/DESIGN.md· 25.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.