UI Skillbook
2

SoFi DESIGN.md

Brands

Consumer finance with a bright cyan-blue identity, rounded fintech surfaces, and benefit-led product framing. SoFi's public site uses strong teal/cyan branding, white cards, and mainstream financial product storytelling.

Raw DESIGN.md

At a glance

Group
Brands
Main color
#00a3e0Blue design systems
Fonts
ApercuSF Mono

Colors in this file

  • #d9eef5

    Unnamed

  • #00a3e0

    Unnamed

  • #0f172a

    Unnamed

  • #0087bc

    Unnamed

  • #ffffff

    Unnamed

  • #f3fbfe

    Unnamed

  • #64748b

    Unnamed

Consumer finance with a bright cyan-blue identity, rounded fintech surfaces, and benefit-led product framing. SoFi's public site uses strong teal/cyan branding, white cards, and mainstream financial product storytelling.

1. Visual Theme & Atmosphere

Overall Aesthetic

SoFi feels like consumer finance made more modern, optimistic, and product-bundled.

Mood & Feeling

  • Trustworthy
  • Modern
  • Benefit-led
  • Mainstream fintech
  • Friendly

Design Density

Medium density. Multiple financial products are grouped clearly with promo and trust modules.

Visual Character

  • Bright cyan-teal brand accent
  • White cards and rounded shells
  • Clean fintech marketing modules
  • Benefit and bundle framing

2. Color Palette & Roles

TokenHexRole
--sofi-teal#00A3E0Primary brand accent
--sofi-teal-deep#0087BCHover/support
--sofi-white#FFFFFFMain surface
--sofi-surface#F3FBFEBackground
--sofi-ink#0F172AText
--sofi-muted#64748BSecondary text
--sofi-border#D9EEF5Borders

3. Typography Rules

Font Stack

css--font-display: "Apercu", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Apercu", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 56/700, H1 40/700, H2 30/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#00a3e0; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#0f172a; border:1px solid #d9eef5; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #d9eef5; border-radius:20px; box-shadow:0 12px 24px rgba(15,23,42,.06); }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

  • Group by product type: banking, loans, invest, credit
  • Keep benefits and trust cues close to CTAs
  • Use teal as a bright confidence signal

6. Depth & Elevation

SoFi uses soft fintech card elevation on bright, rounded surfaces.

7. Do's and Don'ts

Do

  • Keep it modern, optimistic, and trustworthy
  • Use teal as the stable brand anchor
  • Preserve product-bundle clarity

Don't

  • Don’t make it cold legacy banking UI
  • Don’t overdecorate with too many fintech effects

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack benefit cards and product promos cleanly
  • Keep primary sign-up paths highly visible

9. Agent Prompt Guide

textDesign this like SoFi: bright teal-led consumer-finance UI with rounded white cards, benefit-focused product modules, modern fintech trust cues, and clear banking-loans-invest navigation.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/sofi.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "sofi" })

Related Design.md files

Cisco

Brands · CiscoSansTT

Infrastructure-led enterprise brand with bright network blue, dark technical gradients, and mobile-first content discipline. Cisco’s current web presence balances futuristic AI-era storytelling with practical,…

Snowflake

Brands · Inter

Data-platform design with cool precision and AI-era confidence. Bright glacier blue, dark cloud navies, crisp technical typography, and modular enterprise blocks create interfaces that feel powerful, modern, and…

Autodesk

Brands · Artifakt Legend

Bold industrial-modern brand with black-and-white confidence and high-visibility yellow. Autodesk’s current identity uses Artifakt typography, open whitespace, sharp contrast, and selective color emphasis to make…

Storyblok

Brands · Inter

Headless CMS design with bright blue brand confidence, visual editing clarity, and component-based content structure.

Wired

Brands · Apercu

An inspired interpretation of Wired's design language — a flagship technology-magazine brand whose surface is a strict editorial duet of stark black wordmark on white canvas, anchored by a tall narrow custom display…

Unity

Brands · Inter

Creator-platform design with dark technical confidence and game-industry energy. Unity’s current web presence leans on black-and-white contrast, cool slate surfaces, bold product screenshots, and clean…

All Design.md filesBrowse by font