# HarvardSites Design System About ### HarvardSites Design System The HarvardSites Design System provides shared, reliable solutions for building accessible and scalable University websites. [ arrow\_forward Learn about the design system ](/about) ![Design system icons arranged in a grid.](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2024-11/DS%20Website%20icons%20_50-50%20Image_2.png?itok=JV1n-JzW) ## 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)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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2024-11/DS%20Website%20icons%20_Principles_8.png?itok=a6XqmXY_) [### Accessibility ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Accessibility.png?itok=mwBDPyLC) [### Brand and Identity ](/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. ](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Branding.png?itok=dXfmZDtF) [### Graphic Design ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Graphic%20Design.png?itok=WZmsHydW) [### University Policy ](/university-policy)University policy standards and guidelines to support compliance with Harvard’s accessibility and trademark requirements. ![Icon showing a shield.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_University%20Policy.png?itok=2RYjt7c_) ## 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 ](/5050-card)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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2024-11/DS%20Website%20icons%20_50-50%20Card_0.png?itok=iqEVRDXL) [### Accordion ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2024-11/DS%20Website%20icons%20_Acccordion_0.png?itok=KF6gJQEi) [### Button-Style Cards ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Button%20Style%20Cards.png?itok=mOdo1oQT) [### Call to Action Links ](/call-action-links)A Call to Action Link is a prominent link that includes link text and an icon. ![Icon showing three rectangles arranged in a row, each containing a white rectange representing text and an arrow icon.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Call%20to%20action.png?itok=LJy18lEM) [### Columns ](/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](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-09/DS%20Website%20icons%20_Columns.png?itok=UCPR5lSK) [### Hero ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/Hero_1.png?itok=ZFE12pHM) [### List Component ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/DS%20Website%20icons%20_Listing.png?itok=peMfnfEe) [### Media Gallery ](/media-gallery)A Media Gallery component displays a collection of media items (images, audio, video, or externally hosted media). ![Media Gallery Component](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-12/Media%20Gallery.png?itok=okiwYG7I) [### Quote Card ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Quote.png?itok=L-V4onDK) [### Stats Cards ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Stats%20Cards.png?itok=vOVy2vXQ) [### Tabs ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Tabs.png?itok=abU5DLUS) [### Vertical Cards ](/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.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Vertical%20Cards.png?itok=0GQq2qzC)