---
name: Stripe
description: "A benchmark for premium SaaS design, showcasing how to blend professional authority with modern, developer-friendly aesthetics through a restrained palette and clean typography."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#061B31"
  secondary: "#50617A"
  tertiary: "#533AFD"
  neutral: "#64748D"
  bg-soft: "#F8FAFD"
  bg-quiet: "#E5EDF5"
  line: "rgba(229, 237, 245, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, premium developer-focused fintech platform with a sophisticated use of gradients and high-contrast typography.

*The reliable, invisible backbone of the internet economy.*

## Colors

A clean, high-contrast palette dominated by deep navy ink and a vibrant purple accent, supported by soft neutral grays and dynamic gradients.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#061B31`)** — uses `ink` token
- **Secondary text (`#50617A`)** — uses `ink-soft` token
- **Accent (`#533AFD`)** — uses `accent` token
- **Muted (`#64748D`)** — uses `muted` token
- **Borders (`rgba(229, 237, 245, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

## Layout

A wide, centered container with generous side margins and a structured multi-column grid.

*Rhythm:* Generous vertical spacing with a 4px base grid ensures clear visual hierarchy and readability.

## Elevation & Depth

- 0px 14.088px 21.132px -14.088px rgba(3, 3, 39, 0.25)
- 0px 18px 36px -18px rgba(0, 0, 0, 0.1)
- 0px 15px 35px 0px rgba(23, 23, 23, 0.08)
- 0px 3px 6px 0px rgba(23, 23, 23, 0.06)
- Borders: Thin, subtle borders in light gray or purple-tinted grays define edges and inputs.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast primary buttons (solid purple) and secondary buttons (ghost/outline) with subtle radius.
- **card:** Clean cards with soft shadows and light borders, often containing UI mockups or data visualizations.
- **chip:** N/A
- **input:** Minimalist input fields with subtle bottom borders or light gray backgrounds and small radius.
- **hero:** A split layout with a large headline and supporting text on the left, and feature list/visuals on the right.

## Do's and Don'ts

**Don't:**
- Don't use dark mode — the screenshot shows a bright, light-themed interface with a white primary background.
- Don't use overly playful or rounded fonts — the screenshot shows a professional, clean grotesque-sans typography.
- Don't use a chaotic or multi-colored palette — the screenshot shows a restrained palette dominated by white, deep blue, and a single purple accent.
- Don't use heavy, distracting backgrounds — the screenshot shows clean surfaces with very subtle gradients or solid colors.
- Don't use thick, heavy borders — the screenshot shows very thin, 1px borders in light gray or purple tones.
- Don't use complex, cluttered layouts — the screenshot shows generous whitespace and a clear, structured grid.

---

## System Prompt (paste into AI agent)

```
Stripe's design DNA is that of a premium, developer-first fintech infrastructure provider, emphasizing clarity, reliability, and modern professionalism. The palette is clean and high-contrast, centered around a white background (#FFFFFF), deep navy ink (#061B31), and a vibrant purple accent (#533AFD), supported by soft neutral grays (#F8FAFD, #E5EDF5). Typography utilizes a clean grotesque-sans for both display and body text, prioritizing readability and a modern technical feel. Critical constraints: avoid dark mode interfaces, do not use overly playful or rounded fonts, and maintain generous whitespace with subtle, clean surfaces rather than heavy borders or aggressive visual elements.
```