Style Guide
Brand
Brand
Colors
Primary Colors
Navy - #214964
Blue - #2676aa
Blue Light - #dee7f1
Secondary Colors
Gold - #ffc637
Neutral Colors
Dark - #222222
Dark Grey - #444444
Medium Grey #666666
Light Grey #cccccc
Lightest Grey- #f1f2f7
Typography
Font Family
Inter
Inter is the standard font to be used for all body and block text.
Normal
/
400
Bold
/
700
Headings
Font Size: 48px / 3rem
Font Weight: 700
Line Height: 120%
Font Family: Inter
Color: #222222
Heading 1
Font Size: 40px / 2.5rem
Font Weight: 700
Line Height: 130%
Font Family: Inter
Color: #222222
Heading 2
Font Weight: 700
Line Height: 130%
Font Size: 32px / 2rem
Font Family: Inter
Color: #222222
Heading 3
Font Size: 24px / 1.5rem
Font Weight: 700
Line Height: 130%
Font Family: Inter
Color: #222222
Heading 4
Font Size: 20px / 1.25rem
Font Weight: 700
Line Height: 140%
Font Family: Inter
Color: #222222
Heading 5
Font Size: 16px / 1rem
Font Weight: 700
Line Height: 150%
Font Family: Inter
Color: #222222
Heading 6
Font Size: 16px / 1rem
Font Weight: 400
Line Height: 150%
Font Family: Inter
Color: #222222
Body Text - Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Icons
ARROW Icons
CATEGORY Icons
Social Icons
Form
Form Example
Images
Inline Images
FAQ
Accordion
Question
Question