Design token diff
Showing changes between two snapshots of loveable.dev
Colors
+26 added−11 removedTypography
+12 added−2 removed+Menlo, Monaco, Consolas, Courier New, monospace!important|13px|400Menlo
+"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
+
Spacing
+28 added−16 removed4 unchanged+.1875emSpace .1875em
+.222222emSpace .222222em
+.25remSpace .25rem
+.285714emSpace .285714em
+.444444emSpace .444444em
+.5emSpace .5em
+.5remSpace .5rem
Border Radius
+5 added−13 removed11 unchanged+inheritRadius inherit
+2pxRadius 2px
+2remRadius 2rem
+3pxRadius 3px
+8pxRadius 8px
−var(--silk-defaults,inherit)Radius var silk defaults inherit
−var(--scrollbar-track-radius)Radius var scrollbar track radius
Shadows
+10 added−16 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
"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|18px|400
Camera Plain Variable 18px / 400
+"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif|14px|480Camera Plain Variable 14px / 480
+"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|12px|600Camera Plain Variable 12px / 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
−Roboto Mono Variable, monospace|1em|400Code
−Menlo, Monaco, Consolas, Courier New, monospace!important|13px!important|400Prose Pre Ascii
+
.571429em
Space .571429em
+.666667emSpace .666667em
−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
−calc(env(safe-area-inset-bottom,0px)Space calc env safe area inset bottom 0px
−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
−
var(--scrollbar-thumb-radius)
Radius var scrollbar thumb radius
−var(--scrollbar-corner-radius)Radius var scrollbar corner radius
−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
−calc(var(--radius)*4)Radius calc var radius 4
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
−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
−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