Design token diff

Showing changes between two snapshots of css-tricks.com

Before

Apr 10, 2026

View snapshot

After

Apr 28, 2026

View snapshot

Before

Apr 10, 2026

After

Apr 28, 2026

+80 added−54 removed

Colors

+42 added−24 removed4 unchanged

Typography

+9 added−1 removed15 unchanged

+dashicons|20px|400Dashicons

+Blanco, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16px|400Blanco 16px / 400

+SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace|16px|400SFMono-Regular 16px / 400

+Blanco, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16px|700Blanco 16px / 700

+"MD Primer Bold", Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif|20.8px|800MD Primer Bold 20.8px / 800

+"MD Primer Bold", Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif|10.56px|700MD Primer Bold 10.56px / 700

+"MD Primer Bold", Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif|31.36px|800MD Primer Bold 31.36px / 800

+Blanco, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16.8px|400Blanco 16.8px / 400

+"MD Primer Bold", Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif|12.8px|500MD Primer Bold 12.8px / 500

−Blanco, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol|.75rem|400Interlude

Spacing

+16 added−4 removed16 unchanged

+-130px-130px

+-12px-12px

+-1px-1px

+.15emSpace .15em

+.2525remSpace .2525rem

+.3emSpace .3em

+.31remSpace .31rem

+3.2px3.2px

+4.5px4.5px

+7pxSpace 7px

+10.56px10.56px

+16px16px

+21px21px

+24px24px

+32px32px

+48px48px

−1pxSpace 1px

−0.5emSpace 0.5em

−.5emSpace .5em

−.5remSpace .5rem

Border Radius

+4 added−12 removed12 unchanged

+10px 0 0 10pxRadius 10px 0 0 10px

+0 10px 10px 0Radius 0 10px 10px 0

+1.3pxRadius 1.3px

+2.6pxRadius 2.6px

−15pxRadius 15px

−1remRadius 1rem

−12pxRadius 12px

−0 2px 2px 0Radius 0 2px 2px 0

−var(--gf-local-radius)Radius var gf local radius

−var(--gf-ctrl-radius)Radius var gf ctrl radius

−var(--gf-ctrl-textarea-radius)Radius var gf ctrl textarea radius

−var(--gf-ctrl-radio-check-radius)Radius var gf ctrl radio check radius

−var(--gf-ctrl-multiselect-selected-item-radius)Radius var gf ctrl multiselect selected item radius

−var(--gf-ctrl-select-dropdown-radius)Radius var gf ctrl select dropdown radius

−var(--gf-ctrl-file-prog-bar-radius)Radius var gf ctrl file prog bar radius

−var(--gf-ctrl-date-picker-radius)Radius var gf ctrl date picker radius

Shadows

+9 added−13 removed3 unchanged

+1px 1px 2px #aaaShadow 4

+2px 2px 1px #eeeShadow 5

+2px 2px 5px 0 #313131Shadow 6

+0 0Shadow 7

+1px 1px 3px 1px #c4c4c4Shadow 8

+0 0 2px 1px #c4c4c4Shadow 9

+1px 1px 1px #a7a7a7Shadow 10

+0 0 10px #0003Shadow 11

+0 5px 10px #0003Shadow 12

−0 2px 3px #0000001aShadow 4

−0 2px 3px #3c434aShadow 5

−inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25)Shadow 6

−0 3px 3px rgba(0,0,0,.5)Shadow 7

−0 2px 2px rgba(0,0,0,.5)Shadow 8

−inset 1px 1px 0 #777,0 2px 3px rgba(0,0,0,.4)Shadow 9

−0 0 0 3px -moz-mac-focusringShadow 10

−var(--box-shadow-reverse)Shadow 11

−0 -8px 15px rgba(0,0,0,.85)Shadow 12

−0 1px 1px #000Shadow 13

−-10px 0 45px 5px rgba(51,21,0,.5)Shadow 14

−-10px 0 20px 3px #000Shadow 15

−-2rem 0 3rem -2rem #000Shadow 16

Back to css-tricks.com archive