# City of Boston: brand book and build spec

The City of Boston brands Boston.gov with a bold underlined B, a red-white-and-blue palette grounded in white and gray, Montserrat caps with Lora italics, candid photography and a plain-language voice. The open Fleet pattern library turns it into code.

From unfairly.ai/brand-guidelines/boston, checked 2026-10-30. Unofficial study; not affiliated with City of Boston.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Bold but human: the City underlines what matters, speaks plainly, and keeps the seal for when it must look official. Based on: The guide sets the B and the seal side by side for exactly this split: friendly by default, authoritative when needed.

## Purpose

Mission: We are here to serve: to make things easier and simpler for the people of Boston (paraphrase). (published; https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Helpful))

Story: Boston.gov's brand was built in 2016 with the redesign of the site: a bold underlined B, a red-white-and-blue palette with a modern gray, and Montserrat with Lora. The guide calls itself a foundation to build on, added to as the site comes to life. (our reading)

| Value | What it means in the work | Source |
|---|---|---|
| Confident | Strong statements, direct, quick to the point (paraphrase). | published: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy) |
| Helpful | Useful, easy to understand, relevant to the individual (paraphrase). | published: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy) |
| Optimistic | Every problem arrives with a plan to fix it (paraphrase). | published: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy) |
| Humble | Never arrogant, verbose or exaggerated (paraphrase). | published: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy) |
| Personal | We and you; honest, approachable, inclusive (paraphrase). | published: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy) |

## Fixed and flexible

Never changes:
- Montserrat + Lora
- Charles Blue, Optimistic Blue, Freedom Trail Red on white
- the underlined B
- square edges

The one thing that varies: Supporting blues and grays when the primaries do not work; full-color or blue-overlay photography.

## Positioning

- **Statement**: The City of Boston, speaking with boldness and warmth: official when it must be, human by default. (our reading)
- **Category**: Municipal government: the official website and communications of the City of Boston, Massachusetts (observed)
- **Audience**: Residents, City employees, businesses and visitors of every background and language (published)
- **Problem**: People come looking for answers to City tasks and need them fast and plainly (published)
- **Promise**: Make things easier and simpler for the people of Boston (published)
- **Differentiators**: The B and the City of Boston logo show the City is human; the seal is kept for authority (paraphrase).; A palette rooted in the City's past: Charles Blue, Freedom Trail Red, with a modern gray.; Photography of real people in the less famous parts of Boston, never models or stock.; An open-source pattern library (Fleet) shared across City web properties.
- **Alternatives**: The official City seal (adopted 1823) where authority is needed: bills and non-digital forms.

## Messaging

Boilerplate (observed): Boston.gov is the City of Boston's official website: services, public notices, news, events and the people who serve the City, built on the open-source Fleet pattern library.

