Design token diff

Showing changes between two snapshots of lovable.dev

Before

Apr 15, 2026

View snapshot

After

Apr 28, 2026

View snapshot

Before

Apr 15, 2026

After

Apr 28, 2026

+35 added−31 removed

Colors

+14 added−10 removed12 unchanged

Typography

+1 added−1 removed11 unchanged
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|12px|600Camera Plain Variable 12px / 600
−Roboto Mono Variable, monospace|1em|400Roboto Mono Variable

Spacing

+4 added−4 removed28 unchanged
+.4375remSpace .4375rem
+.571429emSpace .571429em
+.6emSpace .6em
+1px1px
−calc(env(safe-area-inset-bottom,0px)Space calc env safe area inset bottom 0px
−.125remSpace .125rem
−.2remSpace .2rem
−.375remSpace .375rem

Border Radius

+4 added−4 removed12 unchanged
+var(--radius-lg)Radius var radius lg
+calc(var(--radius) * 1.5)Radius var radius xl
+calc(var(--radius) * 2)Radius var radius 2xl
+calc(var(--radius) * 3.5)Radius var radius 3 5xl
−var(--radius)Radius var radius
−calc(var(--radius)*1.5)Radius calc var radius 1.5
−calc(var(--radius)*2)Radius calc var radius 2
−calc(var(--radius)*3.5)Radius calc var radius 3.5

Shadows

+12 added−12 removed
+var(--vscode-scrollbar-shadow,#000) 0 6px 6px -6px insetShadow 1
+var(--vscode-scrollbar-shadow,#000) 6px 0 6px -6px insetShadow 2
+0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)Shadow 3
+var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)Shadow 4
+0 0 0 .5px #0000001f, inset 0 0 0 .5px #ffffff1f, 0px 1px 1px -.5px #0000000a, 0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a, 0px 12px 12px -6px #0000000aShadow 5
+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(--vscode-scrollbar-shadow,#000)0 6px 6px -6px insetShadow 1
−var(--vscode-scrollbar-shadow,#000)6px 0 6px -6px insetShadow 2
−0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%)Shadow 3
−var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Shadow 4
−var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)Shadow 5
−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
Back to lovable.dev archive