Style Guide

This pattern library page is to assist designers who are actively working in the existing digital styles of Shaw + Scott by providing a centeral reference of styles and suggestions for use. Each element, from the granular to the molecular componentry, is critical to the overall organization, layout, and look and feel of the website. This page is ever changing with updates.

Logos

Color Blocks

 

White: #ffffff

 

Red: #cf2347

 

Orange: #e36d25

 

Blue: #31839a

 

Green: #77923d

 

Purple: #6a5584

 

Dark Grey: #666666

 

Grey: #999999

 

Medium Grey: #bfbfbf

 

Light Grey: #f3f3f3

Dividers









 
 
 

Typography

Fonts

Primary font stack

Font size: 19px Font weight: 300 Line-height: 28px Color:#666 Open Sans

Primary font stack italic

Font size: 19px Font weight: 300 Line-height: 28px Color:#666 Italic Open Sans

Primary font stack semibold

Font size: 19px Font weight: 400 Line-height: 28px Color:#666 Open Sans

Primary font stack italic semibold

Font size: 19px Font weight: 400 Line-height: 28px Color:#666 Italic Open Sans

Primary font stack bold

Font size: 19px Font weight: 600 Line-height: 28px Color:#666 Open Sans

Primary font stack italic bold

Font size: 19px Font weight: 600 Line-height: 28px Color:#666 Italic Open Sans

Secondary font stack

Font size: 16px Font weight: 300 Line-height: 26px Color:#666 Open Sans

Secondary font stack italic

Font size: 16px Font weight: 300 Line-height: 26px Color:#666 Italic Open Sans

Secondary font stack bold

Font size: 16px Font weight: 400 Line-height: 26px Color:#666 Open Sans

Secondary font stack bold italic

Font size: 16px Font weight: 400 Line-height: 26px Color:#666 Italic Open Sans

Tertiary/script large font stack

Font size: 25px Color:#666 'caflisch'

Tertiary/script font stack

Font size: 19px Color:#666 'caflisch'

Headers

H1 Header

Font weight: 400 Font size: 35px Uppercase Color: #fff Centered Border:3px #fff solid Open Sans

H2 Header

Font weight: 300 Font size: 38px Line-height: 41px Color: #666 Centered Italic Open Sans

H3 Header

Font weight: 300 Font size: 16px Line-height: 28px Color: #666 Centered Bold Open Sans

H4 Header

Font weight: 100 Font size: 16px Line-height: 28px Color: #77923d Centered Open Sans

Captions & Titles

caption

Font weight: 600 Font size: 16px Color: #6a5584 Centered Uppercase Open Sans

Member title

Font weight: 100 Font size: 16px Color: #77923d Centered Open Sans

Paragraph blocks

H2 Headline


Primary font stack copy is centered for top page copy. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

"Primary font stack copy is centered, italic, and font-color is #fff for our typical testimonial sections. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis."

Secondary font stack
Name
Title

"Primary font stack copy is centered, italic, and font-color is #fff for our typical testimonial sections. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis."

Secondary font stack
Name
Title

H3 Headline

Secondary font stack is our centered sub copy we have for our 3 column sections. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

H3 Headline

Secondary font stack is our centered sub copy we have for our 3 column sections. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

H3 Headline

Secondary font stack is our centered sub copy we have for our 3 column sections. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

List Structure

  • list line one
  • list line two
  • list line three

List Structure

  • list line one with:
    • nested list line one
    • nested list line two

List Structure

  • list structure line one with mulitple lines and mulitple lines

Imagery

H1 Header

H1 Header

Icons

Navigation & Links

Primary navigation

Image block links

Going Responsive
Alaska Airlines

Portfolio Link

Forms

Footer