Taglines:
- We are Boston. (Closing line of the guide's brand statement; the identity in three words)
- Welcome to the City of Boston (Homepage hero: Lora italic kicker over the Montserrat H1)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Boldness | Boston's brand starts from boldness of opinion, thought and diversity, and a shared City. | The logo is a bold B, underlined: when something matters, we underline it (paraphrase). | published |
| Service | Make things easier and simpler: information that is useful, clear and relevant to each person. | BOS:311 is the City's service request line, linked from the menu, homepage and footer.; The homepage opens with a daily status row (City Hall hours, trash, street cleaning, parking meters, tow lot) under the date. | published |
| Plain language | Write for the person with the least knowledge: active voice, short lines, plain words. | The writing guide carries a plain-English word list (instead of / consider using). | published |
| Access for everyone | Accessible and inclusive, in every language the City serves. | The guide names replacement typefaces for Arabic, Chinese and Vietnamese; the site header switches language. | published |

They never claim:
- The digital seal replaces the official seal on all digital properties; the official seal is for bills and non-digital forms.
- Only use photos the City has the rights to.

## Voice

Tone words: Confident, Helpful, Optimistic, Humble, Personal.

Traits:
- Confident, but not Arrogant (published)
- Helpful, but not Verbose (published)
- Optimistic, but not Naive (published)
- Humble, but not Boastful (published)
- Personal, but not Slangy (published)

- Strong statements, not questions; the guide wants a point of view and a quick route to the answer.
- Here to serve: every line should make a task easier for the person reading it.
- Optimistic doers: a problem always comes with the plan to fix it.
- Confident but never arrogant: few adjectives, short simple words, no exaggeration.
- Personal: we and you, honest and approachable, but no slang from an institution of authority.
- Two voices. The guide's brand voice (above) governs campaigns and editorial. The homepage is plainer and institutional: UPPERCASE Montserrat wayfinding labels (FEATURED RESOURCES, LATEST NEWS) and task-named links in title case (Pay a Parking Ticket). A landing page follows the homepage voice for labels and the brand voice for any sentence.

Rules a copy check enforces:
- Never use if, maybe, but, may or could; state it
- Make statements, not questions
- Prefer a full stop to a comma; short sentences, few adjectives
- Headlines at most 11 words
- Sentences of 15 to 20 words; paragraphs of two to three sentences
- Active voice (the "by zombies" test)
- Say we, not The City; say you, not residents or applicants
- Use contractions where they sound natural
- Use must, never may or shall, for required steps
- Spell out & and @
- Avoid acronyms and jargon; write for the person who knows least
- AP style for anything not covered
- Title case headlines
- Spell out one to nine; figures for 10 and up; percent, never %
- Times as 9 a.m. - 5 p.m.: no :00, hyphen for spans, a.m./p.m. lowercase
- Dates without st/nd/rd/th: September 5
- Always use the Oxford comma
- Capitalize City, City Council and Mayor when they mean Boston's
- Phone numbers with dashes: 617-635-4500
- Never use selfies, models or posed stock photos

Their words: we, you, must.
Never: maybe, may, could, shall, the subjunctive, &, @, %, jargon and legalese, acronyms without explanation.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| White | #FFFFFF | Primary color of the site | Primary color of the site: dominant page ground and the white space that grounds content |
| Charles Blue | #091F2F | Primary | Every heading, section-header rule, date strikethrough rule, site banner, footer ground, guide tiles 2 and 4, input borders |
| Optimistic Blue | #1871BD | Primary | All buttons, every card title link, hero photo overlay at 60%, guide tile 1, card hover fill |
| Freedom Trail Red | #FB4D42 | Primary, used minimally | Guide tile 3 ground, numbered circles and Guide: kicker on dark tiles, B and wordmark underlines, button hover |
| Freedom Red Dark | #D22D23 | Darker red with stronger contrast on white; Fleet uses it for text and borders on light grounds and error text | Menu button ground, search icon, Contact: links, CANCELED: prefix |
| Supporting blue: near black | #061622 | Darkest supporting blue, used very rarely when something must resemble black | Darkest supporting blue, used very rarely when something must resemble black |
| Supporting blue: footer | #0C2639 | Second-darkest supporting blue; the guide names it the footer color so it can sit against Charles Blue | Not seen on the 2026 homepage: the live footer is Charles Blue #091F2F |
| Supporting blue: desaturated | #45789C | Desaturated blue for text that should visually recede | Desaturated blue for text that should visually recede |
| Supporting blue: bright | #51ACFF | Stand-in for Optimistic Blue on dark grounds | Stand-in for Optimistic Blue on dark grounds |
| Optimistic Blue light (screen reader) | #28A7DF | Fleet $optimistic-blue-light-SR | Footer links on Charles Blue |
| Optimistic Blue hover | #175182 | Fleet $optimistic-blue-hover | Fleet $optimistic-blue-hover: darker blue for hover |
| Hero alt blue | #2D82CF | Fleet $hero-alt | Fleet $hero-alt: stripe color in the default (no-photo) hero pattern |
| Body text gray | #58585B | Darkest supporting gray | Card descriptions, news department labels, councilor titles |
| Supporting gray: rule | #D2D2D2 | Medium gray for horizontal rules and borders | Medium gray for horizontal rules and borders |
| Supporting gray: border | #E0E0E0 | Medium gray for rules and borders (Fleet $grey-100) | 2px video-card borders and the divider above card text |
| Supporting gray: ground | #F2F2F2 | Lightest supporting gray | Event cards |
| Fleet gray 000 | #F3F3F3 | Fleet $grey-000 | Alternating section bands, councilor cards, feedback band |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Montserrat | Open (SIL OFL 1.1), Google Web Fonts; site serves a 2016-era build | Montserrat | Montserrat, Arial, sans-serif |
| body | Lora | Open (SIL OFL 1.1), Google Web Fonts | Lora | Lora, Georgia, serif |
| mono | Montserrat |  | Montserrat | Montserrat, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | Montserrat | 90px | 40px | 1 | -1px | 700 |
| Section header | --text-display-l-* | Montserrat | 45px | 20px | 1 | -1px | 700 |
| Hero kicker | --text-kicker-* | Lora | 35px | 18px | 1.32 | 0px | 400 |
| Lead (stay connected) | --text-lead-* | Lora | 30px | 18px | 1.5 | 0px | 400 |
| Guide tile title | --text-title-xl-* | Montserrat | 30px | 20px | 1 | 0px | 700 |
| Mayor subhead | --text-title-l-* | Montserrat | 30px | 18px | 1.08 | 1px | 600 |
| Date strikethrough | --text-title-m-* | Montserrat | 28px | 21.45px | 1 | 0px | 700 |
| Card title link | --text-card-title-* | Lora | 25px | 18px | 1.32 | 0px | 400 |
| News headline | --text-news-title-* | Lora | 22px | 19.56px | 1.27 | 0.4px | 400 |
| Body | --text-body-* | Lora | 18px | 16px | 2.17 | 0px | 400 |
| Card description | --text-body-s-* | Lora | 18px | 15px | 1.5 | 0px | 400 |
| Status note / councilor title | --text-caption-* | Lora | 16px | 14px | 1.5 | 0px | 400 |
| Date ribbon | --text-date-* | Montserrat | 18px | 16px | 1 | 0px | 700 |
| Person name / status title | --text-label-l-* | Montserrat | 18px | 16px | 1.1 | 0px | 400 |
| Button | --text-button-* | Montserrat | 16px | 14px | 1.125 | 1px | 700 |
| Form label | --text-label-* | Montserrat | 16px | 14px | 1.4 | 1px | 700 |
| Department label | --text-meta-* | Montserrat | 16px | 14.2px | 1.22 | 0px | 400 |
| Nav link | --text-nav-* | Montserrat | 14px | 12px | 4.64 | 1px | 400 |
| Footer link | --text-footer-* | Montserrat | 14px | 12px | 1 | 1px | 500 |
| Banner text | --text-banner-* | Montserrat | 13.32px | 11.84px | 1.3 | 0px | 400 |

## Layout

Measured on https://www.boston.gov/: Page anatomy measured from computed styles on boston.gov at 1440 and 390 (2026-10-30); tokens from the open-source Fleet stylesheets; rules from the boston.gov Brand Guidelines and Writing guide..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 39px |
| Section padding | 56px | 35px |
| Container max width | 1200px | full |
| Hero text width | max 1200px | full |
| Grid columns | 4 | 1 |
| Gutter | 28px | 0px |
| Card gap | 28px | 28px |
| Navigation height | 65px | 65px |

Breakpoints from City of Boston's CSS: 480, 768, 840, 980, 1280, 1300px.

Homepage bands, top to bottom (observed):
1. Official-site banner
   - Desktop: 1440x39, centered
   - Phone: y 0-58 (390 wide): 390x58, two centered lines
   - Thin strip above the header
2. Header
   - Desktop: 65px, sticky, soft shadow
   - Phone: y 58-123 (390 wide): 65px: MENU, dark B square, language, search
   - Links Montserrat 14px uppercase 1px tracking
3. Hero
   - Desktop: 309px, centered white type over photo + 60% #1871BD
   - Phone: y 123-314 (390 wide): 191px
   - Lora italic 35px kicker, Montserrat 90px H1
4. Daily status row
   - Desktop: 501px, 5 x 218px columns
   - Phone: y 314-1139 (390 wide): stacked rows with dotted #C8C8C8 hairlines
   - icons in 3px circles
5. Featured resources
   - Desktop: 4x3 grid of 279px white cards
   - Phone: y 1139-2398 (390 wide): list of 312x87 cards
   - Lora italic blue titles
6. Guides
   - Desktop: 4 x 360x366 edge to edge: #1871BD, #091F2F, #FB4D42, #091F2F
   - Phone: y 2398-2819 (390 wide): stacked 95-115px tiles
   - numbered 3px circles
7. Latest news
   - Desktop: 586x190 cards
   - Phone: y 2819-4737 (390 wide): 312x400 cards
   - white date ribbons
8. Featured videos
   - Desktop: 382x394
   - Phone: y 4737-5897 (390 wide): stacked
   - 2px #E0E0E0 borders
9. Stay connected
   - Desktop: two columns 586/586
   - Phone: y 5897-6412 (390 wide): stacked
   - 3px #091F2F inputs
10. Upcoming events
   - Desktop: 382x277 #F2F2F2 cards
   - Phone: y 6412-8124 (390 wide): stacked
   - #288BE4 date ribbons
11. Mayor
   - Desktop: 586 photo / 586 text
   - Phone: y 8124-8939 (390 wide): stacked
   - Contact: link right
12. City Council
   - Desktop: 4 columns of 279px #F3F3F3 cards
   - Phone: y 8939-11261 (390 wide): list cards
   - 173px circle headshots
13. Feedback
   - Desktop: 166px
   - Phone: y 11261-11378 (390 wide): 117px
   - 3px radius button
14. Footer
   - Desktop: 151px
   - Phone: y 11378-11547 (390 wide): 169px, stacked links
   - links #28A7DF, Report an issue #FCB61A

## Page anatomy

How City of Boston's own landing pages are built, part by part (observed; https://www.boston.gov/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Official-site banner: a thin Charles Blue strip above the header with the white CITY of BOSTON logo, one line of text and a disclosure link with a chevron
- text: An official website of the City of Boston.
- link: Here's how you know (underlined, white) followed by a 17x12 white chevron-down; it opens an explainer (closed at rest)
- ground: #091F2F
- desktop: height 39px, y 0-39; logo-white_red.png 150x29 at x 425, y 5; text Montserrat 400 13.32px/17.3px #FFFFFF at x 584, y 8; the group is centered
- phone: height 58px; everything is one centered inline run that wraps: line 1 = logo 150x29 (x 44-194, y 5) followed by "An official website of the" (11.84px/15.4px, white); line 2, centered = "City of Boston." + the underlined link "Here's how you know" (x 162-285, y 32) + the chevron at x 298, y 35
- chevron: https://www.boston.gov/ (inline SVG in the site banner): 17x12 white chevron-down, 13px right of the link (desktop x 998, y 13), its own element, never a text glyph
- file: https://patterns-stg.boston.gov/images/public/logo-white_red.png

**Navigation**
- summary: White sticky header 65px tall with a soft shadow: a red square MENU button at the far left, the CITY of BOSTON logo, a thin divider and "Mayor Michelle Wu" in Lora italic; three uppercase links, a language switcher and a red search icon at the right.
- ground: #FFFFFF; box-shadow 0 1px 2px 1px rgba(0,0,0,0.1)
- height: 65px (y 39-104 desktop under the 39px banner; y 58-123 phone)
- border: none (shadow only)
- sticky: yes (position sticky/fixed while scrolling)
- logo: variant City of Boston logo, Charles Blue with red underline under BOSTON; px 160x21; position x 85, y 62 (vertically centered); file https://patterns-stg.boston.gov/images/public/logo.svg
- menu button: 65x65 square at x 0, ground #D22D23; three white bars 27x4 at x 19 (y +17, +25, +33 inside the square, 4px gaps); MENU label Montserrat 700 10px/12px uppercase #FFFFFF centered at y +41
- divider: 1px solid #091F2F left border, 34px tall at x 263 (y 54), with 18px left padding before the text
- mayor: "Mayor Michelle Wu" Lora 400 italic 16px/16px #091F2F at x 282
- links: count 3; labels Information and Services, Public notices, Feedback; size 14px/65px; weight 400; tracking 1px; case uppercase; color #091F2F; hover #D22D23 (Fleet $header-nav-hover); alignment right group: x 737, 993, 1147 (about 22px between items)
- actions:
  - Language: Google Translate logo 25px at x 1254 (vertically centered), label ESPAÑOL at x 1286 in the link style (the label cycles through languages; at rest use ESPAÑOL)
  - Search: 32x32 magnifier with a sparkle, #D22D23, at x 1390, y 54 (asset icon-search-twinkle.svg); 18px right padding on the header
- phone: shows red 65x65 MENU square at x 0; a 65x65 #091F2F square at x 65 holding the white B (b-light.svg, about 27x42 centered); language switcher at x 206 (label 12px); search icon at x 342; menu left drawer, Charles Blue (#091F2F) with Optimistic Blue rows; cta none

**Hero**
- summary: Full-width photo band under a 60% Optimistic Blue overlay with two centered lines: a Lora italic kicker and a huge Montserrat Bold uppercase title.
- desktop: section y 104-413 (309px), full bleed 1440; column split single centered column; vertical anchors kicker "Welcome to the" box y 176-222 (Lora italic 35px/46.2px #FFFFFF); H1 "CITY OF BOSTON" box y 261-369 (Montserrat 700 90px/90px, -1px tracking, #FFFFFF, 18px bottom padding); band ends y 412.75; text max width one line each; the H1 renders about 745px wide; media photograph background-size cover, centered; cta size no CTA
- phone: order kicker, title; alignment centered; sizes band y 123-314 (191px); kicker 18px/23.76px at y 170; H1 40px/40px, -1px tracking, one line about 280px wide at y 229 (box 47px incl. 6.8px bottom padding). No horizontal scaling
- at rest: ground desktop: https://www.boston.gov/sites/default/files/styles/hero_fixed_d_large_1x/public/img/topic/intro_images/2016/10/i_voted_photo.jpg (1920x460, the site's own close crop: a few large, soft-focus I Voted stickers) as background-size cover, background-position 50% 50%; phone: https://www.boston.gov/sites/default/files/styles/hero_fixed_a_mobile_1x/public/img/topic/intro_images/2016/10/i_voted_photo.jpg (420x270 crop) the same way. ::after overlay rgba(24,113,189,0.6) over the whole band. Never substitute the uncropped guide photo; note static; no motion
- media: hero photo: close crop of I Voted stickers with flags, shallow focus. The same photo is a Do example in the guide's photography section
- type: white only
- cta: none
- proof: none

**Daily status row**
- summary: White band: the date as a strikethrough header, then five centered status columns, each an icon in a 3px circle, an underlined uppercase blue title and a Lora italic note.
- ground: #FFFFFF
- desktop: band y 412-913 (501px); content x 120-1320; header date strikethrough: "FRIDAY, OCTOBER 30" (today's date) Montserrat 700 28px/28px uppercase #091F2F, centered at y 469, in a #FFFFFF box with 12px side padding over an 8px #091F2F line across x 120-1320 spanning y 479-487 (centered on y 483); columns 5 columns 218px wide at x 120, 365, 610, 855, 1102 (pitch 245), all starting y 533; icon 65x65 at the top center of each column (inline SVG: 3px #091F2F circle with a line pictogram inside); title y 629: Montserrat 400 16px/17.6px uppercase #1871BD, centered, underlined #1871BD (1 or 2 lines); note y 664 (17px under a one-line title): Lora 400 italic 16px/24px #091F2F, centered; bottom band ends about 104px below the tallest column
- phone: layout rows instead of columns, content x 39-351; header date 21.45px at y 349, line 312px wide; rows each row: 65px icon at the left (x 39), text column at x 120 (231px wide): title 14px/15.4px left-aligned underlined, then the note Lora italic 14px/21px whose top sits 31px below the title top. After each row link: 28px margin, then the next row's 1px dotted #C8C8C8 top border and 20px padding (row pitch = row height + 49px); anchors band y 314-1139; date y 349; row tops (icon/title) y 403, 567, 680, 802, 924; hairlines at y 546, 659, 781, 903; band ends 50px below the last note (y 1139)
- anatomy:
  - Column 1: icon https://www.boston.gov/ (inline SVG in the daily status row); title "City Hall Operating Hours"; note "Boston City Hall is open Monday through Friday from 9 a.m. - 5 p.m., but many offices close to the public at 4 or 4:30 p.m."
  - Column 2: icon https://www.boston.gov/ (inline SVG in the daily status row); title "Trash and recycling"; note "Pickup is on a normal schedule."
  - Column 3: icon https://www.boston.gov/ (inline SVG in the daily status row); title "Street Cleaning"; note "Street cleaning is on a normal schedule."
  - Column 4: icon https://www.boston.gov/ (inline SVG in the daily status row); title "Parking meters"; note "Parking meters are running on their normal schedules today."
  - Column 5: icon https://www.boston.gov/ (inline SVG in the daily status row); title "Tow lot"; note "The tow lot is only open Monday through Friday, from 7 a.m. - 10:30 p.m. Automated kiosks are available 24 hours a day, seven days a week for vehicle releases."
  - Each column is one link (whole block clickable); no card fill, no border on desktop
- components:
  - status_column

**Featured resources**
- summary: Light gray band: section header, then a 4x3 grid of white task cards, each a large line icon over a centered Lora italic blue title.
- ground: #F3F3F3
- desktop: band y 913-2079 (1166px); padding about 57px top, 56px bottom; header "FEATURED RESOURCES" at y 970; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below; grid 4 columns x 3 rows: cards 279px wide at x 120, 426, 733, 1041 (gap 28px); rows at y 1058, 1379, 1700 (gap 31px); rows 1-2 are 290px tall, row 3 is 323px (tallest title); card #FFFFFF, square corners, no border or shadow, padding 36px; icon 100x100 centered at the top; title box starts 118px below the icon top (y +154 from card top): Lora 400 italic 25.2px/33.26px #1871BD, centered, 2-4 lines in a 207px measure
- phone: layout one column of 312x87 white cards, 8px apart, content x 39-351; header 20px; card padding 16px; icon 47x55 at the left (x 59); title Lora italic 18px/23.76px #1871BD left-aligned at x 133, vertically centered, 196px measure
- anatomy:
  - Card 1: icon https://assets.boston.gov/icons/experiential_icons/construction_sheet.svg; title "ADA Curb Ramp Requests"
  - Card 2: icon https://assets.boston.gov/icons/experiential_icons/search.svg; title "Apply for a City Job"
  - Card 3: icon https://assets.boston.gov/icons/experiential_icons/building_permit.svg; title "Building Permits and Licenses"
  - Card 4: icon https://assets.boston.gov/icons/experiential_icons/house_2.svg; title "Boston Property Information Lookup"
  - Card 5: icon https://assets.boston.gov/icons/experiential_icons/truck_alert.svg; title "Get a Moving Truck Permit"
  - Card 6: icon https://assets.boston.gov/icons/experiential_icons/mattress.svg; title "Mattress Recycling"
  - Card 7: icon https://assets.boston.gov/icons/experiential_icons/birth_certifcate.svg; title "Order Birth Certificates Online"
  - Card 8: icon https://assets.boston.gov/icons/experiential_icons/no_ticket.svg; title "Pay a Parking Ticket"
  - Card 9: icon https://assets.boston.gov/icons/experiential_icons/buildings.svg; title "Search Resources and Elected Officials for Your Neighborhood"
  - Card 10: icon https://assets.boston.gov/icons/experiential_icons/trash.svg; title "Special Item / Bulk Item Trash Pickups"
  - Card 11: icon https://assets.boston.gov/icons/experiential_icons/park_location.svg; title "View Projects across the City of Boston"
  - Card 12: icon https://assets.boston.gov/icons/dept_icons/bos_311_icon_black.svg; title "Report an Issue with 311"
  - Hover: card fills #1871BD and the title turns white (Fleet card)
- components:
  - resource_card

**Guides**
- summary: Full-bleed row of four flat color tiles with no gaps: a numbered circle, a Lora italic "Guide:" kicker and a Montserrat Bold uppercase title.
- ground: #1871BD | #091F2F | #FB4D42 | #091F2F
- desktop: band y 2079-2445 (366px), four 360x366 tiles edge to edge across 1440px; circle 60x60 circle, 3px border, at x +39, y +39 from the tile corner; number Montserrat 700 23px centered; kicker "Guide:" Lora 400 italic 25px/25px at y +156; title Montserrat 700 30px/30px uppercase, line-height 1.0, at y +181, measure 281px (1-3 lines)
- phone: layout stacked full-width tiles 390 wide, 95px (one-line title) or 115px (two lines); circle 45x45 at x 28, y +28; number 18px; text kicker 16px/16px and title 20px/20px at x 88
- anatomy:
  - Tile 1 "Trash and Recycling": ground #1871BD; circle, number and Guide: #091F2F; title #FFFFFF
  - Tile 2 "Welcome to Boston Permitting": ground #091F2F; circle, number and Guide: #FB4D42; title #1871BD
  - Tile 3 "Community Aid Resources": ground #FB4D42; circle, number and Guide: #091F2F; title #FFFFFF
  - Tile 4 "Visiting Boston": ground #091F2F; circle, number and Guide: #FB4D42; title #1871BD
  - At rest each tile is a flat color layer; a photo sits underneath and shows only on hover (animation only). Never show the photo at rest
- components:
  - guide_tile

**Latest news**
- summary: Light gray band: section header, a 2x2 grid of white horizontal news cards (photo with a white date ribbon at left, Lora italic blue headline and gray uppercase department at right), then a blue button.
- ground: #F3F3F3
- desktop: band y 2445-3169 (724px); header "LATEST NEWS" at y 2502; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below; grid 2 columns: cards 586x190 at x 120 and 734 (gap 28px), rows at y 2590 and 2811 (gap 31px); card #FFFFFF, square; photo 228x190 at the left (cover); ribbon: white bookmark 70px wide, notched bottom, #ECECEC 1px stroke, hanging from the photo top at x +20 (top -5px), holding the date in two lines, Montserrat 700 18px/18px #091F2F centered (OCT over 30) at y +17; text text column from x +255 to the card edge minus 25px (about 306px); headline at y +24: Lora 400 italic 22px/28px, letter-spacing 0.4px, #1871BD, max 3 lines (84px box, overflow hidden, no ellipsis: a longer title is simply cut after line 3); department at y +151: Montserrat 400 16px/19.5px uppercase #58585B. Card 1 sets 3 lines: Over 100 Car-Free Spooky / Streets Celebrations Citywide / This Halloween Weekend; button "MORE CITY NEWS" at x 120, y 3051, 205x62. Button: #1871BD fill, square corners, Montserrat 700 16px/18px, letter-spacing 1px, uppercase, #FFFFFF, padding 22.5px (height 62px); phone 14px/16px, padding 20px (55px). Hover #FB4D42
- phone: layout one column of 312x400 cards 28px apart; card photo 312x190 on top with the ribbon at its top left; headline Lora italic 19.56px/24.9px at x 59, 24px under the photo; department 14.2px at the bottom (y +363); button 182x55
- anatomy:
  - Card 1: date OCT 30; photo https://www.boston.gov/sites/default/files/styles/card_grid_2w_horizonal_1x/public/img/library/photos/2026/10/2026SpookyStreetsCelebration.png; headline "Over 100 Car-Free Spooky Streets Celebrations Citywide This Halloween Weekend"; department "Mayor's Office"
  - Card 2: date OCT 30; photo https://www.boston.gov/sites/default/files/styles/card_grid_2w_horizonal_1x/public/img/program/intro_images/2019/10/resident-parking-intro.jpg; headline "Traffic Advisory for October 30, 2026"; department "Transportation"
  - Card 3: date OCT 7; photo https://www.boston.gov/sites/default/files/styles/card_grid_2w_horizonal_1x/public/img/library/photos/2026/10/55574160112_8b9cd86e9b_o.jpg; headline "Mayor Wu, The Community Builders and Pine Street Inn Celebrate 99 New Supportive Housing Units (cut after line 3)"; department "Housing"
  - Card 4: date OCT 30; photo https://www.boston.gov/sites/default/files/styles/card_grid_2w_horizonal_1x/public/img/library/photos/2026/10/OpenNewbury_HolidayStroll2026.jpg; headline "Mayor Michelle Wu Announces 2026 Open Newbury: Holiday Stroll"; department "Mayor's Office"
  - Ribbon asset https://www.boston.gov/ (inline SVG on news cards)
- components:
  - news_card
  - button_primary

**Featured videos**
- summary: White band: section header and three bordered video cards, a short photo strip above a Lora italic blue title and a gray description.
- ground: #FFFFFF
- desktop: band y 3169-3764 (595px); header "FEATURED VIDEOS" at y 3226; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below; grid 3 cards 382x394 at x 120, 529, 938 (gap 27px), y 3314; card #FFFFFF, 2px solid #E0E0E0 border, square; image strip 378x132 (cover, Optimistic Blue fill behind); body padding exactly 39.4px on all sides with a 2px #E0E0E0 top border, so the title top sits 51px below the image (y 3499 for an image ending at 3448); title Lora 400 italic 25px/33px #1871BD; description 21px below, Lora 400 (roman) 18px/27px #58585B
- phone: layout stacked 312px cards, 27px apart; card image 308x108; padding 35px; title 18px/23.76px; description 15px/22.5px
- anatomy:
  - Card 1: image https://www.boston.gov/sites/default/files/styles/card_grid_horizontal_e_oversize/public/img/library/photos/2023/04/black-boston.png; title "We Are Black Boston"; description "Honoring the legacy, contributions, and presence of Black Bostonians."
  - Card 2: image https://www.boston.gov/sites/default/files/styles/card_grid_horizontal_e_oversize/public/img/2019/y/youtube-snip.png; title "City of Boston YouTube Channel"; description "Check out our latest videos on the City of Boston's YouTube account."
  - Card 3: image https://www.boston.gov/sites/default/files/styles/card_grid_horizontal_e_oversize/public/img/library/photos/2022/04/city-tv.PNG; title "Boston City TV YouTube Channel"; description "Boston City TV can also be viewed on your local cable TV provider: Xfinity 24, RCN 13, and Fios 962."
- components:
  - video_card

**Stay connected**
- summary: Light gray band: section header, a large Lora italic sign-up sentence at the left, and an email form at the right with 3px outlined inputs and a blue button.
- ground: #F3F3F3
- desktop: band y 3764-4132 (368px); header "STAY CONNECTED" at y 3820; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below; lead x 120, y 3896 (only 18px below the header rule: this section uses the tight m-b300 margin), 586px wide: Lora 400 italic 30px/45px #091F2F, 4 lines; form labels at y 3896: "ENTER YOUR EMAIL ADDRESS" (x 734, 337px) and "ZIP CODE" (x 1089, 231px), Montserrat 700 16px/22.4px, letter-spacing 1px, uppercase, #091F2F; inputs at y 3923, 57px tall, #FFFFFF with a 3px solid #091F2F border, square, padding 5px 18px, placeholders "Email address" and "Zip Code" in Lora italic gray; "SIGN UP" button 217x62 right-aligned at x 1103, y 3989, padding 22.5px 72px
- phone: layout lead (18px/27px, 4 lines) then labels and inputs stacked full width (312px), button 193x55 right-aligned
- anatomy:
  - Lead text: "Sign up for email updates from the City of Boston, including information on big events and upcoming traffic and parking restrictions."
- components:
  - text_input
  - button_primary

**Upcoming events**
- summary: White band: section header, a 3x3 grid of light gray event cards with a Lora italic blue title and a blue date ribbon at the top right, then a blue button.
- ground: #FFFFFF
- desktop: band y 4132-5344 (1212px); header "UPCOMING EVENTS" at y 4188; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below; grid 3 columns: cards 382x277 at x 120, 529, 938 (gap 27px), rows at y 4277, 4585, 4892 (gap 31px); every card is 277px tall; card #F2F2F2, square; title box at x +39, padding 39.4px top, 242px measure: Lora 400 italic 25px/33px #1871BD (1-6 lines); ribbon at the top right: #288BE4 bookmark 70px wide with a 1px #000000 stroke, x +297 to +367, top -3px, date in two lines Montserrat 700 18px/18px #091F2F centered (OCT over 31); cancel a "CANCELED:" prefix in Lora 700 italic #D22D23 runs inline before the title; button "FIND MORE CITY EVENTS" 270x62 at x 120, y 5225. Button: #1871BD fill, square corners, Montserrat 700 16px/18px, letter-spacing 1px, uppercase, #FFFFFF, padding 22.5px (height 62px); phone 14px/16px, padding 20px (55px). Hover #FB4D42
- phone: layout one column of 312px cards 27px apart, height by content (94-189px); card title 18px/23.76px at x 74 (35px padding), 193px measure; ribbon 70x60 at the right
- anatomy:
  - Card 1: ribbon OCT 31; title "Legal Greens Boston"
  - Card 2: ribbon OCT 31; title "Notice of Advance Processing and Removal of Early Voted Ballots for November 3, 2026, State Election"
  - Card 3: ribbon OCT 31; title "Nature Center: Nocturnal Animals and Horse-of-Course"
  - Card 4: ribbon OCT 31; title "The Blair Project"
  - Card 5: ribbon NOV 1; title "Notice of Advance Processing and Removal of Early Voted Ballots for November 3, 2026, State Election"
  - Card 6: ribbon NOV 1; title "Antigua and Barbuda Flag Raising"
  - Card 7: ribbon NOV 2; title "Notice of Advance Processing and Removal of Early Voted Ballots for November 3, 2026, State Election"
  - Card 8: ribbon NOV 2; title "CANCELED: Digital Literacy Workshop"
  - Card 9: ribbon NOV 2; title "Age Strong's Medicare Open Enrollment Clinics - Fenway"
  - Ribbon asset https://www.boston.gov/ (inline SVG on event cards)
- components:
  - event_card
  - button_primary

**Mayor**
- summary: Light gray band: section header with a right-aligned Contact link, the Mayor's photo at the left and a short bio with a button at the right.
- ground: #F3F3F3
- desktop: band y 5344-5985 (641px); header "BOSTON MAYOR MICHELLE WU" at y 5400; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below. On the header line at the right: "Contact:" Lora italic 18px/19.8px #091F2F and "Mayor's Office" Lora italic 18px #D22D23 (right edge x 1320, y 5425); photo 586x355 at x 120, y 5509 (cover), square; text x 734, 586px: "MEET THE MAYOR" Montserrat 600 30px/32.4px, letter-spacing 1px, uppercase, #091F2F at y 5518; bio at y 5579 Lora 400 18px/39px #091F2F, 4 lines; button "LEARN ABOUT MAYOR WU" 246x53 at y 5756: Montserrat 700 14px/18px, letter-spacing 1px, padding 18px, #1871BD
- phone: layout header 20px, Contact line below it left-aligned (14px); photo 312x189; title 18px/28.8px; bio 16px/34.7px; button 242x47
- anatomy:
  - Photo https://www.boston.gov/sites/default/files/img/library/photos/2021/11/wu-headshot-homepage.jpg
  - Bio: one paragraph that sets exactly 4 lines at 586px (about 40 words): she is the Mayor of Boston, a daughter of immigrants, a Boston Public Schools mom to two boys, an MBTA commuter, and believes the City can solve its deepest challenges by building community. Write it in that order; the last line is short (about one word)
- components:
  - button_primary

**City Council**
- summary: White band: section header with a Contact link, then a 4-column grid of light gray cards, each a circular headshot over a blue uppercase name and a gray italic title.
- ground: #FFFFFF
- desktop: band y 5985-7458 (1473px); header "BOSTON CITY COUNCIL" at y 6041; Section header (signature section-header-rule): Montserrat 700 45px/45px, letter-spacing -1px, uppercase, #091F2F, left; 8px solid #091F2F bottom border spanning the full 1200px container, 4.5px below the text box (header block 58px tall, its top 57px below the band top). Content starts 30px below the rule (31px for news) unless the section says otherwise. Phone: 20px/20px, 5px rule, block 33px, top 35px below the band top, content 8px below. Right: "Contact:" + "City Council" (#D22D23); grid 4 columns 279px wide at x 120, 426, 733, 1041; rows start y 6130, 6445, 6779, 7094 (31px gaps); row heights 284, 304, 284, 308 (a row grows when a name or title wraps to 2 lines; all cards in a row share its height); 13 cards, the last row holds one; card #F3F3F3, square, padding 18px; headshot 173x173 circle (border-radius 100%) centered at y +18; name at y +222: Montserrat 400 18px/19.8px uppercase #1871BD, centered; title just below: Lora 400 italic 16px/24px #58585B, centered
- phone: layout one column of 312x142 cards, 28px apart; card padding 16px; headshot 110x110 circle at the left; name Montserrat 16px/17.6px and title Lora italic 14px/21px left-aligned at x 181
- anatomy:
  - Card 1: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/ruthzee-headshot.png; "Ruthzee Louijeune"; "City Councilor, At-Large"
  - Card 2: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/santana-headshot.jpg; "Henry Santana"; "City Councilor, At-Large"
  - Card 3: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/mejia-headshot.png; "Julia M. Mejia"; "City Councilor, At-Large"
  - Card 4: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/murphy-headshot.png; "Erin J. Murphy"; "City Councilor, At-Large"
  - Card 5: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/coletta-headshot.png; "Gabriela Coletta Zapata"; "City Councilor, District 1"
  - Card 6: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/person_profile/photos/2018/01/flynn-headshot.jpg; "Edward M. Flynn"; "City Councilor, District 2"
  - Card 7: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/fitzgerald-headshot.png; "John FitzGerald"; "City Councilor, District 3"
  - Card 8: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/worrell-headshot.png; "Brian Worrell"; "City Councilor, District 4"
  - Card 9: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/pepen-headshot.png; "Enrique J. Pepén"; "City Councilor, District 5"
  - Card 10: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/weber-headshot.jpg; "Benjamin J. Weber"; "City Councilor, District 6"
  - Card 11: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/culpepper-headshot.png; "Miniard Culpepper"; "City Councilor, District 7"
  - Card 12: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/durkan-headshot.png; "Sharon Durkan"; "City Councilor, District 8"
  - Card 13: https://www.boston.gov/sites/default/files/styles/person_profile_card_173x173_/public/img/library/photos/2026/02/breadon-headshot.jpg; "Liz Breadon"; "City Council President; City Councilor, District 9"
- components:
  - person_card

**Feedback**
- summary: Light gray strip with one centered button.
- ground: #F3F3F3
- desktop: band y 7458-7624 (166px), padding 56.25px 0; button "PROVIDE YOUR FEEDBACK" 249x53 centered at y 7514: #1871BD, Montserrat 700 14px/18px, letter-spacing 1px, uppercase, padding 18px, border-radius 3px
- phone: layout band 117px; button 245x47 centered
- anatomy:
  - The only rounded (3px) button on the page
- components:
  - button_primary

**Footer**
- summary: Charles Blue footer: the white B at the left, one row of uppercase bright-blue legal links, and Report an issue with a 311 badge at the right.
- ground: #091F2F
- anatomy:
  - Footer y 7623-7774 (151px), padding 31px 31px 0
  - B logo: https://patterns-stg.boston.gov/images/b-light.svg (white B on a #FB4D42 underline bar) 54x83 at x 31, y 7654
  - Links Montserrat 500 14px/14px, letter-spacing 1px, uppercase, #28A7DF, starting x 124, y 7680, about 36px apart: Privacy Policy, Vulnerability Disclosure, Public records, Accessibility; second line at y 7702: Contact Us
  - Right: "Report an issue" in #FCB61A (same style) at x 1166, y 7680, then the 311 badge 82x82 at x 1327, y 7651: white circle with "BOS:" and "311" in #FCB61A (https://patterns.boston.gov/images/311-circle.svg (bottom half of the sprite); hover swaps to the yellow circle)
  - No copyright line, address or social icons in the homepage footer
- phone: footer y 11378-11547 (169px), padding 27.56px; B at the left (x 28); a single column of links at x 145, 12px/12px, 20px apart: "BOS:311 - Report an issue" in #FCB61A first, then Privacy Policy, Vulnerability Disclosure, Public records, Accessibility, Contact Us in #28A7DF; the 311 badge is hidden

**On dark grounds**
- secondary button: not used on dark grounds on the homepage; Fleet has a bordered-white button
- link: #28A7DF (Fleet optimistic-blue-light-SR); #51ACFF is the guide's bright blue for dark grounds
- muted text: not used
- hairline: not used
- logo variant: white B with red underline (b-light.svg); white CITY of BOSTON logo with red underline in the banner

## Components

- **button primary** (observed): fill #1871BD, text #FFFFFF, border none, radius 0, padding 22.5px (16px type) or 18px (14px type), height 62, example MORE CITY NEWS (205x62), text style Montserrat 700 16px/18px, letter-spacing 1px, uppercase, face display, weight 700, font size 16, padding x 22.5
  - hover (published): background-color #FB4D42, color #FFFFFF
  - disabled (published): background-color #E0E0E0, color #828282
- **status column** (observed): anatomy 65px icon in a 3px #091F2F circle; uppercase underlined Montserrat 16px #1871BD title; Lora italic 16px/24px #091F2F note; centered; whole column is a link
- **resource card** (observed): fill #FFFFFF, radius 0, padding 36px, anatomy 100px line icon centered; Lora italic 25.2px/33.26px #1871BD title centered, hover fill #1871BD, title white
- **guide tile** (observed): size 360x366, anatomy 60px circle with 3px border and Montserrat 700 23px number; Guide: Lora italic 25px; title Montserrat 700 30px uppercase, colors see Guides section
- **news card** (observed): fill #FFFFFF, radius 0, size 586x190, anatomy photo 228x190 left with a white date ribbon; Lora italic 22px blue headline; Montserrat 16px uppercase #58585B department
- **video card** (observed): fill #FFFFFF, border 2px solid #E0E0E0, size 382x394, anatomy 378x132 image; 2px #E0E0E0 divider; padding 39.4px; Lora italic 25px title; Lora 18px/27px #58585B description
- **event card** (observed): fill #F2F2F2, radius 0, size 382x277, anatomy Lora italic 25px/33px blue title, 39.4px padding, 242px measure; #288BE4 date ribbon top right
- **person card** (observed): fill #F3F3F3, radius 0, padding 18px, anatomy 173px circular headshot; Montserrat 18px uppercase #1871BD name; Lora italic 16px #58585B title; centered
- **text input** (observed): fill #FFFFFF, border 3px solid #091F2F, radius 0, height 57, padding 5px 18px, label Montserrat 700 16px/22.4px uppercase, 1px tracking, #091F2F, above the input
- **nav link** (observed): text style Montserrat 400 14px, 1px tracking, uppercase, #091F2F, hover #D22D23
- **footer link** (observed): text style Montserrat 500 14px, 1px tracking, uppercase, #28A7DF; Report an issue #FCB61A
- **date ribbon** (observed): anatomy bookmark shape (viewBox 34.08x44.31, notched bottom) about 70px wide; two-line Montserrat 700 18px/18px #091F2F date; news: #FFFFFF fill + #ECECEC stroke; events: #288BE4 fill + #000000 stroke

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover | none (instant) |  | Buttons change from Optimistic Blue to Freedom Trail Red on hover and focus | published |
| card-hover | none (instant) |  | Cards fill Optimistic Blue with white text on hover; image overlays blend with a lightened blue | published |
| menu | opacity 0.5s |  | Main menu opens as a dark left drawer | published |
| language-cycle | not published |  | Header language label cycles through Español, Soomaali, Português and others; at rest show ESPAÑOL (animation only) | observed |

## Icon tokens

Grid not published, stroke 3-pixel-width strokes (published).
| Name | Size | Use |
|---|---|---|
| experiential | 100px |  |
| small circular | 65px |  |

## Signature moves

### The underline

Where: the B, the BOSTON wordmark, links, and every section header.
Do: When something matters, Boston underlines it. The B logo and the BOSTON word sit on a Freedom Trail Red #FB4D42 bar; section headers sit on an 8px Charles Blue #091F2F rule the full container width; status titles and links are underlined in their own blue. One red underline per lockup.
Don't: set headers in red, or underline them in Optimistic Blue.
Example: "FEATURED RESOURCES", with "FEATURED RESOURCES" set as underline.

### Uppercase header on a heavy rule

Where: every homepage section.
Do: Montserrat Bold 45px/45px uppercase, -1px tracking, Charles Blue, left-aligned, on an 8px solid Charles Blue bottom border across the 1200px container (4.5px gap). Phone: 20px type, 5px rule. A right-aligned Lora italic Contact: link may sit on the same line. One per section.
Example: "LATEST NEWS".

### Date strikethrough

Where: the daily status row under the hero.
Do: Centered Montserrat Bold 28px uppercase date in a white box (12px side padding) breaking an 8px Charles Blue line across the full container (Fleet .str: 3px small, 5.3px medium, 8px large). One per page.
Example: "FRIDAY, OCTOBER 30".

### Blue photo overlay with type

Where: heroes.
Do: Photograph under Optimistic Blue #1871BD at 60% opacity, white Lora italic kicker over a white Montserrat Bold uppercase title, centered. The guide names blue overlay with type as one of two photo treatments. One hero.
Don't: use red or Charles Blue as the overlay.
Example: "CITY OF BOSTON".

### Lora italic links

Where: every card title, kicker and lead.
Do: Calls to a task are Lora italic in Optimistic Blue; Montserrat is reserved for labels, buttons and headers. The pair carries the guide's bold yet human voice.
Don't: set card titles in Montserrat.
Example: "Pay a Parking Ticket".

### Date ribbons

Where: news and event cards.
Do: A bookmark ribbon (notched bottom) holding a two-line Montserrat Bold date, OCT over 30: white with a #ECECEC hairline on news photos, #288BE4 with a black hairline at the top right of event cards. One per card.
Example: "OCT 31".

## Messaging: rules

The guide opens with a short manifesto about boldness, diversity and a shared City, closing on "We are Boston." The homepage carries no slogan: it leads with today's date, City services and people.

Why it works: A city site is used to get things done; the brand shows in how plainly and warmly it helps.

- Lead with the task, not the institution
- Name links by the task (Pay a Parking Ticket)
- Every problem comes with the plan to fix it

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines, https://www.boston.gov/

## Voice: rules

Five principles: Confident, Helpful, Optimistic, Humble, Personal. The writing guide turns them into plain-language rules: active voice, 11-word headlines, we and you, no may or shall, AP style with City exceptions.

Why it works: Plain, direct words serve people with the least knowledge, second-language readers and Google Translate alike.

|  |  |
|---|---|
| Tone | Confident, Helpful, Optimistic, Humble, Personal |
| Headline | max 11 words, title case |
| Sentence | 15-20 words |

- No subjunctive: if, maybe, but, may, could
- Headlines of 11 words or fewer
- Sentences 15-20 words; paragraphs two to three sentences
- Use we and you
- Must, not may or shall
- Spell out & and @; percent, not %
- Oxford comma; capitalize City, City Council and Mayor
- Phone numbers as 617-635-4500
- Don't questions where a statement will do
- Don't slang or conversational language
- Don't jargon, legalese and unexplained acronyms

Real examples, to look at on City of Boston's own pages (not for reuse):
- Experiential icon that marks the writing guide in the guide's Other guides list: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines, https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide

## Logo: rules

The mark is a bold B, underlined in red; the longer City of Boston logo sets CITY and BOSTON in Montserrat-like caps with a small italic "of", BOSTON underlined. Two seals sit beside it: a digital seal for all digital properties and the official 1823 seal for authority on bills and forms.

Why it works: The underline says what matters; the B and logo make the City human, the seal keeps its authority.

|  |  |
|---|---|
| Clear space | not published |
| Minimum size | not published |
| Variants | B dark, B light, City of Boston logo dark and white |

- The B and the City of Boston logo are the friendly, everyday marks
- Use the digital seal, not the official seal, on all digital properties
- Use the official seal where the City must be the symbol of authority: bills, non-digital forms
- Use the files from the City's download folders
- Don't use the official seal on screens
- Don't redraw or recolor the underline

Real examples, to look at on City of Boston's own pages (not for reuse):
- The B, underlined: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)
- Digital seal: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)
- Official seal: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)

