Facts Design System

Facts Design System (FDS) includes an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

Primary#0076ba

Secondary#213144

$white#ffffff

$black#111111

Support

Success#008920

Danger#c23934

Warning#ffd33d

Info#00b9d7

Blue

$blue-100 #CCE4f1

$blue-200 #99C8E3

$blue-300 #66ADD6

$blue-400 #3391C8

$blue-500 #0076BA

$blue-600 #006AA7

$blue-700 #005E95

$blue-800 #005382

$blue-900 #004166

Gray

$gray-100#F7F8F8

$gray-200#E1E3E5

$gray-300 #D2D5D8

$gray-400 #9EA4AB

$gray-500 #6a737d

$gray-600 #50565E

$gray-700 #454B51

$gray-800 #3A3F45

$gray-900 #2A2E32

Blue Gray

$blue-gray-100 #87909C

$blue-gray-200 #667281

$blue-gray-300 #465466

$blue-gray-400 #304054

$blue-gray-500 #25364B

$blue-gray-600 #1F2E40

$blue-gray-700 #1C2938

$blue-gray-800 #16202D

$blue-gray-900 #121A25

Green

$green-100 #CCE7D2

$green-200 #99D0A6

$green-300 #66B879

$green-400 #33A14D

$green-500 #008920

$green-600 #007B1D

$green-700 #006E1A

$green-800 #006016

$green-900 #004b12

Indigo

$indigo-100 #E0CFFC

$indigo-200 #C29FFA

$indigo-300 #B68CF9

$indigo-400 #8540F5

$indigo-500 #6610F2

$indigo-600 #5C0EDA

$indigo-700 #520DC2

$indigo-800 #470BA9

$indigo-900 #140330

Purple

$purple-100 #E2D9F3

$purple-200 #C5B3E6

$purple-300 #A98EDA

$purple-400 #8C68CD

$purple-500 #6F42C1

$purple-600 #643BAE

$purple-700 #59359A

$purple-800 #4E2E87

$purple-900 #3D246A

Pink

$pink-100 #F3D7F2

$pink-200 #E7AEE6

$pink-300 #DC86D9

$pink-400 #D05DCD

$pink-500 #C435C0

$pink-600 #B030AD

$pink-700 #9D2A9A

$pink-800 #892586

$pink-900 #6C1D6A

Red

$red-100 #F3D7D6

$red-200 #E7B0AE

$red-300 #DA8885

$red-400 #CE615D

$red-500 #C23934

$red-600 #AF332F

$red-700 #9B2E2A

$red-800 #882824

$red-900 #6B1F1D

Orange

$orange-100 #FEE3D0

$orange-200 #FDC7A2

$orange-300 #FBAB73

$orange-400 #FA8F45

$orange-500 #F97316

$orange-600 #E06814

$orange-700 #C75C12

$orange-800 #AE510F

$orange-900 #893F0C

Yellow

$yellow-100 #FFF6D8

$yellow-200 #FFEDB1

$yellow-300 #FFE58B

$yellow-400 #FFDC64

$yellow-500 #FFD33D

$yellow-600 #D9B334

$yellow-700 #A68929

$yellow-800 #8C7422

$yellow-900 #735F1B

Teal

$teal-100 #DBF6EE

$teal-200 #B8EEDE

$teal-300 #94E5CD

$teal-400 #71DDBD

$teal-500 #4DD4AC

$teal-600 #41B492

$teal-700 #3A9F81

$teal-800 #328A70

$teal-900 #2A755F

Cyan

$cyan-100 #CCF1F7

$cyan-200 #99E3EF

$cyan-300 #66D5E7

$cyan-400 #33C7DF

$cyan-500 #00B9D7

$cyan-600 #00A7C2

$cyan-700 #0094AC

$cyan-800 #008297

$cyan-900 #006677

FACTS DS

Colors