Website Style Tile

Colors

Typography

Imagery

Buttons

Links

Colors

Ocean Blue Dark

#002f5f

Ocean Blue Light

#003e7e

Leaf Green Dark

#b2bb1e

Leaf Green Light

#d3d324

Bark Brown

#282725

Sand Beige

#f2f0ed

Stone Gray

#737373

Typography

Heading 1

Lorem Ipsum

font-family: ‘Roboto’, sans-serif;
font-weight:
700;
font-size: 64px;
font-size: 44px; (mobile)
line-height: 1em;
color: #ffffff;

 

Heading 2

Lorem Ipsum

font-family: ‘Roboto’, sans-serif;
font-weight: 700;
font-size: 46px;
font-size: 36px; (mobile)
line-height: 1.1em;
color: #282725

 

Heading 3

Lorem Ipsum

font-family: ‘Roboto’, sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.1em;
color: #282725

Heading 3: Headlines

Lorem Ipsum

font-family: ‘Lora’, serif;
font-size: 22px;
font-weight: 700;
font-style: italic;
color: #002f5f;

 

Body

Lorem ipsum dolor sit something like that is the shit. Replace this shit please replace this ish cause this isn’t some real dish.

font-family: ‘Roboto’, sans-serif;
font-weight:
400;
font-size: 16px;
font-size: 16px (mobile);
line-height: 1.4em;
color: #282725;

 

Text-left w/ Image-Right & Text-Right w/ Image-Left Sections

These sections can be found in the Divi Library under Layout. These sections are flexible and have character count limits.

<H3> This is a headline:  40 Characters max
<H2> This is a title:  90-150 Characters max
<p> This is body text:  150-200 Characters max

<H3> This is a headline

<H2> This is a title

<H2> This is a subheader

Pull Quote Left & Right (Text Modules)

Pull Quotes use key peices of text pulled from the article (it is repeated). These text modules can be found in the Divi Library under Text Styling. These are meant for posts specifically because the styling is specific for a max-width of 700px. We recommend you add pull quotes by adding the module from the Divi Library. Alternatively, you can assign text h6 and ensure the text module has a css class called compass-pull-quote-left or compass-pull-quote-right. Limit the character count to less than 175 characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh odio, convallis non dapibus non, elementum sit amet lectus. Sed vitae ligula sit amet libero lacinia lacinia in at ex. Curabitur nunc nulla, consequat vel volutpat ut, iaculis vitae arcu. Phasellus tempor ipsum sed elit vestibulum, non posuere neque interdum. Etiam lacus ex, aliquet luctus porta sed, gravida sit amet justo. Vivamus quis mi sagittis lectus ultrices tincidunt id ac urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donec velit felis, accumsan non suscipit at, congue consectetur sem. Quisque nulla orci, faucibus non ante eget, vulputate malesuada leo. Vestibulum lectus lorem, dapibus dapibus quam at, tincidunt placerat felis. Nulla volutpat ante nec mi efficitur lacinia. Vestibulum a dictum nunc, eget interdum urna. Fusce vel dictum leo. Proin justo nisi, auctor in consequat vitae, dapibus ac lacus. Praesent vel dapibus ligula, nec eleifend metus. Nullam eu nisi dui. Maecenas facilisis accumsan orci ac venenatis. Maecenas congue lobortis porta. Morbi volutpat ligula non ultricies blandit. Donec malesuada sagittis ipsum sed rhoncus. Ut pharetra pretium metus, non facilisis erat dictum eget. Integer vehicula tincidunt quam. Quisque mi ipsum, tempus pretium sem a, ullamcorper varius turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh odio, convallis non dapibus non, elementum sit amet lectus. Sed vitae ligula sit amet libero lacinia lacinia in at ex. Curabitur nunc nulla, consequat vel volutpat ut, iaculis vitae arcu. Phasellus tempor ipsum sed elit vestibulum, non posuere neque interdum. Etiam lacus ex, aliquet luctus porta sed, gravida sit amet justo. Vivamus quis mi sagittis lectus ultrices tincidunt id ac urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donec velit felis, accumsan non suscipit at, congue consectetur sem. Quisque nulla orci, faucibus non ante eget, vulputate malesuada leo. Vestibulum lectus lorem, dapibus dapibus quam at, tincidunt placerat felis. Nulla volutpat ante nec mi efficitur lacinia. Vestibulum a dictum nunc, eget interdum urna. Fusce vel dictum leo. Proin justo nisi, auctor in consequat vitae, dapibus ac lacus. Praesent vel dapibus ligula, nec eleifend metus. Nullam eu nisi dui. Maecenas facilisis accumsan orci ac venenatis. Maecenas congue lobortis porta. Morbi volutpat ligula non ultricies blandit. Donec malesuada sagittis ipsum sed rhoncus. Ut pharetra pretium metus, non facilisis erat dictum eget. Integer vehicula tincidunt quam. Quisque mi ipsum, tempus pretium sem a, ullamcorper varius turpis.

