trello.comclickup.com

7shared+80in clickup.com−69in trello.comtrello · pw@1.58.2clickup · pw@1.58.2

Audit

4% token overlap

trello.com and clickup.com have 4% 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 7 token values; 69 are unique to trello.com and 80 are unique to clickup.com. Their visual languages converge most on radius (10% aligned) and diverge most on typography. Source: UI Archive token diff, computed from public CSS at trello.com and clickup.com.

· trello.com and clickup.com share 7 normalized token values (4% overlap).
· Closest category: radius (3 shared, 10% aligned).
· Greatest divergence: typography (16 unique to trello.com, 13 unique to clickup.com).

Machine-readable

Colors

−19·1 shared·+21

trello.com

#ffffff

clickup.com

#ffffff

Only in trello.com

#091e42only A

#0052cconly A

#172b4donly A

#000000only A

Try another comparison

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

New comparison

Only in clickup.com

linear-gradient(45deg,#45C4F9 -0.01%,#7D09FF 50.33%,#FF0BE5),linear-gradient(180deg,#FFF8FB,rgba(255,248,251,0.00))only B

#202020only B

#646464only B

#838383only B

#bbbbbbonly B

#6647f0only B

#efedfdonly B

#0091ffonly B

#ff02f0only B

#feecfconly B

#fc6d2donly B

#fdede7only B

#f0382donly B

#fbddddonly B

#078d3bonly B

#e2f8econly B

#4a2fffonly B

#e3e5fbonly B

linear-gradient(83deg,rgba(var(--color-v3-light-blue)) -5%,rgba(var(--color-v3-purple)) 51%,rgba(var(--color-v3-pink)) 125%)only B

linear-gradient(29deg,rgba(var(--color-v3-purple)) 26%,rgba(var(--color-v3-pink)) 161%)only B

linear-gradient(133deg,rgba(var(--color-v3-purple)) 16%,rgba(var(--color-v3-pink)) 136%)only B

Typography

−16·0 shared·+13

trello.com

SFMono-Medium

1em · 400

only A

Charlie Text

20px · 400

only A

Charlie Text

16px · 400

only A

Charlie Text

24px · 400

only A

Charlie Text

12px · 400

only A

Charlie Display

36px · 500

only A

Charlie Text

13.008px · 600

only A

Charlie Display

20px · 500

only A

Charlie Display

24px · 500

only A

Charlie Text

19.2px · 400

only A

Charlie Text

16px · 700

only A

Charlie Display

16px · 500

only A

Charlie Display

48px · 500

only A

Charlie Display

36px · 700

only A

Charlie Text

13.008px · 400

only A

Charlie Text

14.4px · 400

only A

clickup.com

Plus Jakarta Sans

var(--font-size) · 650

only B

Inter

var(--font-size) · 600

only B

Inter

var(--font-size) · 400

only B

Shantell Sans

21px · 400

only B

Plus Jakarta Sans

14px · 400

only B

Sometype Mono

1rem · 400

only B

Spacing

−19·3 shared·+10

trello.com

0.25rem

0.5rem

2px

0.14remonly A

0.15remonly A

0.2remonly A

0.3remonly A

0.33remonly A

0.4remonly A

0.6remonly A

0.7remonly A

0.71remonly A

0.75remonly A

0.8remonly A

1remonly A

1.25remonly A

1.5remonly A

1.75remonly A

2remonly A

40pxonly A

70pxonly A

-16pxonly A

clickup.com

4px

8px

2px

3pxonly B

0.188remonly B

4.33pxonly B

5pxonly B

0.313remonly B

6pxonly B

7pxonly B

.438remonly B

9pxonly B

0.563remonly B

Border Radius

−6·3 shared·+20

trello.com

0.5rem

50%

2px

0.2remonly A

0.3remonly A

0.3rem 0.3rem 0 0only A

3pxonly A

0.25remonly A

0.3rem 0 0 0.3remonly A

clickup.com

8px

50%

2px

12pxonly B

9999pxonly B

100pxonly B

0.875remonly B

200pxonly B

18pxonly B

6pxonly B

unsetonly B

14px 14px 0 0only B

0 0 14px 14pxonly B

30pxonly B

20pxonly B

9pxonly B

10pxonly B

40pxonly B

5pxonly B

999pxonly B

15pxonly B

16pxonly B

124.516pxonly B

Shadows

−9·0 shared·+16

trello.com

0 0.5rem 1rem 0 rgba(9,30,66,0.15)only A

inset 0 1.5rem 1rem -1rem rgba(9,30,66,0.15)only A

0 0 0 0.2rem rgba(153,141,217,0.5)only A

0 0 0 0.2rem rgba(255,227,128,0.5)only A

0 0 0 0.2rem rgba(122,134,154,0.5)only A

0px 3px 5px rgba(9,30,66,0.2),0px 0px 1px rgba(9,30,66,0.31)only A

rgba(9, 30, 66, 0.15) 0px 8px 16px 0pxonly A

rgba(9, 30, 66, 0.2) 0px 3px 5px 0px, rgba(9, 30, 66, 0.31) 0px 0px 1px 0pxonly A

rgba(0, 0, 0, 0.2) 0px 0px 18px 0pxonly A

clickup.com

0 3px 3px -1.5px #122ba50donly B

0 1px 1px -.5px #122ba50a,0 3px 3px -1.5px #122ba50a,0 6px 6px -3px #122ba50a,0 12px 12px -6px #122ba50aonly B

0 1px 1px -.5px #122ba50a,0 3px 3px -1.5px #122ba50a,0 6px 6px -3px #122ba50a,0 12px 12px -6px #122ba50a,0 24px 24px -12px #122ba50aonly B

0 1px 1px -.5px #122ba50f,0 3px 3px -1.5px #122ba50f,0 6px 6px -3px #122ba50f,0 12px 12px -6px #122ba50f,0 24px 24px -12px #122ba50f,0 48px 48px -24px #122ba50fonly B

0 0 #0000,0 1px 2px #0000000donly B

0 4px 12px #0000001aonly B

0 2px 8px #0000001aonly B

0 4px 10px #0d15300donly B

0 1px 4px #00000014only B

inset 0 0 0 1px #00000026only B