Typography
Headings
Heading styles are applied to both tags (H1, H2, etc) and classes (Font / Heading 1, etc). This allows you to use the appropriate header tag and style it as any head style (e.g. an H2 header styled as Text / Heading 4).
Text / Display Large
Display Large
Text / Display Small
Display Small
Text / Heading 1
Heading 1
Text / Heading 2
Heading 2
Text / Heading 3
Heading 3
Text / Heading 4
Heading 4
Text / Heading 5
Heading 5
Text / Heading 6
Heading 6
Paragraphs
P tags are styled as Paragraph Base by default.
Font / Paragraph Large
Paragraph Large
Font / Paragraph Base
Paragraph Base
Font / Paragraph Small
Paragraph Small
Font / Paragraph XSmall
Paragraph XSmall
Font / Paragraph Tiny
Paragraph Tiny
Font / Small Caps / Large
Small Caps / Large
Font / Small Caps / Small
Small Caps / Small
Colors
Brand
Brand Primary (Blue)
Hex:
#3D7DFC
Class:
Color / Brand Primary (Blue)
BG Class:
BG Color / Brand Primary (Blue)
Brand Secondary (Gold)
Hex:
#FFA805
Class:
Color / Brand Secondary (Gold)
BG Class:
Color / Brand Secondary (Gold)
Brand Tertiary (Dark Blue)
Hex:
#083CA5
Class:
Color / Brand Tertiary (Dark Blue)
BG Class:
Color / Brand Tertiary (Dark Blue)
Brand Tertiary (Dark Blue)
Hex:
#F7FAFF
Class:
Color / Brand Primary Lightened
BG Class:
Color / Brand Primary Lightened
Accent
Accent 1 (Teal)
Hex:
#59E2F7
Class:
Color / Accent 1 (Teal)
BG Class:
BG Color / Accent 1 (Teal)
Accent 2 (Dark Blue)
Hex:
#0C2D5E
Class:
Color / Accent 2 (Dark Blue)
BG Class:
Color / Accent 2 (Dark Blue)
Neutral
Neutral 1 (Black)
Hex:
#1B2631
Class:
Color / Neutral 1 (Black)
BG Class:
BG Color / Neutral 1 (Black)
Neutral 2
Hex:
#2F3843
Class:
Color / Neutral 2
BG Class:
BG Color / Neutral 2
Neutral 3
Hex:
#434C55
Class:
Color / Neutral 3
BG Class:
BG Color / Neutral 3
Neutral 4
Hex:
#586069
Class:
Color / Neutral 4
BG Class:
BG Color / Neutral 4
Neutral 5
Hex:
#6E757D
Class:
Color / Neutral 5
BG Class:
BG Color / Neutral 5
Neutral 6
Hex:
#858A91
Class:
Color / Neutral 6
BG Class:
BG Color / Neutral 6
Neutral 7
Hex:
#CDD1D6
Class:
Color / Neutral 7
BG Class:
BG Color / Neutral 7
Neutral 8
Hex:
#E4E7EB
Class:
Color / Neutral 8
BG Class:
BG Color / Neutral 8
Neutral 9
Hex:
#F2F4F5
Class:
Color / Neutral 9
BG Class:
BG Color / Neutral 9
Neutral 10 (White)
Hex:
#FFFFFF
Class:
Color / Neutral 10 (White)
BG Class:
BG Color / Neutral 10 (White)
Action
Primary (Default)
Hex:
#3D7DFC
Class:
Color / Action Primary / Default
BG Class:
BG Color / Action Primary / Default
Primary (Hover)
Hex:
#3872E8
Class:
Color / Action Primary / Hover
BG Class:
BG Color / Action Primary / Hover
Primary (Active)
Hex:
#3368D4
Class:
Color / Action Primary / Active
BG Class:
BG Color / Action Primary / Active
Secondary (Default)
Hex:
#FFA805
Class:
Color / Action Secondary / Default
BG Class:
BG Color / Action Secondary / Default
Secondary (Hover)
Hex:
#F2A005
Class:
Color / Action Secondary / Hover
BG Class:
BG Color / Action Secondary / Hover
Secondary (Active)
Hex:
#E69704
Class:
Color / Action Secondary / Active
BG Class:
BG Color / Action Secondary / Active
States
Info
Hex:
#215FE4
Class:
Color / State / Info
BG Class:
BG Color / State / Info
Warning
Hex:
#E06C00
Class:
Color / State / Warning
BG Class:
BG Color / State / Warning
Error
Hex:
#DA1414
Class:
Color / State / Error
BG Class:
BG Color / State / Error
Success
Hex:
#129D29
Class:
Color / State / Success
BG Class:
BG Color / State / Success
Additional Styles
Elevations
Elevation 1
Elevation 2
Elevation 3
Elevation 4
Elevation 5
Elevation 6
Elevation 7
Elevation 8
Elevation 9
Animations
Animation / Move In / Delay 0
Move In / Delay 0
Animation / Move In / Delay 1
Move In / Delay 1
Animation / Move In / Delay 2
Move In / Delay 2
Animation / Move In / Delay 3
Move In / Delay 3
Animation / Fade In / Delay 0
Fade In / Delay 0
Animation / Parallax / Down / 2x
Parallax / Down / 2x
Animation / Parallax / Down / 1x
Parallax / Down / 1x
Animation / Parallax / Down / 0.5x
Parallax / Down / 0.5x
Animation / Parallax / Up / 2x
Parallax / Up / 2x
Animation / Parallax / Up / 1x
Parallax / Up / 1x
Animation / Parallax / Up / 0.5x
Parallax / Up / 0.5x
Utilities
Max Width
Utility / Max Width / Full (1280px)
Utility / Max Width / Large (800px)
Utility / Max Width / Medium (640px)
Utility / Max Width / Small (480px)
Margin
Utility / Margin / None
Utility / Margin / Auto
Utility / Margin / H / None
Utility / Margin / V / None
Utility / Margin / Top / None
Utility / Margin / Bottom / None
Padding
Utility / Padding / H / Section
Utility / Padding / H / 8px
Utility / Padding / V / Section
Utility / Padding / Bottom / Section
Opacity
Utility / Opacity / 90%
Utility / Opacity / 80%
Display
Utility / Display / None
Utility / Display / None
Text Utilities
Utility / Text Align / Center
Utility / Font Weight/ 600 - Semi Bold
Utility / Font Weight/ 800 - Extra Bold
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.