Design System

The Maryland Web Design System (MDWDS) provides building blocks and best practices that allow state agencies to spend less time on common UI problems, and more time solving the needs of the people they serve.

The MDWDS will evolve over time in response to the needs of users, as well as to changing technology. As new UI components and patterns are released, we will announce them in our  community Google Chat and via our mailing list – be sure to sign up below!

Getting started for developers

Follow the instructions to install and use MDWDS in your project.

Getting started for designers

To use our MDWDS Figma library, add it as a library to your working design file.

If you’re in the MDThink Figma organization

1. Browse “Your Teams” or “Your organization” for the library named “NEW Style MDWDS library”.
2. Add it to your working design file.
3. If you do not see the MDWDS library as an option to add, request access via Figma.

If you’re not in the MDThink Figma organization

1. Download the .fig file.
   1. If you’re unable to access the file, request access by emailing [email protected].
2. Publish it as a library within your Figma organization.
3. Browse “Your Teams” or “Your organization” for the library named “NEW Style MDWDS library”.
4. Add it to your working design file.

For general information about MDWDS styles

Visit our Storybook to find information about Colors and Typography.

Join the MDWDS Community

Have a question or idea you’d like to contribute? Join the MDWDS Community Google Chat.