Base

Colors

The following colors are defined in the ui-kit/src/styles/_colors.scss file:

Primary Colors

Color Name	Hex Value	Example
`$primary`	`#004FFF`
`$primary-light`	`#F0F4FF`
`$primary-dark`	`#0042D4`

Secondary Colors

Color Name	Hex Value	Example
`$secondary`	`#3DDC97`
`$secondary-light`	`#D9FFEE`
`$secondary-dark`	`#36BE83`

Additional Colors

Color Name	Hex Value	Example
`$red`	`#FF7070`
`$red-dark`	`#FF3B3B`
`$red-light`	`#FFF1F1`
`$purple`	`#6F3DFD`
`$purple-dark`	`#5014D0`
`$purple-light`	`#F8F5FF`
`$yellow`	`#FFC24D`
`$yellow-dark`	`#F1AF32`
`$yellow-light`	`#FFF7E8`
`$white`	`#FFFFFF`
`$black`	`#12161F`

Gray Scale

Color Name	Hex Value	Example
`$gray-10`	`#F8F9FA`
`$gray-20`	`#E9ECEF`
`$gray-30`	`#DEE2E6`
`$gray-40`	`#CED4DA`
`$gray-50`	`#ADB5BD`
`$gray-60`	`#6C757D`
`$gray-70`	`#495057`
`$gray-80`	`#343A40`
`$gray-90`	`#1A202D`

These colors can be used throughout the UI Kit to maintain a consistent design. You can also set background color using classes: .is--background-red or .is--background-...put variable name instead of .... The same is about color: .is--color-...

Typography

The following typography styles are defined in the ui-kit/src/styles/components/_typography.scss file:

Headings

Class Name	Font Size	Line Height	Font Weight	Example
`.is--h1__title`	50px	75px	900	Example H1
`.is--h2__title`	36px	54px	900	Example H2
`.is--h3__title`	24px	36px	900	Example H3
`.is--h4__title`	20px	30px	800	Example H4
`.is--h5__title`	16px	24px	800	Example H5
`.is--h6__title`	14px	21px	800	Example H6

Additional Classes

Class Name	Font Size	Line Height	Font Weight	Example
`.is--display`	100px	100px	900	Display
`.is--subheading-1`	24px	36px	350	Subheading 1
`.is--subheading-2`	20px	30px	350	Subheading 2
`.is--body`	16px	26px	400	Body
`.is--body-italic`	16px	26px	400	Body Italic
`.is--small`	12px	18px	500	Small
`.is--small-2`	12px	18px	800	Small 2

These typography classes can be used throughout the UI Kit to maintain a consistent design.