stripe.comlinear.app

18 shared+117 in linear.app−61 in stripe.com
Loading…

Colors

−190 shared+51

Only in stripe.com

#f5f5ffonly A
#e8e9ffonly A
#d6d9fconly A
#b9b9f9only A
#9a9afeonly A
#7f7dfconly A
#665efdonly A
#533afdonly A
#4032c8only A
#2e2b8conly A
#1c1e54only A
#161741only A
#ccdaffonly A
#a8bfffonly A
#92adffonly A
#7389ffonly A
#533afdb2only A
#362baaonly A
#222069only A

Only in linear.app

rgba(0,0,0,0.2)only B
rgba(255,255,255,0)only B
rgba(255,255,255,0.1)only B
rgba(255,255,255,0.2)only B
rgba(255,255,255,0.4)only B
#fffonly B
#000only B
#4ea7fconly B
#eb5757only B
#27a644only B
#fc7840only B
#f0bf00only B
#5e6ad2only B
#00b8cconly B
#68cc58only B
#d4b144only B
#7a7fadonly B
#f7f8f8only B
#62666donly B
#d0d6e0only B
#8a8f98only B
rgba(255, 255, 255, 0.05)only B
rgba(255, 255, 255, 0.08)only B
rgba(255, 255, 255, 0.02)only B
#e2e4e7only B
#383b3fonly B
#23252aonly B
#e2e4e6only B
rgba(255, 255, 255, 0.03)only B
#e6e6e6only B
#6366f1only B
#6d78d5only B
#08090aonly B
#24282conly B
#323334only B
#0f1011only B
rgba(255, 255, 255, 0.12)only B
#8b5cf6only B
rgba(255, 255, 255, 0.01)only B
rgba(94, 106, 210, 0.15)only B
#090a0bonly B
#101112only B
#121414only B
rgba(255, 255, 255, 0.04)only B
#121314only B
#161718only B
#10b981only B
#06b6d4only B
#232534only B
#0f3338only B
#422222only B

Typography

−00 shared+24

stripe.com

linear.app

Aa
Inter Variable
16px · 400
only B
Aa
Inter Variable
13.3333px · 400
only B
Aa
Inter Variable
12px · 400
only B
Aa
Inter Variable
13px · 510
only B
Aa
Inter Variable
12px · 510
only B
Aa
Inter Variable
10px · 510
only B
Aa
Inter Variable
15px · 400
only B
Aa
Inter Variable
13px · 400
only B
Aa
Inter Variable
10px · 400
only B
Aa
Inter Variable
12px · 590
only B
Aa
Inter Variable
18px · 400
only B
Aa
Berkeley Mono
12px · 400
only B
Aa
Inter Variable
64px · 510
only B
Aa
Inter Variable
14px · 400
only B
Aa
Inter Variable
40px · 510
only B
Aa
Inter Variable
14px · 510
only B
Aa
Inter Variable
15px · 510
only B
Aa
Inter Variable
15px · 590
only B
Aa
Inter Variable
15px · 300
only B
Aa
Berkeley Mono
14px · 400
only B
Aa
Inter Variable
11px · 510
only B
Aa
Inter Variable
20px · 400
only B
Aa
Inter Variable
16px · 510
only B
Aa
Inter Variable
14px · 590
only B

Spacing

−911 shared+21

stripe.com

1px
2px
3px
4px
5px
6px
8px
9px
10px
11px
12px
0emonly A
0pxonly A
.05remonly A
1.25pxonly A
3.2pxonly A
6.5pxonly A
7pxonly A
10.5pxonly A
11.5pxonly A

linear.app

