--- title: UMD Design System Home date: 2023-12-18T13:20:00-08:00 canonical_url: "https://designsystem.umd.edu/" section: Design System Home --- University of Maryland # 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. This design system works with any content management system. With design, UX & front-end development built in, it’s a cost-effective way for campus units to implement UMD-approved branding, styles, & functionality. ![](/design/static/images/home/in-use/terp.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/today.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/terp.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/today.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/terp.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/today.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/terp.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/today.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/aim.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/maryland-today.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/aim.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/maryland-today.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/aim.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/maryland-today.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/aim.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/maryland-today.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/forward.jpg) ![](/design/static/images/home/in-use/today2.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/today2.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/today2.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ![](/design/static/images/home/in-use/today2.jpg) ![](/design/static/images/home/in-use/umd.jpg) ![](/design/static/images/home/in-use/provost.jpg) ![](/design/static/images/home/in-use/aim2.jpg) ![](/design/static/images/home/in-use/umd-mission.jpg) ## See the design system in use [Get inspired](/templates) ## Benefits to using a design system Benefits 1. 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. 2. 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. 3. 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