Colors
Brand
#FFC81F
Core
#031948
Core-Tint
#102551
Core Border
#425376
Core Text
#E5E7ED
Core Heading
#FFFFFF
Accent
#FFD85E
Contrast
#345DB5
Contrast-Tint
#2F54A3
Contrast Border
#5D7DC4
Contrast Text
#4C505E
Core Heading
#031948
Headings
Your heading font is called Outfit.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Font Size Presets
Your heading font is called Outfit.
Title Hero
Title Large
Title Medium
Title Small
Body Large
Body Default
Body Small
Card Title
Lead-In
Text Styles
Your general body font is called Outfit.
This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.
This is faded text
This is a label
Unordered list:
- This is an unordered list item.
- This is another unordered list item.
Ordered list:
- This is an ordered list item.
- This is another ordered list item.
This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.
This is faded text
This is a label
Unordered list:
- This is an unordered list item.
- This is another unordered list item.
Ordered list:
- This is an ordered list item.
- This is another ordered list item.
Buttons
These are the built-in button styles.
Website Image Size Guidelines
File Format
Photos should be saved as .jpg images. Images or graphics that include diagrams/text may be saved as .png, if the file size is reasonable (ideally < 500kb for small .pngs, < 2MB for large or full-screen .pngs).
Compression
The website will automatically compress and resize every image that is uploaded. You generally do not need to pre-compress images, except in extreme cases (images that are >5MB, or > 5K pixels in any direction).
Flexibility
The website is built to be fairly flexible when it comes to imagery. The guidelines in this document are just recommendations and don’t necessarily need to be matched exactly.
File Names
Images should have descriptive names, with spaces replaced by hyphens. For example: large-tree.jpg. You may also choose to include placement information in the image: home-banner-large-tree.jpg, though this is not strictly necessary (and can also make things confusing if images are reused throughout the site).
Responsive Image Choices and Cropping
This website frequently uses the same image(s) in multiple places, presented in different context or automatically cropped to proportions. This can vary by context, or by device.
This guide takes this into account when recommending image sizes, and we generally default to the largest possible size needed for all uses of an image. When picking an image, choosing one where the area of visual interest is in the center with ample room on all sides can allow for maximum flexibility.
Examples of how an image may be cropped or reused:
