What we see

You’ve heard it before–first impressions last. That's why our look and feel are so important to us. That means colors. That means communication style. That means staying true to our Core Values on everything from a television commercial to a direct mail piece.


Logo

The Progressive logo and related Progressive product descriptor logos are customized pieces of artwork and cannot be altered in any way. Consistent use of logos is important.

Surround Space

The logo should be surrounded with enough space to ensure its maximum visual recognition. The minimum surround space should equal the height of the logo itself (x = logo height).

Logo Misuse

The appearance of the logo and the style should remain consistent.

Do not repeat the logo in a pattern.

Do not change the logo’s orientation.

Do not use unapproved colors.

Do not outline the logo.

Do not use shadows.

Do not alter the logo's weight or shape.

Do not use the logo in a text block.

Do not violate the logo surround space.

Do not place the logo within shapes.

“P” Logo Mark

The use of the Progressive “P” Logo Mark enhances brand identity; acting as a graphic element to represent Progressive.

The mark should be a subtle, secondary element (a wink to Progressive) and should not be used as a replacement for the full logo. It should only be used in a space clearly identified by the audience as Progressive (i.e., on a Progressive website, within the Superstore, and in a presentation for Progressive).

Color

Primary Palette

Progressive’s primary color palette is made up of Progressive blue and white. These colors portray stability, reliability, and trust—all very important things for an insurance company! It’s important to rely on our primary palette for brand recognition, consistency, and equity.

The digital palette includes contrasting blues and neutral grays, as well. When in the digital space, remember to always double check you’re meeting WCAG AA accessibility standards (or above) by using a minimum contrast checker.

  • Progressive Blue
  • (logo only)
  • HEX: #2d95e5
  • RGB: 45, 149, 229
  • Blue 700
  • HEX: #007CB9
  • RGB: 0, 124, 185
  • White
  • HEX: #ffffff
  • RGB: 255, 255, 255
  • Light Blue
  • HEX: #f3f9fc
  • RGB: 243, 249, 252
  • Deep Blue
  • HEX: #0a3360
  • RGB: 10, 51, 96
  • Medium Grey
  • HEX: #767676
  • RGB: 118, 118, 118
  • Dark Grey
  • HEX: #2d2d2d
  • RGB: 45, 45, 45

Secondary Palette

Progressive’s brand is flexible, meaning we can adjust brand elements when we’re being disarmingly humorous or clear and helpful, and everywhere in between. Our secondary color palette can be tailored based on your intended expression or application.

In the digital space, the secondary palette is designed to accent and enrich our signature colors in things like illustrations or icons. Again, remember to always check for proper contrast.

  • Bright Blue
  • HEX: #007cb9
  • RGB: 0, 124, 185
  • Orange
  • HEX: #ffa452
  • RGB: 255, 164, 82
  • Light Gray
  • HEX: #91b0bf
  • RGB: 145, 176, 191
  • Green
  • HEX: #7ee0ca
  • RGB: 126, 224, 202

A Note About Blues in the Digital Space

Based on accessibility standards, printing nuances, and brand aesthetics, there are distinct color specifications regarding the different blues within our brand color palette.

Progressive Blue ($pgr-blue, HEX: #2D95E5) applies to the Progressive logo ONLY, since it does not meet WCAG Accessibility standards. This color should not be used for any other additional creative beyond the logo (i.e. text links, background colors, buttons, etc.).

Blue 700 ($blue-700, HEX: #0077b3) does meet WCAG Accessibility standards, so all CTA buttons, links, and URLs should use Blue 700. This color can also be used regularly as a primary blue color within our palette.

  • Progressive Blue
  • (logo only)
  • HEX: #2d95e5
  • RGB: 45, 149, 229
  • Blue 700
  • HEX: #007CB9
  • RGB: 0, 124, 185

Type

Our typeface is called 96 Sans, and we’ve created it to be trustworthy, friendly, smart, and easy to read. Above all else, it’s versatile and functional across all platforms.

Iconography

Icons translate our products into bite-sized, visual nuggets. Like everything else, they are an important communication aid and have guidelines to ensure they make the best impact.

Product Icons

The product icons represent the insurance offerings from Progressive. These icons are typically used at 50px and 100px.

If the product icon is being displayed at more than 100 px, these more detailed icons shouldbe used. This set should also be used for print.

Utility Icons

Utility icons are typically used at 16px, with a stroke weight of 1.5px or 1.75px depending on optical balance. They are often used to indicate an action can be taken or are used to give supporting visual cues to labels/type.

Mark of Flo*

The Mark of Flo represents the spirit of our spokesperson in one strong stamp. It drives brand recognition through various communication channels, simply and independently.

*Please consult ninety6 before using.

people sitting in living room

Mark of Flo Logo

people sitting in living room

Mark of Flo — Knockout Version

Photography

Our photography should capture the joys of being ‘in the moment’ and focus on everyday people. They should own white with pops of bold brand colors and the environment should feel authentic and casual.

Digital Channels

Our digital creative gives us the opportunity to be more fluid and dynamic and respond in real time. Our social channels are the face of our brand online, so they need to be strong and consistent. Additionally, they each serve their own purpose—from Flo’s friendly and engaging Facebook presence to the more behind-the-scenes, employee-centric Progressive Instagram. Below we’ve linked to each of our platforms to give you a sense of the unique look, feel, and voice behind each one.

Accessibility

When sites are correctly designed, developed, and edited, users have equal access to information and functionality. From adequate contrast to logical navigation, Progressive is committed to meeting accessibility standards that conform to WCAG 2.0 level AA accessibility. The levels are hierarchical; in order to meet level AA standards, a site must first meet all level A standards, in addition to all level AA standards.

Follow the guidelines below to ensure we’re all-inclusive in our Progressive web experience. Download the PDF for more detailed accessibility protocols.