Design token diff
Showing changes between two snapshots of hashnode.com
+101 added−76 removedpw@1.58.2
Colors
+53 added−28 removed2 unchangedTypography
+18 added−24 removed+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|16px|400Inter 16px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|14px|400Inter 14px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|14px|600Inter 14px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|12px|600Inter 12px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|20px|600Inter 20px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|20px|400
Spacing
+9 added−9 removed23 unchanged+.15emSpace .15em
+.5remSpace .5rem
+.75remSpace .75rem
+1.14286emSpace 1.14286em
+14px14px
+18px18px
+28px28px
+
Border Radius
+10 added−10 removed6 unchanged+.5remRadius .5rem
+calc(.5rem + 8px)Radius calc .5rem 8px
+calc(.5rem + 12px)Radius calc .5rem 12px
+calc(.5rem + 16px)Radius calc .5rem 16px
+calc(.5rem + 20px)Radius calc .5rem 20px
+calc(.5rem + 24px)Radius calc .5rem 24px
+1pxRadius 1px
Shadows
+11 added−5 removed1 unchanged+0 0 0 2px lab(9.58302% -.18093 -4.0814)Shadow 1
+0 1px 2px lab(45.3111% 16.186 50.6095),0 6px 14px -6px lab(76.9751% 10.9521 62.5886)Shadow 3
+0 1px 2px color-mix(in oklch,lab(45.3111% 16.186 50.6095)25%,transparent),0 6px 14px -6px color-mix(in oklch,lab(76.9751% 10.9521 62.5886)45%,transparent)Shadow 4
+0 1px 2px lab(45.3111% 16.186 50.6095),0 8px 20px -6px lab(76.9751% 10.9521 62.5886)Shadow 5
+0 1px 2px color-mix(in oklch,lab(45.3111% 16.186 50.6095)25%,transparent),0 8px 20px -6px color-mix(in oklch,lab(76.9751% 10.9521 62.5886)55%,transparent)Shadow 6
+0 1px 2px #00000026--drop-shadow-sm
Inter 20px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|16px|600Inter 16px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|56px|600Inter 56px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|18px|400Inter 18px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|24px|600Inter 24px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|48px|600Inter 48px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|64px|600Inter 64px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|32px|600Inter 32px / 600
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|12px|400Inter 12px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|84.36px|600Inter 84.36px / 600
+"Font Awesome 7 Brands"|20px|400Font Awesome 7 Brands 20px / 400
+Inter, "Inter Fallback", "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"|36px|600Inter 36px / 600
+"Font Awesome 7 Brands"|16px|400Font Awesome 7 Brands 16px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|16px|400suisseIntl 16px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|14px|400suisseIntl 14px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|14px|500suisseIntl 14px / 500
−"Font Awesome 7 Pro"|14px|400Font Awesome 7 Pro 14px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|14px|600suisseIntl 14px / 600
−"Font Awesome 7 Jelly"|14px|900Font Awesome 7 Jelly 14px / 900
−"Font Awesome 7 Jelly"|14px|400Font Awesome 7 Jelly 14px / 400
−"Font Awesome 7 Jelly"|16px|400Font Awesome 7 Jelly 16px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|20px|600suisseIntl 20px / 600
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|16px|700suisseIntl 16px / 700
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|12px|500suisseIntl 12px / 500
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|12px|400suisseIntl 12px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|18px|400suisseIntl 18px / 400
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|18px|600suisseIntl 18px / 600
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|30px|700suisseIntl 30px / 700
−"Font Awesome 7 Jelly"|18px|400Font Awesome 7 Jelly 18px / 400
−"Font Awesome 7 Pro"|18px|900Font Awesome 7 Pro 18px / 900
−suisseMono, "suisseMono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace|10px|600suisseMono 10px / 600
−"Font Awesome 7 Pro"|12px|900Font Awesome 7 Pro 12px / 900
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|14px|600suisseIntl 14px / 600
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|18px|600suisseIntl 18px / 600
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|18px|500suisseIntl 18px / 500
−suisseIntl, "suisseIntl Fallback", system-ui, sans-serif|24px|700suisseIntl 24px / 700
−suisseIntl, "suisseIntl Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif|18px|700suisseIntl 18px / 700
36px
36px
−.222222emSpace .222222em
−.833333emSpace .833333em
−calc(.625rem + 8px)Radius calc .625rem 8px
−calc(.625rem + 12px)Radius calc .625rem 12px
−calc(.625rem - 5px)Radius calc .625rem 5px
−calc(.625rem - 2px)Radius calc .625rem 2px
−calc(.625rem - 4px)Radius calc .625rem 4px
−calc(.625rem + 4px)Radius calc .625rem 4px 2
+#00000029--scroll-shadow
+0 1px 2px #13161c0d--elevation-xs
+inset 0 1px 0 #ffffff1f,0 1px 2px #13161c33--elevation-button
+0 1px 2px #13161c0f,0 12px 32px -12px #13161c38--elevation-md
+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(19, 22, 28, 0.06) 0px 1px 2px 0px, rgba(19, 22, 28, 0.22) 0px 12px 32px -12pxshadow-a.inline-flex.cursor-pointer
−0 0 0 2px lab(39.0411% 26.565 -77.438)Shadow 1
−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, oklab(0 0 0 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0pxshadow-div.pointer-events-none.absolute
−rgba(0, 0, 0, 0.086) 0px 0px 1px 0px, rgba(0, 0, 0, 0.086) 0px 0px 2px 0px, rgba(0, 0, 0, 0.086) 0px 0px 4px 0px, rgba(0, 0, 0, 0.086) 0px 0px 8px 0pxshadow-a.carbon-reveal
−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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1pxshadow-main.bg-background.relative