Block Quote (Text Modules)

This text module can be found in the Divi Library under Text Styling. In the text editor, you can click the quotation mark icon to apply block quote styling to your text. Make sure the text is formatted to paragraph styling and not h2, h3, etc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh odio, convallis non dapibus non, elementum sit amet lectus. Sed vitae ligula sit amet libero lacinia lacinia in at ex. Odio convallis non dapibus non, elementum sit amet lectus. Sed vitae ligula sit amet libero lacinia lacinia in at ex.

Imagery

To see guidelines around photography, view the COMPASS Brand Book. These guidelines for using your images on the website. Certain sections require unique formatting, which we’ve outlined below.

Accessibility

Adding alt text to images helps with both. SEO and allows for screen readers and/or browsers that have images disabled. Try using twelve words or less and optimize by using keywords. You can find more information about best practices here.

Optimizing Images for Web

File Size: Less than 900 KB
Image Width: Max-width 2500px
Resolution: 72 ppi
Color Mode: RGB
Aspect Ratio: Square 1:1, or Landscape. Avoid uploading images in portrait orientation
Dimensions: This will depend on the placement of the image. Generally keep width <3000px
File format: Save images in .jpg.gif, or .png format only. PDFs can be added to the image library and accessed via links.

3 Column Blog Section

Images should be cropped to square 1:1 or horizontal orientation. Focal points should be centered vertically in the composition to avoid being cut off. Limit image size to less than 600 KB. This section can be found in the Divi Library under Blog.

Black Mammalogists Week: Misunderstood Mammals

Black Mammalogists Week: Misunderstood Mammals

This week, the Twitterverse leads in the celebration of Black excellence in mammalogy with the first event of Black Mammalogists Week, Misunderstood Mammal Monday. In a dual-purpose event, researchers and scicomm-ers were interviewed on a panel to dispel myths about...

read more
Developing the Science Leaders the World Needs Now

Developing the Science Leaders the World Needs Now

Nothing can dim the light which shines from within. - Maya Angelou For 20 years, COMPASS has supported thousands of scientists to reimagine their roles as changemakers. We’re committed to creating a future where people and nature can thrive, and our experience shows...

read more

CTA Footer Bar with Background Image

The Email Sign Up & Contact Form sections background image should observe an ~18:6 aspect ratio (does not need to be exact). Try cropping your images roughly to 2500px x 833px. Be aware that the right quarter of your image will be hidden behind the blue background on desktop (for tablet and mobile, the entire image is hidden behind the blue background). This section can be found in the Divi Library under Layouts.

Primary Page Header with Background Image

The primary page header sections background image should observe an ~5:1 aspect ratio (does not need to be exact). Try cropping your images roughly to 2500px x 500px. This section can be found in the Divi Library under Page Headers.

Web Style Tile

Buttons

background-image: linear-gradient(99deg,#d3d324 50%,#b2bb1e 100%);
font-size: 18px;
font-family: ‘Roboto’;
font-weight: 700;