Design System

Executive Education Design System

8-Point Grid

Consistent, and scalable spacing helps eliminate guesswork whilst designing and developing. It requires fewer design decisions. And it enables a much faster turnaround on projects.

The 8pt Grid is probably one of the most commonly used Layout Grid Systems there is, and for very good reason.

HBS Digital and Print Layouts Adhere to an 8-Point Grid for Consistent and Scalable Spacing
This system uses multiples of 8 to define dimensions, padding, and margin of elements.

8-point grid illustration showing an email sign up field example

What is the value of the 8-pt system?

For Designers: Efficiency, less decisions to make while maintaining a quality rhythm between your elements.

For Teams: An easy system of communication between designers and developers (no fussing over pixels).
A developer can easily eyeball an 8pt increment instead of having to measure each time.

For Users: Consistent aesthetic to the brand they trust. No blurry half-pixel offsets on their preferred device.

For HBS: Easy, even, consistent results (in less time) with greater multi-platform compatibility.

Illustration of HBS 8pt grid benefit examples: crisp edges, even and consistent anti-aliasing, and shapes being measured in whole pixels

Calls-To-Action (CTA)

A Harvard Business School CTA, such as buttons (ie, emails) and outbound links (ie, PDFs of print pieces), should stand out and be instantly recognizable for the action that it represents.


Primarily used in emails, buttons are intended to stand out and promote users to the next level of interaction.

  • In emails, use Arial Bold (otherwise, use Graphik Semibold)
  • Primarily use HBS crimson, black, or white (depending on situation)
HBS ExEd CTA button examples on crimson and black backgrounds
HBS ExEd CTA button on 8pt grid

8-Point Grid = All measures are divisible by 8

Above/Below Text: 16-point
Left/Right Text: 32-point


Across all digital media, text-based links are used extensively and as such need to be consistently styled.

  • Primarily use HBS crimson, black, or white (depending on situation)
  • In emails, hyperlinked copy is underlined rather than bolded.
HBS ExEd Email underlined CTA link examples
  • On the website, hyperlinked copy is underlined and bolded.
  • Use Graphik Semibold
HBS ExEd underlined and bolded hyperlink in website copy
  • Within copy blocks, if the link is on its own line, use the outbound link icon.
HBS ExEd CTA link examples with outbound link icons on copy blocks

When showing full link information, the outbound link icon is not necessary.

HBS ExEd CTA full link example in crimson

It is acceptable to use HBS colors for icons to make distinctions between offerings. However, for accessibility, the icon set cannot be differentiated solely by color. They MUST have visual differences in their form.

Underlining Link is Optional
It is acceptable to just make the link Graphik Semibold (or Arial Bold, depending on the situation).

HBS ExEd CTA link examples with icons

Digital Accessibility

Harvard University is committed to making University Information Technology and University Digital Content accessible.

  • The Digital Accessibility Policy [] is established to promote equal access to information technology and digital content and to improve the user experience of IT and digital/online media for all users, including persons with disabilities.
  • Guidelines and extensive resources are available on the Harvard University Digital Accessibility website [].

Accessible Documents

Harvard University mandates that all documents distributed via email or online meet these accessibility standards:

  • When creating InDesign files, designers should follow specific rules that make the content accessible.
  • Once files are approved, there is a process in place for remediation (eliminating accessibility barriers). Either the InDesign file or the PDF must be remediated before an asset can be released.

Imagery Style and Usage

Harvard Business School has developed an extensive library of images to use across all formats and deliverables. This library should be the first source to reference and should be considered the primary source for imagery.

All imagery should be rendered in full-color (no black and white, monotone, duotone, etc).

First image shows HBS building exterior with sun setting in the background and second image shows atrium of HBS building with people walking and sitting inside
Two faculty members in conversation inside HBS building with view of campus through glass windows

The HBS ExEd M&S Photo Library
(Link requires HBS login)

As your primary source for imagery, this extensive collection contains a vast array of photography; from exterior architecture to classroom settings and student-focused scenarios.

NOTE: A Large number of these images will require a level of touching-up.

  • Name cards need to be blurred (to obscure legibility)
  • Cups / bottles should be removed (if possible)
  • Color-correction may be necessary (interiors especially)
HBS ExEd Image Library Folder View
HBS ExEd Image Library Image Collection Preview View

Stock Photography

