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 added−40 removed

Colors

+16 added−5 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 added−15 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 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

−18pxRadius 18px

−19pxRadius 19px

−20pxRadius 20px

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

+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

Back to lovable.dev archive