Design token diff

Showing changes between two snapshots of lovable.dev

Before

Apr 12, 2026

View snapshot

After

Apr 15, 2026

View snapshot

Before

Apr 12, 2026

After

Apr 15, 2026

+61 added40 removed

Colors

+16 added5 removed6 unchanged

Typography

+10 added2 unchanged
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|16px|400Camera Plain Variable 16px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|14px|400Camera Plain Variable 14px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|15px|400Camera Plain Variable 15px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|48px|600Camera Plain Variable 48px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|60px|480Camera Plain Variable 60px / 480
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|18px|400Camera Plain Variable 18px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|36px|600Camera Plain Variable 36px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|20px|400Camera Plain Variable 20px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|60px|600Camera Plain Variable 60px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|14px|480Camera Plain Variable 14px / 480

Spacing

+27 added15 removed5 unchanged
+-1px-1px
+.1875emSpace .1875em
+.2remSpace .2rem
+.222222emSpace .222222em
+.25remSpace .25rem
+.285714emSpace .285714em
+.375remSpace .375rem
+.444444emSpace .444444em
+.5emSpace .5em
+.5remSpace .5rem
+3pxSpace 3px
+4px4px
+5pxSpace 5px
+6pxSpace 6px
+7pxSpace 7px
+8pxSpace 8px
+9pxSpace 9px
+10px10px
+12px12px
+16px16px
+20px20px
+24px24px
+32px32px
+48px48px
+56px56px
+80px80px
+144px144px
calc(-1rem*var(--tw-space-x-reverse)Space calc 1rem var tw space x reverse
calc(-1rem*calc(1 - var(--tw-space-x-reverse)Space calc 1rem calc 1 var tw space x reverse
calc(-.75rem*var(--tw-space-x-reverse)Space calc .75rem var tw space x reverse
calc(-.75rem*calc(1 - var(--tw-space-x-reverse)Space calc .75rem calc 1 var tw space x reverse
calc(-.5rem*var(--tw-space-x-reverse)Space calc .5rem var tw space x reverse
calc(-.5rem*calc(1 - var(--tw-space-x-reverse)Space calc .5rem calc 1 var tw space x reverse
calc(-.375rem*var(--tw-space-x-reverse)Space calc .375rem var tw space x reverse
calc(-.375rem*calc(1 - var(--tw-space-x-reverse)Space calc .375rem calc 1 var tw space x reverse
calc(0px*calc(1 - var(--tw-space-y-reverse)Space calc 0px calc 1 var tw space y reverse
calc(0px*var(--tw-space-y-reverse)Space calc 0px var tw space y reverse
0pxSpace 0px
1pxSpace 1px
.08remSpace .08rem
calc(.125rem*calc(1 - var(--tw-space-y-reverse)Space calc .125rem calc 1 var tw space y reverse
calc(.125rem*var(--tw-space-y-reverse)Space calc .125rem var tw space y reverse

Border Radius

+1 added9 removed15 unchanged
+inheritRadius var silk defaults inherit
var(--silk-defaults,inherit)Radius var silk defaults inherit
calc(var(--radius)*4)Radius calc var radius 4
10pxRadius 10px
11pxRadius 11px
12pxRadius 12px
16pxRadius 16px
18pxRadius 18px
19pxRadius 19px
20pxRadius 20px

Shadows

+7 added11 removed5 unchanged
+inset 0px var(--border-default)0px 0px #00000014,inset 0px calc(-1*var(--border-default))0px 0px #00000029,inset 0px 0px 0px var(--border-default)#00000029,inset 0px 1px 0px 0px #fff,inset 0px -1px 0px 0px #fffc,0px 2px 2px -1px #0000000a,0px 4px 4px -2px #00000005Shadow 6
+inset 0 0 0 var(--border-default)#77777166Shadow 7
+inset 0px var(--border-default)0px 0px #00000014,inset 0px calc(-1*var(--border-default))0px 0px #00000029,inset 0px 0px 0px var(--border-default)#11318c,inset 0px 1px 0px 0px #ffffff29,inset 0px -1px 0px 0px #ffffff14,0px 2px 2px -1px #091a481f,0px 4px 4px -2px #091a481fShadow 8
+inset 0 0 0 var(--border-default)#00000029Shadow 9
+inset 0px var(--border-default)0px 0px #00000014,inset 0px calc(-1*var(--border-default))0px 0px #00000029,inset 0px 0px 0px var(--border-default)#8d0e13,inset 0px 1px 0px 0px #ffffff29,inset 0px -1px 0px 0px #ffffff14,0px 2px 2px -1px #440b0c1f,0px 4px 4px -2px #440b0c1fShadow 10
+inset 0px var(--border-default)0px 0px #00000014,inset 0px calc(-1*var(--border-default))0px 0px #00000029,inset 0px 0px 0px var(--border-default)#53388c,inset 0px 1px 0px 0px #ffffff29,inset 0px -1px 0px 0px #ffffff14,0px 2px 2px -1px #2b164d1f,0px 4px 4px -2px #2b164d1fShadow 11
+inset 0px var(--border-default)0px 0px #00000014,inset 0px calc(-1*var(--border-default))0px 0px #00000029,inset 0px 0px 0px var(--border-default)#000,inset 0px 1px 0px 0px #ffffff3d,inset 0px -1px 0px 0px #ffffff29,0px 2px 2px -1px #0000001f,0px 4px 4px -2px #0000001fShadow 12
var(--shadow-button-neutral)Shadow 6
var(--shadow-button-pressed-neutral)Shadow 7
var(--shadow-button-accent)Shadow 8
var(--shadow-button-pressed-semantic)Shadow 9
var(--shadow-button-destructive)Shadow 10
var(--shadow-button-special)Shadow 11
var(--shadow-button-inverse)Shadow 12
var(--shadow-button-pressed-inverse)Shadow 13
var(--shadow-surface-md)Shadow 14
var(--_switch-shadow-track)Shadow 15
var(--_switch-shadow-thumb)Shadow 16