Design token diff
Showing changes between two snapshots of lovable.dev
Colors
+7 added−7 removed19 unchangedTypography
+1 added−1 removed11 unchanged+Menlo, Monaco, Consolas, Courier New, monospace!important|13px|400Menlo
−Menlo, Monaco, Consolas, Courier New, monospace!important|13px!important|400Menlo
Border Radius
+8 added−7 removed8 unchanged+1.5remRadius 1.5rem
+2pxRadius 2px
+2remRadius 2rem
+3pxRadius 3px
+8pxRadius 8px
+10pxRadius 10px
+12pxRadius 12px
+
Shadows
+10 added−12 removed+#000 0 6px 6px -6px insetShadow 1
+#000 6px 0 6px -6px insetShadow 2
+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 #0000000a--shadow-tooltip
+0 1px 1px #0000000d--drop-shadow-xs
+0 3px 3px #0000001f--drop-shadow-md
+0 9px 7px #0000001a--drop-shadow-xl
+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
16px
Radius 16px
−var(--scrollbar-track-radius)Radius var scrollbar track radius
−var(--scrollbar-thumb-radius)Radius var scrollbar thumb radius
−var(--scrollbar-corner-radius)Radius var scrollbar corner radius
−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
shadow-form#chat-input.group.flex
+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(247, 244, 237) 0px -1px 0px 0px insetshadow-div.sticky.top-0
+rgba(0, 0, 0, 0.08) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 0px 0px inset, rgb(0, 0, 0) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 2px -1px, rgba(0, 0, 0, 0.12) 0px 4px 4px -2pxshadow-button#signup-link.relative.box-border
+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.48) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.02) 0px 2px 2px -1px, rgba(0, 0, 0, 0.02) 0px 4px 4px -2pxshadow-a.group.flex
−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 1
−inset 0 0 0 var(--border-default) #77777166Shadow 2
−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 3
−inset 0 0 0 var(--border-default) #00000029Shadow 4
−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 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) #53388c, inset 0px 1px 0px 0px #ffffff29, inset 0px -1px 0px 0px #ffffff14, 0px 2px 2px -1px #2b164d1f, 0px 4px 4px -2px #2b164d1fShadow 6
−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 7
−inset 0 0 0 var(--border-default) lab(0% 0 0)Shadow 8
−inset 0px 0px 0px var(--border-default) #fff, 0px 0px 0px var(--border-default) #77777147, 0px 1px 1px 0px #0000000a, 0px 1px 1px -.5px #0000000a, 0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000aShadow 9
−var(--vscode-scrollbar-shadow,#000) 0 6px 6px -6px insetShadow 10
−var(--vscode-scrollbar-shadow,#000) 6px 0 6px -6px insetShadow 11
−0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)Shadow 12