Design token diff
Showing changes between two snapshots of lovable.dev
+85 added−73 removedpw@1.58.2
Colors
+33 added−25 removed7 unchangedTypography
+13 added−3 removed8 unchanged+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|18px|480Camera Plain Variable 18px / 480
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|13px|480Camera Plain Variable 13px / 480
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|16px|600Camera Plain Variable 16px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|32px|400Camera Plain Variable 32px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|48px|480Camera Plain Variable 48px / 480
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|24px|600Camera Plain Variable 24px / 600
Spacing
+19 added−19 removed13 unchanged+1px1px
+2px normal2px normal
+3.6px3.6px
+8px normal8px normal
+9.5px9.5px
+16px normal16px normal
+28px28px
+
Border Radius
+8 added−14 removed2 unchanged+3.35544e+07px3.35544e+07px
+8px8px
+16px16px
+6px6px
+12px12px
+24px24px
+28px28px
+
Shadows
+12 added−12 removed+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, oklch(0.1 0 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0pxshadow-form#chat-input.flex.flex-col
+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(255, 255, 255, 0.1) 0px 0px 0px 1px insetshadow-div.@container/platform-image.h-[calc(100vh-var(--header-height)-176px)]
+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(95, 95, 93, 0.12) 0px 0px 0px 1px, rgba(95, 95, 93, 0.1) 0px 4px 2px -3px, rgba(95, 95, 93, 0.15) 0px 5px 10px -4pxshadow-a.mt-10.px-4
+oklch(0 0 0 / 0.04) 0px 2px 2px -1px, oklch(0 0 0 / 0.02) 0px 4px 4px -2pxshadow-span.fx-layer.fx-layer-fade
+oklch(1 0 0) 0px 2px 0px -1px inset, oklch(1 0 0 / 0.8) 0px -2px 0px -1px insetshadow-span.fx-layer.fx-layer-fade
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|28px|600Camera Plain Variable 28px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|12px|600Camera Plain Variable 12px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|14px|600Camera Plain Variable 14px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|11px|600Camera Plain Variable 11px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|13px|600Camera Plain Variable 13px / 600
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|24px|480Camera Plain Variable 24px / 480
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|12px|400Camera Plain Variable 12px / 400
−Menlo, Monaco, Consolas, Courier New, monospace!important|13px|400Menlo
−"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|60px|600Camera Plain Variable 60px / 600
32px normal
32px normal
−.142857emSpace .142857em
−.222222emSpace .222222em
−.285714emSpace .285714em
−.444444emSpace .444444em
−.571429emSpace .571429em
37.8947px 21.12px
37.8947px 21.12px
−calc(.25rem * 1.5)Radius calc .25rem 1.5
−calc(.25rem * 2)Radius calc .25rem 2
−calc(.25rem * 3)Radius calc .25rem 3
−calc(.25rem * 0)Radius calc .25rem 0
−calc(.25rem * .5)Radius calc .25rem .5
−calc(.25rem * .75)Radius calc .25rem .75
−calc(.25rem * 1)Radius calc .25rem 1
−calc(.25rem * 1.25)Radius calc .25rem 1.25
+
oklch(0 0 0 / 0.16) 0px 0px 0px 1px inset
shadow-span.fx-layer
+oklch(0 0 0 / 0.08) 0px 0.5px 0px 0px inset, oklch(0 0 0 / 0.16) 0px -0.5px 0px 0px insetshadow-span.fx-layer.fx-layer-fade
+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(118, 118, 118, 0.1) 0px 0px 0px 1px, rgba(118, 118, 118, 0.07) 0px 1px 1px 0px, rgba(118, 118, 118, 0.05) 0px 2px 5px 0px, rgba(118, 118, 118, 0.1) 0px 4px 24px -8px, rgba(118, 118, 118, 0.08) 0px 4px 34px -5pxshadow-div.relative.min-h-(--card-h)
+oklch(0 0 0 / 0.25) 0px 0px 0px 1px insetshadow-span.fx-layer
+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.25) 0px 25px 50px -12pxshadow-div.rounded-7.bg-secondary-pulse
+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.1 0 0 / 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0pxshadow-span.pointer-events-none.select-none
+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.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 12px 40px -8px, rgba(0, 0, 0, 0.08) 0px 4px 34px -5pxshadow-div.rounded-4.pointer-events-none
−#000 0 6px 6px -6px insetShadow 1
−#000 6px 0 6px -6px insetShadow 2
−0 24px 60px #0f172a2e,0 0 0 1px #0f172a14Shadow 3
−0 24px 60px #00000073,0 0 0 1px #ffffff14Shadow 4
−0 1px 1px #0000000d--drop-shadow-xs
−0 1px 2px #00000026--drop-shadow-sm
−0 3px 3px #0000001f--drop-shadow-md
−0 9px 7px #0000001a--drop-shadow-xl
−.16--shadow-surface-border-alpha
−oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px, oklch(0.2 0 0 / 0.12) 0px 4px 4px -2pxshadow-span.pointer-events-none.absolute
−oklch(0.98 0.01 0 / 0.24) 0px 1px 0px 0px inset, oklch(0.98 0.01 0) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0) 0px -0.5px 0px 0px insetshadow-span.pointer-events-none.absolute
−rgb(0, 0, 0) 0px 0px 0px 1px insetshadow-span.pointer-events-none.absolute