Design token diff
Showing changes between two snapshots of society6.com
Colors
+5 added−13 removed8 unchangedTypography
+8 added−15 removed+greycliff-cf, Arial, sans-serif|14px|400greycliff-cf 14px / 400
+greycliff-cf, Arial, sans-serif|12px|700greycliff-cf 12px / 700
+greycliff-cf, Arial, sans-serif|18px|400greycliff-cf 18px / 400
+greycliff-cf, Arial, sans-serif|18px|700greycliff-cf 18px / 700
+greycliff-cf, Arial, sans-serif|12px|400greycliff-cf 12px / 400
+greycliff-cf, Arial, sans-serif|16px|600greycliff-cf 16px / 600
+greycliff-cf, Arial, sans-serif|10px|700greycliff-cf 10px / 700
Spacing
+17 added−5 removed15 unchanged+.4375remSpace .4375rem
+0.5remSpace 0.5rem
+.5remSpace .5rem
+6pxSpace 6px
+8pxSpace 8px
+9px9px
+12px12px
+
Border Radius
+11 added−19 removed5 unchanged+0pxRadius 0px
+100pxRadius 100px
+32pxRadius 32px
+1remRadius 1rem
+0.2remRadius 0.2rem
+inheritRadius inherit
+0px 0px 0 0Radius 0px 0px 0 0
Shadows
+7 added−11 removed5 unchanged+0 0 0 0.1em rgb(251 250 246 / 1.0)Shadow 1
+0px 4px 20px rgb(0 0 0 / 0.15)--shadow-drawer
+0 0 0 1px rgb(191 191 191 / 1.0)--input-box-shadow
+0 0 0 calc(1px + 0.5px) rgb(191 191 191 / 1.0)--input-box-shadow-focus
+0 0 10px rgb(0 0 0 / 1.0)Shadow 8
+0 0 0 1px rgb(0 0 0 / 0.05)Shadow 9
+0 2px 5px rgb(0 0 0 / 0.08)Shadow 11
+essonnes-headline, Arial, sans-serif|72px|400essonnes-headline 72px / 400
−var(--font-paragraph--family)|var(--font-paragraph--size)|var(--font-paragraph--weight)Body
−var(--font-h1--family)|var(--font-h1--size)|var(--font-h1--weight)H1
−var(--font-h2--family)|var(--font-h2--size)|var(--font-h2--weight)H2
−var(--font-h3--family)|var(--font-h3--size)|var(--font-h3--weight)H3
−var(--font-h4--family)|var(--font-h4--size)|var(--font-h4--weight)H4
−var(--font-h5--family)|var(--font-h5--size)|var(--font-h5--weight)H5
−var(--font-h6--family)|var(--font-h6--size)|var(--font-h6--weight)H6
−var(--font-paragraph--family)|var(--font-size--xs)|400Product Grid View
−var(--font-paragraph--family)|var(--font-paragraph--size)|400Button Unstyled
−var(--font-paragraph--family)|var(--font-size--body-md)|400Show More Label
−var(--font-body--family)|var(--font-size--sm)|700Shop By Room
−var(--font-paragraph--family)|clamp(var(--cart-font-size--2xs),.7lh,var(--cart-font-size--xs))|400Cart Title Cart
−var(--font-family)|var(--font-size--md)|var(--font-weight)Header Logo
−var(--menu-top-level-font-family)|var(--menu-top-level-font-size)|var(--menu-top-level-font-weight)Menu List Link
−var(--menu-child-font-family)|var(--menu-child-font-size)|var(--menu-child-font-weight)Mega Menu Link
15px
15px
−0.0175remSpace 0.0175rem
+
9999px
Radius 9999px
+624.9375remRadius 624.9375rem
−var(--style-border-radius-buttons-primary)Radius var style border radius buttons primary
−var(--style-border-radius-inputs)Radius var style border radius inputs
−var(--style-border-radius-popover)Radius var style border radius popover
−var(--style-border-radius-buttons-secondary)Radius var style border radius buttons secondary
−var(--media-radius)Radius var media radius
−var(--variant-picker-swatch-radius)Radius var variant picker swatch radius
−var(--border-radius)Radius var border radius
−var(--checkbox-border-radius)Radius var checkbox border radius
−var(--style-border-radius-lg)Radius var style border radius lg
−var(--style-border-radius-buttons)Radius var style border radius buttons
−calc(var(--size))Radius calc var size
−var(--style-border-radius-50)Radius var style border radius 50
−var(--style-border-radius-xs)Radius var style border radius xs
−var(--shopify-accelerated-checkout-button-border-radius, 0px)Radius var shopify accelerated checkout button border radius 0px
−var( --shopify-accelerated-checkout-button-border-radius, inherit )Radius var shopify accelerated checkout button border radius inherit
−var(--shopify-accelerated-checkout-button-border-radius, 4px)Radius var shopify accelerated checkout button border radius 4px
−var(--search-border-radius)Radius var search border radius
−var(--search-border-radius) var(--search-border-radius) 0 0Radius var search border radius var search border radius 0 0
−var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0Radius var style border radius inputs var style border radius inputs 0 0
−0 0 0 var(--focus-outline-offset) var(--color-background)Shadow 1
−var(--shadow-popover)Shadow 2
−inset 0 0 0 var(--button-border-width) var(--button-border-color)Shadow 3
−var(--input-box-shadow)Shadow 4
−var(--input-box-shadow-focus)Shadow 5
−0 0 10px var(--color-shadow)Shadow 9
−0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5))Shadow 10
−var(--blurred-reflection-box-shadow)Shadow 12
−0 2px 5px rgb(0 0 0 / var(--opacity-8))Shadow 13
−var(--shadow-drawer)Shadow 14
−0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color)Shadow 16