framer.comwebflow.com

20shared+74in webflow.com−114in framer.comwebflow · pw@1.58.2

Audit

10% token overlap

framer.com and webflow.com have 10% 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 20 token values; 114 are unique to framer.com and 74 are unique to webflow.com. Their visual languages converge most on radius (26% aligned) and diverge most on typography. Source: UI Archive token diff, computed from public CSS at framer.com and webflow.com.

· framer.com and webflow.com share 20 normalized token values (10% overlap).
· Closest category: radius (6 shared, 26% aligned).
· Greatest divergence: typography (24 unique to framer.com, 17 unique to webflow.com).
· framer.com uses a broader color palette (50 vs 30).
· framer.com ships a richer type scale than webflow.com.

Machine-readable

Colors

−44·6 shared·+24

framer.com

#000000

#ffffff

#080808

rgba(255, 255, 255, 0.1)

#222222

#171717

webflow.com

#000000

Try another comparison

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

New comparison

Only in framer.com

#999999only A

rgba(255, 255, 255, 0.6)only A

#0099ffonly A

#00bb88only A

#cccccconly A

rgba(255, 255, 255, 0.4)only A

#8c8c8conly A

#666666only A

#242424only A

rgba(255, 255, 255, 0.08)only A

rgba(0, 153, 255, 0.15)only A

rgba(0, 187, 136, 0.1)only A

rgba(255, 255, 255, 0.8)only A

rgba(136, 136, 136, 0.5)only A

#202020only A

rgba(0, 0, 0, 0.03)only A

rgba(255, 255, 255, 0.05)only A

rgba(255, 255, 255, 0.15)only A

rgba(8, 8, 8, 0.7)only A

#1a1a1aonly A

#888888only A

#212121only A

rgba(0, 0, 0, 0.7)only A

#121212only A

#0055ffonly A

rgba(0, 0, 0, 0.3)only A

#35e2ebonly A

#141414only A

#fd5d5conly A

#fac80aonly A

#33c659only A

rgba(0, 132, 255, 0.12)only A

rgba(8, 154, 255, 0.2)only A

#111111only A

rgba(0, 0, 0, 0.6)only A

rgba(0, 0, 0, 0.25)only A

#3a92fdonly A

#9869fdonly A

#33aaffonly A

#1c1c1conly A

#2e2e2eonly A

#2b2b2bonly A

rgba(0, 153, 255, 0.1)only A

rgba(0, 0, 0, 0.88)only A

Only in webflow.com

#146ef5only B

#d8d8d8only B

#7a3dffonly B

#ed52cbonly B

#363636only B

#898989only B

#5a5a5aonly B

#ff6b00only B

Typography

−24·0 shared·+17

framer.com

Inter

12px · 500

only A

Inter

13px · 500

only A

Inter

12px · 600

only A

Inter Variable

15px · 400

only A

Inter Variable

18px · 400

only A

Inter Variable

24px · 400

only A

Inter

13px · 600

only A

Mona Sans

12px · 500

only A

Inter Variable

14px · 400

only A

mona sans

61.5px · 100

only A

GT Walsheim Medium

62px · 500

only A

Inter

20px · 600

only A

Open Runde

9px · 600

only A

Inter

20px · 500

only A

GT Walsheim Framer Medium

110px · 500

only A

Inter

10px · 500

only A

Inter

10px · 600

only A

Inter

12px · 400

only A

Inter Variable

12px · 400

only A

Mona Sans

18px · 500

only A

Mona Sans

13px · 500

only A

Mona Sans

17px · 500

only A

Inter

22px · 700

only A

Inter

14px · 500

only A

webflow.com

Inconsolata

inherit · 400

only B

WF Visual Sans Variable

16px · 400

only B

WFVisualSans-Mono

12px · 400

only B

WF Visual Sans Variable

16px · 500

only B

WF Visual Sans Variable

14px · 400

only B

WF Visual Sans Variable

14.8448px · 500

only B

Spacing

−24·8 shared·+14

framer.com

0em

2px

3px

4px

5px

6px

8px

64px

0.675pxonly A

1pxonly A

4.4pxonly A

7pxonly A

8.61pxonly A

10pxonly A

11pxonly A

12pxonly A

14pxonly A

15pxonly A

20pxonly A

25pxonly A

26pxonly A

30pxonly A

30px 10pxonly A

35pxonly A

39pxonly A

40pxonly A

45pxonly A

47pxonly A

60pxonly A

80pxonly A

100pxonly A

160pxonly A

webflow.com

0rem

.125rem

3px

.25rem

5px

.375rem

.5em

64px

.15remonly B

.2emonly B

0.3remonly B

.4emonly B

4.45344pxonly B

7.57143pxonly B

7.71429px

Border Radius

−10·6 shared·+7

framer.com

inherit

8px

10px

50%

4px

2px

initialonly A

calc(30px*1)only A

5pxonly A

15pxonly A

calc(12px*1)only A

18pxonly A

100pxonly A

20pxonly A

6pxonly A

21pxonly A

webflow.com

inherit

.5rem

10px

50%

4px

2px

.5rem .5rem 0 0only B

0rem 0rem 0rem 0remonly B

unsetonly B

3pxonly B

100%only B

100remonly B

100vwonly B

Shadows

−12·0 shared·+12

framer.com

0 0 0 2px #090909only A

0 10px 10px #0000004donly A

inset 0 0 0 2px #ffffff05only A

0 3px 6px #0000004d,0 0 0 1px #ffffff0fonly A

0 4px 8px #09f3only A

0 1px 2px #0099ff26,0 2px 4px #09f3only A

-10px 10px 20px 10px #0009only A

0 2px 4px #0000001a,0 1px #0000000d,0 0 0 1px #ffffff26only A

0 2px 4px #0000000d,0 1px #00000005,0 0 0 1px #00000003only A

0 2px 4px #0000001a,0 1px #0000000d,0 0 0 1px #00000005only A

0 5px 10px #00000040only A

0 0 0 1px #ffffff1aonly A

webflow.com

inset 0 0 0 0 whiteonly B

rgba(8, 8, 8, 0.08) 0px 1px 1px 0px, rgba(8, 8, 8, 0.2) 0px 1px 1px 0px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 0px insetonly B

unsetonly B

0 0 0 1px #0000001a,0 1px 3px #0000001aonly B

0 0 3px #3336only B

0 0 0 2px #fffonly B

inset 0 0 0 100px #0000only B

inset 0 0 0 100px #00000026only B

0 84px 24px #0000,0 54px 22px #00000003,0 30px 18px #0000000a,0 13px 13px #00000014,0 3px 7px #00000017only B

0 105px 30px #0000,0 67px 27px #00000005,0 38px 23px #0000000f,0 17px 17px #0000001a,0 4px 9px #0000001fonly B