Styleguide

Color

Primary

Blue
#463BE6
White
##FFFFFF
Background
#F5F7FF
Primary Dark
#06103E

Secondary

Icon Blue
#8FA4FC
Secondary Blue
#6270B8
Light Blue
#D4DCFF
Stroke
#D0DAF3

Neutral

Grey
#8592B1
Grey 2
#A6A8B3
Light Grey
#F5F5F5
Side Nav dropdown (Grey)
#353E62

Text Color

text-color-primary
This is some text inside of a div block.
text-color-white
This is some text inside of a div block.
text-color-grey
This is some text inside of a div block.
text-color-whitesmoke
This is some text inside of a div block.
text-color-black-2
This is some text inside of a div block.

Headings

HTML tags define default Heading styles.

Heading 1
40px

Heading 1

Heading 2
40px

Heading 2

Heading 3
36px

Heading

Heading 4
24px

Heading

Heading Classes

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1
56/16

Heading

heading-style-h2
56/16

Heading

heading-style-h3
56/16

Heading

heading-style-h4
56/16

Heading

Text style

text-size-xlarge
24px
This is some text inside of a div block.
text-size-large
20px
This is some text inside of a div block.
text-size-medium
18px
This is some text inside of a div block.
text-size-regular
16px
This is some text inside of a div block.
This is some text inside of a div block.
text-size-small
14px
This is some text inside of a div block.

Text Weight

text-weight-bold
This is some text inside of a div block.
text-weight-semibold
This is some text inside of a div block.
text-weight-medium
This is some text inside of a div block.
text-weight-normal
This is some text inside of a div block.

Text Alignment

text-align-left
This is some text inside of a div block.
text-align-center
This is some text inside of a div block.
text-align-right
This is some text inside of a div block.

Button

button
Button Text
button
is-secondary
Button Text

Buttons on dark background

button
is-alternate
Button Text
btn-secondary
Button Text
btn-arrow
Learn More

Display classes

display-mobile
display-desktop