<!-- Generated by ExtractVibe — https://extractvibe.com/brand/stripe.com -->
<!-- Extracted: 2026-04-26T13:02:46.680Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Stripe"
description: "Stripe projects a serious, yet enthusiastic and accessible vibe, positioning itself as the robust, modern backbone for businesses of all sizes to manage their financial operations. It balances technical sophistication with a user-friendly approach, emphasizing growth and flexibility."
colors:
  primary: "#533afd"
  tertiary: "#81b81a"
  neutral: "#64748d"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#64748d"
  border: "#e2e4ff"
  link: "#533afd"
typography:
  display-lg:
    fontFamily: "sohne-var"
    fontSize: "48px"
    fontWeight: "300"
    lineHeight: "55.2px"
    letterSpacing: "-0.96px"
  headline-lg:
    fontFamily: "sohne-var"
    fontSize: "32px"
    fontWeight: "300"
    lineHeight: "35.2px"
    letterSpacing: "-0.64px"
  headline-md:
    fontFamily: "sohne-var"
    fontSize: "26px"
    fontWeight: "300"
    lineHeight: "29.12px"
    letterSpacing: "-0.26px"
  headline-sm:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "22.4px"
  body-md:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "4px"
  lg: "6px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#533afd"
    textColor: "#ffffff"
    rounded: "4px"
    padding: "15.5px 24px 16.5px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#ffffff"
  button-outline:
    textColor: "#533afd"
    rounded: "4px"
    padding: "14.5px 24px 15.5px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#d6d9fc"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#e8e9ff"
    textColor: "#000000"
    rounded: "6px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#000000"
---

# Stripe — Design System

## Overview

Stripe's design system embodies the archetypes of The Magician and The Ruler, projecting an atmosphere of sophisticated enablement and controlled growth. It aligns with comparable brands such as Shopify, Square, and Adyen by delivering a modern, robust, and professional aesthetic that underpins financial operations for businesses of all scales. The design communicates technical prowess and user-friendly accessibility, reflecting a brand that is both cutting-edge and approachable.

This system prioritizes clarity, efficiency, and understated power. It is not frivolous or overly decorative; instead, it focuses on functional elegance and intuitive interaction. The design avoids trends that might compromise its long-term stability and trustworthiness, opting for timeless sophistication over fleeting novelty. Every element is crafted to reinforce Stripe's position as a reliable and forward-thinking partner, fostering a sense of confidence and capability in its users.

**Key characteristics:**

- Vibe — sophisticated, modern, enabling, flexible, growth-oriented, professional
- Archetypes — The Magician, The Ruler
- Comparable to — Shopify, Square, Adyen, Revolut
- Design era — contemporary-minimal
- Emotional tone — empowering-reliable
- Target audience — Businesses and developers seeking scalable, flexible, and robust financial infrastructure, from startups to large enterprises, who value efficiency and growth.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The color palette is anchored by a primary hue of `#533afd`, a vibrant yet authoritative blue-purple that signifies innovation, trust, and forward momentum. This is meticulously balanced with a pristine surface color of `#ffffff`, ensuring optimal readability and a clean, expansive digital environment. This deliberate contrast signals a brand that is both dynamic and meticulously organized, reflecting Stripe's commitment to cutting-edge technology delivered with clarity and precision.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#533afd` | Blue Violet |
| accent / tertiary | `#81b81a` | Yellow Green |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#64748d` | Slate Gray |
| border | `#e2e4ff` | Lavender |
| link | `#533afd` | Blue Violet |
| muted | `#64748d` | Slate Gray |

## Typography

