---
title: "SoFi Tech Solutions design system"
variant: extended
source: https://tech.sofi.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/galileo-ft-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SoFi Tech Solutions · Design System

> A confident financial platform in deep blue and ink.

**Theme:** light · **Industry:** fintech · **Source:** https://tech.sofi.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A fintech platform homepage that pairs expansive blue brand fields with crisp dark product sections and restrained white content bands. Compact typography, customer proof, product imagery, and clear calls to action make a complex B2B offering feel approachable.

## North star

Use deep blue and ink as immersive section fields, then let compact TT Norms typography and clear white content bands make the platform easy to scan.

## Overview

The visual strategy balances an expansive, saturated blue opening with near-black platform storytelling and white editorial sections. The measured canvas lavender-white (#f5f6ff) is present in the hero’s underlying section treatment, while the screenshot makes the deep blue field the dominant first impression; treat that blue as a visual field rather than inventing a new palette value. TT Norms carries the page throughout: medium-weight, tightly tracked headings contrast with small, calmly set body copy and uppercase eyebrow labels. Layout alternates full-bleed media and dark bands with centered, contained content, offset cards, and two-column solution groupings. Product screenshots, card imagery, customer logos, and video provide evidence and texture; dot patterns and luminous gradients remain supporting details. Generous open areas around the hero and people feature contrast with denser footer navigation. Rounded white navigation and CTA surfaces, subtle hairlines, and minimal shadow keep the interface polished without making it feel ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation, light content sections, white CTA surfaces, and text on dark or blue backgrounds. |
| Lavender Canvas | `#f5f6ff` | `--color-lavender-canvas` | surface | Measured page canvas and pale blue-lavender section treatment; supports the brighter brand fields. |
| Midnight Ink | `#070a10` | `--color-midnight-ink` | brand | Primary near-black text, dark platform and video sections, and footer background. |
| Link Blue | `#4a8fe8` | `--color-link-blue` | accent | Inline Learn more links against light surfaces. |
| Deep Space | `#03081a` | `--color-deep-space` | surface | Near-black inverse canvas in dark sections and supporting background areas. |
| Glacier Blue | `#accaf8` | `--color-glacier-blue` | accent | Pale blue gradient accent in the tailored-experiences section. |
| Quiet Steel | `#d4dbe4` | `--color-quiet-steel` | neutral | Subtle measured border and divider tone; use for restrained hairlines. |
| Platform Blue | `#0f3275` | `--color-platform-blue` | brand | Blue statistics card and deep blue section accents; screenshot shows this family defining the hero field. |
| Graphite Rule | `#2c2f34` | `--color-graphite-rule` | neutral | Dark footer border or divider detail. |
| Action Blue | `#2563eb` | `--color-action-blue` | accent | Primary Cyberbank Core button fill with white label. |
| Night Navy | `#0c224d` | `--color-night-navy` | surface | Dark navy section band and inverse background treatment. |
| Lilac Card | `#f5f0ff` | `--color-lilac-card` | surface | Pale recognition-card surface; secondary to the core brand palette. |

### Semantic aliases

`--color-canvas` → `#f5f6ff` (Lavender Canvas) · `--color-surface` → `#070a10` (Midnight Ink) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#03081a` (Deep Space) · `--color-surface-4` → `#0c224d` (Night Navy) · `--color-text` → `#070a10` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#4a8fe8` (Link Blue) · `--color-accent-2` → `#accaf8` (Glacier Blue) · `--color-accent-3` → `#2563eb` (Action Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#070a10` | `#f5f6ff` | 18.41:1 | AAA |
| `#070a10` | `#ffffff` | 19.81:1 | AAA |
| `#070a10` | `#03081a` | 1.01:1 | fail |
| `#ffffff` | `#f5f6ff` | 1.08:1 | fail |
| `#ffffff` | `#070a10` | 19.81:1 | AAA |
| `#ffffff` | `#03081a` | 19.93:1 | AAA |
| `#4a8fe8` | `#f5f6ff` | 3.06:1 | AA-large |
| `#4a8fe8` | `#070a10` | 6.02:1 | AA |
| `#4a8fe8` | `#ffffff` | 3.29:1 | AA-large |
| `#4a8fe8` | `#03081a` | 6.06:1 | AA |

### Gradients

- `linear-gradient(118deg, rgba(240, 244, 255, 0.9) 28.612%, rgba(163, 196, 247, 0.9) 97.875%)`
- `radial-gradient(circle, rgb(240, 244, 255) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TT Norms | `--font-body` | webfont | 400, 500, 700 | Site-wide headings, body copy, navigation, buttons, links, and eyebrow labels. | Inter |

- **TT Norms:** Use measured weights 400, 500, and 700; headings are medium-weight with tight negative tracking, while eyebrow labels are uppercase and widely tracked.

### Type scale — Perfect Fourth (ratio ≈ 1.312, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 41.5px | 500 | 1.1 | -0.03em | — | TT Norms | Centered hero headline and primary page statement. |
| h2 | 34.5px | 500 | 1.3 | -0.03em | — | TT Norms | Major section titles, including solutions and platform messaging. |
| h3 | 28px | 500 | 1.3 | -0.03em | — | TT Norms | Feature, product, and card headings. |
| h4 | 21px | 500 | 1.3 | -0.03em | — | TT Norms | Subsection labels and smaller solution headings. |
| body | 14px | 400 | 1.5 | 0 | — | TT Norms | Supporting descriptions, explanatory copy, and navigation text. |
| caption | 12px | 400 | 1.5 | 0 | — | TT Norms | Small metadata, statistics labels, and fine-print copy. |
| button | 14px | 500 | 1.5 | -0.01em | — | TT Norms | CTA labels such as Let's talk and Cyberbank Core. |
| link | 14px | 500 | 1.09 | -0.01em | — | TT Norms | Learn more links and inline navigation actions. |
| eyebrow | 10.5px | 500 | 1.5 | 0.092em | uppercase | TT Norms | Uppercase section markers such as FINANCIAL TECHNOLOGY PLATFORM. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 7, 9, 10, 14, 17, 21, 28, 42, 43, 49, 56, 69 px.
- Section rhythm 56px · element gap 7px · card padding 82px · max content width 697px.

Build a long, editorial homepage with full-bleed hero and media bands alternating with contained white content areas. The measured page max width is 697px, with comfortable density, a 56px section gap, and a 7px element gap; preserve those measured values where applicable rather than extrapolating new spacing tokens. Center the hero message, then shift to left-aligned section headings, offset paired cards, and two-column solution content. Use broad negative space in the opening and people sections, then a denser multi-column footer.

## Shape & elevation

- Radius: button `7px` · card `14px` · nav `10px` · xs `5px` · sm `7px` · md `9px` · lg `14px` · xl `16px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.08) 0px 2px 12px 0px`
- Motion: standard transition `0.2s cubic-bezier(1, 0, 0.5, 1)` on interactive elements.

The page is mostly flat, using strong colour bands rather than stacked shadowed cards. A white navigation panel has a subtle measured shadow and rounded corners; cards rely on their contrasting fills and soft corners. Use fine dividers sparingly, including the restrained hairline between the hero and logo strip.

## Imagery

Use product UI mockups, card-program visuals, customer logos, and cinematic video as proof of platform capabilities. Full-bleed media sits in dark sections with dotted patterns and luminous blue or purple accents; editorial areas use circular people photography and contained card imagery. Keep imagery crisp and high-contrast, and do not mistake illustration-only purple or bright details for core brand colours.

## Components

### Floating navigation

White rounded navigation panel over the blue hero, with compact dropdown labels and a dark Log in button; measured nav radius is 10px.

### Hero CTA

Centered white Let's talk button with dark text and a measured button radius of 7px.

### Customer logo strip

A thin, separated band beneath the hero pairs a short customer-proof statement with a horizontal run of white logos.

### Dark platform feature

Near-black full-bleed section with an uppercase eyebrow, explanatory copy, outlined action, dotted background, and floating product UI imagery.

### Proof cards

Offset recognition and statistics cards contrast a pale lilac card with a saturated blue metrics card; measured card radius is 14px.

### Solution list

Dark rounded panel groups six solution areas into two columns, each with a small icon, title, brief copy, and blue link.

### Footer navigation

Near-black footer arranges dense link groups in columns, then places social links, utility actions, and legal copy below.

### Measured component styles

- **Primary button** (“Cyberbank Core”): background #2563eb · text #ffffff · radius 6.9408px · padding 13.9px 17.4px · 500 13.8816px TT Norms
- **Secondary button** (“Let's talk”): background #ffffff · text #070a10 · radius 6.9408px · padding 13.9px · 500 13.8816px TT Norms
- **Link** (“Learn more”): transparent background · text #4a8fe8 · radius 0px · padding 0px · 500 13.8816px TT Norms
- **Card** (“SoFi Tech Solutions named Best-in-Class ”): background #f5f0ff · text #000000 · radius 13.8816px · padding 110.2px 63.3px 111.9px 42.5px · 400 16px Times New Roman
- **Navigation item** (“Deposits Engagement Channels Payments Le”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Lead with a confident blue field and a centered, concise message.
- Use TT Norms or a close sans-serif substitute consistently.
- Alternate dark full-bleed storytelling with white editorial sections.
- Keep calls to action visibly distinct with measured accent or white fills.
- Use customer marks and product visuals as credibility evidence.
- Reserve uppercase, tracked styling for eyebrow labels.

## Don't

- Do not add palette colours beyond the measured hex values.
- Do not make every section a card or add heavy shadows.
- Do not use oversized body text or loose, decorative typography.
- Do not let product mockup colours redefine the brand palette.
- Do not crowd the hero; preserve its broad open field.
- Do not flatten the long page into one uniform background.

## Agent prompt

Create a new fintech platform page using SoFi Tech Solutions’ measured visual language. Use Platform Blue (#0f3275) as the immersive brand field, Midnight Ink (#070a10) and Deep Space (#03081a) for product storytelling, Gallery White (#ffffff) for clear content bands, and Lavender Canvas (#f5f6ff) for pale transitions. Keep typography in TT Norms or Inter, with medium-weight tightly tracked headings, compact body copy, and uppercase tracked eyebrows. Alternate full-bleed media with contained editorial layouts; use product UI, people photography, customer marks, and restrained dotted textures as supporting evidence. Make CTAs clear with white or Action Blue (#2563eb) fills. Keep cards flat, use measured rounded treatments, subtle hairlines, and generous whitespace. Avoid invented colours, decorative excess, and uniform section layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy in a broad blue field, with floating white navigation and a customer logo strip at its base. | Primary contact CTA, Customer trust marks | Floating white nav, Centered headline, Blue section field, Thin logo-strip divider |
| 2 | feature-split | Dark full-bleed two-column feature, with copy on the left and product interface imagery on the right. | Explore platform link, Product capability explanation | Dark canvas, Dotted texture, Floating UI mockup, Eyebrow label |
| 3 | stats | White section with offset recognition and blue metrics cards. | Learn more action, Key platform metrics | Contrasting card fills, Award badge, Blue statistics panel |
| 4 | team | Contained white band with left-aligned copy and overlapping circular people imagery. | People-focused storytelling | Eyebrow label, Circular image crops, Open whitespace |
| 5 | feature-grid | Dark rounded panel with six offerings arranged in two columns. | Browse solution categories, Learn more links | Small line icons, Compact descriptions, Blue links, Dark panel |
| 6 | product-showcase | Pale gradient-backed showcase with centered title and tabs above a product-detail split. | Product category tabs, Explore product CTA, Contact sales action | Pale blue gradient, Selected blue tab, Product UI image, Paired buttons |
| 7 | feature-split | Full-width dark media banner with card imagery opposite centered copy. | Learn more action | Dark background, Card visual, Dotted light pattern, Centered CTA |
| 8 | video | Dark two-column introduction above a wide, cinematic video image. | Play video action | Near-black band, Centered headline, Full-width video frame |
| 9 | cta | Contained CTA card centered in a pale section with a patterned blue-black background. | Learn more action | Dark CTA card, Dotted gradient backdrop, Centered copy |
| 10 | footer | Dark footer with grouped navigation columns, social and utility controls, and legal details along the bottom. | Grouped site navigation, Language and resource actions, Social links | Near-black canvas, Column link groups, Logo, Divider line |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(24,13,67,0);
--osano-button-border-color: #ffffff;
--osano-button-background-color: #3d50fc;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #edeff5;
--osano-dialog-foreground-color: #020626;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #3d50fc;
--osano-toggle-off-track-color: #03081a;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #3d50fc;
--osano-toggle-on-thumb-color: #ffffff;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #020626;
--osano-button-accept-background-color: #3d50fc;
--osano-button-accept-border-color: #ffffff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #3d50fc;
--osano-button-deny-border-color: #ffffff;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #3d50fc;
--osano-button-reject-all-background-color-hover: #5164ff;
--osano-button-reject-all-border-color: #ffffff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #3d50fc;
--osano-button-manage-border-color: #ffffff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #3d50fc;
--osano-info-dialog-button-close-color: #FFFFFF;
--osano-info-dialog-toggle-off-track-color: #03081a;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #3d50fc;
--osano-info-dialog-toggle-on-thumb-color: #ffffff;
--osano-info-dialog-button-background-color: #3d50fc;
--osano-info-dialog-button-border-color: #ffffff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/galileo-ft-com