---
title: For Developers
date: 2024-07-17T14:38:00-07:00
author: Lauren Stephenson
canonical_url: "https://designsystem.umd.edu/getting-started/for-developers"
section: Getting Started
---
[Getting Started](https://designsystem.umd.edu/getting-started)

#  For Developers 

The UMD Design System is a collection of open-sourced packages for building branded University of Maryland interfaces. The system is platform-agnostic and works in any codebase — components can be added to a page in minutes via CDN with no build tools, or installed via npm for full tree-shaking and framework integration.

 

 

  

    ##  Where to Begin 

  

The packages are maintained in a mono-repo hosted on GitHub. Each package can be added to your codebase via npm or referenced using a script tag with a CDN source — no build tools required for the CDN path.

 

 

    ![git cat on shell](https://umd-design.transforms.svdcdn.com/production/images/dev1.png?w=1324&h=1323&auto=compress%2Cformat&fit=crop&dm=1723644662&s=4edafebc578fbc0ad9eb45dcd8874935) 

##  Open Source Repository 

The GitHub repository contains installation instructions, advanced use cases, codebase inspection, and collaboration options. It is open-sourced under MIT licensing and can be forked to suit any unique needs.

The repository organizes packages across three layers. The **Foundation layer** provides design tokens, SVG icons, and shared utility functions. The **Infrastructure layer** includes a static CSS styles library, a web component model, and an element builder API. The **Application layer** delivers ready-to-use [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) with Shadow DOM encapsulation, foundational UI element builders, and dynamic content feeds for news, events, and more.

 

  [ Visit repo ](https://github.com/UMD-Digital/design-system)  

 

 

 

 

    ![Package with arrow to vue, static, react](https://umd-design.transforms.svdcdn.com/production/images/dev2.jpg?w=1314&h=1314&auto=compress%2Cformat&fit=crop&dm=1723644721&s=f381f813886b55a4a7650d0a304d0e73) 

##  Package Installation 

The component library is built in TypeScript and can be referenced via a CDN script tag for quick starts, or installed via npm for production applications. The CDN approach requires just two tags — one script for components and one stylesheet — and works in any plain HTML page with no build step. For detailed installation instructions and code examples, refer to the [developer documentation](https://umd-digital.github.io/design-system/getting-started.html).

The styles library ships as pre-compiled static CSS covering typography, layout utilities, spacing, and design tokens as CSS custom properties. For projects using a build pipeline, Tailwind integration is supported with additional documentation available [here](https://umd-digital.github.io/design-system/styles/tailwind.html).

 

 

 

 

 

    ![puzzle pieces](https://umd-design.transforms.svdcdn.com/production/images/dev3.jpg?w=1323&h=1323&auto=compress%2Cformat&fit=crop&dm=1723644823&s=21f2defb4e716e4dc986839b04ef61a0) 

##  Package Implementation 

On each **component page**, you'll find sections dedicated to use cases and best practices as well as code examples for HTML markup and variations.

The **Foundation pages** offer theme examples for grid, spacing, color, and typography.

In **Templates**, you can explore visual examples of structuring components with theme styles for layout, typography, and unique use cases.

The [**Playground**](http://playground.designsystem.umd.edu) lets you browse interactive component examples and copy ready-to-use code without any local setup.

 

  [ View components ](https://designsystem.umd.edu/components)   [ View Foundation pages ](https://designsystem.umd.edu/foundation)   [ View templates ](https://designsystem.umd.edu/templates)  

 

 

 

 

  ---

 

 

 ##  ACCESSIBILITY TOOLS 

  

[WAVE](https://wave.webaim.org/) generates false positives for color contrast issues based on the shadow DOM. Its current implementation does not inspect the layers within the shadow. We recommend using Lighthouse over WAVE.

---

 

 

   ##  Release Notes 

Get the latest updates for UMD Design System releases.

 

  [ View releases ](https://github.com/UMD-Digital/craft-shellcraft/releases)