## Color: rules

Red, white and blue against a modern gray. White is the primary color of the site; Charles Blue, Optimistic Blue and Freedom Trail Red are bursts that point at notices and functions; supporting blues and grays fill in only when the primaries do not work.

Why it works: The palette pays homage to the City's past (the Charles, the Freedom Trail) while white space keeps content clear.

|  |  |
|---|---|
| Charles Blue | #091F2F / Pantone 295C |
| Optimistic Blue | #1871BD / Pantone 285 C |
| Freedom Trail Red | #FB4D42 / Pantone 1788C |

- Keep white dominant; use light gray liberally with it
- Use the blues strongly and purposefully
- Use red sparingly: it can alarm
- Charles Blue for headers and anything that must look official
- Optimistic Blue for links, buttons, backgrounds and photo overlays
- Supporting colors only when the primaries do not work
- Darkest supporting gray for body copy; lightest gray for backgrounds
- Don't put Optimistic Blue on Freedom Trail Red, or red on Optimistic Blue: they vibrate
- Don't use the near-black blue except when you need something like black

Not published: exact color ratios (the guide shows a proportion image, no numbers).

Do and don't:
- Do: "Pay a Parking Ticket". Optimistic Blue for links and buttons on white.
- Don't: "Pay a Parking Ticket". Optimistic Blue on Freedom Trail Red: the guide says they vibrate.

