BPS Brand Kit

Welcome to our Brand Kit—your go-to resource for understanding and applying our brand identity. It provides clear guidelines on our logo usage, typography, color palette, imagery, and tone of voice to ensure consistency across all touchpoints. Likewise, BPS brand is designed to meet the international standard Web Content Accessibility Guidelines (WCAG)2.2. By following this kit, you'll help maintain the integrity of our brand and create a unified experience that resonates with our audience.

LOGO

In Summer 2024, the BPS logo underwent a refresh to align with modern design trends. This update features a rejuvenated look, with the text font replaced by a contemporary choice, such as the MONTSERRAT font.

The monogram remains unchanged, preserving the core identity of BPS while ensuring continuity and fostering audience familiarity with the refreshed design.

Our BPS logo monogram—a jumping child—symbolizes energy and vitality, reflecting how we view our students across the district. Boston, as the birthplace of public education, inspires transformative work aimed at empowerment and fostering hope.

To accommodate various formats, three logo variations have been designed for versatile use.

Rectangle

Acronym

Inline

Any use of the Boston Public Schools logo on promotional materials not created and/or approved by the Boston Public Schools is not allowed without permission from the Boston Public Schools Communications Office.

Color Palette

OUR COLORS DEFINE OUR BRAND. THEY ARE BRIGHT, BOLD AND CONFIDENT. AS ARE WE.

The BPS main color palette consists of a CMYK is used when printing while RGB and HEX codes are to be used digitally.

Main Colors

Primary Blue

HEX: #1d3557
RGB: 29, 53, 183
HSB: 214, 66, 34
CMYK: 96, 81, 40, 33

Secondary Blue

HEX: #286eb7
RGB: 40, 110, 183
HSB: 211, 78, 72
CMYK: 78, 39, 0, 28

Red

HEX: #dd1e1e
RGB: 221, 30, 30
HSB: 0, 86, 86
CMYK: 7, 99, 100, 1

Yellow

HEX: #e99a4f
RGB: 233, 154, 79
HSB: 28, 65, 91
CMYK: 6, 45, 79, 0

Accent Colors

Green

HEX: #a5cc8b
RGB: 165, 204, 139
HSB: 96, 31, 80
CMYK: 38, 3, 59, 0

Purple

HEX: #6c648b
RGB: 108, 100, 139
HSB: 251, 27, 54
CMYK: 64, 64, 25, 5

Med-Gray

HEX: #c1c1c6
RGB: 193, 193, 198
HSB: 240, 2, 77
CMYK: 24, 19, 16, 0

Light-Gray

HEX: #f2f2f2
RGB: 242, 242, 242
HSB: 240, 0, 94
CMYK: 4, 2, 2, 0

Background Colors Only

#E6E9ED

#F5F9F2

#E7EFF7

#EFEEF2

#FBE6E6

#F8F8F9

#FDF4EC

#FEFEFE

Contrast Ratio & Accessibility

BPS brand is designed to meet the international standard Web Content Accessibility Guidelines (WCAG)2.2. Its documents explain how to make web content more accessible to people with limited vision.

Criteria Levels
Our criteria at BPS

Criteria Levels

Text Sizes and Levels

AA Level NORMAL body text should be at least 12 points (pt), or around 16 pixels (px). Large text should be the same size but bolder or larger size.
AAA Level NORMAL is defined as 14 pt (typically 18.66px) and bold or larger. LARGE text is defined as 18 pt (typically 24px) or larger.

How the contrast ratio works

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Our criteria at BPS

BPS digital communications should meet the WCAG Level AAA criteria - when it’s possible - and/or minimum the WCAG Level AA criteria by applying a minimum contrast ratio of 4:5:1. Find below the allowed color combinations using BPS color palette and the text sizes associated with.

Table #1 - WHITE TEXT over Colored Background and/or vice versa

Table #2 - BLACK TEXT over Colored Background and/or vice versa

Table #3 - BLUE (#1D3557) TEXT over Colored Background and/or vice versa

Table #4 - Colored TEXT over Colored Background and/or vice versa

TYPOGRAPHY

Our typography specifications are being updated to align with modern visual and user-friendly design trends while ensuring compliance with ADA requirements.

Typeface for Print

Our main typefaces are Avenir and Avenir Next. These font families come in a wide range of weights for all purposes. Typefaces like Chalkduster and Bradley Hand are secondary or decorative fonts to be used sparingly. Headlines should be prominent and limited to a small number of words. Body copy should be large enough to be legible with sufficient white space. Typestyles for content should be applied throughout the layout.

Headline Font

Body Font

Typeface for Digital

We use Google web fonts for online typefaces. The advantage of using a web font from a delivery service like Google Fonts increases the percentage of success when the content is displayed across multiple types of devices and browsers. Montserrat (for headers) and Poppins (for body text) are font families that also come with a wide range of weights.

Headline Font

Aa	Montserrat A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ( ! @ # $ % ^ & * )

This is FREE and available as a Montserrat - Google Font

Body Font

Aa	Poppins A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ( ! @ # $ % ^ & * )

This is FREE and available as Poppins - Google Font