How patterns and templates support teams
The Massachusetts Design System includes reusable pattern and page templates in Figma. These help teams spend less time recreating common layouts and more time solving for the needs of their users. They're built with design system tokens, components, and layout guidance so project teams can begin from a consistent foundation instead of starting from a blank page.
Using pattern and page templates can help teams:
- move faster during early design work
- reduce duplicated effort across projects
- apply the design system more consistently
- start with accessible, reusable design structures
- align common service experiences across the Commonwealth
- give designers and developers a clearer shared reference point
Templates are intended for all project teams, including designers, product teams, developers, and accessibility specialists. Check the template file periodically for new patterns, updates, and guidance.
What templates are available
The pattern and page template library includes concept designs for common user experience needs, including:
| Template type | What it helps with |
|---|---|
| Page templates | Prebuilt page structures with headers, footers, breakpoints, and grid systems already applied. |
| Main navigation | Patterns for organizing top-level site or product navigation. |
| Site navigation | Layouts for section-based navigation and deeper content structures. |
| Footers | Helps teams provide consistent end-of-page navigation, required links, contact information, and supporting resources across a site or service. |
| Forms | Starting points for common form layouts, field groups, validation patterns, and form actions. |
| CRUD tables | Patterns for viewing, creating, editing, and managing records in table-based experiences. |
| Race and ethnicity data collection | Example patterns for gathering race and ethnicity information. |
| Translation controls | Examples for helping people choose their preferred language for content on screen. |
| Content sections | Reusable page sections, such as hero regions, intro areas, and supporting content blocks. |
How to use the templates
Teams with access to the EOTSS Figma Enterprise account can copy templates into their own working files and customize them for their project needs.
When using a template:
- Start with the pattern that is closest to your use case
- Preserve core Massachusetts Design System components whenever possible
- Customize content, layout, and flow to meet your users’ needs
- Review the template against your project’s accessibility, content, and technical requirements
- Work with your delivery team to determine how the design should be implemented
These templates are flexible starting points. They are not meant to limit teams to one exact layout or solution.
Important note about implementation
Pattern and page templates are concept designs only. They are not production-ready code and should not be treated as final implementation guidance.
Teams are responsible for reviewing, adapting, and validating each template based on their specific service, users, content, accessibility needs, and technical environment.
If there is a particular user experience you are solving for that isn’t currently covered, email the design system team. We are prioritizing experiences that are the most useful for implementing teams, and would love for your use case to help inform our priorities.