Setup and configure global SCSS (text and color styles) for use across the app

[andrewtpham]

Is your feature request related to a problem? Please describe. We would like to set up our own global CSS for use across the app. We should define key colors as variables so that we can adjust the color and text styles.

Acceptance Criteria Here is the list of styles:

Text styles

/* Title - Lato B48 */

.title {
font-family: Lato;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 58px;
color: #C4C4C4;
}

/* Heading - Lato B35 */

.heading {
font-family: Lato;
font-style: normal;
font-weight: bold;
font-size: 35px;
line-height: 42px;
color: #C4C4C4;
}

/* Body 2 Bold - Lato B22 */

.heading {
font-family: Lato;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 26px;
color: #C4C4C4;
}

/* Body 2 Reg - Lato R22 */

.button {
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 22px;
line-height: 26px;
color: #C4C4C4;
}

/* Body Bold - Lato B18 */

.bold-body {
font-family: Lato;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
color: #C4C4C4;
}

/* Body Reg - Lato R18 */

.body-reg {
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
color: #C4C4C4;
}

/* Footer - Lato R15 */

.footer {
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 18px;
color: #C4C4C4;
}

/* Info - Lato R11 */

.info {
font-family: Lato;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 13px;
color: #C4C4C4;
}

---

Color styles

/* White */
.white {
background: #FFFFFF;
}

/* Primary Blue */
.primary-blue {
background: #3333FF;
}

/* Primary Blue Sub */
.primary-blue-sub{
background: #6666FF;
}

/* Secondary Orange */
.secondary-orange {
background: #FF6633;
}

/* Heading - Grey */
.heading-grey {
background: #666666;
}

/* Dark Body Grey */
.dark-body-grey {
background: #333333;
}

/* Light Body Grey */
.light-body-grey {
background: #CCCCCC;
}

/* Green */
.green {
background: #00CC66;
}

/* Green Fill */
.green-fill {
background: #E5FAF0;
}

/* Red */
.red {
background: #FF3333;
}

/* Red Fill */
.red-fill {
background: #FFEBEB;
}

/* Purple */
.purple {
background: #6633CC;
}

/* Background Color */
.background-color {
background: #F4F5FC;
}

Additional context See figma for styles.