Colors
Brand
#DB5D34
Core
#FFFFFF
Core-Tint
#F7FAF9
Core Border
#CCCCCC
Core Text
#536054
Core Heading
#0F2419
Accent
#B8D432
Accent Two
#299B80
Accent Three
#AF8617
Accent Four
#758914
Contrast
#345DB5
Contrast-Tint
#2F54A3
Contrast Border
#5D7DC4
Contrast Text
rgba(255, 255, 255, 0.80)
Core Heading
#FFFFFF
Headings
Your heading font is called Figtree.
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 Figtree.
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 Figtree.
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:
