Colors

Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.1 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.

base
black
#000000
white
#ffffff
transparent
gits_blue
25
#eefbff
50
#d8eefd
100
#c5e5fd
200
#9dd4fb
300
#76c3f9
400
#4fb1f8
500
#28a0f6
600
#0984dd
700
#0764a7
800
#054471
900
#02233b
gits_orange
25
#fff9f5
50
#fff4ed
100
#ffe7d5
200
#fecaaa
300
#fda06c
400
#fb753c
500
#f95016
600
#ea360c
700
#c2250c
800
#9a1f12
900
#7c1d12
gits_green
25
#f6fdf9
50
#f1fcf5
100
#defaea
200
#bef4d4
300
#8beab2
400
#52d689
500
#27ae60
600
#1d9c53
700
#1a7b43
800
#1a6139
900
#175031
gits_red
25
#fffbfb
50
#fef2f2
100
#fde3e3
200
#fccccc
300
#f9a8a8
400
#f47575
500
#eb5757
600
#d62c2c
700
#b42121
800
#951f1f
900
#7c2020
gray
25
#fcfcfd
50
#f9fafb
100
#f2f4f7
200
#eaecf0
300
#d0d5dd
400
#98a2b3
500
#667085
600
#475467
700
#344054
800
#1d2939
900
#101828
primary
25
#eefbff
50
#d8eefd
100
#c5e5fd
200
#9dd4fb
300
#76c3f9
400
#4fb1f8
500
#28a0f6
600
#0984dd
700
#0764a7
800
#054471
900
#02233b
secondary
25
#fff9f5
50
#fff4ed
100
#ffe7d5
200
#fecaaa
300
#fda06c
400
#fb753c
500
#f95016
600
#ea360c
700
#c2250c
800
#9a1f12
900
#7c1d12
info
25
#f5fbff
50
#f0f9ff
100
#e0f2fe
200
#b9e6fe
300
#7cd4fd
400
#36bffa
500
#0ba5ec
600
#0086c9
700
#026aa2
800
#065986
900
#0b4a6f
error
25
#fffbfa
50
#fef3f2
100
#fee4e2
200
#fecdca
300
#fda29b
400
#f97066
500
#f04438
600
#d92d20
700
#b42318
800
#912018
900
#7a271a
warning
25
#fffcf5
50
#fffaeb
100
#fef0c7
200
#fedf89
300
#fec84b
400
#fdb022
500
#f79009
600
#dc6803
700
#b54708
800
#93370d
900
#7a2e0e
success
25
#f6fef9
50
#ecfdf3
100
#d1fadf
200
#a6f4c5
300
#6ce9a6
400
#32d583
500
#12b76a
600
#039855
700
#027a48
800
#05603a
900
#054f31
gray_blue
25
#fcfcfd
50
#f8f9fc
100
#eaecf5
200
#d5d9eb
300
#b3b8db
400
#717bbc
500
#4e5ba6
600
#3e4784
700
#363f72
800
#293056
900
#101323
gray_cool
25
#fcfcfd
50
#f9f9fb
100
#eff1f5
200
#dcdfea
300
#b9c0d4
400
#7d89b0
500
#5d6b98
600
#4a5578
700
#404968
800
#30374f
900
#111322
gray_modern
25
#fcfcfd
50
#f8fafc
100
#eef2f6
200
#e3e8ef
300
#cdd5df
400
#9aa4b2
500
#697586
600
#4b5565
700
#364152
800
#202939
900
#121926
gray_neutral
25
#fcfcfd
50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d2d6db
400
#9da4ae
500
#6c737f
600
#4b5565
700
#384250
800
#1f2a37
900
#111927
gray_iron
25
#fcfcfc
50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d1d1d6
400
#a0a0ab
500
#70707b
600
#51525c
700
#3f3f46
800
#26272b
900
#18181b
gray_true
25
#fcfcfc
50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d6d6d6
400
#a3a3a3
500
#737373
600
#525252
700
#424242
800
#292929
900
#141414
gray_warm
25
#fdfdfc
50
#fafaf9
100
#f5f5f4
200
#e7e5e4
300
#d7d3d0
400
#a9a29d
500
#79716b
600
#57534e
700
#44403c
800
#292524
900
#1c1917
moss
25
#fafdf7
50
#f5fbee
100
#e6f4d7
200
#ceeab0
300
#acdc79
400
#86cb3c
500
#669f2a
600
#4f7a21
700
#3f621a
800
#335015
900
#2b4212
green_light
25
#fafef5
50
#f3fee7
100
#e3fbcc
200
#d0f8ab
300
#a6ef67
400
#85e13a
500
#66c61c
600
#4ca30d
700
#3b7c0f
800
#326212
900
#2b5314
green
25
#f6fef9
50
#edfcf2
100
#d3f8df
200
#aaf0c4
300
#73e2a3
400
#3ccb7f
500
#16b364
600
#099250
700
#087443
800
#095c37
900
#084c2e
teal
25
#f6fefc
50
#f0fdf9
100
#ccfbef
200
#99f6e0
300
#5fe9d0
400
#2ed3b7
500
#15b79e
600
#0e9384
700
#107569
800
#125d56
900
#134e48
cyan
25
#f5feff
50
#ecfdff
100
#cff9fe
200
#a5f0fc
300
#67e3f9
400
#22ccee
500
#06aed4
600
#088ab2
700
#0e7090
800
#155b75
900
#164c63
blue_light
25
#f5fbff
50
#f0f9ff
100
#e0f2fe
200
#b9e6fe
300
#7cd4fd
400
#36bffa
500
#0ba5ec
600
#0086c9
700
#026aa2
800
#065986
900
#0b4a6f
blue
25
#f5faff
50
#eff8ff
100
#d1e9ff
200
#b2ddff
300
#84caff
400
#53b1fd
500
#2e90fa
600
#1570ef
700
#175cd3
800
#1849a9
900
#194185
blue_dark
25
#f5f8ff
50
#eff4ff
100
#d1e0ff
200
#b2ccff
300
#84adff
400
#528bff
500
#2970ff
600
#155eef
700
#004eeb
800
#0040c1
900
#00359e
indigo
25
#f5f8ff
50
#eef4ff
100
#e0eaff
200
#c7d7fe
300
#a4bcfd
400
#8098f9
500
#6172f3
600
#444ce7
700
#3538cd
800
#2d31a6
900
#2d3282
violet
25
#fbfaff
50
#f5f3ff
100
#ece9fe
200
#ddd6fe
300
#c3b5fd
400
#a48afb
500
#875bf7
600
#7839ee
700
#6927da
800
#5720b7
900
#491c96
purple
25
#fafaff
50
#f4f3ff
100
#ebe9fe
200
#d9d6fe
300
#bdb4fe
400
#9b8afb
500
#7a5af8
600
#6938ef
700
#5925dc
800
#4a1fb8
900
#3e1c96
fuchsia
25
#fefaff
50
#fdf4ff
100
#fbe8ff
200
#f6d0fe
300
#eeaafd
400
#e478fa
500
#d444f1
600
#ba24d5
700
#9f1ab1
800
#821890
900
#6f1877
pink
25
#fef6fb
50
#fdf2fa
100
#fce7f6
200
#fcceee
300
#faa7e0
400
#f670c7
500
#ee46bc
600
#dd2590
700
#c11574
800
#9e165f
900
#851651
rose
25
#fff5f6
50
#fff1f3
100
#ffe4e8
200
#fecdd6
300
#fea3b4
400
#fd6f8e
500
#f63d68
600
#e31b54
700
#c01048
800
#a11043
900
#89123e
orange_dark
25
#fff9f5
50
#fff4ed
100
#ffe6d5
200
#ffd6ae
300
#ff9c66
400
#ff692e
500
#ff4405
600
#e62e05
700
#c2250c
800
#97180c
900
#771a0d
orange
25
#fefaf5
50
#fef6ee
100
#fdead7
200
#f9dbaf
300
#f7b27a
400
#f38744
500
#ef6820
600
#e04f16
700
#b93815
800
#932f19
900
#772917
yellow
25
#fefdf0
50
#fefbe8
100
#fef7c3
200
#feee95
300
#fde272
400
#fac515
500
#eaaa08
600
#ca8504
700
#a15c07
800
#854a0e
900
#713b12