DESIGN.md inspired by Progressive

---
name: Progressive
tagline: Insurance quoting anchored by blue actions and practical product selection.
spec: webdesignhot/0.2
profile: catalog
source_url: https://www.progressive.com/
quality: auto
published_at: 2026-09-12T05:41:42.512Z
updated_at: 2026-09-12T05:41:42.512Z
categories: [insurance]
tags: [light, corporate, sans, blue]
preview_swatch: ["#ffffff", "#0077b3", "#2d2d2d"]
x-webdesignhot:
  author: webdesignhot
  quality: auto
  featured: false
  published_at: 2026-09-12T05:41:42.512Z
  updated_at: 2026-09-12T05:41:42.512Z
  categories:
    - insurance
  tags:
    - light
    - corporate
    - sans
    - blue
  preview_swatch:
    - "#ffffff"
    - "#0077b3"
    - "#2d2d2d"
  related:
    - lemonade
    - axa
    - oscar-health
  description: 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.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
colors:
  bg: "#ffffff"
  text: "#2d2d2d"
  brand: "#0077b3"
  on-brand: "#ffffff"
  surface: "#f3f9fc"
typography:
  display:
    family: 96 Sans, Arial, sans-serif
    weights:
      - 300
  body:
    family: 96 Sans, Arial, sans-serif
    weights:
      - 400
      - 600
  scale:
    h1:
      fontSize: 24
      fontWeight: 300
      fontFamily: 96 Sans, Arial, sans-serif
    body:
      fontSize: 16
      fontWeight: 400
      fontFamily: 96 Sans, Arial, sans-serif
radius:
  action: 4
components:
  button-primary:
    base:
      bg: brand
      text: on-brand
      radius: 4
---

Scope: public homepage sampled at 1440px and 390px on 2026-09-12. Font names are observed CSS declarations, not redistributed font assets. Body size outside an explicitly measured role is a 16px implementation baseline; focus, validation, timing, and alternate themes below are recommendations, not audited source states. No transactional flow was submitted.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

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.

## 4. Component Stylings

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.

## 5. Layout Principles

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.

## 6. Shapes & Radius Scale

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.

## 7. Depth & Elevation

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.

## 8. Interaction & Motion

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.

## 9. Accessibility & A11y

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.

## 10. Responsive Behavior

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.

## 11. Content & Voice

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.

## 12. Dark Mode & Theming

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.

## 13. Lineage & Influences

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.

## 14. 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.

## 15. Agent Prompt Guide

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.