Insights

Welcome to Our Blog

HarvardSites Design System Insights

The HarvardSites Design System is a collection of tried-and-tested components and design practices for use in building digital products and platforms.

Through this blog, we aim to share insights, practices, and patterns related to the HarvardSites Design System. These contributions are intended to promote greater access and inclusion in our digital world.

Sketch style mockup of icons arranged in a grid representing the HarvardSites Design System

Recent Posts

Typographic Scale

Typography influences both readability and engagement. As with a musical scale, a typographic scale provides the basis for creating a harmonious visual structure that conveys the structure and relationships among text elements. For the HarvardSites Drupal...

 Icon with “Aa” pairs, a line height arrow, and a list of text styles from Heading 1 to body text.

Color System

A robust color system allows each Harvard School to preserve its unique identity while staying connected to the larger Harvard brand. Our approach prioritizes versatility and user needs, enabling personalized branding that meets accessibility and design...

A sketch that represents the HarvardSites Design System color assignment.

Autoplaying Hero Background Videos in Digital Design

Autoplaying background videos in hero components have gained popularity in modern web design. Recognizing the need to learn more about this trend in relation to the HarvardSites Design System, the design system team embarked on an investigation to...

Mockup of hero component