---
title: Getting Started
date: 2024-06-14T12:17:00-07:00
canonical_url: "https://designsystem.umd.edu/getting-started"
section: Getting Started Home
---
#  Getting Started 

How to enhance your website with the UMD Design System.

 

 

 

    ##  What is it – and why should I use it? 

  

The UMD Design System is a tool for any umd.edu website. 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.

 

 

    [ ![paper with pencil](https://umd-design.files.svdcdn.com/production/icons/icon-card-documentation.svg?dm=1721766820) ](https://designsystem.umd.edu/getting-started/for-content-managers) [ For Content Managers ](https://designsystem.umd.edu/getting-started/for-content-managers)

You are the wizards behind the day to day: making site updates, building pages, and choosing how to effectively present information to your audiences.

 

   [ ![landscape photo representation](https://umd-design.files.svdcdn.com/production/icons/icon-designers.svg?dm=1721767388) ](https://designsystem.umd.edu/getting-started/getting-started-for-designers) [ For Designers ](https://designsystem.umd.edu/getting-started/getting-started-for-designers)

You are the artisans creating design solutions for user problems: poring over tiny details and surveying the entire system to facilitate a visual and interactive experience that meets users’ needs.

 

   [ ![laptop with code](https://umd-design.files.svdcdn.com/production/icons/icon-developers.svg?dm=1721767461) ](https://designsystem.umd.edu/getting-started/for-developers) [ For Developers ](https://designsystem.umd.edu/getting-started/for-developers)

You are the codesmiths who bring the concept to life: constructing the foundation, beams, and halls of the user interface and weaving the intricate networks that make it functional and accessible.

 

  

 

   ##  IF YOUR SITE ALREADY HAS THE UMD DESIGN SYSTEM 

  

---

If you’re already working with the UMD Design System, you’ll likely find the [Components](https://designsystem.umd.edu/components) and [Templates](https://designsystem.umd.edu/templates) sections useful to get familiar with all the possibilities and find new inspiration for displaying content.

 

 

    ![student at laptop](https://umd-design.transforms.svdcdn.com/production/images/Variant61.png?w=1728&h=1596&auto=compress%2Cformat&fit=crop&dm=1721768473&s=2de0c192975dc0d4f622955723c0356a) 

##  The Design System for your website 

This site has thorough documentation to help designers and developers understand how to incorporate the UMD Design System into a site, regardless of the CMS (content management system).

If you do not have that expertise within your department, an external contractor or vendor can access all of the information here to successfully implement the Design System with you. There are no preferred vendors for UMD.

 

 

 

 

 

    ![chevron filled with components](https://umd-design.transforms.svdcdn.com/production/images/playground.jpg?w=1029&h=1035&auto=compress%2Cformat&fit=crop&dm=1777042021&s=34265bd6a1e2e18f6fc668afe8b36f4f) 

##  Explore components in action 

Want to see how components behave before you use them? Our **Live Preview Playground** is powered by Storybook and shows every component in context—with real examples, responsive behavior, and variations.

Browse components, check their states, and explore how they look across breakpoints.

 

  [ Open the Live Preview ](https://playground.designsystem.umd.edu/)