Real examples, to look at on City of Boston's own pages (not for reuse):
- Color relationships: white dominant, primaries as bursts: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Color relationships)
- Supporting blues: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting colors)
- Supporting grays: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting colors)

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Color), https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl

## Typography: rules

Two Google Web Fonts chosen for contrast and boldness: Montserrat, inspired by urban street posters, for navigation, buttons and primary headers, always uppercase bold; Lora, a calligraphic contemporary serif, for body text small and for quotes large and italic. Replacement faces are named for Arabic and Chinese.

Why it works: The bold sans and the warm serif together read as the guide's "bold, yet human" voice.

|  |  |
|---|---|
| Display | Montserrat Bold, uppercase |
| Text | Lora Regular and Italic |
| Email | Georgia / Arial |

- Montserrat for navigation, buttons and primary headers, uppercase
- Lora for body text; large italic for quotes and secondary text
- Pair the two whenever possible
- Email fallback: Georgia for Lora, Arial for Montserrat
- Arabic: Markazi Text and Mada; Chinese: Noto Serif/Sans SC and TC
- Don't set Montserrat headers in sentence case
- Don't use a third face

Do and don't:
- Do: "FEATURED RESOURCES". Montserrat Bold, uppercase, Charles Blue.
- Don't: "Featured resources". Montserrat headers are always uppercase.

