skip to main content
Mass.gov | Executive Office of Energy & Environmental Affairs (EEA) 
An official application of the Commonwealth of Massachusetts
preeti.jain@mass.gov

EEA Styles

  • EEA Style Guide is built on Mayflower, a design system for Mass.Gov.
  • Bootstrap 4 CSS/JS is added and customized for additional components.
  • EEA Style Guide components are mobile responsive.
  • EEA Style Guide components are built for accessibility and passed WAVE test.
  • User Guide: Get CSS/JS files  to build an EEA app.

Style Sets

Buttons

Primary buttons (btn-primary)

Login/Register, staff login, logout buttons

Disabled primary button

XS button-primary

Default buttons (btn-default):
Clear/Cancel/Search

Disabled default button

XS button - default

Angles and arrows buttons

File Type Buttons

Action Buttons (for Tables)

Icon Only Buttons (Use these sparingly. For ex: when more than 2-3 action buttons in a column)

Workflow Buttons/Icons

Tag Button with Close

Contact Section Icons

Phone

Online

Directions

Miscelleneous Icons

 Attach

 Calendar

 Correct

 Yes/Correct

 No/Wrong

 Error

 Expand

 Expanded

 Flag - Green

 Flag - Red

 Home

 Incorrect

 Minus

 Plus

 Redo/Refresh

 Reports

 Send

 Settings

 Share

 Sort

 Sort Up

 Sort Down

 Warning

Buttons on Left and Right

Section Title on Left with Button on Right

Title

Text

h1 for Page Heading

Subtitle to go under page heading. Subtitle to go under page heading. Subtitle to go under page heading.

h2 for Main Section Heading

h3 for Subsection heading, Table and Panel Heading or section heading Inside a Panel

h4 with underline for smaller Section Heading Inside a Panel

h4 for Paragraph heading

h5 for bold text

p.details for item description

P for Paragraph or body text. This is an inline text link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus erat a odio placerat volutpat. Nam elementum dignissim dolor, nec pulvinar risus malesuada ut. Vivamus vel augue viverra, lobortis felis sit amet, gravida nisi. Duis eu faucibus mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus vel mauris quis posuere.

  • Bulleted list
  • Bulleted list
This is an individual line link with arrow  External link example  Opens in new window Form fields helper text or disclaimers textlabel for text
Please correct the indicated errors.

Single Column Form

Fields marked with an astereisk (*) are required.
Help text here if required.
This information is required.
Radio buttons Inline?
Radio buttons stacked?
Checkboxes inline
Checkboxes stacked

Modal example

Select a date range
to

Multiple Column Form

This information is required.
Email address is required.
Select One

Password Requirements

Password must have at least 8 characters and include a capital letter and a number.
Password is required.

Collapsible Search

Tables and Panels

This is a table without tabs and with buttons on right

Heading One Heading Two Heading Three Heading Four Actions
Column Text One Column Text Two Column Text Three Column Text Four
Column Text One Column Text Two Column Text Three Column Text Four

This is a table with tabs, badges, sort, and pagination

Site Name Street Date & Time Depth   Actions
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 7.25ft
Site Name Here  Duplicate 1 Chapel Street 12/25/2018   16:30:15 24ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 8ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 5ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 12ft
Image Site Name Street Date & Time Image Type Description
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Photo Image description (limit # of characters)
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Photo Image description (limit # of characters)
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Photo Image description (limit # of characters)
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Map Image description (limit # of characters)
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Photo Image description (limit # of characters)
Site Name Here 1 Chapel Street 12/25/2018   16:30:15 Map Image description (limit # of characters)
Total Results: 22,500

Need a responsive table where columns stack up?

To make a stackable table make sure you add these 2 new files to your project:

  • Add "cdn/v4/Css/stacked-table.css" file to your CSS folder
  • Add "cdn/v4/js/stacked-table.js" file to your JS folder
Click on this link to see stackable responsive table >

This is a panel without tabs

Panel Header

Inside Panel Heading

Panel Content

This is a panel with tabs

Tab 1

This is tab 1 content.

This is a panel with tabs and sub-tabs

General Information

Project name

Hanscom Field Information Request

Project ID

6-12345

Project Type

Airport

Review request

Phase 1 Waiver

Estimated Cost

-

Archive status

Do Not Archive

Tags

Airport, Consturction

Comments

We are planning to build an airplane shed and would like to get some information for any endangered species in this area.

Jurisdictions

State Agency State Agency Action Other Agency Action
DEP Air Plan Approval -
All Other Some Action Here

Thresholds

Threshold Regulation No. Description Category
xxxxxx Description here ... Category Name
xxxxxx Description here ... Category Name

Locations

Statewide? Street Address City/Town Watershed
Yes - - -
No Street Address Town Name Watershed Name

Meetings/Site Visits

Meeting Type Meeting Date Location/Address Notes
Meeting Type xx/xx/xxxx location Meeting notes here. This meeting was about.....
Meeting Type xx/xx/xxxx location Meeting notes here. This meeting was about.....

Contacts

Contact Type Affiliation Contact Name Town Phone Number (Ext) Email
Contact Type Affiliation Name Town (617)555-1200 x123 email address
Contact Type Affiliation Name Town (617)555-1200 x123 email address

Submittals

Submittal Type  Monitor Publish Date  Volume, Issue  Comments Due  Actions
ENF 11/30/2018 12/30/2018 12/20/2018
EIR 01/30/2019 02/30/2019 03/20/2019

Colors/Charts

  • #CA4D00
    rgb: 202, 77, 0
    Orange - Primary Button/Primary Tab
  • #B83100
    rgb: 184, 49, 0
    Dark Orange: For Text Links Only
  • #FF914D
    rgb: 255, 145, 77
    Shade 1 of Orange
  • #FFC099
    rgb: 255, 192, 153
    Shade 2 of Orange
  • #272772
    rgb: 39, 39, 114
    Blue - Complimentary
  • #5454C4
    rgb: 84, 84, 196
    Shade 1 of Blue
  • #A0A0DE
    rgb: 160, 160, 222
    Shade 2 of Blue
  • #141414
    rgb: 20, 20, 20
    Black - Body Text, Headings
  • #595959
    rgb: 89, 89, 89 Gray - Dark Gray
  • #ccc
    rgb: 204, 204, 204 Light Gray - Default Button/Tab/Headers
  • #F2F2F2
    rgb: 242, 242, 242
    Lightest Gray - Header/ Footer
  • #fff
    rgb: 255, 255, 255 White
  • #AD0B0B
    rgb: 173, 11, 11
    Red- Alert
  • #038855
    rgb: 3, 136, 85
    Green - Success
  • #F6C51B
    rgb: 246, 197, 27
    Yellow - Notification Bar
Sample Color Scheme for Graphs/Charts
  • bar chart orange
  • bar chart blue
  • bar chart Gray
  • bar chart multi color
  • pie chart two tone