HarvardSites Design System

About

HarvardSites Design System

The HarvardSites Design System provides shared, reliable solutions for building accessible and scalable University websites.

Learn about the design system
Design system icons arranged in a grid.

Foundations of the Design System

Learn about the foundational principles and guidelines that inform the HarvardSites Design System and guide its evolution. 

Guiding Principles

Guiding principles related to the design system purpose and objectives, digital design best practices, universal principles of design, and professional ethics.

Icon showing shapes of a bookmark and a star.

Accessibility

Accessibility standards and guidelines related to providing sufficient color contrast, identifying and labeling links and controls, restricting motion from animation and video, and more.

Icon showing the silhouette of a person standing with outstretched arms.

Brand and Identity

Brand and identity standards and guidelines for presenting a consistent Harvard identity across University schools and departments.

Icon showing a checkmark surrounded by a circle with scalloped edges.

Graphic Design

Graphic design standards and guidelines to produce a typographic style that is legible and readable and harmonizes with Harvard’s visual identity.

Icon showing an uppercase T enclosed in a square frame with handles at each corner.

University Policy

University policy standards and guidelines to support compliance with Harvard’s accessibility and trademark requirements.

Icon showing a shield.

Design System Components

Explore the patterns and components in the HarvardSites Design System and learn about their purpose and how best to use them. [Note that we are in the process of adding the additional components to the website.]

50/50 Card Component

A 50/50 Card is a horizontal element that displays an image on one side and information on the other.

Icon showing shapes of hills and the sun representing an image on one side and lines representing text on the other.

Accordion

An Accordion component is a vertical stack of content panels that can be opened and closed.

Icon showing a rectangle with multiple lines representing text and an up-pointing arrow, followed by two rectangles each with a line representing text and a down-pointing arrow.

Button-Style Cards

A Button-Style Card is a clickable card that displays an icon, link, and short description.

Icon showing the cards arranged in a row, each with a home icon followed by lines representing text.

Columns

A Columns component is a two-column layout used to place content side by side, often for comparison or to present related information in parallel.

Columns component

Hero

A Hero component is a banner element that displays an image and information at the top of a page.

Icon showing shapes of hills and the sun representing an image followed by lines representing text.

List Component

A List component is a dynamic content block that displays items from a specific content type, such as news, resources, or people, in a summary format and layout.

Icon showing a list of rectangular cards, each with shapes of hills and the sun representing an image on the left and lines representing text on the right.

Media Gallery

A Media Gallery component displays a collection of media items (images, audio, video, or externally hosted media). 

Media Gallery Component

Quote Card

A Quote Card is a horizontal element that displays an image on the left side and a formatted and attributed quote on the right side. 

Icon showing shapes of hills and the sun representing an image on the left and a text panel starting with an open quote icon followed by lines representing text on the right.

Stats Cards

A Stats Card is a card that displays a data point with a short description.

Icon showing three cards, each with two lines and a percent character representing data followed by lines representing text.

Tabs

A Tabs component is a set of layered content panels with tab controls to support navigation between panels.

Icon showing a row of four small rectangles, each with a line representing text, followed by a wide rectangle containing lines representing text.

Vertical Cards

A Vertical Card is a vertical element that displays an image on top and information below. 

Icon showing three cards, each with shapes of hills and the sun representing an image followed by lines representing text.