vercel.comnetlify.com

24shared+99in netlify.com−90in vercel.com

Audit

11% token overlap

vercel.com and netlify.com have 11% token overlap across colors, typography, spacing, radius, and shadows after normalization (lab/oklab to hex, var() resolution, !important stripping, rem/em to px conversion at 16 px base). They share 24 token values; 90 are unique to vercel.com and 99 are unique to netlify.com. Their visual languages converge most on spacing (48% aligned) and diverge most on typography. Source: UI Archive token diff, computed from public CSS at vercel.com and netlify.com.

· vercel.com and netlify.com share 24 normalized token values (11% overlap).
· Closest category: spacing (15 shared, 48% aligned).
· Greatest divergence: typography (19 unique to vercel.com, 21 unique to netlify.com).

Machine-readable

Colors

−40·2 shared·+54

vercel.com

#ffffff

#000000

netlify.com

#ffffff

#000000

Only in vercel.com

linear-gradient(180deg, #000c 0%, #000 100%)only A

#fafafacconly A

Try another comparison

Pick two websites and see how their design tokens stack up.

New comparison

Only in netlify.com

#edf4ffonly B

#cde2ffonly B

#b5d2fbonly B

#9cbef6only B

#80abfaonly B

#5d8df5only B

#316bf4only B

#2e51edonly B

#2036a1only B

#1b205bonly B

#1e242conly B

hsla(212, 27%, 10%, .95)only B

#32e6e2only B

#014847only B

#fdf5d8only B

#f6e0a5only B

#facd6fonly B

#fbb13donly B

#f98e21only B

#d5771aonly B

#a85d13only B

#8c4c0donly B

#603408only B

#332213only B

#e7fce9only B

#bef9c6only B

#93f5a5only B

#353a3eonly B

#89ddffonly B

#defffeonly B

#e4f0fbonly B

#181a1conly B

#545a61only B

#c792eaonly B

#f6f6f7only B

rgba(255, 255, 255, 0.2)only B

#7e8792only B

#add7ffonly B

#5fb3ffonly B

#9da7b2only B

rgba(208, 255, 254, 0.2)only B

#e9ebedonly B

rgba(233, 235, 237, 0.1)only B

#e6ecf2only B

#778089only B

#5de4c7only B

#7fdbcaonly B

color(srgb 0.207843 0.227451 0.243137 / 0.12)only B

#12181fonly B

#060b10only B

color(srgb 1 1 1 / 0.901961)only B

color(srgb 1 1 1 / 0.0980392)only B

color(srgb 0.207843 0.227451 0.243137 / 0.04)only B

color(srgb 0.207843 0.227451 0.243137 / 0.06)only B

Typography

−19·0 shared·+21

vercel.com

DSEG7 Classic

2rem · 400

only A

Geist

16px · 400

only A

Geist

14px · 400

only A

Geist

14px · 500

only A

Geist

12px · 400

only A

Geist

16px · 500

only A

Geist

12px · 500

only A

Geist

32px · 400

only A

Geist

24px · 600

only A

Geist

24px · 500

only A

Geist

18px · 400

only A

Geist

7px · 700

only A

Geist

48px · 600

only A

Geist

20px · 400

only A

Geist

32px · 600

only A

Geist Mono

12px · 400

only A

Geist Mono

9.5px · 400

only A

Geist Mono

7.75px · 400

only A

Geist Mono

6px · 400

only A

netlify.com

YouTube Noto

18px · 400

only B

Instrument Sans

16px · 400

only B

Martian Mono

16px · 400

only B

Instrument Sans

16px · 500

only B

Figtree

18px · 600

only B

Instrument Sans

14px · 400

only B

Spacing

−10·15 shared·+6

vercel.com

.125rem

.2em

.25rem

.3em

.375rem

.4em

.5rem

.625rem

1px

12px

14px

16px

24px

32px

48px

.277778emonly A

.55556emonly A

3pxonly A

5pxonly A

7pxonly A

40pxonly A

44pxonly A

84.5pxonly A

-2pxonly A

-1pxonly A

netlify.com

.125em

.2em

.25rem

.3em

.375rem

.4em

.5rem

.625rem

1px

.75rem

.875rem

16px

24px

32px

48px

.15emonly B

Border Radius

−9·7 shared·+6

vercel.com

50%

4px

9999px

6px

8px

12px

2px

100%only A

2.5pxonly A

10pxonly A

99pxonly A

6px 0 0 6pxonly A

0 6px 6px 0only A

24pxonly A

14pxonly A

128pxonly A

netlify.com

50%

.25rem

9999px

.375rem

.5rem

.75rem

.125rem

360pxonly B

initialonly B

1remonly B

0only B

inheritonly B

unsetonly B

Shadows

−12·0 shared·+12

vercel.com

inset 0 0 0 1px #00000014only A

0 5px 10px #0000001fonly A

0 0 0 2px #fff, 0 0 0 4px #999only A

0 0 0 4px #00000014only A

0 0 0 2px --ds-blue-900only A

0 0 0 1px #00000014only A

0 0 0 1px #00000036only A

0 0 0 1px oklch(54.99% .232 25.29), 0 0 0 4px oklch(94.33% .0369 15.0115)only A

0 0 0 1px #00000057, 0px 0px 0px 4px #00000029only A

0 0 0 1px #00000057, 0px 0px 0px 4px #ffffff3donly A

0 0 0 2px hsla(0, 0%, 100%, 1), 0 0 0 4px oklch(57.61% .2508 258.23)only A

0 0 0 1px oklch(54.99% .232 25.29), 0 0 0 4px oklch(84.47% .1018 17.71)only A

netlify.com

0 0 0 3px Highlightonly B

0 0 2px rgba(0,0,0,.5)only B

0 2px 4px 0 color(srgb .2 .21568627450980393 .23137254901960785 / .08), 0 1px 10px 0 color(srgb .2 .21568627450980393 .23137254901960785 / .06)only B

#12181f 0 0 0 3pxonly B

0 2px 8px #00000026only B

0 16px 24px 0 color(srgb 0 0 0 / .07), 0 6px 30px 0 color(srgb 0 0 0 / .06), 0 8px 10px 0 color(srgb 0 0 0 / .1)only B

0 4px 12px 0 color(srgb 0 0 0 / .25)only B

1.25rem 0 0 color(srgb .15294117647058825 .1843137254901961 .2196078431372549),2.5rem 0 0 color(srgb .15294117647058825 .1843137254901961 .2196078431372549)only B

0 2px 12px #0000004donly B

0 0 24px color(srgb .0196078431372549 .7411764705882353 .7294117647058823)only B