Stock imagery can be used in select situations when photos of our programs, participants, faculty, and campus don’t effectively fulfill the need. Examples of appropriate stock imagery use include marketing materials for virtual-only programs, in Executive Insights and other white paper style materials, and in email newsletters that feature thought leadership articles from HBR, Working Knowledge, and other similar sources.

Because of the range of our applications, we highly prefer stock images be purchased with full privileges of use in all situations (print, digital, etc) and without additional fees.

Visual support for HBS’ editorial deliverables (ie, Executive Insights) typically need imagery that supports a concept, and is one of the only places that require a more graphic, or illustrative, image approach.

HBS ExEd stock photography selection examples

Illustration Style and Usage

Much like Stock photography, the use of illustration is necessary for use in situations that require the conveyance of specific concepts that are not achievable with photographic imagery.

All illustrations should be chosen for their simplicity and effectiveness to convey the concept at hand.

In situations where there are a collection of multiple articles, it is necessary that the illustration style and color remains consistent within each article. That said, like an editorial piece, each article should be treated individually and given its own illustrative treatment.

If time allows, the colors used in the illustration should be modified to use colors from the HBS color palette; for instance, re-coloring the signature element of the illustration.

3 HBS illustration examples using a consistent style
three HBS illustration examples. The signature element in two of them is modified to use HBS color palette

Icon Style

Icons Are Used Sparingly. When icons are used, they should be kept very simple, and preferably line-based.

When more contrast is required, contain the icon within a container (ie, circle, rounded square, etc).

Shape should be the primary differentiator between icons in a set. For accessibility reasons, it’s important to understand that color alone cannot be the only way to distinguish between two icons that need to convey distinct meanings.

A collection of HBS ExEd icons including the "Certificate of Management Excellence" and "Corporate Director Certificate" icons, social media icons, outbound link icon, and icons for "Executive Insights: How a Commitment to Deep Purpose Improves Performance"

Data / Charts / Tables – Style and Usage

The general rule regarding HBS information design is “keep it simple, minimal, clean and timeless.”

In most instances, the amount of text the illustration is supporting is quite dense, so there is a need to use condensed and/or compressed fonts to fit all of the data within the restricted space.

HBS ExEd chart design examples about digital transformation

Keeping text large and legible can create a technical challenge; this one shows the difficulty of fitting all the information on the page. Simple lines can help to connect text to the graphic and make for a simple, but eye-catching graphic element.

HBS ExEd graphic element design example about the case method

To ensure readability and graphic impact, using a ‘doughnut’ pie chart style can make a big difference.

HBS ExEd doughnut pie chart example along with in-page view

Powerpoint pages often have an abundance of information to represent. For this reason, simplicity in form and color helps to keep the page organized and understandable.

HBS ExEd PowerPoint chart with quote design example

Tables require a simple organization of a large amount of information. This again is an example of how a simple palette can provide a clean platform to showcase the information hierarchy of the piece.

Table design example summarizing information about HBS ExEd Comprehensive Leadership Programs

Calendar tables can convey a lot of information and still remain simple and elegant.

Calendar table design example summarizing HBS ExEd Topic-Focused Programs

Number Usage

All numbers used in text should be rendered without a leading zero (ie, “1” not “01”).

The only exception to this rule is the treatment of dates, which requires a specific Day/Month/Year format: DD MMM YYYY. (See the Typography page for more information.)

Two examples of number usage as steps and lists in page content
Number usage to indicate sections within body copy on a page

The preferred location for page numbers (rendered without a leading zero) is to the right side of the page. The orientation of the document determines whether it is at the top or at the bottom.

Never place page number on top of the pattern (to ensure ADA compliance).

Horizontal Layout = Lower Right

Page number positioning shown on horizontal page layout

Vertical Layout = Upper Right

Page number positioning shown on vertical page layout

An exception to the page number positioning is in PowerPoint, which uses the right side for our logo and brand imagery. In this case, the only position possible is to the left.

PowerPoint = Lower Left

Page number positioning shown on Powerpoint slide

Logo Animation (Motion Graphics)

Entitled “Educated Extraction,” the preferred animation style of introducing the HBS logo does so in the following manner:

Like an eye opening, the center rule of the HBS logo is revealed from the center of the screen.

Step 1 of animation introducing the HBS logo

Simultaneously, from the center rule:
A) The HBS Shield wipes left, while B) The HBS Wordmark wipes right

Step 2 of animation introducing the HBS logo
Step 3 of animation introducing the HBS logo

Quickly and efficiently, the HBS logo is revealed in its entirety.

Step 4 of animation introducing the HBS logo