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 added−84 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 added−13 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 added−1 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

Back to stripe.com archive