Mayflower Design System


The goals of Mayflower are:

  • To create a consistent, inclusive user experience and look and feel across the Commonwealth’s discrete and diverse digital ecosystem for the constituents.

  • To allow Commonwealth agencies to efficiently design and build accessible, mobile-friendly and consistent web products using Mayflower as a unified design system.


Massachusetts Digital Service has implemented Mayflower for the following projects. Use the table below to browse the projects, learn more about their technology stack, and get ideas for your Mayflower implementation.

Become part of the community

The Mayflower Design System is meant to be an active collaborative community of government developers, designers, and Mayflower enthusiasts, which is currently maintained by Massachusetts Digital Service.

If you want to join the Mayflower community, have questions about Mayflower, or are running into issues when implementing Mayflower, contact us!

Submit your project

If you’ve been using Mayflower to make changes to your application and want to share your work with others and/or ask the Massachusetts Digital Service team for design and implementation feedback, submit your project by opening an issue with the following information:

  • A link to the application

  • Your name or alias and contact URL or email address

  • The implementation’s target language and/or framework

  • The code repository if it is in Github or equivalent (if public)

  • What type of Mayflower implementation you are using

  • What Mayflower Design System version you are using

  • Any useful caveats or other notes

We've looked around and have found 6 community projects that have used Mayflower inspiration for the design elements.