Design token diff

Showing changes between two snapshots of stripe.com

Before

Apr 4, 2026

View snapshot

After

Apr 12, 2026

View snapshot

Before

Apr 4, 2026

After

Apr 12, 2026

+2 added84 removed

Colors

45 removed19 unchanged

Typography

17 removed
var(--hds-font-family)|max(min(var(--lang-font-flex),var(--lang-font-max)),var(--lang-font-min))|400H1 Hero Section
var(--hds-font-family)|14px|var(--hds-font-weight-normal)Agent Toolkit Graphic 5
var(--hds-font-family)|12px|var(--hds-font-weight-normal)Agentic Commerce Protocol 3
var(--hds-font-family)|12px|400Agentic Commerce Protocol 4
var(--hds-font-family)|12px|var(--hds-font-weight-bold)Agentic Commerce Protocol 5
var(--hds-font-family)|14px|var(--hds-font-weight-bold)Agent Toolkit Graphic 2
var(--hds-font-family-code)|13px|400Shared Payment Tokens
var(--hds-font-family)|16px|var(--hds-font-weight-bold)Agent Toolkit Graphic
var(--hds-font-family)|13px|var(--hds-font-weight-normal)Agent Toolkit Graphic 3
var(--hds-font-family)|15px|var(--hds-font-weight-bold)Agent Toolkit Graphic 4
var(--hds-font-family)|9px|var(--hds-font-weight-normal)Agentic Commerce Ai 5
var(--hds-font-family)|10px|var(--hds-font-weight-normal)Agentic Commerce Checkout 2
var(--hds-font-family)|8px|var(--hds-font-weight-bold)Agentic Commerce Ai 2
var(--hds-font-family)|11px|var(--hds-font-weight-normal)Agentic Commerce Ai 4
var(--hds-font-family)|11px|var(--hds-font-weight-bold)Agentic Commerce Checkout
var(--hds-font-family)|10px|var(--hds-font-weight-bold)Agentic Commerce Checkout 4
var(--hds-font-family)|8px|var(--hds-font-weight-normal)Agentic Commerce Checkout 5

Spacing

+1 added13 removed19 unchanged
+.05remSpace .05rem
12.5pxSpace 12.5px
13pxSpace 13px
13.5pxSpace 13.5px
14pxSpace 14px
14.5pxSpace 14.5px
15pxSpace 15px
16pxSpace 16px
18pxSpace 18px
20pxSpace 20px
22pxSpace 22px
24pxSpace 24px
26pxSpace 26px
28pxSpace 28px

Border Radius

+1 added1 removed23 unchanged
+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
calc(var(--hds-space-core-radius-md) / var(--carousel-scale)) /var(--hds-space-core-radius-md)Radius calc var hds space core radius md var carousel scale var hds space core radius md

Shadows

8 removed16 unchanged
0 27.478px 41.217px 0 rgba(50,50,93,.12),0 16.487px 32.973px 0 rgba(0,0,0,.07)Shadow 17
0 1.694px 3.388px 0 rgba(50,50,93,.2),0 1.016px 1.355px 0 rgba(125,138,161,.09)Shadow 18
0 12.431px 24.862px -11.418px rgba(50,50,93,.25),0 7.458px 14.917px -7.458px rgba(0,0,0,.1)Shadow 19
0 16.119px 32.239px -14.806px rgba(50,50,93,.25),0 9.672px 19.343px -9.672px rgba(0,0,0,.1)Shadow 20
inset 0 -1.854px 4.634px 0 rgba(10,37,64,.22)Shadow 21
0 13.5px 27px -12.4px rgba(50,50,93,.12),0 8.1px 16.2px -8.1px rgba(0,0,0,.05)Shadow 22
var(--agentic-box-shadow)Shadow 23
0 15.931px 31.863px rgba(50,50,93,.12)Shadow 24