Foundations

Harvard Business School’s web design system introduces a flexible component library that supports modern, scalable, and accessible digital experiences on hbs.edu web properties while ensuring consistency of the HBS brand.

This page provides an overview of the web design system’s foundations: accessibility standards, the grid system, page templates, web color themes, and image aspect ratios.

Components are the primary expression of the design system. Pages can be constructed using one Topper and as many interchangeable Blocks as needed. Example pages demonstrate in-context component usage.

For questions about the web design system or a future web project, please contact Adam Dombovari in Marketing & Communications.


Accessibility

Harvard Business School is committed to creating accessible web experiences. All websites should follow Harvard University’s Digital Accessibility Policy to meet WCAG 2.1 Level AA standards. View accessibility resources and guidance for creating accessible PDFs.


Grid System

The web design system uses a responsive grid to create content columns, establish a vertical rhythm and ensure consistent alignments within pages and across the site. The grid consists of 16 columns on desktop and 4 columns on mobile. There are three basic content block alignment types: center (central 8 columns), wide (right 12 columns), and full (all 16 columns). View alignment options for each content block.


Page Templates

Most page templates share the same basic anatomy. The four template variations are supported by dozens of adaptable components that work across templates.

Detail Page Template

Detail Pages
Event Page
Profile Page
Course Page
People Listing

HBS Detail Page Template layout showing primary navigation, topper area, optional in page nav, primary content area, and content overflow positions

Landing Page Template

Fancy Landing Page
Simple Landing Page
Insights
Newsroom
Working Knowledge
Departmental Blogs

HBS Landing Page Template layout showing primary navigation, topper area, and primary content area positions

Content Template

Simple Article 
Fancy Articles 
Institutional News 

HBS Content Template layout showing primary navigation, topper area, and primary content area positions

Faceted Archive Template

Search
Editorial Archive
Program Finder

HBS Faceted Archive Template layout showing primary navigation, topper area, facets, and primary content area positions

Web Color Themes

Color themes are provided in many Web Design System components.

  • Light
  • Dark
  • Lavender
  • Skyblue
  • Red

Image Aspect Ratios

There are four recommended aspect ratios used across the design system — 16:9, 4:3, 1:1 and 3:4.

Four HBS recommended image aspect ratio options of 16:9, 4:3, 1:1, and 3:4 shown as boxes in a row
  • 4:3
    This is the default horizontal crop. It is a bit more substantial than 16:9 but can take up too much vertical real-estate if the asset in the component is full width.
  • 16:9
    A more compact horizontal crop. Use this if you want to reduce vertical scrolling on a page. (Inline-playing videos also use the standard 16:9 proportion.)
  • 1:1
    A square crop only recommended for cropped headshots.
  • 3:4
    This is the default portrait aspect ratio. Use for headshots and narrower asset treatments.

Component-Specific Guidelines

Recommended aspect ratios for each component that allow image use are provided below.

Toppers

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
Card Topper16:9Fixed*
(*Images will auto-crop based on the limiting dimension—see next section for details)
Fixed*Scales down proportionately on mobile—does not crop.
Media Page Topper1 asset – 16:9

2 assets – 4:3 x 2

3 assets: 3:4, 4:3 & 3:4
1 asset – 16:9 Fixed

2 assets – 4:3 Fixed

3 assets – 3:4 Fixed;
4:3 Crops uniformly left and right
Fixed1 asset – Scales down proportionately on mobile—does not crop.

2 assets – Height is fixed; width will crop (uniformly left and right) on mobile.

3 assets – 3:4 images scale down proportionally – will not crop on mobile; 4:3 images height is fixed but width will crop (uniformly left and right) on mobile.
Split Page Topper4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.
Statistics Page Topper4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Photo will go to square or slightly vertical on tablet and revert to horizontal on phone.
Split Article Topper4:3 or 3:4Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Will appear horizontal on desktop, vertical on tablet, and square-ish to slightly vertical on phone.
Simple Article Topper4:3Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Big Art Topper16:9Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Profile Topper3:4
(See Notes)
Fixed*Fixed*3:4 image will always crop top and bottom to just short of square (remains slightly vertical).

