Fintech & Crypto

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS) built around the variable font sohne-var at light weights (300–400), a deep navy-to-indigo brand palette, and flat-to-minimal-shadow components structured around an 8px base spacing grid.

https://stripe.com ↗

1,247 installs•892 bookmarks

Color Palette

primary

#533afd

secondary

#0a2540

accent

#80e9ff

background

#0a2540

text

#ffffff

Typography

display

sohne-var

94px / 600

LH: 1.06 • LS: -0.04em

heading

sohne-var

48px / 600

LH: 1.1 • LS: -0.02em

body

sohne-var

17px / 400

LH: 1.6 • LS: 0

Design Tokens

---
name: Stripe
url: https://stripe.com
tokens:
  colors:
    primary: "#533afd"
    secondary: "#0a2540"
    background: "#0a2540"
    surface: "#1a3a5c"
    text-primary: "#ffffff"
    text-secondary: "#adbdcc"
    accent: "#80e9ff"
  typography:
    font-sans: "sohne-var"
    scale:
      - { name: display, size: "94px", weight: 600, lineHeight: 1.06 }
      - { name: heading, size: "48px", weight: 600, lineHeight: 1.1 }
      - { name: body, size: "17px", weight: 400, lineHeight: 1.6 }
  spacing:
    base: "8px"
    scale: [4, 8, 16, 24, 32, 48, 64, 96]
  radius:
    sm: "4px"
    md: "6px"
    lg: "12px"
    full: "9999px"
---

# Stripe — Design System

## Overview
Authoritative yet approachable financial infrastructure design. Confident typography, restrained color use, spectral gradient hero.

## Colors
Deep navy (#0a2540) base with indigo (#533afd) CTAs. Cyan (#80e9ff) for highlights. Minimal color palette with high contrast.

## Typography
sohne-var variable font at light weights (300-400). Large display sizes for impact, restrained body sizes for readability.

## Components
Pill-shaped CTAs (border-radius: 9999px). Flat-to-minimal-shadow cards. 8px base grid spacing.