Real examples, to look at on City of Boston's own pages (not for reuse):
- Lora specimen from the guide: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography)

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography), https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_fonts.styl

## Graphic elements: rules

Boston underlines: the red bar under the B and BOSTON, 8px Charles Blue rules under every section header, the date set in a strikethrough. Square edges everywhere; circles only for headshots and icon frames; bookmark ribbons carry dates.

Why it works: The underline is the logo's idea carried into every layout.

|  |  |
|---|---|
| Header rule | 8px #091F2F |
| Input border | 3px #091F2F |
| Icon stroke | 3px |

- Section headers sit on an 8px Charles Blue rule
- Square corners on cards, tiles, inputs and photos
- Headshots always cropped to a circle
- Date ribbons on news and events
- Don't round the corners of cards or buttons

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines, https://www.boston.gov/

## Iconography: rules

Three families: experiential icons, bold line icons with 3px strokes and mostly hard edges, for actions; departmental icons, solid Charles Blue shapes underlined in Freedom Trail Red, for wayfinding; small circular icons inside a 3px circle, used inline and on the homepage.

|  |  |
|---|---|
| Stroke | 3px |
| Color | Charles Blue |

- 3px strokes; hard edges; few rounded corners
- Experiential icons for transactions people want to finish fast
- Departmental icons filled Charles Blue, underlined red
- Small icons sit in a 3px Charles Blue circle
- Don't add unnecessary rounded corners

