Design token diff
Showing changes between two snapshots of lovable.dev
Colors
+16 added−5 removed6 unchangedTypography
+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
Spacing
+27 added−15 removed5 unchanged+-1px-1px
+.1875emSpace .1875em
+.2remSpace .2rem
+.222222emSpace .222222em
+.25remSpace .25rem
+.285714emSpace .285714em
+.375remSpace .375rem
Border Radius
+1 added−9 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
Shadows
+7 added−11 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
+
"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|36px|600
Camera 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
+
.444444em
Space .444444em
−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
−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
+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