--- version: alpha name: "Progressive" website: "https://www.progressive.com" description: >- A major insurance brand that runs a proprietary custom typeface (96 Sans and 96 Sans Condensed) at an unusually light weight 300 for all display and hero headings — inverting the category norm where incumbents like GEICO run weight 700 across every tier. The above-fold hero is a dark navy photograph band with white text, inverting to white below; a teal-blue (#0077b3) handles CTAs and interactive chrome; and the system exposes almost no CSS variables, relying on hard-coded values rather than a structured token layer. The result is a direct, utilitarian marketing surface that prioritizes quote-form access over brand spectacle. seo: title: "Progressive Design System for React — teal #0077b3, 96 Sans weight 300, 12 components" metaDescription: "Progressive's marketing design system as a DESIGN.md file. Teal-blue #0077b3 brand color, 96 Sans at weight 300 display, 10 color tokens, 12 components. For React, Next.js, and AI tools." highlights: - "Weight 300 as authority signal — 96 Sans at weight 300 runs hero headlines and display text; the lightest display weight of any insurance brand in the directory" - "Photography-first hero — the 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 layer — only 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 CTA — appears 22 times across background, text, border, and gradient; carries quote entry links and section divider accents" - "96 Sans Condensed for nav and UI labels — a narrower variant of the custom typeface handles the product-navigation tabs and condensed UI labels at 18px/700" tags: - "Banking & Payments" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.progressive.com" title: "Progressive — official site" description: "Progressive's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Progressive's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Progressive use, and what should I use as a substitute?" answer: "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." - id: "hero-layout" title: "What is Progressive's above-fold hero layout?" answer: "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." - id: "weight-300-display" title: "Why does Progressive use weight 300 for display headings?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build an insurance or fintech marketing site?" answer: "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." mockups: - "marketing-hero" - "checkout-flow" colors: ink: "#2d2d2d" ink-dark: "#000000" ink-muted: "#707070" primary: "#0077b3" canvas: "#ffffff" hairline: "#d1e2e5" hairline-dark: "#91b0bf" surface-teal: "#4ebee5" shadow: "#cccccc" link-default: "#0000ee" typography: display-lg: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 56px letterSpacing: 0 display-md: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 36px fontWeight: 300 lineHeight: 48px letterSpacing: 0 display-sm: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 48px letterSpacing: 0 heading-lg: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 32px letterSpacing: 0 heading-md: fontFamily: "\"96 Sans Condensed\", \"96 Sans\", Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 25.2px letterSpacing: 0 heading-sm: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 body-sm: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 21px letterSpacing: 0 label-upper: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 21px letterSpacing: "1.25px" label-md: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 24.5px letterSpacing: 0 caption: fontFamily: "\"96 Sans\", Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 16.9px letterSpacing: 0 rounded: none: "0px" sm: "2.5px" md: "5px" lg: "8px" xl: "20px" full: "9999px" spacing: xs: "10px" sm: "12px" md: "14px" base: "16px" lg: "18px" xl: "20px" 2xl: "26px" 3xl: "40px" components: hero-band: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.heading-lg}" rounded: "{rounded.none}" padding: "50px 0px 20px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-md}" padding: "0px" hero-subheading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.heading-lg}" padding: "0px" quote-panel: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: "20px" borderColor: "{colors.hairline}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.label-md}" rounded: "{rounded.xl}" padding: "12px 20px" height: "44px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.label-md}" rounded: "{rounded.xl}" padding: "10px 18px" height: "40px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "18px 10px" height: "56px" nav-link: backgroundColor: "transparent" textColor: "{colors.link-default}" typography: "{typography.body-sm}" padding: "20px 10px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" stat-number: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "18px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-dark}" typography: "{typography.body-lg}" rounded: "{rounded.none}" padding: "0px 0px 0px 33.6px" height: "35px" borderColor: "{colors.hairline-dark}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "26px 0px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 48px | 700 | 56px | Large stat numbers ("Over $900+" savings figure) | | `{typography.display-md}` | 36px | 300 | 48px | Section h2 ("A leading insurance company, trusted since 1937") | | `{typography.display-sm}` | 36px | 700 | 48px | Bold stat emphasis within the stats strip | | `{typography.heading-lg}` | 24px | 300 | 32px | Hero h1 ("Better insurance starts here") | | `{typography.heading-md}` | 18px | 700 | 25.2px | 96 Sans Condensed — nav product tabs and section sub-headers | | `{typography.heading-sm}` | 18px | 700 | 24px | Section sub-heads ("Why we're Progressive") | | `{typography.body-lg}` | 16px | 400 | 28px | Paragraph body and form field text | | `{typography.body-md}` | 14px | 400 | 21px | Card body copy, secondary descriptions | | `{typography.body-sm}` | 12px | 400 | 21px | Dominant nav and footer link size; 46 occurrences | | `{typography.label-upper}` | 12px | 700 | 21px | Uppercase tracked labels (1.25px tracking) — section category markers | | `{typography.label-md}` | 14px | 700 | 24.5px | Bold link labels, CTA text | | `{typography.caption}` | 13px | 400 | 16.9px | Small metadata, caption rows | ### 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.