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.
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.
Local agent use needs to be approved by the Agent Ads team. Please email
requests to agentads@progressive.com. Unauthorized use
of the Progressive brand or imagery can lead to termination of an agent's producers agreement.
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).
For more than a decade, Flo’s name, face, and perky attitude have become synonymous with Progressive. Appearing in everything from iconic TV spots to social media accounts to helpful AI chatbots and merchandise—Flo’s image, personality, and tone of voice can be used as quick and reliable brand recognition for our company.
However, the way we use Flo and her essence is carefully calculated and considered—which means we don’t use her in every situation or in every business area. That’s why, to use anything Flo-related both externally and internally, you must consult with Progressive’s Marketing department first.
Quite simply, utilizing Flo (or her likeness) could result in legal ramifications. This is extremely important when using photos or videos of Flo. The likeness of the actress and how she can be used is under strict contract. The same goes for using Jamie, Mara, and any of our other network characters.
To learn more about how and when to use Flo, consult that business area’s specific guidelines. For any outstanding questions, please contact Progressive Marketing or brand@progressive.com.
Color
Progressive’s primary color palette is made up of Progressive blue and white. These colors portray stability, reliability, and trust. All of these are 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.
Blue 700
HEX: #0077B3
RGB: 0, 119, 179
White
HEX: #FFFFFF
RGB: 255, 255, 255
Blue 100
HEX: #F3F9FC
RGB: 243, 249, 252
Steel Blue 900
HEX: #0A3360
RGB: 10, 51, 96
Gray 700
HEX: #707070
RGB: 112, 112, 112
Gray 900
HEX: #2D2D2D
RGB: 45, 45, 45
Blue 700
PANTONE® 2935 C
CMYK: 100, 47, 0, 0
White
CMYK: 0, 0, 0, 0
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: #0077B3
RGB: 0, 119, 179
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.
Orange 500
HEX: #FFA452
RGB: 255, 164, 82
Steel Blue 500
HEX: #91B0BF
RGB: 145, 176, 191
Green 500
HEX: #7EE0CA
RGB: 126, 224, 202
Electric Blue
PANTONE® 2995
CMYK: 88, 1, 0, 0
Orange
PANTONE® Goe™ 9-1-5
CMYK: 0, 55, 95, 0
Steel Grey
PANTONE® 5405
CMYK: 70, 30, 12, 42
Light Grey
PANTONE® 5445
CMYK: 12, 0, 0, 21
Deep Blue
PANTONE® #003764
CMYK: 100, 78, 36, 29
For our extended color palette, we wanted to incorporate a unique spectrum filled with fresh, vibrant colors that emulate our brand essence. Looking for innovative ways to define ourselves as a brand, we knew we could take our primary color palette of Progressive blue and white to the next level with modern and muted tones that create a calm, lighthearted feel—evoking feelings of credibility, trust, and openness. We also incorporated a unique spectrum of secondary and tertiary colors that are fresh, vibrant, and speak to the individuality of our users.
Many of these colors do not pass our accessibility standards for text or any other essential elements in a functioning digital experience. So—you guessed it—be sure to check for proper contrast!
Grays
In the context of UI, use grays generally as borders, containers and rule lines. They can also be used in icons and illustrations.
Gray 900
HEX: #2D2D2D
RGB: 45, 45, 45
Gray 700
HEX: #707070
RGB: 112, 112, 112
Gray 500
HEX: #A6A6A6
RGB: 166, 166, 166
Gray 300
HEX: #CCCCCC
RGB: 204, 204, 204
Gray 100
HEX: #F8F8F8
RGB: 248, 248, 248
Purples
In the context of UI, purples are generally utilized as an indication of help or clarifcation. Purples are our primary color in our Loyalty Rewards Program. They can also be utilized in icons and illustrations.
Purple 900
HEX: #86318C
RGB: 134, 49, 140
Purple 700
HEX: #BD4EC4
RGB: 189, 78, 196
Purple 500
HEX: #C973C9
RGB: 201, 115, 201
Purple 300
HEX: #E4B9E4
RGB: 228, 185, 228
Purple 100
HEX: #F5F1F9
RGB: 245, 241, 249
Blues
Blue is undeniably our brand color. It’s a color of trust. In the context of UI, use the blue palette generously for actionable items such as hyperlinks, CTA buttons, hover/focus states, etc.
Steel Blue 900
HEX: #0A3360
RGB: 10, 51, 96
Steel Blue 700
HEX: #405E7C
RGB: 64, 94, 124
Steel Blue 500
HEX: #91B0BF
RGB: 145, 176, 191
Steel Blue 300
HEX: #D1E2E5
RGB: 209, 226, 229
Steel Blue 100
HEX: #F4F9FA
RGB: 244, 249, 250
Blue 900
HEX: #2862A4
RGB: 40, 98, 164
Blue 700
HEX: #0077B3
RGB: 0, 119, 179
Blue 500
HEX: #4EBEE5
RGB: 78, 190, 229
Blue 300
HEX: #8FD8F2
RGB: 143, 216, 242
Blue 100
HEX: #F3F9FC
RGB: 243, 249, 252
Greens
In the context of UI, greens are generally used to indicate success, confirmation, or savings/discounts. They can also be used in icons and illustrations.
Green 900
HEX: #067462
RGB: 6, 116, 98
Green 700
HEX: #08CAA9
RGB: 8, 202, 169
Green 500
HEX: #7EE0CA
RGB: 126, 224, 202
Green 300
HEX: #BDEFE6
RGB: 189, 239, 230
Green 100
HEX: #EFFBF7
RGB: 239, 251, 247
Yellows
Use yellows as accent colors primarily in icons and illustrations.
Yellow 900
HEX: #A86800
RGB: 168, 104, 0
Yellow 700
HEX: #EFAB00
RGB: 239, 171, 0
Yellow 500
HEX: #FFD039
RGB: 255, 208, 57
Yellow 300
HEX: #FFE694
RGB: 255, 230, 148
Yellow 100
HEX: #FFF8E5
RGB: 255, 248, 229
Oranges
Use oranges as accent colors primarily in icons and illustrations.
Orange 900
HEX: #C05711
RGB: 192, 87, 17
Orange 700
HEX: #FF8A39
RGB: 255, 138, 57
Orange 500
HEX: #FFA452
RGB: 255, 164, 82
Orange 300
HEX: #FFCC8F
RGB: 255, 204, 143
Orange 100
HEX: #FEF5ED
RGB: 254, 245, 237
Reds
In the context of UI, reds are generally used to indicate caution, alert, or errors. They can also be utilized in icons and illustrations.
Red 900
HEX: #A11B58
RGB: 161, 27, 88
Red 700
HEX: #D41659
RGB: 212, 22, 89
Red 500
HEX: #FF527B
RGB: 255, 82, 123
Red 300
HEX: #FFCFDE
RGB: 255, 207, 222
Red 100
HEX: #FCEFF2
RGB: 252, 239, 242
Grays
Use grays generally for text, borders, containers and rule lines. They can also be used in icons and illustrations.
PANTONE® Neutral Black C
93% tint
CMYK: 0, 0, 0, 92
PANTONE® Neutral Black C
60% tint
CMYK: 0, 0, 0, 69
PANTONE® Neutral Black C
36% tint
CMYK: 0, 0, 0, 42
PANTONE® Neutral Black C
20% tint
CMYK: 0, 0, 0, 23
PANTONE® Neutral Black C
2% tint
CMYK: 0, 0, 0, 2
Purples
Purple is our primary color in our Loyalty Rewards Program. They can also be utilized in icons and illustrations.
PANTONE® 2603
CMYK: 68, 100, 11, 2
PANTONE® 2592 C
CMYK: 51, 89, 0, 0
PANTONE® 2592 C
70% tint
CMYK: 31, 64, 0, 0
PANTONE® 2592 C
30% tint
CMYK: 9, 27, 0, 0
PANTONE® 2592 C
5% tint
CMYK: 1, 4, 0, 0
Blues
Blue is undeniably our brand color. It’s a color of trust. Use the blue palette generously in icons and illustrations.
PANTONE® 2955 C
CMYK: 100, 78, 36, 29
PANTONE® 5405 C
CMYK: 74, 47, 33, 7
PANTONE® 550 C
CMYK: 45, 16, 15, 0
PANTONE® 550 C
30% tint
CMYK: 13, 3, 4, 0
PANTONE® 550 C
5% tint
CMYK: 2, 0, 0, 0
PANTONE® 3025 C
CMYK: 100, 65, 37, 21
PANTONE® 2935 C
CMYK: 100, 47, 0, 0
PANTONE® 2985 C
CMYK: 59, 4, 2, 0
PANTONE® 2975 C
CMYK: 39, 2, 5, 0
PANTONE® 2975 C
5% tint
CMYK: 3, 0, 0, 0
Greens
Greens are generally used to indicate success, confirmation, or savings/discounts. They can also be utilized in icons and illustrations.
PANTONE® 329 C
CMYK: 100, 36, 64, 23
PANTONE® 3265 C
CMYK: 83, 0, 42, 0
PANTONE® 3265 C
60% tint
CMYK: 50, 0, 25, 0
PANTONE® 3265 C
30% tint
CMYK: 24, 0, 12, 0
PANTONE® 3265 C
5% tint
CMYK: 4, 0, 1, 0
Yellows
Use yellows as accent colors primarily in icons and illustrations.
PANTONE® 132 C
CMYK: 32, 51, 100, 13
PANTONE® 124 C
CMYK: 7, 35, 100, 0
PANTONE® 134 C
CMYK: 1, 18, 67, 0
PANTONE® 1205 C
CMYK: 3, 10, 53, 0
PANTONE® 1205 C
20% tint
CMYK: 0, 2, 9, 0
Oranges
Use oranges as accent colors primarily in icons and illustrations.
PANTONE® 718 C
CMYK: 18, 80, 100, 8
PANTONE® 716 C
CMYK: 4, 64, 100, 0
PANTONE® 715 C
CMYK: 0, 54, 94, 0
PANTONE® 148 C
CMYK: 0, 22, 50, 0
PANTONE® 148 C
10% tint
CMYK: 0, 2, 4, 0
Reds
Reds are generally used to indicate caution, alert, or errors. They can also be utilized in icons and illustrations.
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.
Primary Icons
The primary icons represent our products and services. This is our main set of icons. These icons have a stroke weight of 1px and
are typically between 50-100px or larger.
Secondary Icons
The primary icons represent our products and services. If the product icon is displayed at less than 50 px, these more simplified
icons should be used with a 1px stroke weight.
Utility Icons
Utility icons are typically used at 16px with a stroke weight of 2px. They are often used to indicate an action can be taken or are used to give supporting visual cues to labels/type.
Product Train
This set of products is what we call our product train. It’s used to quickly represent our most popular products. Use them as static
icons in the order pictured below, with the same spacing between products.
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.
Insurance can get complicated really quickly. To help make things feel more approachable, we will
sometimes use illustrations that reflect ease, simplicity, and help tell a story. These illustrations
use our extended color palette.
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.
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.