Style Guide

Header Sizes

There are six levels of headers:

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

This is a standard link.

This is standard body text.

Official phone number format: (415) 555-1574

Blue Divider…

Color Codes

 

#F9A134

 

#699CC6

 

#A0CF67

 

#421953

 

#F5F5F5

 

#6D6E71

 

#000000

 

#ADAFB2

 

#72CCD2

 

#F26531

 

#FFFFFF

 

#DCDDDE

 

#414141

Image Size Guidelines

Hero Images
1920 x 950
Inline Images Option 1
1180
Inline Images Option 2 (Most Common)
770
Employee Profile Banner Images
770
News Item Banner Images
770
Similar Projects Images
770 x 380
Featured News Item Images
565 x 565
Featured Project Thumbnails Items (PROJECTS, NEWS, ETC.)
360 x 360
Circular Headshots
320 x 320

The following illustrates how the sections are divided on the site.

Header1180
Content1180
one-fourth
257
one-fourth
257
one-fourth
257
one-fourth
257
left-third
360
middle-third
360
right-third
360
left-half
565
right-half
565
right-two-thirds
770
left-two-thirds
770
right-one-third
360

HTML code sample using a grid wrapper to divide a section into 1/3 and 2/3. The divider “full-width” is necessary to temporarily break out of the 1180 pixel container so the image or background color fills the screen from left to right. You can copy and paste the code to use anywhere.


More Content

/* YOUR CONTENT */
Scroll to Top