The Commonwealth of Massachusetts



EOTSS places our customers and constituents at the heart of everything we do. We offer responsive digital services and productivity tools to more than 40,000 state employees, who provide essential information and services to the citizens of the Commonwealth.

We also serve constituents, providing them with digital services and tools that enable taxpayers, motorists, businesses, visitors, families, and other citizens to do business with the Commonwealth in a way that makes every interaction with government easier, faster, and more secure.


I collaborated with developers, project managers to establish a project roadmap that will help us define and establish the pillars of the brand. This Design system includes various products such as the style guide, Mayflower React component library, Mayflower Patternlab and the Mayflower system GitBook documentation.

I was primarily responsible for leading the design and implementation of the Style Guide. The information contained in this document is the product of our research, experience, and expertise, collected in one place to help detail and explain our decisions in creating


  • Multiple agencies rely on our code and designs to support their apps.
  • Defining the brand within the greater Commonwealth brand.
  • Resources, assets and documentation live in separate environments.

Tools & Technology

  • Invision
  • Sketch
  • GitBook, Git
  • Microsoft Office Suite (Excell / Word  / PowerPoint), Photoshop, Illustrator
  • HTML / JavaScript / CSS / React


Our team designed and developed a scalable design system (The Mayflower Design system). This is a collection of modular components, color theory, design principles and documentation that support and guide our design process. Mayflower makes it easier to build accessible, mobile-friendly websites with a consistent look and feel for the state of Massachusetts.

Process & Final Product

image49 Style Guide

This guide is an outline of the elements and strategies that make up the brand identity. Refer to it in order to help you create print or digital assets that will feel like they are in a similar style to and belong to the Commonwealth’s information ecosystem. Live demo


Mayflower Patternlab

Leverage Mayflower component libraries to build fast, accessible, mobile-friendly, cross-browser compatible web products efficiently. Live demo


Mayflower React

Mayflower-react is a React component library under the enterprise design system for the Commonwealth of Massachusetts. Live demo