Design token diff

Showing changes between two snapshots of stripe.com

Before

Apr 12, 2026

View snapshot

After

Apr 24, 2026

View snapshot

Before

Apr 12, 2026

After

Apr 24, 2026

+86 added−21 removed

Colors

+44 added−2 removed17 unchanged

Typography

+23 added
+sohne-var, "SF Pro Display", sans-serif|16px|400sohne-var 16px / 400
+sohne-var, "SF Pro Display", sans-serif|10px|300sohne-var 10px / 300
+sohne-var, "SF Pro Display", sans-serif|11px|300sohne-var 11px / 300
+sohne-var, "SF Pro Display", sans-serif|10px|400sohne-var 10px / 400
+sohne-var, "SF Pro Display", sans-serif|9px|300sohne-var 9px / 300
+sohne-var, "SF Pro Display", sans-serif|14px|400sohne-var 14px / 400
+sohne-var, "SF Pro Display", sans-serif|14px|300sohne-var 14px / 300
+sohne-var, "SF Pro Display", sans-serif|11px|400sohne-var 11px / 400
+sohne-var, "SF Pro Display", sans-serif|12px|400sohne-var 12px / 400
+sohne-var, "SF Pro Display", sans-serif|26px|400sohne-var 26px / 400
+sohne-var, "SF Pro Display", sans-serif|8px|400sohne-var 8px / 400
+sohne-var, "SF Pro Display", sans-serif|48px|300sohne-var 48px / 300
+sohne-var, "SF Pro Display", sans-serif|9px|400sohne-var 9px / 400
+sohne-var, "SF Pro Display", sans-serif|16px|300sohne-var 16px / 300
+sohne-var, "SF Pro Display", sans-serif|26px|300sohne-var 26px / 300
+sohne-var, "SF Pro Display", sans-serif|8px|300sohne-var 8px / 300
+sohne-var, "SF Pro Display", sans-serif|13px|400sohne-var 13px / 400
+sohne-var, "SF Pro Display", sans-serif|18px|300sohne-var 18px / 300
+sohne-var, "SF Pro Display", sans-serif|32px|300sohne-var 32px / 300
+sohne-var, "SF Pro Display", sans-serif|22px|300sohne-var 22px / 300
+sohne-var, "SF Pro Display", sans-serif|15px|400sohne-var 15px / 400
+sohne-var, "SF Pro Display", sans-serif|12px|300sohne-var 12px / 300
+sohne-var, "SF Pro Display", sans-serif|56px|300sohne-var 56px / 300

Spacing

+16 added−4 removed16 unchanged
+-5px-5px
+normal 8pxnormal 8px
+normal 6pxnormal 6px
+normal 7pxnormal 7px
+12.5pxSpace 12.5px
+13pxSpace 13px
+13.5pxSpace 13.5px
+14pxSpace 14px
+15px15px
+16px16px
+18px18px
+20px20px
+24px24px
+32px32px
+40px40px
+80px80px
−0pxSpace 0px
−.05remSpace .05rem
−1pxSpace 1px
−1.25pxSpace 1.25px

Border Radius

+1 added−9 removed15 unchanged
+0Radius 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 0Radius var hds space core radius md var hds space core radius md 0 0
−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 0Radius var hds space core radius xs var hds space core radius xs 0 0

Shadows

+2 added−6 removed10 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)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
Back to stripe.com archive