Design token diff
Showing changes between two snapshots of loveable.dev
+81 added−62 removedpw@1.58.2
Colors
+34 added−20 removed6 unchangedTypography
+12 added−3 removed9 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
+18 added−18 removed14 unchanged+2px normal2px normal
+3.6px3.6px
+8px normal8px normal
+9.5px9.5px
+16px normal16px normal
+28px28px
+32px normal32px normal
+
Border Radius
+5 added−11 removed5 unchanged+3.35544e+07px3.35544e+07px
+24px24px
+32px32px
+28px28px
+37.8947px 21.12px37.8947px 21.12px
−inheritRadius inherit
−unsetRadius unset
Shadows
+12 added−10 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|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
40px
40px
−.142857emSpace .142857em
−.222222emSpace .222222em
−.285714emSpace .285714em
−.444444emSpace .444444em
−.571429emSpace .571429em
−.666667emSpace .666667em
−
100%
Radius 100%
+
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 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 -6pxshadow-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