Select Page

Style Guide

Logo

Typeface

Headings

Colors

Buttons & Links

Images

Gradients

Paragraph

Download Assets

Typeface

Raleway 200

AaBbCcDd

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

 

Raleway 500

AaBbCcDd

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

 

Raleway can be freely downloaded from Google Fonts or FontSquirrel.

 

Note: Raleway uses old-style numerals by default and does support proportional. For online use, include the following CSS:

 

.class {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings:"lnum" 1; 
    -moz-font-feature-settings:"lnum=1"; 
    -ms-font-feature-settings:"lnum" 1; 
    -o-font-feature-settings:"lnum" 1; 
    -webkit-font-feature-settings:"lnum" 1; 
    font-feature-settings:"lnum" 1;
}

Headings

Raleway h1, 4em, 90px

Raleway h2, 3em, 54px

Raleway h3, 2em, 36px

Raleway h4, 1.5em, 26px

Raleway h5, 1em, 18px
Raleway h6, .75em, 14px, .7 opacity

 

Headings on darker backgrounds stay white:

 

Raleway h1, 4em, 90px

Raleway h2, 3em, 54px

Raleway h3, 2em, 36px

Raleway h4, 1.5em, 26px

Raleway h5, 1em, 18px
Raleway h6, .75em, 14px, .7 opacity

Colors

Primary Colors

#283946
#1e8964
#5a7ad3
#2aa6b8
#444444
#eeeeee
North Bay Designers color palette (almost) on color.adobe.com or Coolors.

Links & Buttons

On a light background:

link #2aa6b8A normal, unvisited link

visited #5a7ad3A link the user has visited

hover #5a7ad3A link when the user mouses over it

active #5a7ad3A link the moment it is clicked

 

Button

link: #333333 color, 10px radius, 2px #333333 border, transparent background, 15px 40px padding, centered
hover: #5a7ad3 background, 15px 60px padding

 

On a dark background:
linkvisitedhoveractive #ffffff, 2px bottom white border

Button

link: #ffffff color, 10px radius, 2px #fff border, transparent background, 15px 40px padding, centered
hover: #5a7ad3 background, 15px 60px padding

Images

Images are to remain borderless. If the image is located on top of a gradient background (ex. within the hero) it is to also be in grayscale.

chrisdenny-color

chrisdenny-grayscale

Gradients

Gradients are difficult to define specific rules to. With this in mind, there are a few rules in stone but the majority of this section relies on intuition.

45 or 90 Degree Angles
Gradients must be kept at 45 or 90 degree angles as to remain easily replicable using CSS. We recommend ColorZilla to generate the CSS because, lets face it, gradients are a pain.

Below is the exact gradient used in the hero image should you want to use that specific one.

 

background: rgb(38,132,164);
background: -moz-linear-gradient(-45deg,  rgba(38,132,164,1) 0%, rgba(38,164,106,1) 100%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(38,132,164,1)), color-stop(100%,rgba(38,164,106,1)));
background: -webkit-linear-gradient(-45deg,  rgba(38,132,164,1) 0%,rgba(38,164,106,1) 100%);
background: -o-linear-gradient(-45deg,  rgba(38,132,164,1) 0%,rgba(38,164,106,1) 100%); 
background: -ms-linear-gradient(-45deg,  rgba(38,132,164,1) 0%,rgba(38,164,106,1) 100%); 
background: linear-gradient(135deg,  rgba(38,132,164,1) 0%,rgba(38,164,106,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2684a4', endColorstr='#26a46a',GradientType=1 );

2-color Only
It’s easy to get carried away with gradients. With the motivation of being minimal and non-distracting, it is suggested gradients don’t use more than two colors.

Hue, Saturation, & Brightness
It is suggested to keep both colors of the same saturation but not necessarily the same hue or brightness. An exception to this is if you’re using the same color just increasing the brightness looks fine. At the end of the day, just make sure the contrast between the two colors isn’t huge and it’ll look good.

Paragraph Text

All paragraph text uses 18px size font with 1.6em line height and a color of #666666.

Here’s the CSS using a font-size reset on html:

html {font-size: 10px;}
body {font: 1.8em/1.6em Raleway;}

Example of paragraph text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis fermentum risus. Aenean euismod odio eget neque condimentum, vel aliquet orci aliquam. Aliquam et pellentesque arcu. Praesent elementum mattis enim, sit amet ultrices mauris porttitor id. Nam dolor orci, cursus dapibus mi ac, condimentum iaculis quam. Donec eleifend arcu eget scelerisque imperdiet. Aliquam erat volutpat. Fusce varius at purus et venenatis.Morbi laoreet nisl mi, nec viverra erat convallis at. Pellentesque porttitor, leo at lacinia mattis, ligula sapien placerat eros, vel lobortis velit augue at tortor. Donec ornare eros magna, a hendrerit justo tincidunt sit amet. Nunc elementum, diam at suscipit bibendum, sem leo pharetra ipsum, vitae posuere sem nisl scelerisque velit. Praesent eros odio, aliquet id sollicitudin vitae, accumsan sit amet lacus. Morbi sodales orci eu risus semper vulputate. Cras semper pretium purus, eu pellentesque est vehicula vel.