Design token diff

Showing changes between two snapshots of shopify.com

Before

Apr 10, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 10, 2026

After

May 7, 2026

+84 added−17 removed

Colors

+31 added−4 removed18 unchanged

Typography

+24 added−1 removed

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|16px|400NeueHaasGrotesk 16px / 400

+Inter-Variable, Helvetica, Arial, sans-serif|14px|400Inter-Variable 14px / 400

+Inter-Variable, Helvetica, Arial, sans-serif|16px|400Inter-Variable 16px / 400

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|96px|400NeueHaasGrotesk 96px / 400

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|18px|500NeueHaasGrotesk 18px / 500

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|14px|500NeueHaasGrotesk 14px / 500

+"Shopify Sans", Helvetica, Arial, sans-serif|14px|400

Spacing

+17 added−5 removed15 unchanged

+1.25remSpace 1.25rem

+1.5remSpace 1.5rem

+2remSpace 2rem

+2.5remSpace 2.5rem

+6px6px

+20px20px

+24px24px

Border Radius

+1 added−6 removed15 unchanged

+5pxRadius 5px

−3.40282e38pxRadius 3.40282e38px

−var(--radius-2xl)Radius var radius 2xl

−405pxRadius 405px

−var(--radius-lg)Radius var radius lg

−var(--radius-md)Radius var radius md

−var(--radius-xl)Radius var radius xl

Shadows

+11 added−1 removed1 unchanged

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.1) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px insetshadow-div.bg-[linear-gradient(0deg,#061518_20%,#0a2c30)].safari-specific:bg-none

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.03) 0px 0.929px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.929px, rgba(0, 0, 0, 0.1) 0px 1.858px 1.858px 0px, rgba(0, 0, 0, 0.1) 0px 3.717px 3.717px 0pxshadow-div.p-1.min-h-10

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12pxshadow-div.absolute.bg-white

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 1px 3px 0px, rgba(0, 0, 0, 0.2) 0px 5px 10px 0pxshadow-div.relative.flex

Back to shopify.com archive

Shopify Sans 14px / 400

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|20px|400NeueHaasGrotesk 20px / 400

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|55px|330NeueHaasGrotesk 55px / 330

+Inter-Variable, Helvetica, Arial, sans-serif|12px|400Inter-Variable 12px / 400

+Inter-Variable, Helvetica, Arial, sans-serif|18px|550Inter-Variable 18px / 550

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|20px|500NeueHaasGrotesk 20px / 500

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|48px|330NeueHaasGrotesk 48px / 330

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|14px|550NeueHaasGrotesk 14px / 550

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|32px|360NeueHaasGrotesk 32px / 360

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|18px|400NeueHaasGrotesk 18px / 400

+Inter-Variable, Helvetica, Arial, sans-serif|20px|450Inter-Variable 20px / 450

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|18px|600NeueHaasGrotesk 18px / 600

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|28px|500NeueHaasGrotesk 28px / 500

+"Shopify Sans", Helvetica, Arial, sans-serif|14px|700Shopify Sans 14px / 700

+"Shopify Sans", Helvetica, Arial, sans-serif|10px|400Shopify Sans 10px / 400

+Inter-Variable, Helvetica, Arial, sans-serif|16px|550Inter-Variable 16px / 550

+Inter-Variable, Helvetica, Arial, sans-serif|16px|420Inter-Variable 16px / 420

+NeueHaasGrotesk, Helvetica, Arial, sans-serif|70px|330NeueHaasGrotesk 70px / 330

−var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)|1em|400Code

+64px normal64px normal

+normal 16pxnormal 16px

−.015emSpace .015em

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px insetshadow-a.hidden.lg:inline-flex

+rgba(0, 0, 0, 0.25) 0px 10px 50px 0px, rgba(255, 255, 255, 0.25) 0px 0px 0px 1pxshadow-div#dux-privacy

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6pxshadow-button.fixed.bottom-[80px]

+rgba(0, 0, 0, 0.4) 0px 2px 6.7pxshadow-span.font-sans.text-white

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 1.5px 9px 0pxshadow-span.flex.items-center

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 71, 77, 0.4) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px 1px 0px 0pxshadow-div.flex.justify-start

+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(7, 13, 23) 0px 16px 24px 0pxshadow-a.grid.place-items-center

−var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)Shadow 1