1px
2px
3px
4px
5px
6px
8px
9px
10px
11px
12px
-640pxonly B
-1pxonly B
calc(var(--height, 0px)only B
calc(var(--width, 0px)only B
var(--gradientBorder-size,1px)only B
calc(7px + var(--x1ele6il)only B
calc(.5lh - 9px)only B
.1emonly B
.125remonly B
.25emonly B
.25remonly B
.5remonly B
14pxonly B
15pxonly B
16pxonly B
19.2031pxonly B
20pxonly B
24pxonly B
26pxonly B
32pxonly B
1159pxonly B

Border Radius

−177 shared+9

stripe.com

50%
10px
4px
2px
5px
3px
100%
var(--hds-space-button-radius-lg)only A
var(--hds-space-core-radius-md)only A
var(--navigation-border-radius)only A
var(--hds-space-core-radius-sm)only A
1pxonly A
var(--hds-space-core-radius-md) var(--hds-space-core-radius-md) 0 0only A
0 0 var(--hds-space-core-radius-md) var(--hds-space-core-radius-md)only A
calc(var(--hds-space-core-radius-md) / var(--carousel-item-hover-scale, 1)) /var(--hds-space-core-radius-md)only A
var(--hds-space-core-radius-xs)only A
100pxonly A
16pxonly A
30pxonly A
var(--phone-graphic-border-radius-outer)only A
var(--phone-graphic-border-radius-inner)only A
var(--hds-space-core-radius-xs) var(--hds-space-core-radius-xs) 0 0only A
calc(var(--card-radius) - 1px)only A
var(--card-radius)only A

linear.app

50%
10px
4px
2px
5px
3px
100%
.3emonly B
8pxonly B
var(--radius-rounded)only B
12pxonly B
6pxonly B
99999pxonly B
var(--control-border-radius,4px)only B
var(--xykavoc)only B
var(--button-corner-radius)only B

Shadows

−160 shared+12

stripe.com

inset 0 0 0 2px var(--hds-color-core-neutral-0)only A
0 30px 60px -50px #0000001a,0 30px 60px -10px #32325d40only A
var(--hds-shadow-md)only A
0 -1px 0 0 var(--hds-color-surface-border-quiet)only A
var(--hds-canary-ui-shadow)only A
0 0 32.239px -14.806px rgba(50,50,93,.25),0 4.776px 19.343px -9.672px rgba(0,0,0,.1)only A
0 .683px 2.048px 0 rgba(0,0,0,.06),0 3.413px 10.24px 0 rgba(53,53,53,.04)only A
0 15px 35px 0 hsla(0,0%,9%,.08)only A
0 3px 6px 0 hsla(0,0%,9%,.06)only A
0 6px 12px -2px rgba(50,50,93,.08),0 3px 7px -3px rgba(0,0,0,.04)only A
0 13.365px 26.73px -12.276px rgba(50,50,93,.25),0 8.019px 16.038px -8.019px rgba(0,0,0,.1)only A
0 27px 40.5px -27px rgba(50,50,93,.25),0 16.2px 32.4px -16.2px rgba(0,0,0,.1)only A
0 2px 5px 0 rgba(0,0,0,.1)only A
0 20.417px 30.625px -20.417px rgba(50,50,93,.25),0 12.25px 24.5px -12.25px rgba(0,0,0,.1)only A
0 42.043px 84.087px 0 hsla(0,0%,9%,.08),0 12.613px 29.43px 0 hsla(0,0%,9%,.08),0 4.204px 12.613px 0 hsla(0,0%,9%,.12)only A
0 30px 45px -30px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.1)only A

linear.app

var(--shadow-tiny,var(--shadow-none)),0 0 0 1px var(--color-border-tertiary)only B
0 0 4px rgba(0,0,0,.5)only B
0 12px 48px var(--xd1bcc1)only B
0 1px 2px rgba(0,0,0,.5)only B
var(--x-boxShadow)only B
var(--x10lzhmx)only B
var(--x1dhg814)only B
var(--x1k7v50d)only B
var(--shadow-low)only B
var(--shadow-stack-low)only B
inset 0 0 0 1px var(--color-border-primary)only B
0 4px 32px 0 rgba(8,9,10,.6)only B

Try another comparison

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

New comparison