Style Guide

Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Dark Yellow 50
#f9df90
Light Blue 25
#cae5f3
Dark Blue
#1e2244
Dark Blue
Dark Blue
#1e2244
Dark Blue 75
#50526c
Dark Blue 50
#818394
Dark Blue 25
#b4b4bd
Dark Yellow
Dark Yellow
#f3c022
Dark Yellow 75
#f6d059
Dark Yellow 50
#f9df90
Dark Yellow 25
#fcefc8
Light Yellow
Light Yellow
#ffedc1
Light Yellow 75
#fcefc8
Light Yellow 50
#fff6e0
Light Yellow 25
#fffbf0
Light Blue
Light Blue
#2c99d0
Light Blue 75
#61b3dc
Light Blue 50
#96cce8
Light Blue 25
#cae5f3
Dark Gray
Dark Gray
#3f3f3f
Dark Gray 75
#6f6f6f
Dark Gray 50
#9f9f9f
Dark Gray 25
#cfcfcf
Gray
Gray
#d9d9d1
Gray 75
#e2e2dd
Gray 50
#ecece8
Gray 25
#f6f6f4
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Dark Yellow
Light Blue
Dark Blue
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.