lightpolishedprofessionalgradient-heavy

Stripe Colors & Fonts

What colors and fonts does Stripe use? Payment infrastructure for the internet. Clean gradients, polished.

Extract Live DesignVisit Stripe

Stripe Color Palette

Primary: #635BFF

Primary

#635BFF

Brand, buttons

Background

#FFFFFF

Main background

Surface

#F6F9FC

Cards, sections

Border

#E6E6E6

Dividers

Text Primary

#0A2540

Headings

Text Secondary

#425466

Body text

What Font Does Stripe Use?

Stripe uses Söhne and Söhne

Headings

Söhne

600custom
Body Text

Söhne

400custom
Code

Söhne Mono

400custom

Spacing & Radius

Spacing Scale

Base: 4px

48162432486496

Border Radius

Small4px
Medium8px
Large16px

Stripe Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#635BFF',
        'background': '#FFFFFF',
        'surface': '#F6F9FC',
        'border': '#E6E6E6',
        'text-primary': '#0A2540',
        'text-secondary': '#425466',
      },
      fontFamily: {
        'heading': ['Söhne', 'sans-serif'],
        'body': ['Söhne', 'sans-serif'],
        'mono': ['Söhne Mono', 'sans-serif'],
      },
    },
  },
}

Extract Stripe's Full Design

Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.

Get PromptUI — $19

One-time payment · 20 extractions · No subscription

Similar Design Systems

Explore more design systems

Linear

The issue tracking tool loved by developers. Dark, minimal, fast.

Notion

All-in-one workspace. Clean, friendly, content-focused design.

Raycast

Productivity tool for developers. Vibrant gradients, dark UI.

PlanetScale

Serverless MySQL platform. Purple gradients, dark, technical.

Updated: 2025-01-15