Style Guide

Version 1.4 2/19/2019

Logo

Primary Logo (Light background) Primary Logo (Dark background)

Horizontal Logo (Light background) Primary Logo (Dark background)

Watermarks
Used most commonly in print where grayscale is ideal (letters, invoices, etc.)

Infinity Symbol
Used in rare and special cases such as accents
Colors

Primary Brand Color Secondary Brand Color

#98c73a #0d2144

Gray Accents
Used in typography, layouts, and borders

#4d4d4d #999999 #b3b3b3 #cccccc #e6e6e6 #f2f2f2 #ffffff

Image Overlays
Used on the web and sometimes in print. Always use secondary brand color at 80% opacity

We Connect the World’s Changemakers

#0d2144
opacity: 0.8
Typography

H1 header font: Ubuntu Condensed

font-size: 3.1rem
color: #98c73a OR #4d4d4d OR #ffffff

H2 header font: Ubuntu Condensed

font-size: 2.4rem
color: #4d4d4d OR #98c73a OR #ffffff

H3 header font: Ubuntu Condensed

font-size: 1.8rem
color: #98c73a OR #4d4d4d OR #ffffff

This is body text font: Roboto

font-size: 1.1rem
color: #4d4d4d

Quote font: Ubuntu Light Italic

font-size: 2.4rem
color: #4d4d4d
Buttons

Action Button
font: Roboto Activated Button
font: Roboto
font-size: 1.1rem font-size: 1.1rem
color: #fff *after “follow” button color: #98c73a
height: 2.4em is clicked for example height: 2.4em
line-height: 2.4em line-height: 2.4em
background-color: #98c73a background-color: #fff
border-radius: 1.2em border: 1px solid #98c73a
padding: 0 20px border-radius: 1.2em
padding: 0 20px 0 20px

General Button
font: Roboto font: Roboto
Inactive Button
font-size: 1.1rem font-size: 1.1rem
color: #98c73a color: #98c73a
height: 2.4em height: 2.4em
line-height: 2.4em line-height: 2.4em
background-color: #fff background-color: #b7b7b7
border: 1px solid #98c73a border-radius: 1.2em
border-radius: 1.2em padding: 0 20px 0 20px
padding: 0 20px 0 20px

Borders

Seperation borders border: 1px solid #e2e2e2

Cards

box-shadow:
This is a card This is a card 0px 5px 20px rgba(0,0,0,0.1)
padding: 20px
Forms

Placeholder text * border-bottom: 1px solid #aeaeae

font: Roboto
font-size: 1.1rem
line-height: 40px;
color: #aeaeae

Text is being entered border-bottom: 1px solid #aeaeae

font: Roboto
font-size: 1.1rem
line-height: 40px;
color: #4d4d4d

Valid text has been entered border-bottom: 1px solid #98c73a

font: Roboto
font-size: 1.1rem
line-height: 40px;
color: #98c73a

Invalid text has been entered border-bottom: 1px solid #ff1d25

font: Roboto
*for example invalid password
font-size: 1.1rem
line-height: 40px;
color: #ff1d25