Design token diff

Showing changes between two snapshots of vercel.com

Before

Apr 1, 2026

View snapshot

After

Apr 7, 2026

View snapshot

Before

Apr 1, 2026

After

Apr 7, 2026

+50 added−42 removed

Colors

+8 added56 unchanged

Typography

+8 added−8 removed15 unchanged
+var(--font-mono)|12px|400Badges Module 2u8gbW
+var(--font-sans)|inherit|400Combobox Module Thgw9a
+var(--font-mono)|.9em|400Code Code Module
+var(--font-sans, var(--font-sans-fallback)), 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|500Text Button 14
+var(--font-sans, var(--font-sans-fallback)), 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"|12px|500Text Button 12
+var(--font-sans, var(--font-sans-fallback)), 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|400Text Label 20
+var(--font-sans, var(--font-sans-fallback)), 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|400Text Label 18
+var(--font-sans, var(--font-sans-fallback)), 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|400Text Label 16
−var(--font-mono)|14px|400Contentful Parse Error
−var(--font-sans)|.875rem|400Kbd Module Xx9QEa
−var(--font-sans)|.75rem|400Kbd Module Xx9QEa 2
−inherit|var(--geist-form-font)|400Select Module NrtrfG
−var(--font-mono)|14px|500Text Module Fl7lUq
−var(--font-sans, var(--font-sans-fallback))|var(--text-size)|var(--text-weight)Text Module EElGjq
−Georgia, Times New Roman, Times, serif|32px|400Testimonial Module 6lbEXq
−var(--font-sans)|14px|500!importantFides Banner Button

Spacing

+12 added−12 removed20 unchanged
+calc(0px - var(--header-height)Space calc 0px var header height
+.1pxSpace .1px
+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
+.142857emSpace .142857em
+.15remSpace .15rem
+.1875emSpace .1875em
+.2remSpace .2rem
+.285714emSpace .285714em
+.3remSpace .3rem
+.375emSpace .375em
+calc(6px * calc(1 - var(--tw-space-y-reverse)Space calc 6px calc 1 var tw space y reverse
−.03889emSpace .03889em
−.2emSpace .2em
−.277778emSpace .277778em
−.27778emSpace .27778em
−.4emSpace .4em
−7pxSpace 7px
−8pxSpace 8px
−.5remSpace .5rem
−.5emSpace .5em
−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(.5rem * calc(1 - var(--tw-space-y-reverse)Space calc .5rem calc 1 var tw space y reverse

Border Radius

+10 added−10 removed14 unchanged
+16pxRadius 16px
+20pxRadius 20px
+var(--geist-marketing-radius)Radius var geist marketing radius
+1remRadius 1rem
+0 var(--geist-radius) var(--geist-radius) 0Radius 0 var geist radius var geist radius 0
+0 0 var(--geist-radius) var(--geist-radius)Radius 0 0 var geist radius var geist radius
+var(--geist-radius) var(--geist-radius) 0 0Radius var geist radius var geist radius 0 0
+128pxRadius 128px
+var(--geist-radius-large) var(--geist-radius-large) 0 0Radius var geist radius large var geist radius large 0 0
+.3125remRadius .3125rem
−2.5pxRadius 2.5px
−6px 0 0 6pxRadius 6px 0 0 6px
−99pxRadius 99px
−var(--corner-small,6px)Radius var corner small 6px
−999pxRadius 999px
−5pxRadius 5px
−var(--geist-radius,5px)Radius var geist radius 5px
−24pxRadius 24px
−unsetRadius unset
−14pxRadius 14px

Shadows

+12 added−12 removed12 unchanged
+var(--ds-shadow-border), 0 0 0 #0000000aShadow 3
+var(--ds-shadow-medium), var(--ds-shadow-border)Shadow 5
+var(--ds-background-200) 0 0 0 1pxShadow 6
+var(--geist-shadow-small)Shadow 8
+0 0 0 1px var(--themed-border)Shadow 9
+var(--ds-shadow-border-small)Shadow 10
+0 0 0 1px var(--geist-background), 0 0 0 3px var(--button-custom-bg-hover,var(--button-custom-bg,var(--geist-foreground)))Shadow 11
+inset 2px 0 0 0 var(--ds-blue-900)Shadow 13
+inset 2px 0 0 0 var(--ds-amber-900)Shadow 14
+inset 2px 0 0 0 var(--ds-green-900)Shadow 15
+inset 2px 0 0 0 var(--ds-red-900)Shadow 16
+inset 0 0 0 2px var(--ds-blue-700)Shadow 19
−var(--ds-shadow-tooltip), 0 0 0 1px var(--ds-background-100)Shadow 4
−0 0 0 1px var(--border-color,var(--ds-gray-alpha-400))Shadow 5
−0 0 0 1px var(--ds-red-900), 0 0 0 4px var(--ds-red-500)Shadow 11
−0 0 0 4px var(--ds-gray-alpha-400)Shadow 14
−0 0 0 2px var(--theme-color,--ds-blue-900)Shadow 15
−0 1px 2px #0000000aShadow 16
−var(--ds-shadow-tooltip)Shadow 17
−0 4px 9px #0000001fShadow 18
−0 0 0 1px var(--themed-border,var(--ds-gray-alpha-400))Shadow 19
−var(--ds-focus-border)Shadow 20
−0 0 0 1px var(--themed-border), 0px 0px 0px 4px hsla(var(--ds-red-900-value), .16)Shadow 21
−0 0 0 var(--geist-foreground)Shadow 22
Back to vercel.com archive