Stripe Design Tokens
Online payment processing platform
Gradient mesh backgrounds
Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is 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
#533afd
#0810bf
#061b31
#50617a
#f6f9fc
#ffffff
primary#533afd
secondary#e2e4ff
background#ffffff
text#000000
accent#ff6118
logo#533afd
Typography
sohne-var, SF Pro Display, sans-serif
hero:56px / 300
body:20px / 400
button:16px / 400
weights:300, 400
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
md
lg
Spacing
4px8px16px24px32px48px
Border Radius
8px
12px
16px
Borders
1px solid #b9b9f9
1px dashed #362baa
Links
Link text#533afd · no underline
Gradients
radial-gradient(circle, #7f7dfc, #f44bcc 33%, #e5edf5 66%)
linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, #0810bf 50%, rgba(0, 0, 0, 0) 100%)
radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
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
Aa
Button label
6.19:1
Aa
Body text
17.37:1
Button States
React + Next.jsDefault
#533afdHover
#6b55fdActive
#4630d4Focus
focusDisabled
disabledLoading
loadingradius: 4pxpadding: 16px 24px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#533afd"
},
"palette-2": {
"$type": "color",
"$value": "#0810bf"
},
"palette-3": {
"$type": "color",
"$value": "#061b31"
},
"palette-4": {
"$type": "color",
"$value": "#50617a"
},
"palette-5": {
"$type": "color",
"$value": "#f6f9fc"
},
"palette-6": {
"$type": "color",
"$value": "#ffffff"
},
"primary": {
"$type": "color",
"$value": "#533afd"
},
"secondary": {
"$type": "color",
"$value": "#e2e4ff"
},
"background": {
"$type": "color",
"$value": "#ffffff"
},
"text": {
"$type": "color",
"$value": "#000000"
},
"accent": {
"$type": "color",
"$value": "#ff6118"
},
"logo": {
"$type": "color",
"$value": "#533afd"
},
"link": {
"$type": "color",
"$value": "#533afd"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "1px solid #b9b9f9"
},
"border-2": {
"$type": "border",
"$value": "1px dashed #362baa"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "radial-gradient(circle, #7f7dfc, #f44bcc 33%, #e5edf5 66%)"
},
"gradient-2": {
"$type": "gradient",
"$value": "linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, #0810bf 50%, rgba(0, 0, 0, 0) 100%)"
},
"gradient-3": {
"$type": "gradient",
"$value": "radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "sohne-var, SF Pro Display, sans-serif"
}
},
"fontWeight": {
"weight-300": {
"$type": "fontWeight",
"$value": 300
},
"weight-400": {
"$type": "fontWeight",
"$value": 400
}
},
"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": 6.19,
"grade": "AA"
},
"body-text": {
"ratio": 17.37,
"grade": "AAA"
}
}
}
// ...and moreOther token exports
--dtcgW3C token JSON, checked by the DTCG Validator
--design-mdDESIGN.md for agents and docs
--brand-guideBrand guide PDF
--wcagPalette-wide contrast report
All flags in the CLI quickstart. Same tokens in your editor via the MCP server.
$npx dembrandt stripe.com