W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
PayPal
PayPal Holdings, Inc. is the global online payments platform that established the modern consumer-payments category. The brand is light-first, trust-leaning, and disciplined: a deep navy-blue wordmark next to the two-tone "PP" monogram on a white canvas. The signature gold "Pay with PayPal" button is one of the most-deployed brand elements in commerce. The voice is direct and consumer-facing — "fast, easy, secure" — built around reliability rather than flourish.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/paypal/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/paypal/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.
PayPal
PayPal Holdings, Inc. is the global online payments platform that established the modern consumer-payments category. The brand is light-first, trust-leaning, and disciplined: a deep navy-blue wordmark next to the two-tone "PP" monogram on a white canvas. The signature gold "Pay with PayPal" button is one of the most-deployed brand elements in commerce. The voice is direct and consumer-facing — "fast, easy, secure" — built around reliability rather than flourish.
Tags: fintech, payments, paypal, blue, light-first, consumer
Atoms
Palette
PayPal · [email protected] · Proprietary — All Rights Reserved
PayPal Holdings, Inc. corporate brand palette. PayPal's identity is carried by a tight, signature blue duotone — the deeper PayPal Blue (#003087) and the brighter PayPal Cobalt (#009CDE) — paired across the two-toned "PP" monogram and the wordmark. The brand canvas is light-first with a near-black ink for body text; the secondary PayPal Gold (#FFC439) drives the "Pay with PayPal" button across the merchant web.
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 |
|---|---|---|
paypal-blue |
PayPal Blue | #003087 |
paypal-cobalt |
PayPal Cobalt | #009CDE |
paypal-blue-deep |
PayPal Blue Deep | #001C64 |
paypal-gold |
PayPal Gold | #FFC439 |
paypal-gold-hover |
PayPal Gold Hover | #F2BB30 |
paypal-ink |
PayPal Ink | #2C2E2F |
paypal-graphite |
PayPal Graphite | #545D68 |
paypal-gray |
PayPal Gray | #9DA3A6 |
paypal-white |
PayPal White | #FFFFFF |
paypal-fog |
PayPal Fog | #F5F7FA |
paypal-divider |
PayPal Divider | #CBD2D6 |
paypal-canvas-dark |
PayPal Canvas Dark | #0F1419 |
paypal-surface-dark |
PayPal Surface Dark | #1C232B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
paypal-white |
#FFFFFF |
surface |
paypal-fog |
#F5F7FA |
surface-elevated |
paypal-white |
#FFFFFF |
text-primary |
paypal-ink |
#2C2E2F |
text-secondary |
paypal-graphite |
#545D68 |
text-tertiary |
paypal-gray |
#9DA3A6 |
primary |
paypal-blue |
#003087 |
primary-hover |
paypal-blue-deep |
#001C64 |
accent |
paypal-cobalt |
#009CDE |
accent-hover |
paypal-blue |
#003087 |
warning |
paypal-gold |
#FFC439 |
warning-hover |
paypal-gold-hover |
#F2BB30 |
error |
paypal-blue-deep |
#001C64 |
success |
paypal-cobalt |
#009CDE |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
paypal-canvas-dark |
#0F1419 |
surface |
paypal-surface-dark |
#1C232B |
surface-elevated |
paypal-surface-dark |
#1C232B |
text-primary |
paypal-white |
#FFFFFF |
text-secondary |
paypal-gray |
#9DA3A6 |
text-tertiary |
paypal-graphite |
#545D68 |
primary |
paypal-cobalt |
#009CDE |
primary-hover |
paypal-blue |
#003087 |
accent |
paypal-gold |
#FFC439 |
accent-hover |
paypal-gold-hover |
#F2BB30 |
warning |
paypal-gold |
#FFC439 |
warning-hover |
paypal-gold-hover |
#F2BB30 |
error |
paypal-blue |
#003087 |
success |
paypal-cobalt |
#009CDE |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
paypal-blue |
#003087 |
on-identity |
paypal-white |
#FFFFFF |
primary |
paypal-blue |
#003087 |
primary-hover |
paypal-blue-deep |
#001C64 |
accent |
paypal-cobalt |
#009CDE |
accent-hover |
paypal-blue |
#003087 |
mark |
paypal-blue |
#003087 |
mark-secondary |
paypal-cobalt |
#009CDE |
success |
paypal-cobalt |
#009CDE |
warning |
paypal-gold |
#FFC439 |
error |
paypal-blue-deep |
#001C64 |
text-primary-light |
paypal-ink |
#2C2E2F |
text-primary-dark |
paypal-white |
#FFFFFF |
text-secondary-light |
paypal-graphite |
#545D68 |
background-light |
paypal-white |
#FFFFFF |
background-dark |
paypal-canvas-dark |
#0F1419 |
surface-light |
paypal-fog |
#F5F7FA |
surface-dark |
paypal-surface-dark |
#1C232B |
divider |
paypal-divider |
#CBD2D6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.wordmark.fill
- allowed: paypal-blue, paypal-white, paypal-ink
- forbidden: paypal-cobalt, paypal-gold, paypal-blue-deep, paypal-gray
The PayPal wordmark renders only in PayPal Blue (#003087), in reversed white on dark surfaces, or in monochrome ink for print/embossed use. Cobalt is the monogram's front-P, not the wordmark fill; gold is reserved for the merchant button only.
colorChoice → logo.monogram
- allowed: paypal-blue, paypal-cobalt
- forbidden: paypal-gold, paypal-blue-deep
The "PP" monogram is a duotone composition: PayPal Blue back-P paired with PayPal Cobalt front-P. Single-color or off-brand variants violate the published mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant
PayPal's brand-center program forbids modifying the marks. Apply only PayPal-approved variants with the documented clearspace.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
PayPal Ink (#2C2E2F) on PayPal White (#FFFFFF) gives ~13:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
PayPal Blue (#003087) on white reaches ~13:1 — well above AA. The deep navy carries primary actions cleanly; this rule guards link usage so future palette additions cannot regress.
contextRestriction → roles.colors.warning
- forbiddenContexts: body-text, secondary-link, error-state
PayPal Gold (#FFC439) is reserved for the merchant "Pay with PayPal" button per PayPal's button-style spec. Using it as body color, link color, or for error states conflicts with its established merchant-button semantics.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces have an elevated trust requirement; AA is the floor on any new role pairing.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
PayPal Sans headlines on paypal.com and Brand Center surfaces sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts compromise the confident, trust-leaning voice; heavier cuts are outside the documented marketing kit.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: paypal-cobalt, paypal-white, paypal-fog
- doesNotPairWith: paypal-gold
The blue duotone (Blue + Cobalt) pairs cleanly with neutrals. Mixing the brand blue with the merchant gold on the same surface conflicts with the published button-style separation between corporate identity and merchant CTA.
Provenance
- Source: https://newsroom.paypal-corp.com/Brand-Center
- License:
Proprietary — All Rights Reserved - Attribution: PayPal Holdings, Inc. — PayPal, the PayPal wordmark, and the two-tone "PP" monogram are registered trademarks of PayPal Holdings, Inc. The signature blue duotone (#003087 + #009CDE) and the merchant gold (#FFC439) are documented across PayPal's Brand Center press kit. PayPal Sans is the proprietary corporate typeface; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: PayPal Sans is not publicly distributed. This atom references Inter for both heading and body roles and notes PayPal Sans as the proprietary primary in provenance. The signature gold button ("Pay with PayPal") is a regulated merchant-button color — its use in the wild is governed by PayPal's button-style spec.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by PayPal
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.
PayPal
A clear hierarchy in PayPal'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
→ paypal-cobalt #009CDE accent-hover
→ paypal-blue #003087 background-dark
→ paypal-canvas-dark #0F1419 background-light
→ paypal-white #FFFFFF divider
→ paypal-divider #CBD2D6 error
→ paypal-blue-deep #001C64 identity
→ paypal-blue #003087 mark
→ paypal-blue #003087 mark-secondary
→ paypal-cobalt #009CDE on-identity
→ paypal-white #FFFFFF primary
→ paypal-blue #003087 primary-hover
→ paypal-blue-deep #001C64 success
→ paypal-cobalt #009CDE surface-dark
→ paypal-surface-dark #1C232B surface-light
→ paypal-fog #F5F7FA text-primary-dark
→ paypal-white #FFFFFF text-primary-light
→ paypal-ink #2C2E2F text-secondary-light
→ paypal-graphite #545D68 warning
→ paypal-gold #FFC439 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from paypal)
Light mode (14 roles)
accent
→ paypal-cobalt accent-hover
→ paypal-blue background
→ paypal-white error
→ paypal-blue-deep primary
→ paypal-blue primary-hover
→ paypal-blue-deep success
→ paypal-cobalt surface
→ paypal-fog surface-elevated
→ paypal-white text-primary
→ paypal-ink text-secondary
→ paypal-graphite text-tertiary
→ paypal-gray warning
→ paypal-gold warning-hover
→ paypal-gold-hover Dark mode (14 roles)
accent
→ paypal-gold accent-hover
→ paypal-gold-hover background
→ paypal-canvas-dark error
→ paypal-blue primary
→ paypal-cobalt primary-hover
→ paypal-blue success
→ paypal-cobalt surface
→ paypal-surface-dark surface-elevated
→ paypal-surface-dark text-primary
→ paypal-white text-secondary
→ paypal-gray text-tertiary
→ paypal-graphite warning
→ paypal-gold warning-hover
→ paypal-gold-hover Rules (9 typed constraints)
error · 7 rules
colorChoice logo.wordmark.fill allowed paypal-blue, paypal-white, paypal-ink forbidden paypal-cobalt, paypal-gold, paypal-blue-deep, paypal-gray The PayPal wordmark renders only in PayPal Blue (#003087), in reversed white on dark surfaces, or in monochrome ink for print/embossed use. Cobalt is the monogram's front-P, not the wordmark fill; gold is reserved for the merchant button only.
colorChoice logo.monogram allowed paypal-blue, paypal-cobalt forbidden paypal-gold, paypal-blue-deep The "PP" monogram is a duotone composition: PayPal Blue back-P paired with PayPal Cobalt front-P. Single-color or off-brand variants violate the published mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant PayPal's brand-center program forbids modifying the marks. Apply only PayPal-approved variants with the documented clearspace.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA PayPal Ink (#2C2E2F) on PayPal White (#FFFFFF) gives ~13:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA PayPal Blue (#003087) on white reaches ~13:1 — well above AA. The deep navy carries primary actions cleanly; this rule guards link usage so future palette additions cannot regress.
contextRestriction roles.colors.warning forbiddenContexts body-text, secondary-link, error-state PayPal Gold (#FFC439) is reserved for the merchant "Pay with PayPal" button per PayPal's button-style spec. Using it as body color, link color, or for error states conflicts with its established merchant-button semantics.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces have an elevated trust requirement; AA is the floor on any new role pairing.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 PayPal Sans headlines on paypal.com and Brand Center surfaces sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts compromise the confident, trust-leaning voice; heavier cuts are outside the documented marketing kit.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith paypal-cobalt, paypal-white, paypal-fog doesNotPairWith paypal-gold The blue duotone (Blue + Cobalt) pairs cleanly with neutrals. Mixing the brand blue with the merchant gold on the same surface conflicts with the published button-style separation between corporate identity and merchant CTA.
Provenance
- Source
- https://newsroom.paypal-corp.com/Brand-Center
- License
Proprietary — All Rights Reserved- Attribution
- PayPal Holdings, Inc. — PayPal, the PayPal wordmark, and the two-tone "PP" monogram are registered trademarks of PayPal Holdings, Inc. The signature blue duotone (#003087 + #009CDE) and the merchant gold (#FFC439) are documented across PayPal's Brand Center press kit. PayPal Sans is the proprietary corporate typeface; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- PayPal Sans is not publicly distributed. This atom references Inter for both heading and body roles and notes PayPal Sans as the proprietary primary in provenance. The signature gold button ("Pay with PayPal") is a regulated merchant-button color — its use in the wild is governed by PayPal's button-style spec.