Real examples, to look at on City of Boston's own pages (not for reuse):
- Experiential icons: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Iconography)
- Departmental icons: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Iconography)
- Small circular icons: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Iconography)

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Iconography)

## Photography: rules

Three subjects (people, skylines, landmarks) and two treatments (full color, and Optimistic Blue overlay with type). People are candid and close, in the less famous parts of Boston, never models, stock or selfies; skylines and landmarks from unusual, human-level viewpoints. Headshots are always circles.

|  |  |
|---|---|
| Treatments | full color; 60% Optimistic Blue overlay with type |
| Headshots | circle |

- Real people doing real things, candid, up close
- Imply human presence even without people
- Shoot from eye level or below; make residents a bit heroic
- Skylines and landmarks from a-typical, human perspectives; zoom in and crop boldly
- Leave a blurry area to set type over
- Circle-crop headshots in one consistent style
- Only photos the City has rights to
- Don't models, stock or posed shots
- Don't photos from above eye level
- Don't selfies
- Don't tour-book views of landmarks

Real examples, to look at on City of Boston's own pages (not for reuse):
- Do: a focal point with a blurry area for type: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)
- Do: a low, wide angle that makes a resident heroic: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)
- Don't: too posed: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)
- Landmarks from a human perspective: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)

## Motion: rules

