Design token diff

Showing changes between two snapshots of dropsitenews.com

Before

Apr 11, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 11, 2026

After

May 7, 2026

+43 added−45 removed

Colors

+3 added−5 removed24 unchanged

Typography

+12 added−12 removed10 unchanged

+ABC Favorit Mono, monospace|15px|600Abc Favorit Mono

+ABC Favorit Mono, monospace|40px|400Abc Favorit Mono 2

+ABC Favorit Mono, monospace|16px|500Abc Favorit Mono 3

+ABC Favorit Mono, monospace|14px|400Abc Favorit Mono 4

+"SF Compact", -apple-system, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|11px|500SF Compact 11px / 500

Spacing

+6 added−6 removed26 unchanged

+.25emSpace .25em

+.4emSpace .4em

+.5emSpace .5em

+.5remSpace .5rem

+9pxSpace 9px

+48px48px

−.0625emSpace .0625em

−

Border Radius

+10 added−10 removed6 unchanged

+0pxRadius 0px

+8pxRadius 8px

+20pxRadius 20px

+9999pxRadius 9999px

+calc(8px + 1px)Radius calc 8px 1px

+999pxRadius 999px

+2pxRadius 2px

Shadows

+12 added−12 removed

+0 0 0 2px color(display-p3 1 1 1),0 0 0 3px color(display-p3 0 .365 .851),0 0 0 5px color(display-p3 0 .463 1/.2)Shadow 1

+0px 1px 2px #0000000d--shadow-light-xs

+0px 1px 3px #0000001a,0px 1px 2px #0000000f--shadow-light-sm

+0px 4px 6px -1px #0000001a,0px 2px 4px -1px #0000000f--shadow-light-md

+0px 10px 15px -3px #0000001a,0px 4px 6px -2px #0000000d--shadow-light-lg

+0px 20px 25px -5px #0000001a,0px 10px 10px -5px #0000000a--shadow-light-xl

+inset 0px 1px 0px #fff3,inset 0px -1px 0px #0000001a,0 0 0 2px color(display-p3 1 1 1),0 0 0 3px color(display-p3 0 .365 .851),0 0 0 5px color(display-p3 0 .463 1/.2)

Back to dropsitenews.com archive

+"SF Pro Display", -apple-system-headline, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|19px|700SF Pro Display 19px / 700

+"SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|19px|400SF Pro Display 19px / 400

−'SF Pro Display', var(--font-family-text)|14px|var(--font-weight-regular)Typography Markup Install

−SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace|12px|400Typography Github Gist

−'SF Compact Rounded', var(--font-family-title)|12px|var(--font-weight-semibold)Comment Highlight

−'SF Pro Display', -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'|18px|var(--font-weight-bold)Reply Comment Reply

−"SF Compact", -apple-system, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|11px|500SF Compact 11px / 500

−"SF Pro Display", -apple-system-headline, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|19px|700SF Pro Display 19px / 700

−"SF Pro Display", -apple-system, system-ui, "system-ui", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|19px|400SF Pro Display 19px / 400

Radius 8px20px20px8px

+12px20px20px12pxRadius 12px20px20px12px

+20px20px12px12pxRadius 20px20px12px12px

−var(--border-radius-none)Radius var border radius none

−var(--border-radius-xs)Radius var border radius xs

−var(--border-radius-sm)Radius var border radius sm

−var(--border-radius-md)Radius var border radius md

−var(--border-radius-lg)Radius var border radius lg

−var(--border-radius-full)Radius var border radius full

−calc(var(--border-radius-sm) + 1px)Radius calc var border radius sm 1px

−var(--radius-radius-full,999px)Radius var radius radius full 999px

−var(--size-4)Radius var size 4

−var(--size-2)Radius var size 2

+inset 0px 1px 0px #fff3,inset 0px -1px 0px #0000001a,0 0 0 2px color(display-p3 1 1 1),0 0 0 3px color(display-p3 .773 .243 .255),0 0 0 5px color(display-p3 .922 .341 .341/.2)Shadow 8

+0 0 0 2px color(display-p3 1 1 1),0 0 0 3px color(display-p3 .773 .243 .255),0 0 0 5px color(display-p3 .922 .341 .341/.2)Shadow 9

+inset 0px 1px 0px #fff3,inset 0px -1px 0px #0000001aShadow 10

+0 0 0 2px color(display-p3 1 .404 .098/.2)Shadow 11

+0px 1px 2px #0000000d,0 0 0 2px color(display-p3 0 .463 1/.2)Shadow 12

−var(--focus-ring)Shadow 1

−var(--shadow-xs)Shadow 2

−var(--shadow-sm)Shadow 3

−var(--shadow-md)Shadow 4

−var(--shadow-lg)Shadow 5

−var(--shadow-xl)Shadow 6

−var(--button-highlight),var(--focus-ring)Shadow 7

−var(--button-highlight),var(--error-ring)Shadow 8

−var(--error-ring)Shadow 9

−var(--button-highlight)Shadow 10

−0 0 0 2px var(--color-accent-bg-orange)Shadow 11

−var(--shadow-xs),var(--focus-input-ring)Shadow 12