The typographic system leverages `sohne-var` as its sole typeface, employing its variable capabilities to establish a clear and consistent hierarchy. This choice communicates modernity, efficiency, and a sharp, professional intellect. The consistent use of a single, versatile font across all scales ensures legibility and reinforces Stripe's unified brand voice, projecting an image of streamlined sophistication and unwavering reliability.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| sohne-var | body | self-hosted | 300, 400 |
| sohne-var | heading | self-hosted | 300, 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | sohne-var | 48px | 300 | 55.2px | -0.96px |
| Heading 2 | sohne-var | 32px | 300 | 35.2px | -0.64px |
| Heading 3 | sohne-var | 26px | 300 | 29.12px | -0.26px |
| Heading 4 | sohne-var | 16px | 400 | 22.4px | — |
| Body | sohne-var | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.1) 0px 30px 60px -50px, rgba(50, 50, 93, 0.25) 0px 30px 60px -10px` |

### Gradients

- `radial-gradient(66.35% 66.35% at 50% 50%, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0) 100%), none`
- `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)`
- `radial-gradient(50% 50% at 50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)`
- `radial-gradient(50% 50% at 50% 50%, rgba(243, 99, 243, 0.8) 53.85%, rgba(243, 99, 243, 0) 100%)`
- `radial-gradient(50% 50% at 50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)`
- `linear-gradient(rgb(255, 255, 255) 41.35%, rgba(255, 255, 255, 0))`
- `radial-gradient(103.24% 102.63% at 50% 102.63%, rgb(72, 111, 253) 0px, rgb(127, 129, 243) 9.84%, rgb(196, 137, 255) 20.83%, rgb(218, 192, 255) 34.13%, rgb(234, 220, 255) 44.86%, rgb(249, 246, 255) 58.59%, rgb(248, 250, 253) 100%)`
- `radial-gradient(102.68% 99.11% at 50% 104.6%, rgb(203, 131, 255) 0px, rgb(255, 144, 185) 15.77%, rgb(255, 201, 119) 30.62%, rgb(255, 215, 155) 38.04%, rgb(255, 241, 220) 50.11%, rgb(255, 255, 255) 63.1%, rgb(252, 253, 254) 77.95%, rgb(248, 250, 253) 98.81%)`

## Shapes

Border-radius scale:

- `sm` — 4px
- `lg` — 6px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#533afd`
- Text — `#ffffff`
- Radius — `4px`
- Padding — `15.5px 24px 16.5px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #ffffff`
- Sample copy — "Start now"

**Outline**

- Text — `#533afd`
- Radius — `4px`
- Padding — `14.5px 24px 15.5px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #d6d9fc`
- Sample copy — "Contact sales"

**Secondary**

- Background — `#e8e9ff`
- Text — `#000000`
- Radius — `6px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #000000`

## Do's and Don'ts

### Do

- Utilize the primary brand color #533afd for key interactive elements like primary buttons and outline button text, maintaining brand consistency.
- Employ 'sohne-var' font family exclusively for all text, using weights 300 and 400 for both headings and body copy to ensure a unified and modern typographic voice.
- Format all headings in sentence-case, avoiding title case or all caps, to maintain a serious yet accessible tone.
- Implement a subtle, multi-layered shadow effect for depth on elements like dropdowns, specifically `rgba(0, 0, 0, 0.1) 0px 30px 60px -50px, rgba(50, 50, 93, 0.25) 0px 30px 60px -10px`.
- Use a base border-radius of 4px for most interactive elements like primary and outline buttons, with a slightly larger 6px radius for secondary buttons and potentially other container elements.
- Incorporate radial gradients strategically for visual interest and depth, as seen in `radial-gradient(66.35% 66.35% at 50% 50%, rgba(255, 255, 255, 0.9) 0px, rgba(255)` and `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237)`.
- Design primary call-to-action buttons with a solid #533afd background, #ffffff text, 4px border-radius, and generous padding of `15.5px 24px 16.5px`.
- Craft outline buttons with #533afd text, a #d6d9fc border, 4px border-radius, and padding of `14.5px 24px 15.5px`.

### Don't

- Avoid using any emoji in marketing copy or UI elements, as the brand maintains a professional and straightforward communication style.
- Refrain from using exclamations in copy, maintaining a matter-of-fact and confident tone.
- Do not use serif fonts; the brand's typography is exclusively sans-serif ('sohne-var').
- Do not apply shadows to buttons; shadows are reserved for specific layered elements like dropdowns.
- Avoid overly playful or casual language; maintain a serious, enthusiastic, and accessible tone with moderate vocabulary and some jargon.
- Do not use a monochrome color palette; leverage the primary #533afd and accent #81b81a colors alongside gradients for a rich, modern feel.
- Do not use sharp, unrounded corners; all interactive elements should have a minimum border-radius of 4px.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 15 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs and benefit-focused phrases
- Rhetorical devices — repetition, hyperbole

### Sample copy

> Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.

> Flexible solutions for every business model.

> The backbone of global commerce

> Powering businesses of all sizes.

> Transform your enterprise with agile financial infrastructure

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/stripe.com) | 100% |
| favicon | — | svg | [link](brands/stripe.com/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/stripe.com/logo-1.png) | 95% |
| favicon | — | ico | [link](brands/stripe.com/logo-2.ico) | 95% |
| favicon | — | png | [link](brands/stripe.com/logo-3.png) | 95% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-4.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-5.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-6.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-7.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-8.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-9.svg) | 90% |
| primary | — | svg | [link](brands/stripe.com/logo-svg-10.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/stripe.com
- Raw JSON — https://extractvibe.com/api/brand/stripe.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/stripe.com/design.md
- Extracted — 2026-04-26T13:02:46.680Z
- Generator — ExtractVibe vv1
- Quality score — 90/100