Home / Browse / stripe.com / Diff Design token diff Showing changes between two snapshots of stripe.com
Colors +44 added −2 removed 17 unchanged
Typography +23 added + sohne-var, "SF Pro Display", sans-serif|16px|400 sohne-var 16px / 400
+ sohne-var, "SF Pro Display", sans-serif|10px|300 sohne-var 10px / 300
+ sohne-var, "SF Pro Display", sans-serif|11px|300 sohne-var 11px / 300
+ sohne-var, "SF Pro Display", sans-serif|10px|400 sohne-var 10px / 400
+ sohne-var, "SF Pro Display", sans-serif|9px|300 sohne-var 9px / 300
+ sohne-var, "SF Pro Display", sans-serif|14px|400 sohne-var 14px / 400
+ sohne-var, "SF Pro Display", sans-serif|14px|300 sohne-var 14px / 300
Spacing +16 added −4 removed 16 unchanged + -5px -5px
+ normal 8px normal 8px
+ normal 6px normal 6px
+ normal 7px normal 7px
+ 12.5px Space 12.5px
+ 13px Space 13px
+ 13.5px Space 13.5px
+
Border Radius +1 added −9 removed 15 unchanged + 0 Radius var navigation border radius
− var(--hds-space-button-radius-lg) Radius var hds space button radius lg
− var(--hds-space-core-radius-md) Radius var hds space core radius md
− var(--navigation-border-radius) Radius var navigation border radius
− var(--hds-space-core-radius-sm) Radius var hds space core radius sm
− var(--hds-space-core-radius-md) var(--hds-space-core-radius-md) 0 0 Radius var hds space core radius md var hds space core radius md 0 0
Shadows +2 added −6 removed 10 unchanged + var(--hds-shadow-md-top-offset-x,0) var(--hds-shadow-md-top-offset-y,6px) var(--hds-shadow-md-top-blur,22px) var(--hds-shadow-md-top-spread,0) var(--hds-color-shadow-md-top,rgba(0,55,112,.1)),var(--hds-shadow-md-bottom-offset-x,0) var(--hds-shadow-md-bottom-offset-y,4px) var(--hds-shadow-md-bottom-blur,8px) var(--hds-shadow-md-bottom-spread,0) var(--hds-color-shadow-md-bottom,rgba(0,59,137,.02)) Shadow 3
+ 0px 16px 32px rgba(50,50,93,.12) Shadow 5
− var(--hds-shadow-md) Shadow 3
− var(--hds-canary-ui-shadow) Shadow 5
− 0 2px 5px 0 rgba(0,0,0,.1) Shadow 13
− 0 20.417px 30.625px -20.417px rgba(50,50,93,.25),0 12.25px 24.5px -12.25px rgba(0,0,0,.1)
+
sohne-var, "SF Pro Display", sans-serif|11px|400
sohne-var 11px / 400
+ sohne-var, "SF Pro Display", sans-serif|12px|400 sohne-var 12px / 400
+ sohne-var, "SF Pro Display", sans-serif|26px|400 sohne-var 26px / 400
+ sohne-var, "SF Pro Display", sans-serif|8px|400 sohne-var 8px / 400
+ sohne-var, "SF Pro Display", sans-serif|48px|300 sohne-var 48px / 300
+ sohne-var, "SF Pro Display", sans-serif|9px|400 sohne-var 9px / 400
+ sohne-var, "SF Pro Display", sans-serif|16px|300 sohne-var 16px / 300
+ sohne-var, "SF Pro Display", sans-serif|26px|300 sohne-var 26px / 300
+ sohne-var, "SF Pro Display", sans-serif|8px|300 sohne-var 8px / 300
+ sohne-var, "SF Pro Display", sans-serif|13px|400 sohne-var 13px / 400
+ sohne-var, "SF Pro Display", sans-serif|18px|300 sohne-var 18px / 300
+ sohne-var, "SF Pro Display", sans-serif|32px|300 sohne-var 32px / 300
+ sohne-var, "SF Pro Display", sans-serif|22px|300 sohne-var 22px / 300
+ sohne-var, "SF Pro Display", sans-serif|15px|400 sohne-var 15px / 400
+ sohne-var, "SF Pro Display", sans-serif|12px|300 sohne-var 12px / 300
+ sohne-var, "SF Pro Display", sans-serif|56px|300 sohne-var 56px / 300
14px
Space 14px
−
0 0 var(--hds-space-core-radius-md) var(--hds-space-core-radius-md)
Radius 0 0 var hds space core radius md var hds space core radius md
− calc(var(--hds-space-core-radius-md) / var(--carousel-item-hover-scale, 1)) /var(--hds-space-core-radius-md) Radius calc var hds space core radius md var carousel item hover scale 1 var hds space core radius md
− var(--hds-space-core-radius-xs) Radius var hds space core radius xs
− var(--hds-space-core-radius-xs) var(--hds-space-core-radius-xs) 0 0 Radius var hds space core radius xs var hds space core radius xs 0 0
Shadow 14
− 0 42.043px 84.087px 0 hsla(0,0%,9%,.08),0 12.613px 29.43px 0 hsla(0,0%,9%,.08),0 4.204px 12.613px 0 hsla(0,0%,9%,.12) Shadow 15
− 0 30px 45px -30px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.1) Shadow 16