Design token diff
Showing changes between two snapshots of replit.com
+115 added−55 removedpw@1.58.2
Colors
+54 added−4 removed10 unchangedTypography
+24 added−15 removed+"Replit Diatype", sans-serif|14px|400Replit Diatype 14px / 400
+"Replit Diatype", sans-serif|13.3333px|400Replit Diatype 13.3333px / 400
+"Replit Diatype", sans-serif|36px|400Replit Diatype 36px / 400
+"Replit Diatype", sans-serif|12px|400Replit Diatype 12px / 400
+"Replit Diatype", sans-serif|14px|460Replit Diatype 14px / 460
+"Replit Diatype", sans-serif|10.4px|400Replit Diatype 10.4px / 400
+"Replit Diatype", sans-serif|14px|450Replit Diatype 14px / 450
Spacing
+20 added−19 removed12 unchanged+.15emSpace .15em
+.3emSpace .3em
+.32emSpace .32em
+.6emSpace .6em
+3.5pxSpace 3.5px
+9pxSpace 9px
+17px17px
+
Border Radius
+5 added−5 removed11 unchanged+calc(8px + 1px)Radius calc 8px 1px
+1028pxRadius 1028px
+0 3px 3pxRadius 0 3px 3px
+0 4px 4px 0Radius 0 4px 4px 0
+3px 0 3px 3pxRadius 3px 0 3px 3px
−999pxRadius 999px
−9999pxRadius 9999px
Shadows
+12 added−12 removed+0 0 0 4px currentColorShadow 1
+0 0 0 4px color-mix(in srgb,currentColor 25%,transparent)Shadow 2
+0 0 0 100vmax #222223Shadow 3
+0 0 3px #00000080Shadow 4
+0 0 8px currentColorShadow 5
+0 0 20px 4px none,0 0 40px 8px noneShadow 6
+0 0 20px 4px color-mix(in srgb,none 60%,transparent),0 0 40px 8px color-mix(in srgb,none 25%,transparent)Shadow 7
+"Replit Diatype", sans-serif|16px|400Replit Diatype 16px / 400
+"Replit Diatype", sans-serif|14px|500Replit Diatype 14px / 500
+"Replit Diatype", sans-serif|12px|500Replit Diatype 12px / 500
+"Replit Diatype", sans-serif|36px|700Replit Diatype 36px / 700
+"Replit Diatype", sans-serif|20px|400Replit Diatype 20px / 400
+"Replit Diatype", sans-serif|20px|500Replit Diatype 20px / 500
+"Replit Diatype", sans-serif|15px|400Replit Diatype 15px / 400
+"Replit Diatype", sans-serif|32px|400Replit Diatype 32px / 400
+"Replit Diatype", sans-serif|11.7px|400Replit Diatype 11.7px / 400
+"Replit Diatype Mono", monospace|13px|500Replit Diatype Mono 13px / 500
+"Replit Diatype", sans-serif|18px|600Replit Diatype 18px / 600
+"Replit Diatype", sans-serif|40px|400Replit Diatype 40px / 400
+"Replit Diatype", sans-serif|64px|400Replit Diatype 64px / 400
+"Replit Diatype", sans-serif|68.92px|400Replit Diatype 68.92px / 400
+"Replit Diatype", sans-serif|28px|400Replit Diatype 28px / 400
+"Replit Diatype", sans-serif|14px|600Replit Diatype 14px / 600
+"Replit Diatype Mono", monospace|11px|500Replit Diatype Mono 11px / 500
−ABC Diatype Plus Variable, sans-serif|32px|300Abc Diatype Plus Variable
−ABC Diatype Plus Variable, sans-serif|20px|400Abc Diatype Plus Variable 2
−ABC Diatype Plus Variable, sans-serif|14px|500Abc Diatype Plus Variable 3
−ABC Diatype Plus Variable, sans-serif|42px|400Abc Diatype Plus Variable 4
−ABC Diatype Plus Variable, sans-serif|24px|400Abc Diatype Plus Variable 5
−ABC Diatype Plus Variable, sans-serif|60px|400Abc Diatype Plus Variable 6
−ABC Diatype Plus Variable, sans-serif|16px|400Abc Diatype Plus Variable 7
−ABC Diatype Plus Variable, sans-serif|68.92px|400Abc Diatype Plus Variable 8
−ABC Diatype Plus Variable, sans-serif|28px|400Abc Diatype Plus Variable 13
−ABC Diatype Plus Variable, sans-serif|48px|400Abc Diatype Plus Variable 10
−ABC Diatype Plus Variable, sans-serif|10.4px|400Abc Diatype Plus Variable 11
−IBM Plex Sans, sans-serif|14px|400Ibm Plex Sans
−ABC Diatype Plus Variable, sans-serif|13px|500Abc Diatype Plus Variable 12
−ABC Diatype Plus Variable, sans-serif|31.78px|400Abc Diatype Plus Variable 14
−ABC Diatype Plus Variable, sans-serif|17px|400Abc Diatype Plus Variable 15
32px
32px
+calc(env(safe-area-inset-top,0px)Space calc env safe area inset top 0px
+calc(env(safe-area-inset-right,0px)Space calc env safe area inset right 0px
+calc(env(safe-area-inset-bottom,0px)Space calc env safe area inset bottom 0px
+calc(env(safe-area-inset-left,0px)Space calc env safe area inset left 0px
+calc(6px + env(safe-area-inset-bottom,0px)Space calc 6px env safe area inset bottom 0px
+calc(8px + env(safe-area-inset-right,0px)Space calc 8px env safe area inset right 0px
+calc(8px + env(safe-area-inset-left,0px)Space calc 8px env safe area inset left 0px
−
0 6px 6px 0
Radius 0 6px 6px 0
+
0 0 16px 12px none
Shadow 8
+0 1px 2px #0000001a,0 1px 4px #0000000dShadow 9
+0 2px 8px #00000005,0 4px 16px #00000003Shadow 10
+0 4px 12px #0000001aShadow 11
+0 8px 24px #0000001fShadow 12
−0 2px 8px #00000014Shadow 1
−0 1px 2px #00000005Shadow 2
−0 1px 3px #00000008Shadow 3
−0 2px 5px #0000000dShadow 4
−0 3px 10px #00000017Shadow 5
−#000 0 6px 6px -6px insetShadow 6
−#000 6px 0 6px -6px insetShadow 7
−0px 4px 8px 0px #02020329--shadow-1
−0px 8px 16px 0px #02020352--shadow-2
−-8px 0 24px #0000Shadow 10
−-8px 0 24px #0000002eShadow 11
−0 4px 12px #f265224d,0 2px 4px #0000001aShadow 12