Design token diff
Showing changes between two snapshots of discord.com
+58 added−30 removedpw@1.58.2
Colors
+13 added−6 removed18 unchangedTypography
+16 added+Ggsans, sans-serif|16px|400Ggsans 16px / 400
+Abcgintodiscord, sans-serif|16px|500Abcgintodiscord 16px / 500
+Abcgintodiscord, sans-serif|16px|400Abcgintodiscord 16px / 400
+"ABC Ginto Normal", sans-serif|16px|400ABC Ginto Normal 16px / 400
+Abcgintodiscordnord, Arial, sans-serif|61px|700Abcgintodiscordnord 61px / 700
+Abcgintodiscord, sans-serif|20px|400Abcgintodiscord 20px / 400
+Abcgintodiscord|18px|400Abcgintodiscord 18px / 400
Spacing
+14 added−2 removed18 unchanged+9pxSpace 9px
+13.008px13.008px
+14pxSpace 14px
+34.6px34.6px
+42px42px
+60px60px
+131.406px131.406px
+
Border Radius
+14 added−22 removed2 unchanged+hsl(241.5 calc(1*57.143%) 27.451%/1)Radius hsl 241.5 calc 1 57.143% 27.451% 1
+241.5 calc(1*57.143%) 27.451%Radius 241.5 calc 1 57.143% 27.451%
+hsl(257.059 calc(1*100%) 20%/1)Radius hsl 257.059 calc 1 100% 20% 1
+257.059 calc(1*100%) 20%Radius 257.059 calc 1 100% 20%
+hsl(240 calc(1*7.143%) 5.49%/1)Radius hsl 240 calc 1 7.143% 5.49% 1
+240 calc(1*7.143%) 5.49%Radius 240 calc 1 7.143% 5.49%
+
Shadows
+1 added1 unchanged+rgba(0, 0, 0, 0.2) 0px 0px 18px 0pxshadow-div#onetrust-banner-sdk.otFlat.bottom
+
Abcgintodiscordnord, Arial, sans-serif|36px|800
Abcgintodiscordnord 36px / 800
+Abcgintodiscordnord, Arial, sans-serif|48px|700Abcgintodiscordnord 48px / 700
+Ggsans, sans-serif|13.008px|600Ggsans 13.008px / 600
+Abcgintodiscord, sans-serif|18px|400Abcgintodiscord 18px / 400
+Abcgintodiscordnord, Arial, sans-serif|44px|700Abcgintodiscordnord 44px / 700
+Ggsans, sans-serif|19.2px|600Ggsans 19.2px / 600
+Ggsans, sans-serif|13.008px|400Ggsans 13.008px / 400
+Ggsans, sans-serif|13.008px|700Ggsans 13.008px / 700
+Ggsans, sans-serif|14.4px|400Ggsans 14.4px / 400
221px
221px
hsl(327.831 calc(1*80.583%) 59.608%/1)
Radius hsl 327.831 calc 1 80.583% 59.608% 1
+327.831 calc(1*80.583%) 59.608%Radius 327.831 calc 1 80.583% 59.608%
+hsl(32 calc(1*60%) 9.804%/1)Radius hsl 32 calc 1 60% 9.804% 1
+32 calc(1*60%) 9.804%Radius 32 calc 1 60% 9.804%
+hsl(339.545 calc(1*66.667%) 12.941%/1)Radius hsl 339.545 calc 1 66.667% 12.941% 1
+339.545 calc(1*66.667%) 12.941%Radius 339.545 calc 1 66.667% 12.941%
+hsl(312.222 calc(1*93.103%) 11.373%/1)Radius hsl 312.222 calc 1 93.103% 11.373% 1
+312.222 calc(1*93.103%) 11.373%Radius 312.222 calc 1 93.103% 11.373%
−hsl(var(--bg-animated-gradient-background-indigo-1-hsl)/1)Radius hsl var bg animated gradient background indigo 1 hsl 1
−241.5 calc(var(--saturation-factor, 1)*57.143%) 27.451%Radius 241.5 calc var saturation factor 1 57.143% 27.451%
−hsl(var(--bg-animated-gradient-background-indigo-2-hsl)/1)Radius hsl var bg animated gradient background indigo 2 hsl 1
−257.059 calc(var(--saturation-factor, 1)*100%) 20%Radius 257.059 calc var saturation factor 1 100% 20%
−hsl(var(--bg-animated-gradient-background-not-black-hsl)/1)Radius hsl var bg animated gradient background not black hsl 1
−240 calc(var(--saturation-factor, 1)*7.143%) 5.49%Radius 240 calc var saturation factor 1 7.143% 5.49%
−hsl(var(--bg-animated-gradient-background-pink-1-hsl)/1)Radius hsl var bg animated gradient background pink 1 hsl 1
−327.831 calc(var(--saturation-factor, 1)*80.583%) 59.608%Radius 327.831 calc var saturation factor 1 80.583% 59.608%
−hsl(var(--checkpoint-persona-eight-background-overlay-hsl)/1)Radius hsl var checkpoint persona eight background overlay hsl 1
−32 calc(var(--saturation-factor, 1)*60%) 9.804%Radius 32 calc var saturation factor 1 60% 9.804%
−hsl(var(--checkpoint-persona-five-background-overlay-hsl)/1)Radius hsl var checkpoint persona five background overlay hsl 1
−339.545 calc(var(--saturation-factor, 1)*66.667%) 12.941%Radius 339.545 calc var saturation factor 1 66.667% 12.941%
−hsl(var(--checkpoint-persona-four-background-overlay-hsl)/1)Radius hsl var checkpoint persona four background overlay hsl 1
−312.222 calc(var(--saturation-factor, 1)*93.103%) 11.373%Radius 312.222 calc var saturation factor 1 93.103% 11.373%
−hsl(var(--checkpoint-persona-nine-background-overlay-hsl)/1)Radius hsl var checkpoint persona nine background overlay hsl 1
−0 calc(var(--saturation-factor, 1)*0%) 14.902%Radius 0 calc var saturation factor 1 0% 14.902%
−hsl(var(--checkpoint-persona-one-background-overlay-hsl)/1)Radius hsl var checkpoint persona one background overlay hsl 1
−169.5 calc(var(--saturation-factor, 1)*76.923%) 10.196%Radius 169.5 calc var saturation factor 1 76.923% 10.196%
−hsl(var(--checkpoint-persona-seven-background-overlay-hsl)/1)Radius hsl var checkpoint persona seven background overlay hsl 1
−44.516 calc(var(--saturation-factor, 1)*100%) 6.078%Radius 44.516 calc var saturation factor 1 100% 6.078%
−hsl(var(--checkpoint-persona-six-background-overlay-hsl)/1)Radius hsl var checkpoint persona six background overlay hsl 1
−27 calc(var(--saturation-factor, 1)*80%) 9.804%Radius 27 calc var saturation factor 1 80% 9.804%