---
version: alpha
name: "Progressive"
description: "Insurance quoting anchored by blue actions and practical product selection."
colors:
  bg: "#ffffff"
  text: "#2d2d2d"
  brand: "#0077b3"
  on-brand: "#ffffff"
  surface: "#f3f9fc"
typography:
  display:
    fontFamily: "96 Sans"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "96 Sans"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

The homepage puts the insurance task in front of the campaign. A family photograph establishes context, but the overlapping white quote tool owns the next action. Blue is functional rather than decorative; product icons and compact labels make the choices scannable.

## Colors

The observed action blue is #0077b3, primary text is #2d2d2d, and the pale supporting surface is #f3f9fc. White separates navigation and the quote form from photography. Do not sample the photograph as a palette or use the translucent white overlay as a universal surface.

## Typography

96 Sans is used for navigation, labels, and headings. The semantic welcome H1 measures 24px at desktop and 14px at mobile; it is not the large campaign slogan. The quote heading is 18px bold, while the later editorial heading is 36px light. Keep the task heading stronger than the introductory label.

## Layout

Desktop separates the quote form from alternative products within one shared tool. Mobile stacks the form, action, explanatory link, and product choices below the photograph. Maintain reading order and keep the ZIP field directly before submission.

At 390px the hero becomes a compact family crop and product choices become full-width rows. The quote action fills its column. Preserve this task-first stack rather than squeezing the desktop two-column arrangement into a phone.

## Elevation & Depth

The white tool overlaps photography and gains separation through opacity and its boundary. Subsequent content returns to flat white bands. Avoid stacking more floating panels inside the quote tool.

## Shapes

The large quote tool has a noticeably rounded upper edge, while form controls use much smaller corners. The 4px primary-action corner is the compact reference; do not copy the container curve onto every field or product row.

## Components

The quote module pairs a persistent location label with a ZIP input and a solid blue submit action. Alternative insurance products are outlined icon-and-label controls. Preserve a distinct selected state and inline validation; their precise focus, error, and disabled styles were not captured.

Use immediate product-selection feedback and preserve the ZIP value when switching product type. This is recommended behavior, not an audited form submission: no quotes were requested. Announce validation without shifting the entire form.

Keep visible field labels and text alternatives for the product illustrations. A blue outline alone must not identify the selected insurance product. Ensure the quote action remains reachable with keyboard navigation and that errors identify the affected field.

Use direct insurance terminology and explain what the quote requires. Savings, coverage, and price statements need current qualifications; do not reuse the observed campaign claims as evergreen product facts.

The audited interface is light with a photographic hero. No alternate dark mode was verified. If a host product needs one, redesign form contrast and image overlays separately rather than invert the source page.

This extraction covers the public US Progressive homepage, not the authenticated policy portal or quote flow. Its distinctive relationship is consumer photography above a dense, practical insurance selector.

## Do's and Don'ts

Keep the quote task dominant, retain persistent labels, and separate product choices from submission. Avoid recreating the campaign as a decorative landing page without a usable form, or treating the small welcome H1 as the entire type scale.

Build a light insurance selector with a photographic introduction, blue quote action, labeled location input, and outlined product rows. Review the mobile stack and keyboard validation before polishing the photographic overlap.