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

FoundationSpacing