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. The logo should primarily be used in Blue 700 / Pantone® 2935, white, or black.
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.
“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. That’s why we caution to never use anything Flo-related (merchandise, presentations shown outside of Progressive walls, billboards, videos, etc.) without explicit permission from the Marketing department first.
Quite simply, utilizing Flo (or her likeness) could result in legal ramifications for you and/or your company. 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.
If you’d like to use Flo, any of her iterations, or any other network character for any reason, 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 very important things for an insurance company! It’s important to rely on our primary palette for brand recognition, consistency, and equity. 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
Blue 700
HEX: #0077B3
RGB: 0, 119, 179
CMYK: 100, 47, 0, 0
PANTONE® 2935 C
White
HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
Steel Blue 900
HEX: #0A3360
RGB: 10, 51, 96
CMYK: 100, 78, 36, 29
PANTONE® 2955 C
Gray 900
HEX: #2D2D2D
RGB: 45, 45, 45
CMYK: 0, 0, 0, 85
PANTONE® Black C
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 and 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 user interface (UI), use grays generally as borders, containers, and rule lines. They can also be used in icons and illustrations. For body copy in print pieces, be sure to use 100% black to avoid dot gain.
Gray 900
HEX: #2D2D2D
RGB: 45, 45, 45
CMYK: 0, 0, 0, 85
PANTONE® Black C
Gray 700
HEX: #707070
RGB: 112, 112, 112
CMYK: 0, 0, 0, 65
PANTONE® Black C
65% tint
Gray 500
HEX: #A6A6A6
RGB: 166, 166, 166
CMYK: 0, 0, 0, 40
PANTONE® Black C
40% tint
Gray 300
HEX: #CCCCCC
RGB: 204, 204, 204
CMYK: 0, 0, 0, 20
PANTONE® Black C
20% tint
Gray 100
HEX: #F8F8F8
RGB: 248, 248, 248
CMYK: 0, 0, 0, 5
PANTONE® Black C
5% tint
Purples
In the context of UI, purples are generally utilized as an indication of help or clarification. Purple is 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
CMYK: 68, 100, 11, 2
PANTONE® 2603
Purple 700
HEX: #BD4EC4
RGB: 189, 78, 196
CMYK: 51, 89, 0, 0
PANTONE® 2592 C
Purple 500
HEX: #C973C9
RGB: 201, 115, 201
CMYK: 31, 64, 0, 0
PANTONE® 2592 C
70% tint
Purple 300
HEX: #E4B9E4
RGB: 228, 185, 228
CMYK: 9, 27, 0, 0
PANTONE® 2592 C
30% tint
Purple 100
HEX: #F5F1F9
RGB: 245, 241, 249
CMYK: 1, 4, 0, 0
PANTONE® 2592 C
5% tint
Blues
Blue is undeniably our brand color. It’s a color of trust. Use the blue palette generously in icons and illustrations. 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
CMYK: 100, 78, 36, 29
PANTONE® 2955 C
Steel Blue 700
HEX: #405E7C
RGB: 64, 94, 124
CMYK: 74, 47, 33, 7
PANTONE® 5405 C
Steel Blue 500
HEX: #91B0BF
RGB: 145, 176, 191
CMYK: 45, 16, 15, 0
PANTONE® 550 C
Steel Blue 300
HEX: #D1E2E5
RGB: 209, 226, 229
CMYK: 13, 3, 4, 0
PANTONE® 550 C
30% tint
Steel Blue 100
HEX: #F4F9FA
RGB: 244, 249, 250
CMYK: 5, 0, 1, 0
PANTONE® 550 C
15% tint
Blue 900
HEX: #2862A4
RGB: 40, 98, 164
CMYK: 100, 65, 37, 21
PANTONE® 3025 C
Blue 700
HEX: #0077B3
RGB: 0, 119, 179
CMYK: 100, 47, 0, 0
PANTONE® 2935 C
Blue 500
HEX: #4EBEE5
RGB: 78, 190, 229
CMYK: 59, 4, 2, 0
PANTONE® 2985 C
Blue 300
HEX: #8FD8F2
RGB: 143, 216, 242
CMYK: 39, 2, 5, 0
PANTONE® 2975 C
Blue 100
HEX: #F3F9FC
RGB: 243, 249, 252
CMYK: 4, 0, 1, 1
PANTONE® 2975 C
10% tint
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
CMYK: 100, 36, 64, 23
PANTONE® 329 C
Green 700
HEX: #08CAA9
RGB: 8, 202, 169
CMYK: 83, 0, 42, 0
PANTONE® 3265 C
Green 500
HEX: #7EE0CA
RGB: 126, 224, 202
CMYK: 50, 0, 25, 0
PANTONE® 3265 C
60% tint
Green 300
HEX: #BDEFE6
RGB: 189, 239, 230
CMYK: 24, 0, 12, 0
PANTONE® 3265 C
30% tint
Green 100
HEX: #EFFBF7
RGB: 239, 251, 247
CMYK: 4, 0, 1, 0
PANTONE® 3265 C
5% tint
Yellows
Use yellows as accent colors primarily in icons and illustrations.
Yellow 900
HEX: #A86800
RGB: 168, 104, 0
CMYK: 32, 51, 100, 13
PANTONE® 132 C
Yellow 700
HEX: #EFAB00
RGB: 239, 171, 0
CMYK: 7, 35, 100, 0
PANTONE® 124 C
Yellow 500
HEX: #FFD039
RGB: 255, 208, 57
CMYK: 1, 18, 67, 0
PANTONE® 134 C
Yellow 300
HEX: #FFE694
RGB: 255, 230, 148
CMYK: 3, 10, 53, 0
PANTONE® 1205 C
Yellow 100
HEX: #FFF8E5
RGB: 255, 248, 229
CMYK: 0, 2, 9, 0
PANTONE® 1205 C
20% tint
Oranges
Use oranges as accent colors primarily in icons and illustrations.
Orange 900
HEX: #C05711
RGB: 192, 87, 17
CMYK: 18, 80, 100, 8
PANTONE® 718 C
Orange 700
HEX: #FF8A39
RGB: 255, 138, 57
CMYK: 4, 64, 100, 0
PANTONE® 716 C
Orange 500
HEX: #FFA452
RGB: 255, 164, 82
CMYK: 0, 54, 94, 0
PANTONE® 715 C
Orange 300
HEX: #FFCC8F
RGB: 255, 204, 143
CMYK: 0, 22, 50, 0
PANTONE® 148 C
Orange 100
HEX: #FEF5ED
RGB: 254, 245, 237
CMYK: 0, 2, 4, 0
PANTONE® 148 C
10% tint
Reds
In the context of UI, reds are generally used to indicate caution, alerts, 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. Before working with iconography, check out our icon best practices.
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. Depending on the use case, these illustrations can range from using our extended color palette to using monochromatic blues.
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 visual and video-first platforms like Progressive Instagram and TikTok.
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.1 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.