Mass.gov Style Guide - Massachusetts
Mass.gov Style GuideThe Commonwealth of MassachusettsDefining the Mass.gov brand
The Mass.gov style guide1The Mass.gov style guideThis guide is an outline of the elements and strategies that make up the Mass.gov brand identity. Refer to it inorder to help you create print or digital assets that will feel like they are in a similar style to Mass.gov and belongto the Commonwealth’s information ecosystem. This can help assure your audiences that they are reading officialCommonwealth materials, and it provides a consistent, trustworthy, credible, single face of government forconstituent interactions.A foundation for designThe information contained here is the product of our research, experience, and expertise, collected in one placeto help detail and explain our decisions in creating Mass.gov. We recognize that not all aspects of this brandingguide will make sense for every organization, and that some organizations have their own, distinct brandingseparate from Mass.gov. We encourage organizations to use any and all aspects of this guide, however it makesthe most sense for them.Questions or feedback?Please reach out to Massachusetts Digital Service through our feedback form and let us know what you think. If youneed more immediate help or want to talk to us about the style guide, submit a ServiceNow request.Published by: Massachusetts Digital ServiceLast updated on: 4.1.2020
The Mass.gov style guideTable of contents3Fonts12 Colors24 The Great Seal of Massachusetts33 Document templates37 Resources and downloads2
The Mass.gov style guideFontsFonts4Font family9Type hierarchy11Dos and dont’sFonts 3
The Mass.gov style guideFontfamilyMass.govFont FamilyFonts 4TextaCost: Default font for Mass.gov.Details: This font requires a license in order to use.The fonts on Mass.gov were specificallyContact us through ServiceNow for more information.chosen for accessibility, readability andtone. Using these fonts for your print andMontserratdigital assets is a subtle but compellingCost: Free and open source. Must be downloaded and installed onway to create a voice that is cohesive andeach machine used to create or edit documents.unified with the website, and to maximizeDetails: Recommended alternative to Texta.the chance that your words will be easyto understand.CalibriCost: Comes pre-installed on most Windows computers, andis installed on Macs with Microsoft Office.It is imperative that we use fonts,Details: Recommended font when Texta or Montserrat areweights, and sizes that can be readunavailable.easily by a wide variety of audiences.SourceCode ProCost: Free and open source. Must be downloaded and installed onMacs with Microsoft Office.Details: Monspace font often used for tables, numerical data, anddata-heavy visuals.
The Mass.gov style guideTextaFonts 5CharactersABCDEFGHIJKLM OPQRSTUVWXYZTexta is the primary typeface for Mass.gov,abcdefghijklmnopqrstuvwxyzused as the default font for all text.(0123456789!@# % &*)Massachusetts Digital Service haspurchased a license that only authorizesdigital usage, but not print usage.VariantsThe quick brown fox jumped over the lazy dog(Italic)The quick brown fox jumped over the lazy dogTexta is a proprietary font that mightrequire a purchase or additional licensingto use. If you need a faster or less costlysolution, we recommend using one ofthe other recommended fonts.Aa(Thin)The quick brown fox jumped over the lazy dog(Light)The quick brown fox jumped over the lazy dog(Book)The quick brown fox jumped over the lazy dog(Regular)The quick brown fox jumped over the lazy dog(Medium)The quick brown fox jumped over the lazy dog(Bold)The quick brown fox jumped over the lazy dog(Heavy)The quick brown fox jumped over the lazy dog(Black)
The Mass.gov style guideMontserratFonts 6CharactersABCDEFGHIJKLM OPQRSTUVWXYZThis is our first-preferred alternativeabcdefghijklmnopqrstuvwxyztypeface, used when Texta is not available.(0123456789!@# % &*)Montserrat can be used for both print anddigital materials.VariantsThe quick brown fox jumped over the lazy dog(Italic)Montserrat is an open source typeface, itmust be installed locally on any machinethat will be used to create or editdocuments. It can be downloadedfrom Google Fonts.AaThe quick brown fox jumped over the lazy dog(Thin)The quick brown fox jumped over the lazy dog(Extralight)The quick brown fox jumped over the lazy dog(Light)The quick brown fox jumped over the lazy dog(Regular)The quick brown fox jumped over the lazy dog(Medium)The quick brown fox jumped over the lazy dog(Semibold)The quick brown fox jumped over the lazy dog(Bold)The quick brown fox jumped over the lazy dog(Extrabold)The quick brown fox jumped over the lazy dog(Black)
The Mass.gov style guideCalibriFonts 7CharactersABCDEFGHIJKLM OPQRSTUVWXYZIf none of the above fonts are available,abcdefghijklmnopqrstuvwxyzwe recommend using Calibri. It comes(0123456789!@# % &*)pre-installed on most Windowscomputers, and is installed on Macs withAaMicrosoft Office.VariantsThe quick brown fox jumped over the lazy dog(Italic)The quick brown fox jumped over the lazy dog(Regular)The quick brown fox jumped over the lazy dog(Bold)
The Mass.gov style guideFonts 8Source Code ProCharactersUsed strictly for data visualizations,a b c d e f g h i j k l m n o p q r s t u v w x y zsuch as dashboards, data sets, and tables. It( 0 1 2 3 4 5 6 7 8 9 ! @ # % & * )A B C D E F G H I J K L MO P Q R S T U V W X Y Zis a monospace font, meaning there isconsistent spacing between numbers andletters that makes these types ofdata-heavy visuals easier to consume.VariantsThe quick brown fox jumped over the lazy dog(Italic)The quick brown fox jumped over the lazy dog(Light)The quick brown fox jumped over the lazy dogSource Code Pro is an open sourcetypeface, it must be installed locally on anymachine that will be used to create or editAadocuments. It can be downloadedfrom Google Fonts.(Regular)The quick brown fox jumped over the lazy dog(Medium)The quick brown fox jumped over the lazy dog(Semibold)The quick brown fox jumped over the lazy dog(Bold)The quick brown fox jumped over the lazy dog(Black)
The Mass.gov style guideFonts 9Type hierarchyHow type is presented on a web page ordocument has a huge effect on how youraudience will consume it, and how easilyyour information can be interpreted byassistive devices such as screen readers.We use sentence case for nearly alltitles, headings and sub-headings onMass.govTitlesTitles are the first things your audience will see when looking atyour document. These words or phrases serve to identify thesubject and attract the readers’ attention. They represent theentire document. We use sentence case for titles on Mass.gov.HeadingsHeadings usually consist of short but important text that describesor highlights the information below. They can give your documentstructure, breaking up pages into more readable or scannablechunks. We use sentence case for headings on Mass.gov.
The Mass.gov style guideFonts 10Subheadings and subtitlesConsistent layouts and typeSmaller than headings, used beneath headings or titles to supporttreatments will help ensure thator give context to them. We use sentence case for subheadings onconstituents can quickly findMass.gov.key information.Body textThis is the default size for all text. It is used to present generic orinformational text. Body text should be smaller than your headingand subheadings.
The Mass.gov style guideDos and dont’sFonts 11DoDon’tUse fonts consistentlyDo not mix fontsUse sentence case forDo not use bright colors for textheadingson light backgroundsWe recommend using one typefacethroughout your document, for headings,subheadings, and body text.If your document requires more variety, tryusing different colors or weights for yourheadings and subheadings.
The Mass.gov style guideFontsColors13Mass.gov color system15Brand colors18Utility colors19Sub-brands20Background color and accessibility21Safe text and background colors23Dos and dont’sColors 12
The Mass.gov style guideColors 13Mass.gov color systemMass.gov uses a defined suite of colors thatOrganizations that have their own visual identity are invited tocomplement each other in order to createextend this color palette with additional colors that reflect theirconsistency across the site, to elevate ourunique brand in conjunction with the shared Commonwealthbrand, and to adhere to specificidentity.accessibility standards.Please reach out through our feedback form if you’d like toWe suggest and encourage that allCommonwealth agencies use the samesuite of colors in order to cement acohesive image of the Commonwealthbrand on all public-facing assetsand documents.work with us.
The Mass.gov style guideHow to use the Mass.govcolor systemColors 14Brand colorsColor plays a huge role in how youraudience sees, consumes, and interpretsinformation. On Mass.gov we use colorstrategically to evoke specific feelings andemotions from constituents, whileremaining accessible. We recommendusing color selectively, with a specificgoal in mind. Either to evoke specificfeelings and emotions from constituents,or to bring attention to specificinformation, or to signify functionality.Utility colors
The Mass.gov style guideBrand colorsBay Blue and Berkshire Green are thefundamental colors of the style used onMass.gov. We use them as strong visualpillars to establish consistency in ourdesigns.They evoke strong brand recognition andcan be extended to sub-brands.Colors 15How to use themBay BlueBay Blue is our default and most often used color. Accompanyingshades and tints can be used to create depth.Examples: Headings, titles, icons, graphics, calls to action, buttons,and backgrounds.HEX: #14558FHEX: #8AAAC7HEX: #E7EEF4RGB: 20,85,143RGB: 138,170,199RGB: 231,238,244CMYK: 48,23,0,44CMYK: 47,25,10,0CMYK: 8,3,2,0Bay Blue50% Bay Blue10% Bay BlueBerkshire GreenBerkshire Green is our second most frequently used color.It is used to balance Bay Blue, often to communicate success.Examples: Headings, titles, icons, graphics, calls to action,buttons, and backgrounds.HEX: #388557HEX: #97C2A9HEX: #D6E7DDRGB: 56,133,87RGB: 151,194,169RGB: 214,231,221CMYK: 30,0,18,48CMYK: 17,0,10,24CMYK: 7,0,4,9Berkshire Green50% BerkshireGreen20% BerkshireGreen
The Mass.gov style guideColors 16Duckling YellowDue to accessibility issues, DucklingDuckling Yellow provides complementary color to your project. TheYellow should only be used for textpurpose of this color and its shades are to highlight key sections orwhen paired with a strong contrastinformation that you would like to draw attention to. On Mass.gov,background color.we often use Duckling Yellow for alerts.Examples: Updates, changes, alerts.HEX: #F6C51BHEX: #FBE28DHEX: #FEF9E8RGB: 246,197,27RGB: 251,226,141RGB: 254,249,232CMYK: 0,19,86,4CMYK: 0,10,43,2CMYK: 0,2,9,0Duckling Yellow50% DucklingYellow20% DucklingYellowIndependence CranberryIndependence Cranberry is used as a replacement forBerkshire Green.HEX: #680A1DHEX: #AD7E88RGB: 104,10,29RGB: 173,126,136CMYK: 0,37,29,59CMYK: 0,18,15,32IndependenceCranberry50% IndependenceCranberry
The Mass.gov style guideColors 17Granite GrayGranite Gray and its shades are subtleGranite Gray is a neutral color used to complement andby nature, and thus mostly used as abalance primary and secondary colors. It is the base color forbackground color to support content.all text on both print and digital materials for Mass.gov.Examples: Body text, icons, and backgrounds.HEX: #535353#F6C51B#DCDCDCHEX: #FBE28DHEX: #F2F2F2RGB: 83,83,83246,197,27220,220,220RGB: 251,226,141RGB: 242,242,242CMYK: 0,0,0,670,19,86,40,0,0,14CMYK: 0,10,43,2CMYK: 0,0,0,5Granite GrayOvercast GrayPlatinum Gray
The Mass.gov style guideUtility colorsThese colors play a variety of roles in ourbrand, further complementing and extending our color palette. They are meant to beused in combination with our primary andsecondary brand colors, to provideflexibility and to serve certain functions.Colors 18NeutralAdditional shades of Gray used for body text and background color.HEX: #141414#F6C51B#707070HEX: #FBE28DHEX: #CCCCCCRGB: 20,20,20246,197,27112,112,112RGB: 251,226,141RGB: 204,204,204CMYK: 0,0,0,920,19,86,40,0,0,56CMYK: 0,10,43,2CMYK: 0,0,0,20Revolution GrayAtlantic GrayVery Light GrayError RedThese colors are used for error reporting and attentiongrabbing messages.HEX: #CD0D0D#F6C51B#EEACACHEX: #FBE28DRGB: 205,13,13246,197,27RGB: 251,226,141238,172,172CMYK: 0,75,75,200,19,86,40,26,26,7CMYK: 0,10,43,2Error RedError Red lighterFocusThis color is used on Mass.gov to represent interactivity andbutton hover.HEX: #3E94CF#F6C51BRGB: 62,148,207246,197,27CMYK: 57,23,0,190,19,86,4Focused
The Mass.gov style guideSub-brandsWe recognize that this color suite may not suitall of your organization’s needs. In the event thatyour project requires additional colors or colorsets, or seeks to create a unique brand within oroutside of the Mass.gov structure, we would loveto work with you to develop additional themes.Help Us Grow!We are always interested in growing our colorpalette to support state agencies within theCommonwealth’s brand. Please feel free to reachout to us, we would love to work with you!Colors 19
The Mass.gov style guideColors 20Background colorand accessibilityA variety of tested, accessible color combinations are suggestedWhen combining colors, it is important toon the pages below. If you would like to use a different colorkeep in mind how they might affect yourcombination, you can use the following resources to test yourdocument’s readability, particularly forchoices for contrast and accessibility.those who are differently /https://contrast-ratio.com/To ensure your content is accessible to allaudiences: Use a high contrast between text and background colorsUse color combinations that aredistinguishable to those withcolor blindness.Learn more about the importance ofcontrast between text and backgroundcolors at WCAG 2.0https://accessible-colors.com/In this example, we used Accesible Colors to compare Bay blue texton dark and light backgrounds. The test is successful if the colorcontrast meets the required ratio of 4.5.
The Mass.gov style guideSafe combinations oftext and backgorundcolorsColors 21Colored texton light backgroundsText colorsRevolutionGrayThis table can help you identify text andbackground color combinations that willPlatinum Grayprovide sufficient contrast for your readers,WhiteAs a general rule, we recommend youdo not use colors of a similar tint,such as a light-colored font on alight-colored background.Background colorsusing colors that are already in our pallet.Bay Blue 10%BerkshireGreen 20%DucklingYellow 50%DucklingYellowBay Blue 50%BerkshireGreen 50%GraniteGrayBay BlueBerkshireGreen
The Mass.gov style guideWhite texton dark backgroundsText colorwhiteRevolutionaryGrayBackground colorsSafe combinations oftext and backgorundcolorsColors 22Granite GrayBay Blue 10%Bay BlueBerkshireGreenIndependenceCranberry
The Mass.gov style guideDos and dont’sHere is some general guidance to keep inmind when working with colors.Colors 23DoDon’tBe consistentDo not disregard color contrastUse the same colors theDon’t use color combinationssame way throughout yourthat have not been tested forproject.accessibility.Ensure high contrastDo not use highlight colorsfor body textbetween colorsYour color palette should beaccessible to all audiences.Duckling Yellow should only beused for text when paired witha strong contrast backgroundcolor, for example.
The Mass.gov style guideFontsThe Great Seal of Massachusetts25The Great Seal of Massachusetts27State Seal colors29Seal and background colors30Seal size31Clear space32Dos and dont'sThe Great Seal of Massachusetts 24
The Mass.gov style guideThe Great Seal ofMassachusettsThe Great Seal of Massachusetts 25How to use itThe Great Seal should only be used for official communications andpublications to convey the Commonwealth’s identity and authorityThe Great Seal of Massachusetts is in theacross different state departments.custody of the Office of the Secretary ofthe Commonwealth, who is the authorityon how and when to use it. These draftguidelines are subject to their review andapproval and will be updated as needed.It should not be used for personal or private materials outside of thejurisdiction of your office, department, or agency, including incontractor, vendor, or third-party communications. By law, itcannot be used for advertising or commercial purposes.The Great Seal should never be defaced, altered, skewed, ormodified in any way.
The Mass.gov style guideThe Great Seal of Massachusetts 26If you would like to use the Seal for your document or projectand do not have a copy, please download it from the linksprovided later in this document, from the Mass Digital imagelibrary, or contact the Secretary of the Commonwealth’soffice.To ensure that you do not accidentally use a seal that hasbeen altered, please do not download a copy from anyother source, such as Google image or Wikipedia.OriginalBlackWhiteGray
The Mass.gov style guideState Seal colorsThe official colors of the Great Seal are blueand gold with a white inner background.However, the seal may also be used in theThe Great Seal of Massachusetts 27Three-color reproductionThis is the primary color use of the Great Seal. Specific parts of theGreat Seal are in gold, over a blue shield encapsulated in ablue circular rim, all resting on a white inner-background.following colors: black, white and grey.(Gold #DDA037)Resources & downloadsHEX: #0C2682#F6C51B#DBA038HEX: #FBE28DRGB: 12,38,130246,197,27219,160,56RGB: 251,226,141CMYK: 46,36,0,490,19,86,4CMYK: 0,10,43,20,23,64,14(Blue #0C2D83)bluegold
The Mass.gov style guideThe Great Seal of Massachusetts 28Single-color reproductionAdditionally, the Great Seal may also bepresented in single-color black, white, andgray variants.(Transparent background)(black #000000)HEX: #000000#F6C51BRGB: 0,0,0246,197,27CMYK: 0,0,0,1000,19,86,4blackResources & downloads(Transparent background)(white #FFFFFF)HEX: #FFFFFF#F6C51BRGB: 255,255,255246,197,27CMYK: 0,0,0,00,19,86,4white(Transparent background)(gray #808080)HEX: #808080#F6C51BRGB: 128,128,128246,197,27CMYK: 0,0,0,500,19,86,4gray
The Mass.gov style guideSeal and backgroundcolorsThe Great Seal of Massachusetts 29The Great Seal almost always appears on a white background, butmay appear on a colored background if significant contrast ispresent. We recommend the following examples of seal optionsfor light and dark backgrounds to ensure that the seal is alwaysTo maximize the visual impact of theclearly visible.Great Seal, do not use the BlackUsed on anybackgroundversion on dark-colored background,or the White version on light-coloredOriginalbackgrounds.Use on lightbackgroundsBlackUse on darkbackgroundsWhiteUse on lightbackgroundsGray
The Mass.gov style guideThe Great Seal of Massachusetts 30Seal sizeMinimum sizesWhen reproducing the state seal, it mustPrint: 1 in x 1inremain proportionate and legible relativeto its size. It should never be so small thatit is no longer distinguishable, as it will noDigital: 45px x 45pxlonger serve its main purpose ofidentifying official communications fromthe Commonwealth.Exception to the rule: The Great Seal may appear smaller than 45pxwhen a software application or website requires an icon of a specificsize, such as a website “favicon.”Icons: 45 px x 45px
The Mass.gov style guideClear spaceThe Great Seal should always have plentyof clear and empty space around it inorder to distinguish it from the otherdesign elements, including other graphics,and text.The Great Seal of Massachusetts 31The Great Seal should never collide or intersect with other objects.The minimum white space that should be reserved around theGreat Seal is equal to 25% of the seal’s width , or roughly about thesize of the shield’s width within the Seal.
The Mass.gov style guideDos & don’tsThese examples cover some of theapproved and disapproved state sealThe Great Seal of Massachusetts 32DoDon’tUse the official versionsDo not modify the SealEnsure you obtain the SealDo not alter or change the Seal.from official sources.treatments. Please note this list does notcover all examples. If you have anyquestions, please reach out to Mass Digitalor the Secretary of the Commonwealth’soffice.Always account forDo not skew or distortclear spaceKeep the seal proportionate atProvide space around theall sizes.Seal.The Commonwealth of MassachusettsDepartment of Labor Standards
The Mass.gov style guideFontsDocument templates35Word template36PowerPoint templateDocument Templates 33
The Mass.gov style guideOverviewDocument Templates 34How to use themThese easy-to-use templates contain a variety of predefined styles,We’ve created document templates forwhich you can apply to your projects depending on your goals andMicrosoft Word and PowerPoint,needs. Each individual aspect of the templates has a specific usepre-loaded with the elements that aligncase, illustrated within the document.with the look and feel of Mass.gov.Your organization can use theseTo create a new document with these templates, or to convert antemplates to draft new documents orexisting document, you’ll first need to download the template forconvert existing documents to this style.the program you’re working with.These templates were made using thefonts, colors, and design of Mass.gov.They can be used to quickly and easilycreate internal and external communications, reports, presentations, trainingmaterials, statements of work, researchpapers, and other assets that look and feelcohesive and consistent with the Mass.govbrand, as well as with each other.DownloadWord template.docxDownloadPowerPoint template.potx
The Mass.gov style guideWord templateThe Microsoft Word template containsa variety of headings and sections withsample text that illustrates what each wasdesigned for. You can simply replace thissample text with your own content, anddelete any placeholder sectionsyou don’t need.Use the preset styles available in theStyle Pane under the Home ribbon tomaintain a consistent design.Document Templates 35How to use itCreating a new documentTo create a new document using the template, first navigate to thelocation where you saved the template and double-click on thetemplate file. This will open a new document based onthat template.Styles pane
The Mass.gov style guidePowerPoint templateThe Microsoft PowerPoint templatecontains a variety of slides loaded withsample text that illustrates what they weredesigned for. You can simply replace thissample text with your own content andDocument Templates 36How to use itCreating a new documentTo create a new document using the template, first navigate to thelocation where you saved the template and double-click on thetemplate file. This will open a new document based onthat template.delete any placeholder sections youTemplate slidesdon’t need.Start working on your presentation by pulling template slide fromthe New Slide menu.
The Mass.gov style guideResources 37ResourcesFontsMontserrat Download from Google fontsSource Code Pro Download from Google fontsState SealOriginal Download Original.PNG Download Original.SVGBlack Download Black.PNG Download Black.SVGWhite Download White.PNG Download White.SVGGray Download Gray.PNG Download Gray.SVGDocument templatesWord Download Word template.dotxPowerPoint Download PowerPoint template.potxOffice theme Download Office theme.thmx
The Mass.gov style guide 1 The Mass.gov style guide This guide is an outline of the elements and strategies that make up the Mass.gov 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 Mass.gov and belong to the Commonwealth's information ecosystem.
Massachusetts tax law differs in important ways from the Federal tax code. The purpose of this Guide for Massachusetts Tax-Aide Volunteers (Mass Manual) is to provide training and reference material relative to Massachusetts tax law and use of the TaxSlayer software in preparing Massachusetts tax returns for our clients.
Selected Massachusetts Organizations, Life Sciences Economic Development Initiatives Massachusetts Technology Collaborative Mass Biomedical Initiatives Mass Development Massachusetts Alliance for Economic Development Life Sciences Industry Associations Massachusetts Biotechnology Council Massachusetts Medical Device Industry Council
green, Chicago-style/verde de estilo Chicago 11.04.07 Center for Urban Ecology, University of Illinois@Chicago . 0 200000 400000 600000 800000 1000000 1200000 1400000 "Chicago-style" "New York style" "L A -style" infomal comparisons/ Chicago style "Chicago style" "New York style" "LA style"
Nov 01, 2014 · Chaldean Catholic Church Mass Schedule SATURDAY VIGIL: 6:00pm Ramsha, Evening Prayer 6:30pm Mass in English SUNDAY MASS: 8:00am Sapra, Morning Prayer 8:30am Holy Mass in Chaldean 10:00am Holy Mass in Arabic 11:30am Holy Mass in English 1:15pm Holy Mass in Chaldean 7:30pm Holy Mass in English DAILY MASS: MONDAY THRU FRIDAY
Mass of Christ the Savior (Schutte) Mass of Creation (Haugen) MASS SETTINGS, cont. Mass of Glory (Canedo/Hurd) (Stephan) Mass of Spirit and Grace (Manalo) Mass of St. Frances Cabrini (Keil) Mass of St. Paul the Apostle (Walker) Mass of the Resurrection (DeBruyn) Misa Santa Fe (Reza) ADDITIONAL SERVICE MUSIC NEW MUSIC Liturgical Year 2018 GUITAR .
Chemical Reactions, and Stoichiometry Section 2.1: The Atomic Mass The atomic mass is the mass of 1 atom. Atoms are very small and their mass is a . molecular or ionic compound. The formula mass is expressed in a.m.u. Molar mass is the sum of atomic masses of all atoms in a mole of pure substance. The molar mass is expressed in g/mol.
OCP’s popular Respond & Acclaim. Mass Settings Mass of the Sacred Heart Mass of Glory Mass of Christ the Savior Mass of a Joyful Heart Heritage Mass Misa Santa Fe Celtic Mass Mass of Renewal. Support full, conscious and active participation . 3/15/2016 9:31:11 AM .
Accounting for the quality of NHS output 3 2. Accounting for the quality of healthcare output There is a great deal of variation among health service users in terms of the nature of their contact . The .
