Web

Grid & PSD Files

Overview

This style guide is a tool to assist in the design of hbs.edu web properties with the goal of ensuring consistency of the Harvard Business School voice and brand and a consistent user experience.

There are two tiers of guidelines:

All new sites should be coded to the 1180-pixel grid. The guidelines for the 984-pixel grid are included for redesigning sections of pre-existing sites.

All HBS sites are designed and coded responsively.



1180-Pixel Grid

Files

1180-Pixel Grid
Desktop PSD Template: Standard Page (1180-Pixel Grid & Standard Page Types) (5.2 MB)
Desktop PSD Template: Modules (All Full-Width Body Modules) (34 MB)
Color Palette

Desktop Grid

Both grids have 12 columns.

The 1180-pixel grid has 80-px (wide) columns and 20-px gutters.

Both grids use an 8-px baseline grid to establish a vertical rhythm and act as an aid for designing new desktop components.

1180 px grid section


984-Pixel Grid

Files

984-Pixel Grid
Desktop PSD Template (984-Pixel Grid & Standard Page Types) (16 MB)
Color Palette

Desktop Grid

Both grids have 12 columns.

The 984-pixel grid has 60-px (wide) columns and 24-px gutters.

Both grids use an 8-px baseline grid to establish a vertical rhythm and act as an aid for designing new desktop components.





Landing Template B (984-Pixel Grid)


Faceted Utility Template (984-Pixel Grid)


Longform Article (984-Pixel Grid)


Profile (984-Pixel Grid)