Home / Browse / paypal.com / Diff Design token diff Showing changes between two snapshots of paypal.com
Colors +10 added −2 removed 11 unchanged
Typography +19 added −11 removed 4 unchanged + Plain, "Helvetica Neue", Arial, sans-serif|16px|400 Plain 16px / 400
+ "PayPal Pro", "Helvetica Neue", Arial, sans-serif|17.1429px|900 PayPal Pro 17.1429px / 900
+ Plain, Helvetica, Arial|16px|400 Plain 16px / 400
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|16px|400 PayPal Pro 16px / 400
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|48.2857px|900 PayPal Pro 48.2857px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|20px|900 PayPal Pro 20px / 900
Spacing +18 added −6 removed 14 unchanged + 0.5rem Space 0.5rem
+ .5625rem Space .5625rem
+ .625em Space .625em
+ 8px 8px
+ 12px 12px
+ 13.5714px 13.5714px
+ 16px 16px
+
Border Radius +1 added −9 removed 15 unchanged + 6rem Radius 6rem
− var(--inline-button-border-radius) Radius var inline button border radius
− var(--media-frame-border-radius) Radius var media frame border radius
− var(--border-radius, 1.5rem) Radius var border radius 1.5rem
− var(--indicator-border-radius) Radius var indicator border radius
− 3.5rem Radius 3.5rem
− 2rem
Shadows +6 added −10 removed 6 unchanged + #0070e0 0 0 0 .1875rem,rgba(16, 114, 235, .16) 0 0 0 .5625rem Shadow 4
+ 0 0 0 .375rem rgba(16, 114, 235, .16) Shadow 8
+ 0 0 .375rem rgba(16, 114, 235, .16) Shadow 9
+ 0 0 0 .125rem rgba(16, 114, 235, .16) Shadow 10
+ 0 calc(-.625rem * calc(1 / calc(0 * (1 - .77) + .77))) 0 calc(.625rem * calc(1 / calc(0 * (1 - .77) + .77))) #fff Shadow 11
+ 0 calc(.625rem * calc(1 / calc(0 * (1 - .77) + .77))) 0 calc(.625rem * calc(1 / calc(0 * (1 - .77) + .77))) #fff Shadow 12
−
+
Plain, Helvetica, Arial|14.5714px|400
Plain 14.5714px / 400
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|18px|900 PayPal Pro 18px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|69px|900 PayPal Pro 69px / 900
+ Plain, Helvetica, Arial|17.1429px|400 Plain 17.1429px / 400
+ Plain, Helvetica, Arial|20.3571px|400 Plain 20.3571px / 400
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|14.5714px|900 PayPal Pro 14.5714px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|99.3571px|900 PayPal Pro 99.3571px / 900
+ Plain, Helvetica, Arial|12.8571px|400 Plain 12.8571px / 400
+ Plain, Helvetica, Arial|24px|400 Plain 24px / 400
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|144.214px|900 PayPal Pro 144.214px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|57.6429px|900 PayPal Pro 57.6429px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|28.8214px|900 PayPal Pro 28.8214px / 900
+ "PayPal Pro", "Century Gothic", Helvetica, Arial, sans-serif|20.3571px|900 PayPal Pro 20.3571px / 900
− var(--font-family-strong)|.875rem|var(--font-weight-strong) Badge Data Ppui
− var(--inline-play-button-font-family)|var(--inline-play-button-font-size)|var(--inline-play-button-font-weight) Inline Play Button
− var(--button-font-family)|var(--button-font-size)|var(--button-font-weight) Body Button Size
− var(--inline-button-font-family)|var(--inline-button-font-size)|var(--inline-button-font-weight) Inline Button
− var(--font-family-base)|.5em|var(--font-weight-base) Heading Text Style
− var(--glnv-font-family-headline)|clamp(var(--glnv-font-size-title-size-min),.5625rem + 1.17188vw,var(--glnv-font-size-title-size-max))|var(--glnv-font-weight-headline) Glnv Country Group 2
− var(--glnv-font-family-body-small)|clamp(var(--glnv-font-size-body-small-size-min),.732143rem + .223214vw,var(--glnv-font-size-body-small-size-max))|var(--glnv-font-weight-body-small) Glnv Tab Controller
− var(--glnv-font-family-body)|var(--glnv-font-size-body-size-min)|var(--glnv-font-weight-body-normal) Glnv Country Group
− var(--glnv-font-family-body-small)|var(--glnv-font-size-body-small-size-min)|var(--glnv-font-weight-body-small) Glnv Country List
− var(--glnv-font-family-caption)|var(--glnv-font-size-caption)|var(--glnv-font-weight-caption) Glnv Country List 2
− var(--glnv-font-family-base)|var(--glnv-header-font-size)|var(--glnv-font-weight-strong) Gn Header 1hl90
22.8496px
22.8496px
+ clamp(.5rem,-.29999999999999993rem + 1.25vw,1.2rem) Space clamp .5rem .29999999999999993rem 1.25vw 1.2rem
+ calc(-1*clamp(.5rem,-.29999999999999993rem + 1.25vw,1.2rem) Space calc 1 clamp .5rem .29999999999999993rem 1.25vw 1.2rem
+ calc(-1*min(max(.5rem,-.29999999999999993rem + 1.25vw) Space calc 1 min max .5rem .29999999999999993rem 1.25vw
− calc(var(--glnv-header-btn-hover-size-increase-by, 0px) Space calc var glnv header btn hover size increase by 0px
− var(--glnv-header-btn-hover-size-increase-by, 0px) Space var glnv header btn hover size increase by 0px
− calc(.3125rem + var(--glnv-header-btn-hover-size-increase-by, 0px) Space calc .3125rem var glnv header btn hover size increase by 0px
Radius 2rem
− var(--border-radius) Radius var border radius
− var(--pricing-card-border-radius) Radius var pricing card border radius
var(--style-focus-color, #0070e0) 0 0 0 .1875rem,var(--style-focus-shadow-color, rgba(16, 114, 235, .16)) 0 0 0 .5625rem
Shadow 4
− 0 0 0 .375rem var(--style-focus-shadow-color) Shadow 6
− var(--media-control-focus-box-shadow) Shadow 7
− 0 0 0 .375rem var(--seg-style-focus-shadow--color, rgba(16, 114, 235, .16)) Shadow 10
− 0 calc(-.625rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) 0 calc(.625rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) var(--component-hp-hero-featured-stack-color-device-frame, #fff) Shadow 11
− 0 calc(.625rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) 0 calc(.625rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) var(--component-hp-hero-featured-stack-color-device-frame, #fff) Shadow 12
− 0 calc(-1rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) 0 calc(1rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) var(--component-hp-hero-featured-stack-color-device-frame, #fff) Shadow 13
− 0 calc(1rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) 0 calc(1rem * calc(1 / calc(var(--phone-frame-scale-progress-factor, 0) * (1 - var(--initial-phone-from-scale, .77)) + var(--initial-phone-from-scale, .77)))) var(--component-hp-hero-featured-stack-color-device-frame, #fff) Shadow 14
− 20px 10px 40px #00000014 Shadow 15
− 0 .25rem 1rem #00000026 Shadow 16