github.comgitlab.com

14 shared+62 in gitlab.com−127 in github.com
Loading…

Colors

−581 shared+9

github.com

rgba(255, 255, 255, 0.15)

gitlab.com

rgba(255, 255, 255, 0.15)

Only in github.com

#0000only A
#d1d5da80only A
#218bffonly A
#54aeffonly A
#24292fonly A
#fff0only A
#1b1f23only A
#00000026 0 0 0 4pxonly A
#000only A
#fffonly A
#e4ebe6only A
#d2d9d4only A
#c4ccc6only A
#b6bfb8only A
#96a199only A
#77827aonly A
#58635bonly A
#353d37only A
#191f1bonly A
#ddf4ffonly A
#bcecffonly A
#8dd6ffonly A
#5fb9ffonly A
#0377ffonly A
#0055d5only A
#0040a7only A
#a4aea6only A
#f0f6fconly A
#21262donly A
rgba(255, 255, 255, 0.85)only A
rgba(255, 255, 255, 0.6)only A
#1f2328only A
#59636eonly A
rgba(36, 41, 47, 0.9)only A
#7c8980only A
#5fed83only A
rgba(255, 255, 255, 0.3)only A
rgba(255, 255, 255, 0.1)only A
#808080only A
#484f58only A
rgba(255, 255, 255, 0.75)only A
rgba(72, 79, 88, 0.5)only A
#0d1117only A
#818b98only A
#d1d9e0only A
rgba(255, 255, 255, 0.25)only A
#8c93fbonly A
rgba(255, 255, 255, 0.06)only A
rgba(255, 255, 255, 0.2)only A
#1f6febonly A
#08872bonly A
rgba(31, 35, 40, 0.4)only A
rgba(46, 55, 74, 0.82)only A
#151a22only A
#090d0aonly A
rgba(13, 17, 23, 0.75)only A
#0f1511only A
#262c28only A

Only in gitlab.com

#ffffffonly B
#171321only B
#7759c2only B
#74717aonly B
#fc6d26only B
#000000only B
#1f1c2eonly B
#d1d0d3only B
rgba(0, 0, 0, 0.5)only B

Typography

−220 shared+18

github.com

Aa
)var(--fontStack-system)
2rem · 400
only A
Aa
)var(--fontStack-system)
1.25rem · 600
only A
Aa
)var(--fontStack-system)
1.25rem · 400
only A
Aa
)/var(--text-body-lineHeight-small
.75rem · 400
only A
Aa
Mona Sans
16px · 400
only A
Aa
Mona Sans VF
14px · 400
only A
Aa
Mona Sans VF
12px · 400
only A
Aa
Mona Sans
16px · 500
only A
Aa
Mona Sans
18px · 400
only A
Aa
Mona Sans VF
16px · 400
only A
Aa
Mona Sans
22px · 400
only A
Aa
Mona Sans
40px · 460
only A
Aa
Mona Sans
14px · 400
only A
Aa
Mona Sans
22px · 480
only A
Aa
Mona Sans VF
14px · 500
only A
Aa
Mona Sans
22px · 600
only A
Aa
Mona Sans
16px · 600
only A
Aa
Mona Sans VF
24px · 600
only A
Aa
Mona Sans Mono
14px · 400
only A
Aa
Mona Sans
40px · 500
only A
Aa
Mona Sans
48px · 800
only A
Aa
Mona Sans
64px · 425
only A

gitlab.com

Aa
GitLab Sans
14px!important · 400
only B
Aa
GitLab Sans
16px · 400
only B
Aa
GitLab Sans
14px · 400
only B
Aa
GitLab Sans
18px · 660
only B
Aa
GitLab Sans
32px · 400
only B
Aa
GitLab Sans
0px · 660
only B
Aa
GitLab Sans
64px · 660
only B
Aa
GitLab Sans
18px · 400
only B
Aa
GitLab Sans
13.3333px · 400
only B
Aa
GitLab Sans
96px · 660
only B
Aa
GitLab Sans
40px · 660
only B
Aa
GitLab Sans
24px · 400
only B
Aa
GitLab Sans
14px · 660
only B
Aa
GitLab Sans
13.008px · 600
only B
Aa
GitLab Sans
24px · 700
only B
Aa
GitLab Sans
19.2px · 600
only B
Aa
GitLab Sans
13.008px · 400
only B
Aa
GitLab Sans
13.008px · 700
only B

Spacing

−2111 shared+21

github.com

1px
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
calc(0px - var(--overlap-size)only A
0pxonly A
var(--base-size-2,.125rem)only A
var(--overlay-paddingBlock-condensed,.25rem)only A
var(--base-size-4,4px)only A
calc(-1*var(--base-size-4,4px)only A
normal 4pxonly A
.063remonly A
.1pxonly A
.1emonly A
.12emonly A
.125emonly A
.125remonly A
.15emonly A
.18pxonly A
.2emonly A
.21pxonly A
.24pxonly A
2pxonly A
2.4pxonly A
3pxonly A

gitlab.com

1px
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
-16pxonly B
-1pxonly B
1emonly B
5pxonly B
6pxonly B
10pxonly B
11pxonly B
13.008pxonly B
15pxonly B
25pxonly B
25.5938pxonly B
30pxonly B
40pxonly B
56pxonly B
68.5pxonly B
82pxonly B
84.5pxonly B
118pxonly B
160pxonly B
189.453pxonly B
273.656pxonly B

Border Radius

−142 shared+9

github.com

4px
50%
6pxonly A
.5emonly A
1pxonly A
var(--borderRadius-full,100vh)only A
var(--borderRadius-medium)only A
var(--borderRadius-medium,6px)only A
var(--borderRadius-small,4px)only A
var(--borderRadius-large,8px)only A
var(--borderRadius-medium,8px)only A
var(--borderRadius-full,50%)only A
2emonly A
12pxonly A
inheritonly A
.375remonly A

gitlab.com

4px
50%
4px 4px 50pxonly B
50pxonly B
0 4px 4px 0only B
24pxonly B
28pxonly B
20pxonly B
16pxonly B
999pxonly B
2pxonly B

Shadows

−120 shared+5

github.com

inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg))only A
inset 0 -1px 0 var(--borderColor-neutral-muted,var(--color-neutral-muted))only A
0 0 18px #0006only A
var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))only A
var(--shadow-inset,var(--color-primer-shadow-inset))only A
var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow))only A
inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))only A
var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))only A
var(--shadow-resting-small,var(--color-btn-outline-hover-shadow)),var(--shadow-highlight,var(--color-btn-outline-hover-inset-shadow))only A
var(--button-outline-shadow-selected,var(--color-btn-outline-selected-shadow))only A
var(--shadow-resting-small,var(--color-btn-danger-hover-shadow)),var(--shadow-highlight,var(--color-btn-danger-hover-inset-shadow))only A
var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))only A

gitlab.com

0 8px 50px -16px #d1d0d280only B
0 -4px 20px #00000014only B
0 6px 10px #00000026only B
rgba(0, 0, 0, 0.08) 0px -4px 20px 0pxonly B
rgba(0, 0, 0, 0.2) 0px 0px 18px 0pxonly B

Try another comparison

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

New comparison