Motion is almost absent: buttons turn red on hover, cards fill blue, the menu drawer fades, and the header language label cycles.

|  |  |
|---|---|
| Button hover | #1871BD to #FB4D42 |
| Menu | opacity 0.5s |

- Keep motion functional: state changes only
- Don't decorative animation

Sources: https://github.com/CityOfBoston/patterns

## Interface and layout: rules

White dominant pages of alternating white and light gray bands in a 1200px container; uppercase section headers on heavy rules; card grids of four, three or two; one full-bleed row of flat color tiles.

- White dominant, light gray bands between
- Every section starts with an uppercase header on a rule
- Square cards in even grids

Not published: a grid or spacing system in the guide (Fleet code carries sizing and breakpoints).

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines, https://github.com/CityOfBoston/patterns, https://www.boston.gov/

## Rules: rules

- White is the primary color
- Montserrat uppercase bold for headers, nav and buttons
- Lora for text, italic for quotes
- Red sparingly; never blue on red
- Digital seal on screens, official seal for authority
- Candid, real photography; circle headshots
- Plain language: we, you, must
- Don't models or stock photos
- Don't Optimistic Blue on Freedom Trail Red
- Don't may, shall, could
- Don't symbols for words

Sources: https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines, https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide

## Applications

| Format | What | Source |
|---|---|---|
| presentation slides | Three Google Slides decks for City employees to duplicate. | https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Employee toolkit) |
| documents | Blank document, memo, report and year-in-review templates in Google Docs. | https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Employee toolkit) |
| email signature | Two signature options to copy. | https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Employee toolkit) |
| newsletter | Upaknee layout and size guide (PDF) for the newsletter system. | https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Layouts for media platforms) |
| phone and desktop backgrounds | Branded wallpapers. | https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Employee toolkit) |

