---
title: UMD Design System Home
date: 2023-12-18T13:20:00-08:00
canonical_url: "https://designsystem.umd.edu/"
section: Design System Home
---
#  UMD Design System 

 The UMD Design System is a centralized design resource for University of Maryland websites. It offers a library of premade components, assets, and guidelines that provide a cohesive and accessible experience for all users.

 

   ![Mockup of the Office of the Provost site superimposed onto the screen of a laptop computer](/design/static/images/home/mockup-desktop.png) ![Mockup of the Office of the Provost site superimposed onto the screen of a smart phone screen](/design/static/images/home/mockup-mobile.png) 

 

   ##  This design system works with any content management system. With our robust documentation, it’s easy and cost effective for content managers, designers, and developers to implement UMD-approved branding, styles, and functionality. 

  

   ##  Benefits to using a design system 

  

   01 ###  Consistency 

There are thousands of UMD websites - many with contrasting designs and behaviors. The UMD Design System offers a way to bring all UMD websites together through tested components and templates that ensure visual consistency and enhanced user experience.

 

 

 

    02 ###  Time and Cost Savings 

Designing and building websites is expensive and time consuming. Our collection of premade, modular components means designers and developers can spend less time creating the basic building blocks and user interface of a website, leading to faster project delivery.

 

 

 

    03 ###  Accessibility 

The UMD Design System prioritizes accessibility. It combines UMD brand elements and user experience best practices to deliver a cohesive, accessible website—meeting WCAG 2.1 AA standards right out of the box. This means a more inclusive digital experience for everyone.

 

 

 

  

   ##  Common Components 

  [ See all components ](/components)  

  

   [ ![Standard card: image, title and text, call to action](https://umd-design.transforms.svdcdn.com/production/component/card-standard.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717595583&s=7a2f743b00abed218788b6708513b2c3) ](https://designsystem.umd.edu/components/standard-card) [Standard Card](https://designsystem.umd.edu/components/standard-card)

The most flexible card. Use in groups to lead to more content.

 

 

   [ ![Overlay cards](https://umd-design.transforms.svdcdn.com/production/component/Property-1overlay-card.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1715792830&s=c2291875bd867389825aa4f0da63e087) ](https://designsystem.umd.edu/components/overlay-card) [Overlay Card](https://designsystem.umd.edu/components/overlay-card)

A visual card where text overlays the bottom of an image. Also available as a plain card with no image.

 

 

   [ ![Thumbnail of hero component - M lawn photo in background, "Who We Are", greek text and button](https://umd-design.transforms.svdcdn.com/production/component/Property-1default-hero.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717707744&s=c8090a438af3888c68c1db9903cdf31b) ](https://designsystem.umd.edu/components/background-hero) [Background Hero](https://designsystem.umd.edu/components/background-hero)

A splashy, visual option for pages with strong imagery

 

 

   [ ![Thumbnail: Watercolor image of turtle with MD flag with block representing calendar date overlaid on left; On right blocks representing title, text and button](https://umd-design.transforms.svdcdn.com/production/component/event-pathway.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1718115317&s=bddcb99d6cb630a362ef2fa8e3439998) ](https://designsystem.umd.edu/components/event-pathway) [Event Pathway](https://designsystem.umd.edu/components/event-pathway)

Highlights a single event

 

 

   [ ![thumbnail - Accordion](https://umd-design.transforms.svdcdn.com/production/component/Property-1accordion.png?w=864&h=560&auto=compress%2Cformat&fit=crop&dm=1717703871&s=2ed16f281e5d5904ddef76f3f4eaa6ad) ](https://designsystem.umd.edu/components/accordion) [Accordion](https://designsystem.umd.edu/components/accordion)

Groups sections of related content in blocks that can be opened and closed

 

 

  

  

  

  

 ##  The design system is maintained by the Web Services team in the Office of Marketing & Communications