Design token diff
Showing changes between two snapshots of shopify.com
+30 added−34 removedpw@1.58.2
Colors
+4 added−5 removed44 unchangedTypography
+21 added−24 removed+Shopify-Inter, Helvetica, Arial, sans-serif|16px|400Shopify-Inter 16px / 400
+Shopify-Inter, Helvetica, Arial, sans-serif|14px|420Shopify-Inter 14px / 420
+Shopify-Inter, Helvetica, Arial, sans-serif|16px|420Shopify-Inter 16px / 420
+Inter, Helvetica, Arial, sans-serif|12px|200Inter 12px / 200
+Shopify-Inter, Helvetica, Arial, sans-serif|20px|450Shopify-Inter 20px / 450
+Shopify-Inter, Helvetica, Arial, sans-serif|18px|400Shopify-Inter 18px / 400
+Shopify-Inter, Helvetica, Arial, sans-serif|56px|330
Spacing
+2 added−2 removed30 unchanged+40px normal40px normal
+69.375px69.375px
−1.25remSpace 1.25rem
−-8px-8px
Border Radius
+1 added−1 removed15 unchanged+inheritRadius inherit
−30pxRadius 30px
Shadows
+2 added−2 removed10 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, rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0pxshadow-a.self-center.overflow-hidden
+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(7, 13, 23, 0.1) 0px 16px 24px 0pxshadow-a.grid.place-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(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
Shopify-Inter 56px / 330
+Shopify-Inter, Helvetica, Arial, sans-serif|12px|420Shopify-Inter 12px / 420
+Shopify-Inter, Helvetica, Arial, sans-serif|44px|330Shopify-Inter 44px / 330
+Shopify-Inter, Helvetica, Arial, sans-serif|14px|500Shopify-Inter 14px / 500
+Shopify-Inter, Helvetica, Arial, sans-serif|16px|550Shopify-Inter 16px / 550
+Shopify-Inter, Helvetica, Arial, sans-serif|20px|400Shopify-Inter 20px / 400
+Shopify-Inter, Helvetica, Arial, sans-serif|24px|400Shopify-Inter 24px / 400
+Shopify-Inter, Helvetica, Arial, sans-serif|18px|550Shopify-Inter 18px / 550
+Shopify-Inter, Helvetica, Arial, sans-serif|18px|600Shopify-Inter 18px / 600
+Inter, Helvetica, Arial, sans-serif|14px|700Inter 14px / 700
+Inter, Helvetica, Arial, sans-serif|10px|200Inter 10px / 200
+Shopify-Inter, Helvetica, Arial, sans-serif|96px|300Shopify-Inter 96px / 300
+Shopify-Inter, Helvetica, Arial, sans-serif|56px|300Shopify-Inter 56px / 300
+Shopify-Inter, Helvetica, Arial, sans-serif|64px|330Shopify-Inter 64px / 330
+Shopify-Inter, Helvetica, Arial, sans-serif|13px|420Shopify-Inter 13px / 420
−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|400Shopify 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