## By format

How our engine applies Boston's system to each format. This is our recipe built from their rules, not something the City publishes. Level = how much color the format carries (0 plain, 5 full color blocks). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way boston.gov is built (kit.spec.page, homepage voice): Charles Blue banner, white header with red MENU square and the City of Boston logo; photo hero under 60% Optimistic Blue with Lora italic kicker and Montserrat 90px caps; uppercase section headers on 8px Charles Blue rules; alternating white and #F3F3F3 bands; square white cards with Lora italic blue titles; square Optimistic Blue buttons; Charles Blue footer with the white B | which sections and how many cards; a row of flat color tiles (blue, Charles Blue, red) once per page |
| Deck | 3 | White slides, Montserrat caps headers on a Charles Blue rule, Lora text, the B in a corner | a blue-overlay photo title slide |
| Proposal page | 1 | White ground, Charles Blue headers, plain-language copy, one Optimistic Blue button | one light gray band |
| Social post | 3 | Candid photo under 60% Optimistic Blue with Montserrat caps, or a flat Charles Blue ground | Lora italic kicker |
| Email | 1 | Georgia and Arial fallbacks, white ground, Optimistic Blue button | a Charles Blue header strip |
| Print notice | 1 | Official seal where authority is needed; Charles Blue type; plain language | none |

## Checks before anything ships

- **Logo hidden**: Cover the B. It should still read as Boston: Montserrat caps on heavy Charles Blue rules, Lora italic blue links, white with gray bands, a red accent used once.
- **Swap test**: Put another city's seal on it. If the underlines, the red-white-blue and the plain we/you copy still feel at home, it is not specific enough.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is City of Boston's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Logo clear space and minimum size: not published.
- Color proportions as numbers: not published (the guide shows a ratio image).
- A pixel type scale: not published in the guide; Fleet code and homepage measurements supply it.
- Motion principles, durations and easing: not published.
- Illustration style: not published (the City uses photography and icons).
- Iconography grid and sizes: not published beyond 3px strokes.
- The guide names #0C2639 as the footer color; the 2026 homepage footer is Charles Blue #091F2F (observed).
- Event ribbon blue #288BE4 appears only in page code, not in the guide or Fleet variables.

Logos and reference images belong to City of Boston. Look at them on City of Boston's own pages; don't reuse them.