What is Progressive's primary brand color?

Progressive's primary interactive color is teal-blue #0077b3, appearing 22 times in the captured marketing page across background (1), text (9), border (10), and gradient (2) roles. It carries quote-entry section links, the section divider color strip, and appears inside the gradient treatments that frame the hero quote form. Progressive is unusual in exposing almost no CSS custom properties — only 3 are declared, all string labels. Every color on the page is hard-coded rather than referencing a token layer, which means there is no single canonical CSS variable name to cite for the brand color.

What typeface does Progressive use, and what should I use as a substitute?

Progressive runs 96 Sans — a custom proprietary typeface — across every surface, with a condensed variant (96 Sans Condensed) for navigation tabs and certain label contexts. The most distinctive choice is display weight: hero and section headlines sit at weight 300, making Progressive the lightest-display-weight insurance brand in the directory (GEICO runs 700, Lemonade runs 400 on its serif hero). Body text runs weight 400 at 12–16px; nav links and UI labels run weight 700 at smaller sizes. The closest open-source substitute is Inter Thin / Light (weight 300) for display headings; for the condensed nav variant, Barlow Condensed or Public Sans Condensed are reasonable approximates.

What is Progressive's above-fold hero layout?

Progressive's hero is a full-bleed dark navy photograph of a smiling family, with white 96 Sans text floating at top-left ('Better insurance starts here') and a white quote-form panel occupying the right column. The quote form contains product selector tabs (Auto, Home, Renters, etc.), a ZIP code input, and a 'Get a quote' submit button. The hero is divided into a 60/40 or 50/50 split between the photography and the form panel, with the statistics strip ('Over $900+ average savings / 43 million+ customers / 24/7/365 support') sitting immediately below as a separate white band. This form-forward layout is uncommon — most insurance marketing sites place the form on a secondary step after a CTA click.

Why does Progressive use weight 300 for display headings?

Progressive's choice of weight 300 for its 36px section headlines and 24px hero h1 reads as institutional restraint — the signal of an established incumbent that does not need to shout. Where challenger brands (Lemonade at 55px serif/400, GEICO at 44px/700) use typographic size and weight to establish urgency, Progressive uses low weight to project confidence. This is not a universal insurance pattern; it is specific to Progressive's positioning as a 1937-founded incumbent addressing a trust-sensitive, price-sensitive purchase. The 36px/weight-300 section heading ('A leading insurance company, trusted since 1937') is extracted from the hero's subheading component and is the system's loudest typographic moment.

Can I use this DESIGN.md to build an insurance or fintech marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Progressive's specific moves: photography hero with embedded form, weight-300 display in a geometric sans at 24–36px, teal-blue as the only interactive accent, near-charcoal ink (#2d2d2d), minimal 8px card rounding, and a stats strip anchored on large weight-700 numbers. Because Progressive exposes almost no CSS custom properties, the token references in this file are reconstructed from computed values rather than declared variable names. For a production implementation, the 96 Sans font would need to be licensed; Inter at weight 300 is the closest freely-available substitute.

Progressive Design System

Progressive's marketing design system as a DESIGN.md file.

About Progressive DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source progressive.com

Banking & Payments

Progressive's marketing site is defined by what it does not do. There are no brand-color fills dominating the hero — the above-fold band is photography of a family, overlaid with a white headline ("Better insurance starts here") in 96 Sans at weight 300. The quote form sits directly below in a white panel; the user's first click is into a ZIP code field, not a CTA button. Where GEICO leads with a mascot and navy authority, Lemonade leads with a serif challenge, and Cloudflare gives the entire hero canvas to its brand orange, Progressive gives the hero to a photograph and a web form. The philosophy is utilitarian: the product is the CTA, and the CTA is the form.

The DESIGN.md file packages the system into 10 color tokens anchored on a near-charcoal ink (#2d2d2d at 467 occurrences), a teal-blue brand action color (#0077b3), and a pure white canvas. Typography runs 96 Sans — a custom proprietary family — with a condensed variant for nav and label contexts. Display headlines sit at weight 300, an unusually restrained choice: 36px/300 for the main section heading, 24px/300 for the hero h1. Body text drops to weight 400 at 12–16px. Twelve component definitions cover the photography hero band, the white quote-entry panel, the section info-card grid, the stats strip, and the footer link structure.

Feed this spec to Claude or Cursor and it reproduces Progressive's specific moves: photography hero with form-forward layout, weight-300 display in a custom sans at modest sizes, teal-blue as the sole interactive accent, minimal rounding (8px maximum on most surfaces), and near-charcoal ink rather than near-black. The system is not designed to impress on a first glance — it is designed to reduce the distance between arrival and quote submission. The typography restraint at weight 300 reads as institutional confidence rather than brand exuberance, which is appropriate for a 1937-founded incumbent addressing a trust-sensitive purchase category.

What makes it distinct

Weight 300 as authority signal96 Sans at weight 300 runs hero headlines and display text; the lightest display weight of any insurance brand in the directory
Photography-first herothe above-fold band is a full-bleed dark navy photograph of a smiling family; copy and a quote form float over it in white
Minimal CSS variable layeronly 3 CSS custom properties are declared (all are string labels for UI elements); every color is hard-coded rather than token-referenced
Teal-blue #0077b3 as the sole chromatic CTAappears 22 times across background, text, border, and gradient; carries quote entry links and section divider accents
96 Sans Condensed for nav and UI labelsa narrower variant of the custom typeface handles the product-navigation tabs and condensed UI labels at 18px/700

Live at progressive.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

progressive.com

Explore Progressive

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Progressive design system FAQ

Common questions about Progressive's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Progressive — official site

Progressive's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.