Design token diff
Showing changes between two snapshots of wikipedia.com
Colors
+6 added−9 removed25 unchangedTypography
−12 removed4 unchanged−var(--font-family-monospace--fallback)|1.4rem|400Code
−var(--font-family-system-sans)|1.4rem|400Body
−var(--font-family-serif)|1.5rem|400Wikipedia25 Slogan
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|13px|400-apple-system 13px / 400
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|14px|400-apple-system 14px / 400
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|16px|700-apple-system 16px / 700
−
Spacing
+6 added−6 removed26 unchanged+0.125remSpace 0.125rem
+0.25remSpace 0.25rem
+0.5remSpace 0.5rem
+0.75remSpace 0.75rem
+357.203px357.203px
+492.203px492.203px
−.1remSpace .1rem
Border Radius
+5 added−5 removed11 unchanged+0 2px 2px 0Radius 0 2px 2px 0
+2px 0 0 2pxRadius 2px 0 0 2px
+#f8f9faRadius f8f9fa
+#36cRadius 36c
+#3056a9Radius 3056a9
−var(--border-radius-base)Radius var border radius base
−0 var(--border-radius-base) var(--border-radius-base) 0Radius 0 var border radius base var border radius base 0
Shadows
+12 added−12 removed+inset 0 0 0 1px #6485d1Shadow 1
+inset 0 0 0 1px #6485d1,inset 0 0 0 2px #000Shadow 2
+inset 0 0 0 1px #000Shadow 3
+0 -1px 0 #000Shadow 4
+inset 0 0 0 1px--box-shadow-inset-small
+inset 0 0 0 2px--box-shadow-inset-medium
+inset 0 -2px 0 0--box-shadow-inset-medium-vertical
+
"Linux Libertine", "Hoefler Text", Georgia, "Times New Roman", Times, serif|10px|700
Linux Libertine 10px / 700
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|14px|700-apple-system 14px / 700
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|16px|400-apple-system 16px / 400
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|13px|700-apple-system 13px / 700
−sans-serif|10px|400sans-serif 10px / 400
−-apple-system, "system-ui", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif|12px|400-apple-system 12px / 400
−
.78rem
Space .78rem
−var(--border-radius-base) 0 0 var(--border-radius-base)Radius var border radius base 0 0 var border radius base
0 0 0 1px
--box-shadow-outset-small
+0 -1px 0 0--box-shadow-outset-small-top
+0 1px 0 0--box-shadow-outset-small-bottom
+-1px 0 0 0--box-shadow-outset-small-start
+0 4px 4px 0--box-shadow-outset-medium-below
−var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus)Shadow 1
−var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus),var(--box-shadow-inset-medium) var(--box-shadow-color-inverted)Shadow 2
−var(--box-shadow-inset-small) var(--box-shadow-color-inverted)Shadow 3
−var(--box-shadow-drop-medium)Shadow 4
−0 -1px 0 var(--box-shadow-color-inverted)Shadow 5
−inset 0 0 0 1px var(--box-shadow-color-progressive--focus,#36c)Shadow 6
−inset 0 0 0 1px var(--box-shadow-color-destructive--focus,#36c)Shadow 7
−inset 0 0 0 1px var(--box-shadow-color-progressive--focus,#36c),inset 0 0 0 2px var(--box-shadow-color-inverted,#fff)Shadow 8
−inset 0 0 0 1px var(--box-shadow-color-destructive--focus,#36c),inset 0 0 0 2px var(--box-shadow-color-inverted,#fff)Shadow 9
−0 4px 8px 0 var(--box-shadow-color-alpha-base,rgba(0,0,0,.06)),0 0 16px 0 var(--box-shadow-color-alpha-base,rgba(0,0,0,.06))Shadow 10
−inset 0 0 0 1px var(--box-shadow-color-progressive--active,#233566)Shadow 11
−0 4px 8px 0 var(--box-shadow-color-alpha-base),0 0 16px 0 var(--box-shadow-color-alpha-base)Shadow 12