Scales down proportionately on mobile—does not crop.
*Images will auto-crop based on the limiting dimension—see next section for details.

Blocks

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
CTA1 asset – 16:9

2 assets (mismatched heights) – 3:4 & 4:3

2 assets (same heights) – 3:4 x 2

3 assets – 3:4 x 3
1 asset – 16:9 Fixed (Photo); 16:9 Not Fixed (Video)*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets – 3:4 Crops uniformly left and right
1 asset- 16:9 Fixed*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets (See Notes)
1 asset – Scales down proportionately on mobile—does not crop.

2 assets (mismatched heights) – Scales down proportionately on mobile—does not crop.

2 assets (equal heights) – As width first narrows, height is fixed and images crop left and right equally.

At ~narrow tablet width, breaks to one image and width is fixed and crops uniformly top and bottom.

3 assets – As width first narrows, height is fixed and images crop left and right equally.

At ~tablet width, breaks to (first) two images: height is fixed and width crops uniformly left and right (slightly more width shows on left and right of images than in 3 image view.)

At ~narrow tablet width, breaks to one image: crops all sides – left and right uniformly; top and bottom uniformly.
Events Tease3:4Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Grid List – Large3:4N/AN/AScales proportionally down to tablet. No image on phone view.
Hero Statement16:9Fixed* (left and right sides will be cropped off of 16:9 image; part of image that shows is ~3:2)Fixed*Left and right sides of a 16:9 image will always be cropped off (actual proportion is ~3:2).

Text block covers increasing amount of lower-left section of image as browser width decreases.
Hero Tease16:9 (~3:2 viewable)Fixed* (left and right sides will be cropped off of 16:9 image; part of image that shows is ~3:2)Fixed*Left and right sides of a 16:9 image will always be cropped off (actual proportion is ~3:2).

Text block covers increasing amount of lower-left section of image as browser width decreases.
Hierarchical Tease16:9Fixed* (left and right sides will always be cropped off slightly on 16:9 image)Fixed*Left and right sides will always be cropped off slightly on 16:9 image.

Scales down proportionately on mobile.
Media Asset Row4:3 (~3:2 viewable)Fixed*Fixed* (top and bottom will always be cropped off slightly on 4:3 image)Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionally on mobile.
Media Carousel4:3 or 16:9Fixed*Fixed*Scales down proportionally on mobile. Video can use standard 16:9 thumbnail.
Multiple Column List4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Image goes from horizontal to vertical appearance at narrow widths.
Section Intro Text3:4 or 4:3 (3:4 more ideal)Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Statistics Block4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Image goes from horizontal to vertical appearance on phone.
Supporting Details3:4 or 4:3 (3:4 more ideal)Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Tease Feed4:3 (~3:2 viewable)Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionately on mobile—does not crop.
Tease Row – Article4:3 (~3:2 viewable)Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionately on mobile—does not crop.
Tease Row – Content4:3 (~3:2 viewable)

16:9 video
Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Left and right will always be cropped off slightly on 16:9 image.

Scales down proportionately on mobile—does not crop.
Tease Row – Person1:1Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Tease Row – BookUse original book cover aspect ratio for images.Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Timeline Tease4:3
(1800 x 1350 px)

1:1
(1060 x 1060 px)

16:9 (video)
(1920 x 1080)
Fixed*Fixed*Scales down proportionately on mobile – does not crop.
Video Testimonial16:9Crops very slightly left and right (uniformly).FixedHeight is fixed. Width crops very slightly (uniformly) as browser narrows.
*Images will auto-crop based on the limiting dimension—see next section for details.

Template-Specific Singletons

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
Related People1:1Fixed*Fixed*Crops to circular frame.
*Images will auto-crop based on the limiting dimension—see next section for details.

How Photos Auto-Crop in Fixed Proportion Footprints

In fixed proportion image footprints (i.e., both width and height scale down proportionally on mobile), the posted image will be auto-cropped based on the limiting dimension:

Graphic shows how portrait and landscape images auto-crop based on limiting dimension in fixed proportion image footprints on mobile