Stripe Design Tokens

Name: Dembrandt
Author: Dembrandt

Online payment processing platform

Gradient mesh backgrounds

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Contrast and gradients are computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#635bff

#0a2540

#00d4ff

#7a73ff

#f6f9fc

#ffffff

Typography

Inter, system-ui, sans-serif

hero:80px / 700

body:20px / 400

button:16px / 600

weights:400, 600, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px16px24px32px48px

Border Radius

8px

12px

16px

Gradients

linear-gradient(135deg, #635bff 0%, #ffffff 100%)

linear-gradient(90deg, #635bff, #0a2540, #00d4ff)

radial-gradient(circle at 30% 20%, #635bff 0%, #0a2540 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

480px640px768px1024px1280px1536px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

4.70:1

Body text

15.54:1

AAA

Button States

React + Next.js

Default

#635bff

Hover

#7a73ff

Active

#4b44d6

Focus

focus

Disabled

disabled

radius: 8pxpadding: 12px 20px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#635bff"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#0a2540"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#00d4ff"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#7a73ff"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#f6f9fc"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #635bff 0%, #ffffff 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #635bff, #0a2540, #00d4ff)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #635bff 0%, #0a2540 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Inter, system-ui, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "32px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "48px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "12px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "16px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 2px 4px rgba(0,0,0,0.08)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 8px 24px rgba(99,91,255,0.15)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 24px 48px rgba(0,0,0,0.2)"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 4.7,
      "grade": "AA"
    },
    "body-text": {
      "ratio": 15.54,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

The JSON above is one of several output formats. The same extraction can produce:

--dtcgW3C Design Tokens format. Validate any DTCG file with the DTCG Validator.
--design-mdA readable DESIGN.md summary for agents and docs. More on its limits in DESIGN.md is a good idea with a low ceiling.
--brand-guideA brand guide PDF generated from the live URL.
--wcagA full WCAG contrast report across the palette, the same grades shown above. Why it matters in catching token drift.

See every flag in the CLI quickstart, or pull tokens straight into your editor with the Dembrandt MCP server.

$npx dembrandt stripe.com