spotify.comsoundcloud.com

28shared+79in soundcloud.com−98in spotify.comsoundcloud · pw@1.58.2

Audit

14% token overlap

spotify.com and soundcloud.com have 14% 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 28 token values; 98 are unique to spotify.com and 79 are unique to soundcloud.com. Their visual languages converge most on spacing (42% aligned) and diverge most on typography. Source: UI Archive token diff, computed from public CSS at spotify.com and soundcloud.com.

· spotify.com and soundcloud.com share 28 normalized token values (14% overlap).
· Closest category: spacing (18 shared, 42% aligned).
· Greatest divergence: typography (9 unique to spotify.com, 17 unique to soundcloud.com).
· soundcloud.com ships a richer type scale than spotify.com.

Machine-readable

Colors

−54·3 shared·+36

spotify.com

#ffffff

#000000

#121212

soundcloud.com

#ffffff

#000000

#121212

Only in spotify.com

#b3b3b3only A

Try another comparison

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

New comparison

Only in soundcloud.com

#666666only B

#044dd2only B

rgba(18,18,18,0.4)only B

rgba(18,18,18,0.15)only B

#5a45fdonly B

#6f5b37only B

#eee8feonly B

#f4eedfonly B

#558b2fonly B

rgba(85,139,47,0.24)only B

#33691eonly B

#ff5500only B

#d61348only B

hsla(0,0%,100%,0.4)only B

hsla(0,0%,100%,0.6)only B

rgba(255,85,0,0.4)only B

rgba(18,18,18,0.6)only B

rgba(4,77,210,0.6)only B

hsla(0,0%,40%,0.6)only B

hsla(0,0%,40%,0.4)only B

#008850only B

linear-gradient(135deg,#9f34a9,#ff4600)only B

#003bb3only B

#1da1f2only B

#e60023only B

#999999only B

#699fffonly B

#3860beonly B

#f3f3f3only B

#303030only B

#cccccconly B

rgba(255, 255, 255, 0.15)only B

#d8d8d8only B

#f2f2f2only B

#141414only B

rgba(0, 0, 0, 0.5)only B

Typography

−9·0 shared·+17

spotify.com

SpotifyMixUI

16px · 400

only A

SpotifyMixUI

13.3333px · 400

only A

SpotifyMixUI

14px · 400

only A

SpotifyMixUI

14px · 700

only A

SpotifyMixUITitle

24px · 700

only A

SpotifyMixUI

16px · 700

only A

SpotifyMixUI

12px · 400

only A

SpotifyMixUI

10.5px · 600

only A

SpotifyMixUI

11px · 400

only A

soundcloud.com

Söhne

14px · 400

only B

Söhne

14px · 600

only B

Söhne

17px · 600

only B

0px · 400

only B

Söhne

12px · 400

only B

Spacing

−14·18 shared·+11

spotify.com

2px

3px

4px

5px

6px

7px

8px

10px

12px

14px

15px

16px

20px

24px

30px

32px

48px

-1px

.6emonly A

.8emonly A

1pxonly A

1.4emonly A

8px normalonly A

8px 12pxonly A

28pxonly A

29pxonly A

36pxonly A

153.719pxonly A

-40pxonly A

-16pxonly A

-8pxonly A

normal 12pxonly A

soundcloud.com

2px

3px

4px

5px

6px

7px

8px

.625em

.75em

14px

15px

1em

20px

24px

30px

32px

48px

Border Radius

−9·7 shared·+9

spotify.com

8px

16px

50%

4px

2px

100px

1000px

1pxonly A

12pxonly A

23pxonly A

40pxonly A

6pxonly A

500pxonly A

0 0 8px 8pxonly A

28pxonly A

999pxonly A

soundcloud.com

8px

16px

50%

4px

2px

100px

1000px

3%only B

3pxonly B

50pxonly B

13pxonly B

#fffonly B

#f3f3f3only B

#121212only B

Shadows

−12·0 shared·+6

spotify.com

0 0 0 1px #000only A

0 16px 24px #0000004d,0 6px 8px #0003only A

0 4px 60px #00000080only A

0 4px 12px 0 #0000004donly A

0 4px 40px #0000004donly A

inset 0 0 0 1px #ffffff1aonly A

inset 0 0 0 2px #fffonly A

0 2px 5px #0006only A

0 8px 24px #00000080only A

0 4px 28px #000conly A

0 -1px #181818only A

0 8px 8px #0000004donly A

soundcloud.com

0 0 0 2px #044dd2 insetonly B

0 0 0 1px #666only B

0 0 0 2px #044dd2only B

0 0 0 3px #fff insetonly B

0 0 0 3px #fff inset,0 0 0 2px #044dd2only B

rgba(18, 18, 18, 0.1) 0px 0px 0px 1px insetonly B