DocsStylesComponentsPatternsExamples
Payroller
Look this at Figma

Primary Colors

primary-900 (#1c4e4e / 180, 47%, 21%)

primary-800 (#1f6e6c / 178, 56%, 28%)

primary-700 (#05a09b / 178, 94%, 32%)

primary-600 (#2cb2ad / 178, 60%, 44%)

primary-500 (#53bbb7 / 178, 43%, 53%)

primary-400 (#7dcdca / 178, 44%, 65%)

primary-300 (#a6dddd / 180, 45%, 76%)

primary-200 (#c5e7e6 / 178, 41%, 84%)

primary-100 (#e3f7f7 / 180, 56%, 93%)

primary-50 (#eefcfb / 176, 70%, 96%)

Default Colors

gray-900 (#111928 / 219, 40%, 11%)

gray-800 (#1F2A37 / 213, 28%, 17%)

gray-700 (#374151 / 217, 19%, 27%)

gray-600 (#4B5563 / 215, 14%, 34%)

gray-500 (#6B7280 / 220, 9%, 46%)

gray-400 (#9CA3AF / 218, 11%, 65%)

gray-300 (#D1D5DB / 216, 12%, 84%)

gray-200 (#E5E7EB / 220, 13%, 91%)

gray-100 (#F3F4F6 / 220, 14%, 96%)

gray-50 (#F9FAFB / 210, 20%, 98%)

red-900 (#771D1D / 0, 61%, 29%)

red-800 (#9B1C1C / 0, 69%, 36%)

red-700 (#C81E1E / 0, 74%, 45%)

red-600 (#E02424 / 0, 75%, 51%)

red-500 (#F05252 / 0, 84%, 63%)

red-400 (#F98080 / 0, 91%, 74%)

red-300 (#F8B4B4 / 0, 83%, 84%)

red-200 (#FBD5D5 / 0, 83%, 91%)

red-100 (#FDE8E8 / 0, 84%, 95%)

red-50 (#FDF2F2 / 0, 73%, 97%)

yellow-900 (#633112 / 23, 69%, 23%)

yellow-800 (#723B13 / 25, 71%, 26%)

yellow-700 (#8E4B10 / 28, 80%, 31%)

yellow-600 (#9F580A / 31, 88%, 33%)

yellow-500 (#C27803 / 37, 97%, 39%)

yellow-400 (#E3A008 / 42, 93%, 46%)

yellow-300 (#FACA15 / 47, 96%, 53%)

yellow-200 (#FCE96A / 52, 96%, 70%)

yellow-100 (#FDF6B2 / 54, 95%, 85%)

yellow-50 (#FDFDEA / 60, 83%, 95%)

green-900 (#014737 / 166, 97%, 14%)

green-800 (#03543F / 164, 93%, 17%)

green-700 (#046C4E / 163, 93%, 22%)

green-600 (#057A55 / 161, 92%, 25%)

green-500 (#0E9F6E / 160, 84%, 34%)

green-400 (#31C48D / 158, 60%, 48%)

green-300 (#84E1BC / 156, 61%, 70%)

green-200 (#BCF0DA / 155, 63%, 84%)

green-100 (#DEF7EC / 154, 61%, 92%)

green-50 (#F3FAF7 / 154, 41%, 97%)

blue-900 (#233876 / 225, 54%, 30%)

blue-800 (#1E429F / 223, 68%, 37%)

blue-700 (#1A56DB / 221, 79%, 48%)

blue-600 (#1C64F2 / 220, 89%, 53%)

blue-500 (#3F83F8 / 218, 93%, 61%)

blue-400 (#76A9FA / 217, 93%, 72%)

blue-300 (#A4CAFE / 215, 98%, 82%)

blue-200 (#C3DDFD / 213, 94%, 88%)

blue-100 (#E1EFFE / 211, 94%, 94%)

blue-50 (#EBF5FF / 210, 100%, 96%)

indigo-900 (#362F78 / 246, 44%, 33%)

indigo-800 (#42389D / 246, 47%, 42%)

indigo-700 (#5145CD / 245, 58%, 54%)

indigo-600 (#5850EC / 243, 80%, 62%)

indigo-500 (#6875F5 / 234, 88%, 68%)

indigo-400 (#8DA2FB / 229, 93%, 77%)

indigo-300 (#B4C6FC / 225, 92%, 85%)

indigo-200 (#CDDBFE / 223, 96%, 90%)

indigo-100 (#E5EDFF / 222, 100%, 95%)

indigo-50 (#F0F5FF / 220, 100%, 97%)

purple-900 (#4A1D96 / 262, 68%, 35%)

purple-800 (#5521B5 / 261, 69%, 42%)

purple-700 (#6C2BD9 / 262, 70%, 51%)

purple-600 (#7E3AF2 / 262, 88%, 59%)

purple-500 (#9061F9 / 259, 93%, 68%)

purple-400 (#AC94FA / 254, 91%, 78%)

purple-300 (#CABFFD / 251, 94%, 87%)

purple-200 (#DCD7FE / 248, 95%, 92%)

purple-100 (#EDEBFE / 246, 90%, 96%)

purple-50 (#F6F5FF / 246, 100%, 98%)

pink-900 (#751A3D / 337, 64%, 28%)

pink-800 (#99154B / 335, 76%, 34%)

pink-700 (#BF125D / 334, 83%, 41%)

pink-600 (#D61F69 / 336, 75%, 48%)

pink-500 (#E74694 / 331, 77%, 59%)

pink-400 (#F17EB8 / 330, 80%, 72%)

pink-300 (#F8B4D9 / 327, 83%, 84%)

pink-200 (#FAD1E8 / 326, 80%, 90%)

pink-100 (#FCE8F3 / 327, 77%, 95%)

pink-50 (#FDF2F8 / 327, 73%, 97%)

orange-900 (#771D1D / 0, 61%, 29%)

orange-800 (#8A2C0D / 15, 83%, 30%)

orange-700 (#B43403 / 17, 97%, 36%)

orange-600 (#D03801 / 16, 99%, 41%)

orange-500 (#FF5A1F / 16, 100%, 56%)

orange-400 (#FF8A4C / 21, 100%, 65%)

orange-300 (#FDBA8C / 24, 97%, 77%)

orange-200 (#FCD9BD / 27, 91%, 86%)

orange-100 (#FEECDC / 28, 94%, 93%)

orange-50 (#FFF8F1 / 30, 100%, 97%)

teal-900 (#014451 / 190, 98%, 16%)

teal-800 (#05505C / 188, 90%, 19%)

teal-700 (#036672 / 186, 95%, 23%)

teal-600 (#047481 / 186, 94%, 26%)

teal-500 (#0694A2 / 185, 93%, 33%)

teal-400 (#16BDCA / 184, 80%, 44%)

teal-300 (#7EDCE2 / 184, 63%, 69%)

teal-200 (#AFECEF / 183, 67%, 81%)

teal-100 (#D5F5F6 / 182, 65%, 90%)

teal-50 (#EDFAFA / 180, 57%, 95%)