shopify.comwoocommerce.com

0shared+0in woocommerce.com−121in shopify.com

Audit

0% token overlap

shopify.com and woocommerce.com have 0% token overlap across colors, typography, spacing, radius, and shadows after normalization (lab/oklab to hex, var() resolution, !important stripping, rem/em to px conversion at 16 px base). They share 0 token values; 121 are unique to shopify.com and 0 are unique to woocommerce.com. Source: UI Archive token diff, computed from public CSS at shopify.com and woocommerce.com.

· shopify.com and woocommerce.com share no exact token values after normalization.
· shopify.com ships a richer type scale than woocommerce.com.

Machine-readable

No snapshot found for woocommerce.com. Archive it first from the home page.

Colors

−49·0 shared·+0

Only in shopify.com

oklch(70.5% .213 47.604)only A

oklch(79.5% .184 86.047)only A

oklch(72.3% .219 149.579)only A

oklch(62.3% .214 259.815)only A

oklch(82.7% .119 306.383)only A

oklch(62.7% .265 303.9)

Try another comparison

Pick two websites and see how their design tokens stack up.

New comparison

Typography

−24·0 shared·+0

shopify.com

NeueHaasGrotesk

16px · 400

only A

Inter-Variable

14px · 400

only A

Inter-Variable

16px · 400

only A

NeueHaasGrotesk

96px · 400

only A

NeueHaasGrotesk

18px · 500

only A

NeueHaasGrotesk

14px · 500

only A

Shopify Sans

14px · 400

only A

NeueHaasGrotesk

20px · 400

only A

NeueHaasGrotesk

55px · 330

only A

Inter-Variable

12px · 400

only A

Inter-Variable

18px · 550

only A

NeueHaasGrotesk

20px · 500

only A

NeueHaasGrotesk

48px · 330

only A

NeueHaasGrotesk

14px · 550

only A

NeueHaasGrotesk

32px · 360

only A

NeueHaasGrotesk

18px · 400

only A

Inter-Variable

20px · 450

only A

NeueHaasGrotesk

18px · 600

only A

NeueHaasGrotesk

28px · 500

only A

Shopify Sans

14px · 700

only A

Shopify Sans

10px · 400

only A

Inter-Variable

16px · 550

only A

Inter-Variable

16px · 420

only A

NeueHaasGrotesk

70px · 330

only A

woocommerce.com

Shadows

−12·0 shared·+0

shopify.com

0 2px 6.7px #0006only A

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 insetonly A

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 0pxonly A

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 -12pxonly A

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 0pxonly A

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 insetonly A

rgba(0, 0, 0, 0.25) 0px 10px 50px 0px, rgba(255, 255, 255, 0.25) 0px 0px 0px 1pxonly A

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 -6pxonly A

rgba(0, 0, 0, 0.4) 0px 2px 6.7pxonly A

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 0pxonly A

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 0pxonly A

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 0pxonly A

woocommerce.com

shopify.comwoocommerce.com

Audit

Colors

Try another comparison

Typography

Spacing

Border Radius

Shadows