W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Stripe
Stripe is a financial-infrastructure platform for the internet — payments, billing, treasury, identity, and capital APIs used by millions of businesses worldwide. The brand voice is engineer- facing, plain-spoken, and unusually polished for the fintech category. Visually, Stripe is anchored on a single signature Stripe Purple (#635BFF) against deep-navy Slate text, near-white Fog canvases, and the brand's characteristic light-source gradient surfaces. Typography is Söhne (Klim Type Foundry), used across stripe.com and Stripe Press as the proprietary brand face.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/stripe/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/stripe/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Stripe
Stripe is a financial-infrastructure platform for the internet — payments, billing, treasury, identity, and capital APIs used by millions of businesses worldwide. The brand voice is engineer- facing, plain-spoken, and unusually polished for the fintech category. Visually, Stripe is anchored on a single signature Stripe Purple (#635BFF) against deep-navy Slate text, near-white Fog canvases, and the brand's characteristic light-source gradient surfaces. Typography is Söhne (Klim Type Foundry), used across stripe.com and Stripe Press as the proprietary brand face.
Tags: stripe, fintech, payments, developer-tools, brand
Atoms
Palette
Stripe · [email protected] · Proprietary — All Rights Reserved
Stripe's brand palette as observed on the live marketing site (stripe.com) and the Stripe Press / newsroom surfaces. Anchored on the signature Stripe Purple (#635BFF) against a deep-navy "Slate" text color and a near-white page canvas with subtle fog-blue tints. The palette is light-first; dark surfaces are used sparingly for headers and high-contrast modules. Functional accents (success-green, orange, magenta, pink) appear in Stripe's gradient surfaces and product illustrations and are preserved here as a documented secondary scale.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
stripe-purple |
Stripe Purple | #635BFF |
stripe-purple-pressed |
Stripe Purple Pressed | #533AFD |
stripe-purple-soft |
Stripe Purple Soft | #E8E9FF |
stripe-slate-100 |
Stripe Slate 100 | #061B31 |
stripe-slate-90 |
Stripe Slate 90 | #0A2540 |
stripe-slate-70 |
Stripe Slate 70 | #3C4F69 |
stripe-slate-50 |
Stripe Slate 50 | #425466 |
stripe-slate-30 |
Stripe Slate 30 | #667691 |
stripe-white |
Stripe White | #FFFFFF |
stripe-fog-0 |
Stripe Fog 0 (canvas) | #F6F9FC |
stripe-fog-1 |
Stripe Fog 1 | #E5EDF5 |
stripe-fog-2 |
Stripe Fog 2 | #CFD7DF |
stripe-green |
Stripe Green | #2CA25E |
stripe-orange |
Stripe Orange | #E17A38 |
stripe-magenta |
Stripe Magenta | #F44BCC |
stripe-pink |
Stripe Pink | #FF5996 |
stripe-red |
Stripe Red | #EA2261 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
stripe-fog-0 |
#F6F9FC |
surface |
stripe-white |
#FFFFFF |
surface-elevated |
stripe-white |
#FFFFFF |
text-primary |
stripe-slate-90 |
#0A2540 |
text-secondary |
stripe-slate-50 |
#425466 |
text-tertiary |
stripe-slate-30 |
#667691 |
primary |
stripe-purple |
#635BFF |
primary-hover |
stripe-purple-pressed |
#533AFD |
accent |
stripe-purple |
#635BFF |
accent-hover |
stripe-purple-pressed |
#533AFD |
warning |
stripe-orange |
#E17A38 |
warning-hover |
stripe-orange |
#E17A38 |
error |
stripe-red |
#EA2261 |
success |
stripe-green |
#2CA25E |
border |
stripe-fog-2 |
#CFD7DF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
stripe-slate-100 |
#061B31 |
surface |
stripe-slate-90 |
#0A2540 |
surface-elevated |
stripe-slate-70 |
#3C4F69 |
text-primary |
stripe-white |
#FFFFFF |
text-secondary |
stripe-fog-1 |
#E5EDF5 |
text-tertiary |
stripe-slate-30 |
#667691 |
primary |
stripe-purple |
#635BFF |
primary-hover |
stripe-purple-soft |
#E8E9FF |
accent |
stripe-purple |
#635BFF |
accent-hover |
stripe-purple-soft |
#E8E9FF |
warning |
stripe-orange |
#E17A38 |
warning-hover |
stripe-orange |
#E17A38 |
error |
stripe-pink |
#FF5996 |
success |
stripe-green |
#2CA25E |
border |
stripe-slate-70 |
#3C4F69 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
primary |
stripe-purple |
#635BFF |
primary-hover |
stripe-purple-pressed |
#533AFD |
accent |
stripe-purple |
#635BFF |
accent-hover |
stripe-purple-pressed |
#533AFD |
success |
stripe-green |
#2CA25E |
warning |
stripe-orange |
#E17A38 |
error |
stripe-red |
#EA2261 |
text-primary-light |
stripe-slate-90 |
#0A2540 |
text-primary-dark |
stripe-white |
#FFFFFF |
background-light |
stripe-fog-0 |
#F6F9FC |
background-dark |
stripe-slate-100 |
#061B31 |
surface-light |
stripe-white |
#FFFFFF |
surface-dark |
stripe-slate-90 |
#0A2540 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Stripe Slate 90 (#0A2540) on Fog 0 (#F6F9FC) is ~14:1; well above AA. White on Slate 100 (#061B31) is ~15:1. Both directions clear AA with substantial margin.
colorChoice → roles.colors.primary
- allowed: stripe-purple, stripe-purple-pressed
- forbidden: stripe-purple-soft, stripe-magenta, stripe-pink
Stripe Purple (#635BFF) is the signature brand color and the only token that may carry "primary action" semantics. stripe-purple-soft is a tinted-background variant; magenta and pink appear in illustration gradients only and must not be used as primary buttons or links.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, outlined, on-busy-photo
Stripe's Marks Usage Agreement forbids modifying or altering the Stripe word mark "in any way" and prohibits use that implies endorsement. Apply the official monochrome variants on appropriate light/dark surfaces; do not derive new treatments.
contextRestriction → roles.colors.accent
- forbiddenContexts: error-state, destructive-action
Stripe Purple is the brand identity color, not an alert color. Destructive states use stripe-red; warnings use stripe-orange. Reusing the brand purple for destruction breaks the established semantic mapping.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Stripe Purple (#635BFF) on Fog 0 reaches ~4.6:1 — at the AA threshold for normal text. Buttons using the purple as a fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600
Stripe's marketing surfaces use Söhne Book / Regular (400), Medium (500), and Semibold (600). Heavier weights appear in brand wordmarks only, not in body or display headings.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: stripe-white, stripe-fog-0, stripe-slate-100
- doesNotPairWith: stripe-magenta, stripe-pink
The brand pairs purple with neutrals (white, fog, slate). Magenta and pink are reserved for illustration / gradient surfaces and clash with the purple in adjacent UI placements.
Provenance
- Source: https://stripe.com/newsroom/brand-assets
- License:
Proprietary — All Rights Reserved - Attribution: Stripe, Inc. — visual identity captured from the deployed stylesheet on stripe.com and the Stripe Newsroom brand assets page. All Stripe marks, logos, and brand elements are subject to Stripe's Marks Usage Agreement at stripe.com/marks/legal.
- Imported:
2026-05-17 - Notes: Stripe's brand font is Söhne (sohne-var on stripe.com), licensed from Klim Type Foundry — not "Stripe Sans" as sometimes reported by third-party trackers. Söhne is a commercial proprietary face; this atom references Inter@1 as the open-source rendering substitute and notes the proprietary primary in this provenance block.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Stripe
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Stripe
A clear hierarchy in Stripe's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ stripe-purple #635BFF accent-hover
→ stripe-purple-pressed #533AFD background-dark
→ stripe-slate-100 #061B31 background-light
→ stripe-fog-0 #F6F9FC error
→ stripe-red #EA2261 primary
→ stripe-purple #635BFF primary-hover
→ stripe-purple-pressed #533AFD success
→ stripe-green #2CA25E surface-dark
→ stripe-slate-90 #0A2540 surface-light
→ stripe-white #FFFFFF text-primary-dark
→ stripe-white #FFFFFF text-primary-light
→ stripe-slate-90 #0A2540 warning
→ stripe-orange #E17A38 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from stripe)
Light mode (15 roles)
accent
→ stripe-purple accent-hover
→ stripe-purple-pressed background
→ stripe-fog-0 border
→ stripe-fog-2 error
→ stripe-red primary
→ stripe-purple primary-hover
→ stripe-purple-pressed success
→ stripe-green surface
→ stripe-white surface-elevated
→ stripe-white text-primary
→ stripe-slate-90 text-secondary
→ stripe-slate-50 text-tertiary
→ stripe-slate-30 warning
→ stripe-orange warning-hover
→ stripe-orange Dark mode (15 roles)
accent
→ stripe-purple accent-hover
→ stripe-purple-soft background
→ stripe-slate-100 border
→ stripe-slate-70 error
→ stripe-pink primary
→ stripe-purple primary-hover
→ stripe-purple-soft success
→ stripe-green surface
→ stripe-slate-90 surface-elevated
→ stripe-slate-70 text-primary
→ stripe-white text-secondary
→ stripe-fog-1 text-tertiary
→ stripe-slate-30 warning
→ stripe-orange warning-hover
→ stripe-orange Rules (7 typed constraints)
error · 5 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Stripe Slate 90 (#0A2540) on Fog 0 (#F6F9FC) is ~14:1; well above AA. White on Slate 100 (#061B31) is ~15:1. Both directions clear AA with substantial margin.
colorChoice roles.colors.primary allowed stripe-purple, stripe-purple-pressed forbidden stripe-purple-soft, stripe-magenta, stripe-pink Stripe Purple (#635BFF) is the signature brand color and the only token that may carry "primary action" semantics. stripe-purple-soft is a tinted-background variant; magenta and pink appear in illustration gradients only and must not be used as primary buttons or links.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, outlined, on-busy-photo Stripe's Marks Usage Agreement forbids modifying or altering the Stripe word mark "in any way" and prohibits use that implies endorsement. Apply the official monochrome variants on appropriate light/dark surfaces; do not derive new treatments.
contextRestriction roles.colors.accent forbiddenContexts error-state, destructive-action Stripe Purple is the brand identity color, not an alert color. Destructive states use stripe-red; warnings use stripe-orange. Reusing the brand purple for destruction breaks the established semantic mapping.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Stripe Purple (#635BFF) on Fog 0 reaches ~4.6:1 — at the AA threshold for normal text. Buttons using the purple as a fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 600 Stripe's marketing surfaces use Söhne Book / Regular (400), Medium (500), and Semibold (600). Heavier weights appear in brand wordmarks only, not in body or display headings.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith stripe-white, stripe-fog-0, stripe-slate-100 doesNotPairWith stripe-magenta, stripe-pink The brand pairs purple with neutrals (white, fog, slate). Magenta and pink are reserved for illustration / gradient surfaces and clash with the purple in adjacent UI placements.
Provenance
- Source
- https://stripe.com/newsroom/brand-assets
- License
Proprietary — All Rights Reserved- Attribution
- Stripe, Inc. — visual identity captured from the deployed stylesheet on stripe.com and the Stripe Newsroom brand assets page. All Stripe marks, logos, and brand elements are subject to Stripe's Marks Usage Agreement at stripe.com/marks/legal.
- Imported
2026-05-17- Notes
- Stripe's brand font is Söhne (sohne-var on stripe.com), licensed from Klim Type Foundry — not "Stripe Sans" as sometimes reported by third-party trackers. Söhne is a commercial proprietary face; this atom references Inter@1 as the open-source rendering substitute and notes the proprietary primary in this provenance block.