# Stripe — Design System
> Stripe's gradient-forward marketing system. Built for SaaS dashboards and high-conversion payment flows with angled hero gradients.
- **Canonical:** https://uiuxskills.com/library/stripe
- **Source:** https://stripe.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:00.947Z

---

---
version: alpha
name: Stripe
description: Financial infrastructure for the internet.
tone: >-
  Professional, precise, and developer-focused. The tone is authoritative yet accessible,
  prioritizing clarity and technical accuracy.
color-scheme: light
colors:
  primary: "#004364"
  surface: "#FFFFFF"
  surface-container: "#F6F9FC"
  on-surface: "#0A2540"
  on-primary: "#FFFFFF"
  outline: "#E6EBF1"
  error: "#DF1B41"
  success: "#00D485"
  focus-ring: "#5469D4"
  surface-dim: "#F0F4F8"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#005B87"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#005B87"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E6FBF2"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Stripe is a sophisticated financial services platform defined by a clean, high-contrast, and developer-centric aesthetic. The brand conveys reliability and technical precision through a palette of deep blues and crisp whites, prioritizing clarity, authority, and ease of integration across all digital touchpoints.

## Colors

The color strategy focuses on high-contrast legibility and clear semantic signaling, using a deep navy as the anchor for professional stability.

*   Primary (#004364): The core brand blue used for primary actions and branding.
*   Surface (inferred) (#FFFFFF): Primary background color for the site.
*   Surface-container (inferred) (#F6F9FC): Light background for cards and sections.
*   On-surface (inferred) (#0A2540): Primary text color for high readability.
*   On-primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Outline (inferred) (#E6EBF1): Border color for cards and inputs.
*   Error (inferred) (#DF1B41): Semantic color for errors.
*   Success (inferred) (#00D485): Semantic color for positive status indicators.
*   Focus-ring (inferred) (#5469D4): Focus ring color for accessibility.
*   Surface-dim (inferred) (#F0F4F8): Subtle background for secondary containers.

## Typography

The typography uses the Inter typeface to maintain a modern, clean, and highly readable interface suitable for complex financial data.

*   Display-lg (inferred): Main hero headings.
*   Display-md (inferred): Section headings.
*   Headline-lg (inferred): Sub-section headings.
*   Headline-md (inferred): Card titles.
*   Body-md (inferred): Standard body text.
*   Label-md (inferred): Button labels and small UI text.
*   Label-sm (inferred): Captions and metadata.

## Layout

Stripe utilizes a wide, grid-based layout characterized by generous whitespace and clear vertical rhythm. The page structure follows a consistent flow: nav, hero, features, use-cases, social-proof, and footer. The hero composition typically features a centered headline and subhead paired with dual primary CTAs and a large, illustrative graphic. Responsive behavior is mobile-first, with navigation collapsing into a drawer on smaller viewports. Maintain at least {spacing.md} between elements and {spacing.xl} between major sections.

## Elevation & Depth

Depth is used sparingly to maintain a flat, enterprise-grade aesthetic. Subtle single-layer shadows are applied to create hierarchy.

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard card lift.
*   Elevation.lg: Modal or drawer overlay.

## Shapes

The design system employs a moderate corner radius to balance professional rigor with approachability. Cards and containers use {rounded.md} (8px) to {rounded.lg} (12px) to define boundaries, while interactive elements like buttons and inputs utilize smaller radii for a crisp, actionable appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
Used for the main action on a page. It features a `{colors.primary}` background with `{colors.on-primary}` text and uses the `{typography.label-md}` style.

### Card
A container for grouped information. It utilizes a `{colors.surface}` background, `{colors.outline}` border, and `{rounded.md}` corners. Use for feature showcases or content blocks.

### Input Field
Standard form input for user data. It features a `{colors.surface}` background, `{colors.outline}` border, and `{rounded.sm}` corners. On focus, the border transitions to `{colors.focus-ring}`.

### Badge
Used for status labels or categories. The standard badge uses `{colors.surface-dim}` with `{colors.primary}` text; success states use `{colors.success}` with a light green background.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for background fills in cards. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid mixing too many font weights; stick to the hierarchy. |
| Use `{rounded.md}` for all card containers. | Do not use `{rounded.full}` for standard content cards. |
| Maintain `{spacing.xl}` between major sections. | Avoid tight spacing; maintain at least `{spacing.md}` between elements. |
| Use `{colors.success}` for positive status indicators. | Do not use `{colors.error}` for non-critical alerts. |
| Ensure all input fields use `{colors.outline}` for borders. | Do not use low-contrast text on `{colors.surface-container}`. |
| Use `{colors.focus-ring}` for accessibility states. | Never omit the focus ring on interactive components. |
| Apply `{elevation.md}` for interactive card elements. | Do not use heavy, multi-layered shadows. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Get started" or "Read the story" to drive user engagement.

Headings are benefit-driven and precise, focusing on the value of financial infrastructure and business growth rather than abstract marketing claims.

Copy density is designed for scannability, utilizing concise paragraphs, frequent bulleted lists, and data-driven highlights to communicate technical information efficiently.

## Imagery & Icons

The imagery style is a mix of high-quality product screenshots, isometric illustrations, and clean, abstract data visualizations. Assets often incorporate the brand's signature parallelogram motif, and icons should remain minimal and functional to match the enterprise aesthetic.