Design token diff
Showing changes between two snapshots of vercel.com
+76 added−88 removedpw@1.58.2
Colors
+29 added−31 removed11 unchangedTypography
+14 added−24 removed+GeistSans, "GeistSans Fallback"|14px|400GeistSans 14px / 400
+GeistSans, "GeistSans Fallback"|16px|400GeistSans 16px / 400
+GeistSans, "GeistSans Fallback"|14px|500GeistSans 14px / 500
+GeistSans, "GeistSans Fallback"|16px|500GeistSans 16px / 500
+GeistSans, "GeistSans Fallback"|13px|400GeistSans 13px / 400
+"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16px|400Geist Mono 16px / 400
+GeistSans, "GeistSans Fallback"|24px|450
Spacing
+12 added−12 removed20 unchanged+.125emSpace .125em
+.1875remSpace .1875rem
+.22emSpace .22em
+.25emSpace .25em
+.3125remSpace .3125rem
+.35emSpace .35em
+.375emSpace .375em
Border Radius
+12 added−12 removed4 unchanged+16pxRadius 16px
+5pxRadius 5px
+2147483647pxRadius 2147483647px
+.375remRadius .375rem
+.25remRadius .25rem
+1remRadius 1rem
+1.5remRadius 1.5rem
Shadows
+9 added−9 removed3 unchanged+0 0 4px #ffffff80Shadow 2
+0 30px 60px #0000001f--shadow-large
+0 4px 8px #0000001fShadow 6
+0 0 0 1px #eaeaeaShadow 7
+0 0 10px #000, 0 0 5px #000Shadow 8
+0 0 10px oklch(96.29% .0195 250.59), 0 0 20px oklch(97.32% .0141 251.56)Shadow 9
+0 0 30px oklch(91.58% .0473 245.116), 0 0 60px oklch(96.29% .0195 250.59)Shadow 10
GeistSans 24px / 450
+GeistSans, "GeistSans Fallback"|56px|450GeistSans 56px / 450
+GeistSans, "GeistSans Fallback"|11px|500GeistSans 11px / 500
+GeistSans, "GeistSans Fallback"|16px|450GeistSans 16px / 450
+GeistSans, "GeistSans Fallback"|64px|400GeistSans 64px / 400
+GeistSans, "GeistSans Fallback"|13px|600GeistSans 13px / 600
+"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|14px|400Geist Mono 14px / 400
+"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|12px|500Geist Mono 12px / 500
−DSEG7 Classic, monospace|2rem|400Dseg7 Classic
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16px|400Geist 16px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|14px|400Geist 14px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|14px|500Geist 14px / 500
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|12px|400Geist 12px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|16px|500Geist 16px / 500
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|12px|500Geist 12px / 500
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|14px|500Geist 14px / 500
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|14px|400Geist 14px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|32px|400Geist 32px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|24px|600Geist 24px / 600
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|24px|500Geist 24px / 500
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|24px|600Geist 24px / 600
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|18px|400Geist 18px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|7px|700Geist 7px / 700
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|48px|600Geist 48px / 600
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|20px|400Geist 20px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|16px|400Geist 16px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|32px|600Geist 32px / 600
−"Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|12px|400Geist Mono 12px / 400
−"Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|9.5px|400Geist Mono 9.5px / 400
−"Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|7.75px|400Geist Mono 7.75px / 400
−"Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"|6px|400Geist Mono 6px / 400
−Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|24px|500Geist 24px / 500
+
2.28px
Space 2.28px
+clamp(4px,1.5cqw,12px)Space clamp 4px 1.5cqw 12px
+clamp(4px,2.5cqw,20px)Space clamp 4px 2.5cqw 20px
−.277778emSpace .277778em
+
.25em
Radius .25em
−6px 0 0 6pxRadius 6px 0 0 6px
−0 6px 6px 0Radius 0 6px 6px 0
+0 0 0 1px #fff, 0 0 0 3px #000Shadow 11
+inset 2px 0 0 0 oklch(53.18% .2399 256.99)Shadow 12
−inset 0 0 0 1px #00000014--ds-shadow-border-inset
−0 0 0 2px #fff, 0 0 0 4px #999Shadow 3
−0 0 0 4px #00000014Shadow 4
−0 0 0 2px --ds-blue-900Shadow 5
−0 0 0 1px #00000036Shadow 7
−0 0 0 1px oklch(54.99% .232 25.29), 0 0 0 4px oklch(94.33% .0369 15.0115)Shadow 8
−0 0 0 1px #00000057, 0px 0px 0px 4px #ffffff3dShadow 10
−0 0 0 2px hsla(0, 0%, 100%, 1), 0 0 0 4px oklch(57.61% .2508 258.23)Shadow 11
−0 0 0 1px oklch(54.99% .232 25.29), 0 0 0 4px oklch(84.47% .1018 17.71)Shadow 12