Progressive Design System

Overview

Progressive's marketing site does something counterintuitive for an insurance brand. Whispered authority: the hero headline — "Better insurance starts here" — is rendered in 96 Sans at weight 300 and just 24px, white text over a full-bleed photography of a smiling family. This is the system's quietest typographic moment, chosen for the most prominent position on the page. Where GEICO answers with weight 700 and a navy CTA, and Lemonade opens with a 55px serif challenge, Progressive whispers. The restraint is deliberate: an established company since 1937 does not need to earn attention through typographic force.

The page's dominant interaction surface is the quote form, not a brand CTA. The above-fold layout places a white quote-entry panel directly adjacent to the photography band, with product-type tabs (Auto, Home, Renters, Condo, Motorcycle, Life, Boat, Commercial) and a ZIP code input as the first user interface. The "Get a quote" submit action is the first primary button — not a marketing CTA but a functional entry point. Unlike most insurance or fintech marketing sites that route users through a CTA to a separate flow, Progressive embeds the form directly in the hero as its primary conversion surface.

The color system is sparse. Near-charcoal {colors.ink} (#2d2d2d, frequency 467) dominates as the text and border tone — in the same near-dark register as GEICO's ink but without the slight warm cast that GEICO's value carries. The teal-blue {colors.primary} (#0077b3) handles all interactive surfaces — links in the "learn more" blocks, the quote-form gradient band, the photo-card section CTAs. The extracted nav links render in browser-default blue (#0000ee, frequency 52), which is either an intentional accessibility choice or an artifact of the site's sparse CSS variable structure — only 3 CSS custom properties are declared, all of them string labels rather than color values.

Key Characteristics:

• 96 Sans at weight 300 runs every display and hero heading — the lightest display weight among all insurance brands in the directory.
• Photography-first hero with an embedded quote form; the brand's conversion surface is in the hero, not behind a CTA.
• Teal-blue {colors.primary} (#0077b3, frequency 22) is the sole chromatic interactive accent; all other visible color is structural grey or near-charcoal.
• Near-charcoal {colors.ink} (#2d2d2d, frequency 467) is the dominant text color — 234 text occurrences, 233 border occurrences.
• Near-zero CSS variable layer — only 3 custom properties declared; colors are hard-coded rather than token-referenced.
• 8px maximum card radius; the system does not use mid-range or pill radii for card surfaces.
• Browser-default blue (#0000ee, 52 occurrences) used for nav links — either an intentional accessibility decision or a consequence of sparse CSS styling.

Colors

Brand

• Primary Teal ({colors.primary} — #0077b3): frequency 22. Used as text (9), background (1), border (10), gradient (2). Progressive's sole chromatic interactive color — carried by quote-section link text, the hero gradient band, and section CTAs ("Learn more about our insurance products").

Structural

• Ink ({colors.ink} — #2d2d2d): frequency 467. Used as text (234), border (233). The dominant text and hairline tone — a near-charcoal that sits darker than GEICO's ink but without a warm cast.
• Ink Dark ({colors.ink-dark} — #000000): frequency 116. Used as text (59), border (57). Pure black appearing on headline elements and form inputs. Not a shadow; a harder text tone on specific high-contrast surfaces.
• Ink Muted ({colors.ink-muted} — #707070): frequency 46. Used as text (23), border (23). Mid-grey for secondary text labels and footnote rows.
• Canvas ({colors.canvas} — #ffffff): frequency 13. Background fills on the quote panel, below-fold sections, and the footer. The page floor for all non-photography content zones.
• Link Default ({colors.link-default} — #0000ee): frequency 52. Used as text (28), border (24). Browser-default hyperlink blue, used for nav links and in-body anchor text. Not wired to a CSS variable; this is the browser's default link color, indicating minimal link-color override in the nav.

Hairline

• Hairline ({colors.hairline} — #d1e2e5): frequency 2 as border. Light steel-blue hairline used for card borders and form input outlines in the quote panel.
• Hairline Dark ({colors.hairline-dark} — #91b0bf): frequency 4 as border. A slightly darker steel-blue for more visible form input outlines.

Accent

• Surface Teal ({colors.surface-teal} — #4ebee5): frequency 1 as shadow. A lighter sky-teal appearing as a shadow element on one component — likely the progress indicator or the hero gradient edge.
• Shadow ({colors.shadow} — #cccccc): frequency 1 as shadow. The only grey shadow in the system, used on a single card elevation.

Typography

Font Family

Progressive runs 96 Sans — a custom proprietary typeface — across every surface, with a narrower variant 96 Sans Condensed appearing for navigation tab labels and condensed UI contexts. Fallbacks walk to Arial, sans-serif. There is no serif tier and no mono voice. The family name "96" references Progressive's founding year combined with the design direction; it is not publicly licensed.

Hierarchy

Principles

Weight 300 at 24–36px is the system's display tier — the display ladder runs from whisper (24px/300) to measured statement (36px/300), never reaching for bold. The bold tier (weight 700) is reserved for stats ("Over $900+"), nav labels, section category tabs, and UI control labels — surfaces where the user needs to scan quickly, not where the brand is making an impression. This is the inverse of GEICO's weight discipline: GEICO uses 700 for everything important; Progressive uses 300 for everything important and 700 for everything functional.

The condensed variant (96 Sans Condensed) handles 9 occurrences at 18px/700, concentrated in the product-navigation tab set at the top of the quote form and in the photo-card sub-section links below the fold.

Substitutes

96 Sans is not publicly available. Inter at weight 300 is the closest open-source substitute for display and hero headings. For the condensed variant, Barlow Condensed or Public Sans Condensed transfer the narrower proportions at 18px/700. The uppercase tracked labels (1.25px) pair with any geometric sans at weight 700.

Layout

Spacing System

• Base unit: 18px (18 occurrences) — the dominant single-value padding token.
• Tokens: {spacing.xs} 10px · {spacing.sm} 12px · {spacing.md} 14px · {spacing.base} 16px · {spacing.lg} 18px · {spacing.xl} 20px · {spacing.2xl} 26px · {spacing.3xl} 40px.
• Hero vertical padding: 50px top, 20px bottom — the hero band uses more top padding than bottom to give breathing room above the headline.
• Quote panel: 20px internal padding. The form's product-type tabs sit at 0px padding (flush to the panel top).
• Nav: 18px top/bottom padding on nav links, 20px horizontal — creating tall click targets for the product tab strip.

Grid & Container

• Hero layout: two-column split — photography + headline left (60%), white quote-form panel right (40%).
• Stats strip: 3-column centered bar with teal-bordered left edge, displaying "Over $900+" / "43 million+ customers" / "24/7/365 support."
• Product information section: 5-column grid linking to Auto, Home, Renters, Condo, and Commercial, each with a photo-card, title, description, and "Learn more" teal link.
• "Why we're Progressive" section: 3-photo editorial grid with heading and sub-copy.
• Footer: dense multi-column link structure, 4–5 columns wide, with "Are you an agent?" secondary link strip below.

Rhythm

The page alternates between photography-density (hero band, product-card grid, editorial grid) and text-density (stats strip, information accordion panels, footer). Unlike Cloudflare's dramatic alternation between edge-to-edge product and constrained editorial, Progressive maintains a more even density throughout — the page never fully goes quiet, and there is no section with generous whitespace comparable to Lemonade's illustration band or GEICO's stats section.

Elevation

The system has minimal elevation. The extracted shadow colors are a single light grey (#cccccc at 1 occurrence) and a light teal (#4ebee5 at 1 occurrence, possibly a gradient edge). Card surfaces lift from the white canvas via 1px hairline borders at {colors.hairline} (#d1e2e5) rather than box shadows. The quote-entry panel floats over the hero photography via background-color contrast (white panel on dark photography) rather than a shadow layer.

• Flat: hero text, stats strip, editorial grid, footer — essentially the entire page.
• Hairline card borders: {colors.hairline} (#d1e2e5) and {colors.hairline-dark} (#91b0bf) on the quote panel and information cards.
• No tinted shadow: the system does not use tinted elevation in any captured surface.

Shapes

The radius scale is minimal and conservative:

• {rounded.none} 0px — hero text elements, form inputs, section headings, footer.
• {rounded.sm} 2.5px — smallest surface element; appears once in the extracted radii.
• {rounded.md} 5px (2 occurrences) — small secondary surfaces.
• {rounded.lg} 8px (5 occurrences, dominant card radius) — the quote panel, information cards, the stat strip container.
• {rounded.xl} 20px (2 occurrences) — CTA button radius; a rounded-but-not-pill treatment.
• {rounded.full} 9999px — not explicitly captured but used for circular avatar images in the editorial grid.

Unlike Lemonade's full-pill CTAs at 50px or Cloudflare's binary small-step-plus-pill system, Progressive's primary buttons use a 20px radius — visibly rounded but not circular, signaling a functional form-like surface rather than a consumer app action.

Components

hero-band — Full-bleed dark photography, white headline text at {typography.heading-lg} (24px/300), 50×0×20px vertical padding. The photography subject matter — families, homes — is the brand statement.

hero-heading — White canvas text at {typography.display-md} (36px/300) used for the primary section headline below the hero photography band ("A leading insurance company, trusted since 1937").

hero-subheading — Same 24px/300 weight in white — used for the above-fold headline ("Better insurance starts here") floating over the photography.

quote-panel — White canvas fill, {rounded.lg} 8px radius, 20px padding, {colors.hairline} border. Houses the product-type tab strip, the ZIP code input, and the submit CTA. The page's primary conversion surface.

button-primary — Teal {colors.primary} fill, white text at {typography.label-md}, 20px radius, 12×20px padding, 44px height. "Get a quote" in the form panel; "Learn more" inline links in the product grid.

button-secondary — White canvas fill, teal {colors.primary} text and 1px teal border, 20px radius, 10×18px padding, 40px height. Secondary actions like "See all coverage" in the product section.

top-nav — White canvas, near-black text at {typography.body-sm} (12px/400), 56px height, 18×10px padding. Progressive Flo logo left, product links center, "Log in" / "1-800" right.

nav-link — Transparent fill, browser-default blue {colors.link-default} (#0000ee) text at {typography.body-sm}, 20×10px padding. The nav link color is the browser's default, not a styled token.

section-heading — Ink charcoal at {typography.display-md} (36px/300). Below-fold section headings in near-charcoal on white.

body-paragraph — Ink charcoal at {typography.body-sm} (12px/400, the dominant body size by count — 46 occurrences). The main body copy runs at 12px — smaller than GEICO (16px) or Lemonade (16px).

stat-number — Display-lg type (48px/700) in {colors.ink} on transparent background. The stats strip numbers ("Over $900+ / 43 million+ / 24/7/365").

card — White canvas, 1px {colors.hairline} border, {rounded.lg} 8px radius, 18px padding. Information section cards for the product grid.

text-input — White canvas, near-black text at {typography.body-lg}, no radius (0px — square corners), 35px height, left-padded 33.6px for icon clearance. The ZIP code field in the quote panel.

footer — White canvas, muted ink {colors.ink-muted} text at {typography.body-sm}, multi-column link grid, 26px top/bottom padding.

Do's and Don'ts

Do lead with the quote form in the hero. Progressive's above-fold layout embeds the form directly rather than routing through a CTA; this form-forward approach is the system's clearest distinction from other insurance marketing patterns.

Do keep display and hero headings at weight 300. The 36px/weight-300 section heading is the system's calibrated expression of institutional authority — bumping to weight 400 or 700 immediately reads as a different brand register and undermines the restraint signal.

Do use the {colors.primary} teal (#0077b3) exclusively for interactive surfaces — links, form submit buttons, gradient accents. The system has only this one chromatic non-structural color, and diluting it across non-interactive elements (section headings, card titles) would collapse the visual distinction between action and information.

Do run body copy at 12px/400 ({typography.body-sm}). The dominant body text size extracted from the page is 12px — 46 occurrences — not 16px. Using 16px body text would shift the information density and make the page read as more editorial than utilitarian.

Don't use browser-default blue (#0000ee) for CTA buttons or primary actions. The {colors.link-default} value appears in nav links and in-body anchors as an apparent residual of minimal link styling — it signals a hyperlink role. CTAs must use {colors.primary} (#0077b3) to distinguish brand-owned interactive surfaces from generic hyperlinks.

Don't apply the 20px button radius ({rounded.xl}) to card surfaces. The system uses 8px card radius and 20px button radius as two distinct signals: cards feel like informational containers, buttons feel like rounded actions. Applying 20px to a card would blur that distinction.

Don't replace the photography hero with a brand-color fill. Progressive's hero is a photo band precisely because the brand identity does not rely on a distinctive chromatic move (the way Cloudflare's orange or Lemonade's magenta does). Replacing the photography with a teal fill would look like a different brand entirely — and would also lose the form-forward layout, which requires the visual anchor of the photography to make the white form panel readable against it.

Don't drop the 96 Sans Condensed variant for the product-navigation tabs. The condensed variant at 18px/700 provides the visual density needed to fit 8 product types (Auto, Home, Renters, Condo, Motorcycle, Life, Boat, Commercial) in a horizontal tab strip without wrapping. Substituting non-condensed type at the same size breaks the tab layout.

Known Gaps

• Primary button extraction: the extractor did not capture a primary button element (primaryButton: null). The button styles are reconstructed from the typography extraction and the {colors.primary} teal; the actual button component may have different padding or height values than those documented here.
• Hero photography: the specific photography, subject matter, and image treatment are outside the scope of a design token spec. The brief here describes only the overlay text and form panel styles, not the photography direction.
• No CSS variable layer: Progressive exposes only 3 CSS custom properties — all string labels. Every color is hard-coded. This means there is no token variable path to resolve in production code; developers must reference hex values directly rather than using var() references.
• Hover and focus states: the extraction captures resting states only. Focus ring color, button hover tint, nav link hover background, and form input focus border are not documented.
• Mobile layout: the quote-form panel likely stacks to a full-width single column on mobile, collapsing the 60/40 hero split. This responsive behavior is not captured from the desktop extraction.
• Flo mascot and campaign assets: the Progressive Flo character and related campaign-specific illustration or photography are brand assets not captured as design tokens.