{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F3F3F3", "ink": "#091F2F", "ink_muted": "#58585B", "accent": "#1871BD", "on_accent": "#FFFFFF", "accent_secondary": "#FB4D42", "night": "#091F2F", "on_night": "#FFFFFF", "extras": [ { "name": "White", "hex": "#FFFFFF", "role": "Primary color of the site: dominant page ground and the white space that grounds content", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Color relationships)" }, { "name": "Charles Blue", "hex": "#091F2F", "role": "Primary. Typographic headers; adds contrast and weight; the official-looking color. Pantone 295C, RGB 9 31 47", "site_use": "Every heading, section-header rule, date strikethrough rule, site banner, footer ground, guide tiles 2 and 4, input borders", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Primary colors)" }, { "name": "Optimistic Blue", "hex": "#1871BD", "role": "Primary. Normal links and buttons, background color, and the overlay on photography; warmer, less official. Pantone 285 C, RGB 24 113 189", "site_use": "All buttons, every card title link, hero photo overlay at 60%, guide tile 1, card hover fill", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Primary colors)" }, { "name": "Freedom Trail Red", "hex": "#FB4D42", "role": "Primary, used minimally: brick red from the Freedom Trail; the underline under the B. Pantone 1788C, RGB 251 77 66. Fleet calls it $freedom-red-light: for use on Charles Blue or decorative", "site_use": "Guide tile 3 ground, numbered circles and Guide: kicker on dark tiles, B and wordmark underlines, button hover", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Primary colors)" }, { "name": "Freedom Red Dark", "hex": "#D22D23", "role": "Darker red with stronger contrast on white; Fleet uses it for text and borders on light grounds and error text", "site_use": "Menu button ground, search icon, Contact: links, CANCELED: prefix", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Supporting blue: near black", "hex": "#061622", "role": "Darkest supporting blue, used very rarely when something must resemble black", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting blues)" }, { "name": "Supporting blue: footer", "hex": "#0C2639", "role": "Second-darkest supporting blue; the guide names it the footer color so it can sit against Charles Blue", "site_use": "Not seen on the 2026 homepage: the live footer is Charles Blue #091F2F", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting blues)" }, { "name": "Supporting blue: desaturated", "hex": "#45789C", "role": "Desaturated blue for text that should visually recede", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting blues)" }, { "name": "Supporting blue: bright", "hex": "#51ACFF", "role": "Stand-in for Optimistic Blue on dark grounds", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting blues)" }, { "name": "Optimistic Blue light (screen reader)", "hex": "#28A7DF", "role": "Fleet $optimistic-blue-light-SR: bright blue added because Charles Blue on Optimistic Blue failed contrast; links on dark grounds", "site_use": "Footer links on Charles Blue", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Optimistic Blue hover", "hex": "#175182", "role": "Fleet $optimistic-blue-hover: darker blue for hover", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Hero alt blue", "hex": "#2D82CF", "role": "Fleet $hero-alt: stripe color in the default (no-photo) hero pattern", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Body text gray", "hex": "#58585B", "role": "Darkest supporting gray: body copy. Fleet $body-text", "site_use": "Card descriptions, news department labels, councilor titles", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting grays)" }, { "name": "Supporting gray: rule", "hex": "#D2D2D2", "role": "Medium gray for horizontal rules and borders", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting grays)" }, { "name": "Supporting gray: border", "hex": "#E0E0E0", "role": "Medium gray for rules and borders (Fleet $grey-100)", "site_use": "2px video-card borders and the divider above card text", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting grays)" }, { "name": "Supporting gray: ground", "hex": "#F2F2F2", "role": "Lightest supporting gray: background color", "site_use": "Event cards", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Supporting grays)" }, { "name": "Fleet gray 000", "hex": "#F3F3F3", "role": "Fleet $grey-000: the light gray band ground (b--g). The site uses this rather than the guide's #F2F2F2 for bands", "site_use": "Alternating section bands, councilor cards, feedback band", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Fleet gray 200", "hex": "#C8C8C8", "role": "Fleet $grey-200: hairlines", "site_use": "1px dotted rules between the phone status rows", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Fleet gray 300", "hex": "#828282", "role": "Fleet $grey-300: disabled button text", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Yellow", "hex": "#FCB61A", "role": "Fleet $yellow: the BOS:311 color", "site_use": "Help / 311 menu item, Report an issue footer link, 311 circle", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Black", "hex": "#000000", "role": "Fleet $black", "site_use": "1px stroke on the event date ribbons", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl" }, { "name": "Event ribbon blue", "hex": "#288BE4", "role": "Fill of the event date ribbon (inline SVG); not in the guide or Fleet variables", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "name": "News ribbon stroke", "hex": "#ECECEC", "role": "1px stroke of the white news date ribbon (inline SVG)", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "name": "Guide tile underlay", "hex": "#69A3D4", "role": "Background color of guide tiles under their solid color layer; never visible at rest", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" } ] }, "typography": { "display": { "family": "Montserrat", "steal_family": "Montserrat", "weight": 700, "tracking": -0.022, "line_height": 1, "fallback_stack": "Montserrat, Arial, sans-serif", "real": "Montserrat (Google Web Font, SIL OFL 1.1). The site serves an older Montserrat build (pre-2017, wider than today's Google Fonts cut) from patterns.boston.gov/fonts", "stand_in": false, "site": { "weight": 700, "size_px": "90 desktop / 40 phone (hero H1); 45 / 20 (section headers)", "line_height": "1.0", "tracking": "-1px on hero and section headers", "case": "UPPERCASE everywhere", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography)" }, "body": { "family": "Lora", "steal_family": "Lora", "weight": 400, "tracking": 0, "line_height": 1.5, "scale": 1, "fallback_stack": "Lora, Georgia, serif", "real": "Lora (Google Web Font, SIL OFL 1.1)", "stand_in": false, "site": { "weights": "400 (the site maps its regular file to 300 and 400 alike; bold 700 only for CANCELED: prefixes)", "sizes_px": "35 hero kicker, 30 lead, 25/25.2 card titles, 22 news titles, 18 body, 16 small", "line_height": "1.32 on card titles, 1.5 on 16-30px text, 2.17 (39px) on 18px running text", "italic": "Italic is the default for every card title link, kicker, lead and caption", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography)" }, "mono": { "family": "Montserrat", "steal_family": "Montserrat", "weight": 400, "fallback_stack": "Montserrat, Arial, sans-serif", "real": "No mono face is published; Montserrat Regular uppercase with 1px tracking serves labels", "stand_in": false, "prov": "inferred", "source": "Not published; labels on https://www.boston.gov/ (2026-10-30)" }, "calibration": "No stand-in needed: both faces are open Google Web Fonts named by the guide, and the builder gets the exact woff2 files the site serves (patterns.boston.gov/fonts, observed 2026-10-30). Mind the Montserrat version: the site build (v6-era, 2016) is wider and rounder than current Google Fonts Montserrat (v7+, 2017 redraw), so a builder loading Montserrat from Google Fonts gets narrower caps; use the supplied files. Fleet maps font-weight 300 and 400 of Lora to the same regular file. Email fallback published by the guide: Lora to Georgia, Montserrat to Arial. Rendering: Fleet sets -webkit-font-smoothing: antialiased on html and body (base/global/_body.styl), which renders Lora and Montserrat visibly lighter on macOS than the default subpixel smoothing; always set it. Lora regular is declared at font-weight 300 in Fleet (the same regular file serves 300 and 400). The site serves only these five files, so the measured weights resolve exactly as on boston.gov: Montserrat 500 (footer links) renders with the regular file and 600 (Meet the Mayor) with the bold file; Lora 700 italic (CANCELED:) is the browser's synthesized bold of the italic file. Declare only the five supplied @font-face rules and let the browser match." }, "style": { "button_shape": "square", "button_note": "Square-cornered Optimistic Blue fill, white Montserrat Bold uppercase with 1px tracking, padding 1.25rem; hover and focus turn Freedom Trail Red #FB4D42. Only the feedback button shows a 3px radius", "corners": "square (0px) on every card, tile, input and image; circles only for headshots and icon frames", "linework": "3px strokes: icon outlines, small circular icons, input borders, numbered guide circles", "motion": "Little motion: card hover fills Optimistic Blue, buttons turn red on hover; the language label in the header cycles", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/form/_button.styl" }, "voice": { "tone": [ "Confident", "Helpful", "Optimistic", "Humble", "Personal" ], "notes": [ "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": [ { "id": "no-subjunctive", "kind": "banned_words", "text": "Never use if, maybe, but, may or could; state it", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Confident)", "words": [ "maybe", "may", "could" ] }, { "id": "statements-not-questions", "kind": "guidance", "text": "Make statements, not questions", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Confident)" }, { "id": "full-stop-over-comma", "kind": "guidance", "text": "Prefer a full stop to a comma; short sentences, few adjectives", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Confident)" }, { "id": "headline-length", "kind": "max_words", "text": "Headlines at most 11 words", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to do)", "value": 11, "applies_to": "headline" }, { "id": "sentence-length", "kind": "max_words", "text": "Sentences of 15 to 20 words; paragraphs of two to three sentences", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to do)", "value": 20, "applies_to": "sentence" }, { "id": "active-voice", "kind": "guidance", "text": "Active voice (the \"by zombies\" test)", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to do)" }, { "id": "we-and-you", "kind": "guidance", "text": "Say we, not The City; say you, not residents or applicants", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to do)" }, { "id": "contractions", "kind": "guidance", "text": "Use contractions where they sound natural", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to do)" }, { "id": "must-not-shall", "kind": "banned_words", "text": "Use must, never may or shall, for required steps", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to avoid)", "words": [ "shall" ] }, { "id": "no-symbols", "kind": "banned_words", "text": "Spell out & and @", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to avoid)", "words": [ "&", "@" ] }, { "id": "no-acronyms", "kind": "guidance", "text": "Avoid acronyms and jargon; write for the person who knows least", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (What to avoid)" }, { "id": "ap-style", "kind": "guidance", "text": "AP style for anything not covered", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Associated Press style)" }, { "id": "headline-case", "kind": "headline_case", "text": "Headlines in title case", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Associated Press style: Headlines)", "value": "title" }, { "id": "numerals", "kind": "guidance", "text": "Spell out one to nine; figures for 10 and up; percent, never %", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Numerals)" }, { "id": "times", "kind": "guidance", "text": "Times as 9 a.m. - 5 p.m.: no :00, hyphen for spans, a.m./p.m. lowercase", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Time)" }, { "id": "dates", "kind": "guidance", "text": "Dates without st/nd/rd/th: September 5", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Dates)" }, { "id": "oxford-comma", "kind": "guidance", "text": "Always use the Oxford comma", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Special writing rules)" }, { "id": "capitalize-city", "kind": "guidance", "text": "Capitalize City, City Council and Mayor when they mean Boston's", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Special writing rules)" }, { "id": "phone-format", "kind": "guidance", "text": "Phone numbers with dashes: 617-635-4500", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Phone numbers)" }, { "id": "no-selfie-stock", "kind": "guidance", "text": "Never use selfies, models or posed stock photos", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)" } ], "approved": { "phrases": [ "We are Boston.", "we", "you", "must" ], "words": [ "we", "you", "must" ] }, "banned": [ "maybe", "may", "could", "shall", "the subjunctive", "&", "@", "%", "jargon and legalese", "acronyms without explanation" ], "is_not": [ [ "Confident", "Arrogant" ], [ "Helpful", "Verbose" ], [ "Optimistic", "Naive" ], [ "Humble", "Timid" ], [ "Personal", "Slangy" ] ], "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" }, "spec": { "source": "https://www.boston.gov/", "how": "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.", "provenance": "observed", "motion": [ { "name": "button-hover", "easing": "none (instant)", "use": "Buttons change from Optimistic Blue to Freedom Trail Red on hover and focus", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/form/_button.styl" }, { "name": "card-hover", "easing": "none (instant)", "use": "Cards fill Optimistic Blue with white text on hover; image overlays blend with a lightened blue", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/card/_card.styl" }, { "name": "menu", "easing": "opacity 0.5s", "use": "Main menu opens as a dark left drawer", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/navigation/_menu.styl" }, { "name": "language-cycle", "easing": "not published", "use": "Header language label cycles through Español, Soomaali, Português and others; at rest show ESPAÑOL (animation only)", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" } ], "icons": { "grid": "not published", "sizes": [ { "name": "experiential", "px": 100, "stroke_px": 3 }, { "name": "small circular", "px": 65, "stroke_px": 3 } ], "stroke": "3-pixel-width strokes", "caps_joins": "usually hard edges; avoid unnecessary rounded corners", "color": "Charles Blue line on white; departmental icons filled Charles Blue and underlined in Freedom Trail Red", "rule": "Experiential icons for actions; departmental icons for wayfinding by department; small circular icons inside a 3px circle", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Iconography)" }, "signature": [ { "id": "underlined-b", "name": "The underline", "where": "the B, the BOSTON wordmark, links, and every section header", "spec": "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", "once": "one red underline per lockup", "example": { "ground": "paper", "text": "FEATURED RESOURCES", "mark": "FEATURED RESOURCES", "mark_style": "underline", "mark_color": "#091F2F", "underline_px": 8, "weight": 700 }, "dont_example": { "ground": "paper", "text": "Featured resources", "ink": "#FB4D42" }, "dont": "set headers in red, or underline them in Optimistic Blue", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)" }, { "id": "section-header-rule", "name": "Uppercase header on a heavy rule", "where": "every homepage section", "spec": "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", "once": "one per section", "example": { "ground": "paper", "text": "LATEST NEWS", "weight": 700 }, "dont": "", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "id": "date-strikethrough", "name": "Date strikethrough", "where": "the daily status row under the hero", "spec": "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)", "once": "one per page", "example": { "ground": "paper", "text": "FRIDAY, OCTOBER 30", "weight": 700 }, "dont": "", "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/strikethrough/_header.styl" }, { "id": "blue-overlay-photo", "name": "Blue photo overlay with type", "where": "heroes", "spec": "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", "once": "one hero", "example": { "ground": "#1871BD", "text": "CITY OF BOSTON", "weight": 700 }, "dont": "use red or Charles Blue as the overlay", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography; Color: Optimistic Blue)" }, { "id": "serif-italic-links", "name": "Lora italic links", "where": "every card title, kicker and lead", "spec": "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", "once": "", "example": { "ground": "paper", "text": "Pay a Parking Ticket", "weight": 400 }, "dont": "set card titles in Montserrat", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography: Lora)" }, { "id": "date-ribbon", "name": "Date ribbons", "where": "news and event cards", "spec": "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", "once": "one per card", "example": { "ground": "#F2F2F2", "text": "OCT 31", "weight": 700 }, "dont": "", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" } ], "page": { "source": "https://www.boston.gov/", "date": "2026-10-30", "prov": "observed", "voices": "Two voices. The homepage speaks in UPPERCASE Montserrat wayfinding labels and task-named title-case links (Pay a Parking Ticket); sentences are short, plain and helpful. The guide's brand voice (Confident, Helpful, Optimistic, Humble, Personal) governs campaigns and editorial. News, event and notice titles are City content and keep their own length (they may exceed 11 words); the voice rules govern copy we write. A landing page follows this anatomy and the homepage voice; the guide's fixed rules (white dominant, blues strong, red sparing, Montserrat uppercase bold, Lora for text) still hold.", "announcement": { "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" }, "nav": { "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" }, "sections": [ { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" }, "dark_ground": { "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" } }, "bands": [ { "label": "Official-site banner", "ground": "#091F2F", "content": "white City of Boston logo, one line, Here's how you know", "desktop": "1440x39, centered", "phone": "y 0-58 (390 wide): 390x58, two centered lines", "anatomy": [ "Thin strip above the header" ] }, { "label": "Header", "ground": "#FFFFFF", "content": "red MENU square, logo, Mayor Michelle Wu, 3 links, language, search", "desktop": "65px, sticky, soft shadow", "phone": "y 58-123 (390 wide): 65px: MENU, dark B square, language, search", "anatomy": [ "Links Montserrat 14px uppercase 1px tracking" ] }, { "label": "Hero", "ground": "photo-dark", "content": "Welcome to the / CITY OF BOSTON", "desktop": "309px, centered white type over photo + 60% #1871BD", "phone": "y 123-314 (390 wide): 191px", "anatomy": [ "Lora italic 35px kicker, Montserrat 90px H1" ] }, { "label": "Daily status row", "ground": "#FFFFFF", "content": "date strikethrough + 5 status columns", "desktop": "501px, 5 x 218px columns", "phone": "y 314-1139 (390 wide): stacked rows with dotted #C8C8C8 hairlines", "anatomy": [ "icons in 3px circles" ] }, { "label": "Featured resources", "ground": "#F3F3F3", "content": "header + 12 icon cards", "desktop": "4x3 grid of 279px white cards", "phone": "y 1139-2398 (390 wide): list of 312x87 cards", "anatomy": [ "Lora italic blue titles" ] }, { "label": "Guides", "ground": "#091F2F", "content": "4 flat color tiles", "desktop": "4 x 360x366 edge to edge: #1871BD, #091F2F, #FB4D42, #091F2F", "phone": "y 2398-2819 (390 wide): stacked 95-115px tiles", "anatomy": [ "numbered 3px circles" ] }, { "label": "Latest news", "ground": "#F3F3F3", "content": "header + 2x2 news cards + button", "desktop": "586x190 cards", "phone": "y 2819-4737 (390 wide): 312x400 cards", "anatomy": [ "white date ribbons" ] }, { "label": "Featured videos", "ground": "#FFFFFF", "content": "header + 3 bordered cards", "desktop": "382x394", "phone": "y 4737-5897 (390 wide): stacked", "anatomy": [ "2px #E0E0E0 borders" ] }, { "label": "Stay connected", "ground": "#F3F3F3", "content": "header + lead + email form", "desktop": "two columns 586/586", "phone": "y 5897-6412 (390 wide): stacked", "anatomy": [ "3px #091F2F inputs" ] }, { "label": "Upcoming events", "ground": "#FFFFFF", "content": "header + 3x3 event cards + button", "desktop": "382x277 #F2F2F2 cards", "phone": "y 6412-8124 (390 wide): stacked", "anatomy": [ "#288BE4 date ribbons" ] }, { "label": "Mayor", "ground": "#F3F3F3", "content": "header + photo + bio + button", "desktop": "586 photo / 586 text", "phone": "y 8124-8939 (390 wide): stacked", "anatomy": [ "Contact: link right" ] }, { "label": "City Council", "ground": "#FFFFFF", "content": "header + 13 person cards", "desktop": "4 columns of 279px #F3F3F3 cards", "phone": "y 8939-11261 (390 wide): list cards", "anatomy": [ "173px circle headshots" ] }, { "label": "Feedback", "ground": "#F3F3F3", "content": "one centered button", "desktop": "166px", "phone": "y 11261-11378 (390 wide): 117px", "anatomy": [ "3px radius button" ] }, { "label": "Footer", "ground": "#091F2F", "content": "B, legal links, Report an issue, 311 badge", "desktop": "151px", "phone": "y 11378-11547 (390 wide): 169px, stacked links", "anatomy": [ "links #28A7DF, Report an issue #FCB61A" ] } ], "layout": { "page_margin": { "desktop": 120, "phone": 39 }, "section_padding": { "desktop": 56, "phone": 35 }, "container_max": 1200, "hero_text_max": 1200, "columns": 4, "columns_phone": 1, "gutter": 28, "gutter_phone": 0, "card_gap": 28, "nav_height": 65, "note": "Measured on boston.gov (2026-10-30) at 1440 and 390. Root font size 18px on desktop (Fleet rem values: 3.125rem = 56.25px section padding). Container 1200px (x 120-1320); phone gutter 39px (content 312px). Grids: 4 columns of 279.45px with 27.4px gaps (x 120, 426.9, 733.8, 1040.6); 3 columns of 382px with 27px gaps (x 120, 529, 938: 3x382 + 2x27 = 1200); 2 columns of 586px with 28px gaps (x 120, 734); row gaps 31px. Bands meet with no gaps; hero ends at 412.75. Bands alternate #FFFFFF and #F3F3F3 except the edge-to-edge guide tiles. Breakpoints (Fleet): 480, 768, 840, 980, 1280, 1300px.", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, "type": [ { "role": "Hero H1", "id": "display-xl", "face": "Montserrat", "size": { "desktop": 90, "phone": 40 }, "line_height": 1, "tracking_px": -1, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Section header", "id": "display-l", "face": "Montserrat", "size": { "desktop": 45, "phone": 20 }, "line_height": 1, "tracking_px": -1, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Hero kicker", "id": "kicker", "face": "Lora", "size": { "desktop": 35, "phone": 18 }, "line_height": 1.32, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "style": "italic" }, { "role": "Lead (stay connected)", "id": "lead", "face": "Lora", "size": { "desktop": 30, "phone": 18 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "style": "italic" }, { "role": "Guide tile title", "id": "title-xl", "face": "Montserrat", "size": { "desktop": 30, "phone": 20 }, "line_height": 1, "tracking_px": 0, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Mayor subhead", "id": "title-l", "face": "Montserrat", "size": { "desktop": 30, "phone": 18 }, "line_height": 1.08, "tracking_px": 1, "weight": 600, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Date strikethrough", "id": "title-m", "face": "Montserrat", "size": { "desktop": 28, "phone": 21.45 }, "line_height": 1, "tracking_px": 0, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Card title link", "id": "card-title", "face": "Lora", "size": { "desktop": 25, "phone": 18 }, "line_height": 1.32, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "style": "italic" }, { "role": "News headline", "id": "news-title", "face": "Lora", "size": { "desktop": 22, "phone": 19.56 }, "line_height": 1.27, "tracking_px": 0.4, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "style": "italic" }, { "role": "Body", "id": "body", "face": "Lora", "size": { "desktop": 18, "phone": 16 }, "line_height": 2.17, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "role": "Card description", "id": "body-s", "face": "Lora", "size": { "desktop": 18, "phone": 15 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "role": "Status note / councilor title", "id": "caption", "face": "Lora", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "style": "italic" }, { "role": "Date ribbon", "id": "date", "face": "Montserrat", "size": { "desktop": 18, "phone": 16 }, "line_height": 1, "tracking_px": 0, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Person name / status title", "id": "label-l", "face": "Montserrat", "size": { "desktop": 18, "phone": 16 }, "line_height": 1.1, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Button", "id": "button", "face": "Montserrat", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.125, "tracking_px": 1, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Form label", "id": "label", "face": "Montserrat", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.4, "tracking_px": 1, "weight": 700, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Department label", "id": "meta", "face": "Montserrat", "size": { "desktop": 16, "phone": 14.2 }, "line_height": 1.22, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Nav link", "id": "nav", "face": "Montserrat", "size": { "desktop": 14, "phone": 12 }, "line_height": 4.64, "tracking_px": 1, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Footer link", "id": "footer", "face": "Montserrat", "size": { "desktop": 14, "phone": 12 }, "line_height": 1, "tracking_px": 1, "weight": 500, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "case": "uppercase" }, { "role": "Banner text", "id": "banner", "face": "Montserrat", "size": { "desktop": 13.32, "phone": 11.84 }, "line_height": 1.3, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" } ], "components": { "button_primary": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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", "states": { "hover": { "css": { "background-color": "#FB4D42", "color": "#FFFFFF" }, "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/form/_button.styl" }, "disabled": { "css": { "background-color": "#E0E0E0", "color": "#828282" }, "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/components/form/_button.styl" } }, "face": "display", "weight": 700, "font_size": 16, "padding_x": 22.5 }, "status_column": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "fill": "#F3F3F3", "radius": 0, "padding": "18px", "anatomy": "173px circular headshot; Montserrat 18px uppercase #1871BD name; Lora italic 16px #58585B title; centered" }, "text_input": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "text_style": "Montserrat 400 14px, 1px tracking, uppercase, #091F2F", "hover": "#D22D23" }, "footer_link": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "text_style": "Montserrat 500 14px, 1px tracking, uppercase, #28A7DF; Report an issue #FCB61A" }, "date_ribbon": { "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "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" } }, "breakpoints": { "phone_max": 767, "all": [ 480, 768, 840, 980, 1280, 1300 ], "prov": "published", "source": "https://github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_media.styl", "note": "phone values below 768px (Fleet $media-medium); several grids collapse below 840 ($media-large)" } }, "system": { "fixed": [ "Montserrat + Lora", "Charles Blue, Optimistic Blue, Freedom Trail Red on white", "the underlined B", "square edges" ], "flex": "Supporting blues and grays when the primaries do not work; full-color or blue-overlay photography.", "traits": [ { "is": "Confident", "not": "Arrogant", "text": "Strong statements, no subjunctive (paraphrase).", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)", "prov": "published" }, { "is": "Helpful", "not": "Verbose", "text": "Useful, simple, relevant to each person (paraphrase).", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)", "prov": "published" }, { "is": "Optimistic", "not": "Naive", "text": "Problems come with a plan of action (paraphrase).", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)", "prov": "published" }, { "is": "Humble", "not": "Boastful", "text": "Simple words, no exaggeration (paraphrase).", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)", "prov": "published" }, { "is": "Personal", "not": "Slangy", "text": "We and you, but no slang from an authority (paraphrase).", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "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", "flex": "which sections and how many cards; a row of flat color tiles (blue, Charles Blue, red) once per page" }, { "format": "Deck", "level": 3, "must": "White slides, Montserrat caps headers on a Charles Blue rule, Lora text, the B in a corner", "flex": "a blue-overlay photo title slide" }, { "format": "Proposal page", "level": 1, "must": "White ground, Charles Blue headers, plain-language copy, one Optimistic Blue button", "flex": "one light gray band" }, { "format": "Social post", "level": 3, "must": "Candid photo under 60% Optimistic Blue with Montserrat caps, or a flat Charles Blue ground", "flex": "Lora italic kicker" }, { "format": "Email", "level": 1, "must": "Georgia and Arial fallbacks, white ground, Optimistic Blue button", "flex": "a Charles Blue header strip" }, { "format": "Print notice", "level": 1, "must": "Official seal where authority is needed; Charles Blue type; plain language", "flex": "none" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Pay a Parking Ticket", "ink": "#1871BD" }, "do_caption": "Optimistic Blue for links and buttons on white.", "dont": { "ground": "#FB4D42", "text": "Pay a Parking Ticket", "ink": "#1871BD" }, "dont_caption": "Optimistic Blue on Freedom Trail Red: the guide says they vibrate." }, { "chapter": "type", "do": { "ground": "paper", "text": "FEATURED RESOURCES", "ink": "#091F2F" }, "do_caption": "Montserrat Bold, uppercase, Charles Blue.", "dont": { "ground": "paper", "text": "Featured resources", "ink": "#091F2F" }, "dont_caption": "Montserrat headers are always uppercase." } ], "make_it_yours": { "note": "Everything above transfers. These are City of Boston's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "We are here to serve: to make things easier and simpler for the people of Boston (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Helpful)" }, "story": { "text": "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.", "prov": "inferred", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines", "source_note": "2016 date read from the guide's 2016 image paths; the rest is the guide intro, paraphrased", "paraphrase": true }, "values": [ { "name": "Confident", "means": "Strong statements, direct, quick to the point (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" }, { "name": "Helpful", "means": "Useful, easy to understand, relevant to the individual (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" }, { "name": "Optimistic", "means": "Every problem arrives with a plan to fix it (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" }, { "name": "Humble", "means": "Never arrogant, verbose or exaggerated (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" }, { "name": "Personal", "means": "We and you; honest, approachable, inclusive (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy)" } ] }, "positioning": { "statement": { "text": "The City of Boston, speaking with boldness and warmth: official when it must be, human by default.", "prov": "inferred", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines", "source_note": "reading of the logo and seal sections" }, "category": { "text": "Municipal government: the official website and communications of the City of Boston, Massachusetts", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, "audience": { "text": "Residents, City employees, businesses and visitors of every background and language", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Personal; Typography for other languages)" }, "problem": { "text": "People come looking for answers to City tasks and need them fast and plainly", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Confident)" }, "promise": { "text": "Make things easier and simpler for the people of Boston", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Helpful)" }, "differentiators": [ { "text": "The B and the City of Boston logo show the City is human; the seal is kept for authority (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)" }, { "text": "A palette rooted in the City's past: Charles Blue, Freedom Trail Red, with a modern gray.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Color)" }, { "text": "Photography of real people in the less famous parts of Boston, never models or stock.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)" }, { "text": "An open-source pattern library (Fleet) shared across City web properties.", "prov": "published", "source": "https://patterns.boston.gov/" } ], "alternatives": [ { "text": "The official City seal (adopted 1823) where authority is needed: bills and non-digital forms.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)" } ] }, "messaging": { "taglines": [ { "text": "We are Boston.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (intro)", "where": "Closing line of the guide's brand statement; the identity in three words" }, { "text": "Welcome to the City of Boston", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "where": "Homepage hero: Lora italic kicker over the Montserrat H1" } ], "attributes": [ "confident", "helpful", "optimistic", "humble", "personal" ], "key_messages": [], "boilerplate": { "text": "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.", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)", "source_note": "2026-10-30", "paraphrase": true }, "pillars": [ { "name": "Boldness", "claim": "Boston's brand starts from boldness of opinion, thought and diversity, and a shared City.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (intro)", "proof": [ "p-b" ] }, { "name": "Service", "claim": "Make things easier and simpler: information that is useful, clear and relevant to each person.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Helpful)", "proof": [ "p-311", "p-tasks" ] }, { "name": "Plain language", "claim": "Write for the person with the least knowledge: active voice, short lines, plain words.", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide", "proof": [ "p-wordlist" ] }, { "name": "Access for everyone", "claim": "Accessible and inclusive, in every language the City serves.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Brand strategy: Personal; Typography for other languages)", "proof": [ "p-lang" ] } ], "proof_points": [ { "id": "p-b", "kind": "fact", "text": "The logo is a bold B, underlined: when something matters, we underline it (paraphrase).", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)" }, { "id": "p-311", "kind": "fact", "text": "BOS:311 is the City's service request line, linked from the menu, homepage and footer.", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "id": "p-tasks", "kind": "fact", "text": "The homepage opens with a daily status row (City Hall hours, trash, street cleaning, parking meters, tow lot) under the date.", "prov": "observed", "source": "https://www.boston.gov/ (2026-10-30)" }, { "id": "p-wordlist", "kind": "fact", "text": "The writing guide carries a plain-English word list (instead of / consider using).", "prov": "published", "source": "https://www.boston.gov/departments/boston-digital-service/city-boston-writing-guide (Word list)" }, { "id": "p-lang", "kind": "fact", "text": "The guide names replacement typefaces for Arabic, Chinese and Vietnamese; the site header switches language.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Typography)" }, { "id": "p-fleet", "kind": "fact", "text": "Fleet, the City's pattern library, is open source and powers much of Boston.gov and the 311 portal.", "prov": "published", "source": "https://patterns.boston.gov/" } ], "claim_boundaries": [ { "text": "The digital seal replaces the official seal on all digital properties; the official seal is for bills and non-digital forms.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Logo and seals)" }, { "text": "Only use photos the City has the rights to.", "prov": "published", "source": "https://www.boston.gov/government/cabinets/innovation-and-technology/brand-guidelines (Photography)" } ] } } } }