Colors
The colors below are organized in order of importance, so try to use the earlier colors first. The first color in each group, labeled '500' is the primary version of that color, and should be used whenever possible.
Blue
|
500
#1B2E41 RGB(27,46,65) |
400
#5F6D7A RGB(95,109,122) |
300
#8D96A0 RGB(141,150,160) |
200
#BBC0C6 RGB(187,192,198) |
100
#E8EAEC RGB(232,234,236) |
Coral
|
500
#F16054 RGB(241,96,84) |
400
#F59087 RGB(245,144,135) |
300
#F8AFA9 RGB(248,175,169) |
200
#FBCFCC RGB(251,207,204) |
100
#FEEFEE RGB(254,239,238) |
Teal
|
500
#2AB59C RGB(42,181,156) |
400
#6ACBBA RGB(106,203,186) |
300
#94DACD RGB(148,218,205) |
200
#BFE9E1 RGB(191,233,225) |
100
#EAF8F5 RGB(234,248,245) |
Forest
|
500
#03403A RGB(3,64,58) |
400
#4F7975 RGB(79,121,117) |
300
#819F9C RGB(129,159,156) |
200
#B3C6C4 RGB(179,198,196) |
100
#E6ECEB RGB(230,236,235) |
Green
|
500
#398C6E RGB(57,140,110) |
400
#74AF99 RGB(116,175,153) |
300
#9CC5B6 RGB(156,197,182) |
200
#C4DDD3 RGB(196,221,211) |
100
#EBF3F0 RGB(235,243,240) |
Yellow
|
500
#F1B71C RGB(241,183,28) |
400
#FFDA4D RGB(255,218,77) |
300
#FFE580 RGB(255,229,128) |
200
#FFEFB2 RGB(255,239,178) |
100
#FFFAE5 RGB(255,250,229) |
Tan
|
500
#777050 RGB(119,112,80) |
400
#9F9B84 RGB(159,155,132) |
300
#BBB8A7 RGB(187,184,167) |
200
#E6DDC9 RGB(230,221,201) Nav |
100
#F3EEE4 RGB(243,238,228) |
Gray
|
700
#05090D RGB(5,9,13) |
600
#302F2B RGB(48,47,43) |
500
#545451 RGB(84,84,81) |
400
#797876 RGB(121,120,118) |
|
300
#9D9D9B RGB(157,157,155) |
200
#C2C2C1 RGB(194,194,193) |
100
#E7E6E6 RGB(231,230,230) |
000
#FFFFFF RGB(255,255,255) |
Typography
There are two main fonts that should be used on the website whenever possible. The site styles will generally apply whichever color should be used for a given element, but generally speaking you should use Grenette for display (headings, important messaging), and DM Sans for body text and details.
Grenette Pro
Use for Display, Headings, Important Messaging
Available as desktop font files for use in other programs (ask webmaster for font files)
DM Sans
Use for Body, details, technical text
Available as a free download for use in other programs
Website Instructions
2025 Page Template
This applies to key pages on the website. This does not apply to ‘singles’ like blog posts etc. To use the new page template, create a duplicate of this page, or follow these steps:
- Create a new page. Enter the Title, Featured Image, and Excerpt.
- In the right hand sidebar, under Page Attributes, set the template to 100% Width.
- In the Avada Builder, click + Container
- Switch to the Library Containers tab
- Insert Library containers in the following order:
- 2025 Page Header Circle Image or 2025 Page Header Image / Full Width. Prioritize Circle Image unless your image will not crop nicely in a circle. This section displays the featured image for the page, so you don't have to manually set the image.
- 2025 Page Header Bar or 2025 Page Header Bar - Breadcrumbs. Choose Breadcrumbs if you want a breadcrumbs or a backlink to another page. This section displays the Title and Excerpt for the page, so you don't have to set those manually in this section. If you are using Breadcrumbs, that content must be set manually.
- 2025 Page Nav. This is optional, but if you plan to have Navigation that is specific to this page, include this container. Edit the links to your needs.
- 2025 Page Body. This is an empty container with the 'page-body-2025' css class, which sets up the correct spacing for the container.
- Enter your content in the Page Body 2025 Container. If needed, add more Page Body 2025 Containers for separate sections.
Note: the new page template relies on css classes on the containers to work properly. If you do not insert the containers from the Library, or remove the classes, the template will not work properly.
2025 Single Template
This applies to all ‘singles’ on the site, such as blog posts, podcast episodes, articles, and anything else that is a single post in a collection of posts. To use the new single template, follow these steps:
- Go to the latest post from the category you want to create a new post in, and duplicate that post. Several factors of the display of the page are dependent upon the category, so this step is key.
- The Page Header will be automatically generated based on content within the post, and is therefore not manually editable as it’s own element, but the content used to generate it is editable. The Page Header also automatically makes decisions about which content elements to show/hide based on the category of the post.
- You may need to add or adjust the following:
- Post Title
- Post Date
- Author. Some categories (Book & Media Reviews, Photo Quiz, and Field Ornithology) require a manual author override, which is at the top of the page in wordpress.
- Edit the content in the Page Body Container. Note that this section will have the class `page-body-2025` attached to it, and subsequent new Containers should have the `page-body-2025` class. This class sets the appropriate padding for the section.
Edit the author section at the end of the page. Note that this content is manually edited, and is not connected to the wordpress author.
Note: the new single template relies on css classes on the containers to work properly. If you do not insert the containers from the Library, or remove the classes, the template will not work properly.
