--- version: alpha name: "GEICO" website: "https://www.geico.com" description: >- The insurance brand that pairs its iconic gecko mascot with a disciplined two-tone navy system — a deep primary navy (#004b9b wired as --primary-blue) carries every CTA and primary action, a lighter interaction blue (#005ccc) handles chat and interactive chrome, and the GEICO Roobert custom sans runs every surface at weight 700 for display and weight 400 for body, producing a high-contrast trust-forward marketing page anchored on a pure white canvas with a warm grey footer band. seo: title: "GEICO Design System for React — navy #004b9b, GEICO Roobert, 14 components" metaDescription: "GEICO's marketing design system as a DESIGN.md file. Deep navy #004b9b primary, GEICO Roobert at weight 700 display, 14 color tokens, 15 components. For React, Next.js, and AI tools." highlights: - "Two-tone navy discipline — #004b9b (--primary-blue) carries CTAs; #005ccc handles interactive chrome and chat; neither bleeds into the other's role" - "Weight 700 dominance — GEICO Roobert runs display, heading, button, and body-bold exclusively at 700; body prose is the only 400-weight surface" - "Pill geometry for actions — primary CTAs use 25px border-radius, producing a softly-rounded pill that reads approachable rather than sharp" - "White canvas with warm grey footer — #ededed footer band wired as --footer-background-color gives the page a warm landing zone without introducing a second brand tone" - "Gecko mascot as hero companion — the illustration sits at right, meaning the headline and CTA occupy the left two-thirds of the hero with no decorative chrome" tags: - "Banking & Payments" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | GEICO's marketing site runs on a disciplined two-navy hierarchy that most insurance competitors have abandoned in favor of gradient meshes or lifestyle photography heroes. The above-fold layout is split: headline and CTA occupy the left column in deep navy and near-black, and the GEICO gecko illustration floats at right with no background fill, no decorative chrome. The primary CTA — "Start My Quote" — sits in a 25px-radius pill at #004b9b, the exact value declared as --primary-blue. Below the fold, a secondary interaction blue (#005ccc) handles the live chat FAB and interactive affordances, keeping the two navy values separated by role rather than letting either bleed. The DESIGN.md file packages the system into 14 color tokens, 12 typography tokens running GEICO Roobert — a custom proprietary sans — at two weights (700 for every bold surface, 400 for body prose), 5 corner-radius tokens centered on the 25px pill, 8 spacing values on a 5px base, and 15 component definitions covering the navy pill CTA, the product icon-card grid, the photo-led section cards, the stats strip, and the bottom-link accordion panels. Feed this spec to Claude or Cursor and it reproduces GEICO's specific moves: white canvas instead of lifestyle gradients, deep navy as the sole chromatic action color, weight-700 confidence at every heading tier, and pill geometry reserved for primary CTAs rather than applied across all surfaces. The system is worth studying as an example of an incumbent brand that holds the line on typographic weight — where challenger insurers (Lemonade, Root) reach for serif personality or pastel softness, GEICO answers with weight 700 and a single navy. 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.geico.com" title: "GEICO — official site" description: "GEICO'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 GEICO's primary brand color?" answer: "GEICO's primary brand color is a deep royal navy, #004b9b, wired into the CSS as --primary-blue. It carries every primary CTA button (the 'Start My Quote' pill), section link buttons, and any interactive element that needs to read as the dominant action. A lighter interaction blue, #005ccc, wired as --chat-fab-background-color, handles the live chat floating action button and secondary interactive chrome. The two blues are kept separate by role: the darker navy is reserved for owned UI actions, the lighter for ambient interactive affordances." - id: "typography" title: "What typeface does GEICO use, and what should I substitute?" answer: "GEICO runs GEICO Roobert — a custom proprietary sans-serif — across every surface including display, heading, body, button, and nav. Display headlines sit at 40–44px in weight 700; section h2s at 36px/700; body prose at 16px/400. The system is unusually weight-700-dominant: every heading, sub-heading, label, and button runs bold. Only body-paragraph text drops to weight 400. The closest open-source substitute is Roobert by Display Type (GEICO Roobert is a commissioned variant); DM Sans at weight 700 transfers the proportions at display sizes. For body, any 400-weight geometric sans (Inter, Outfit) works." - id: "pill-radius" title: "What corner-radius does GEICO use for buttons?" answer: "GEICO's primary CTA buttons use 25px border-radius — the extracted value for the 'Start My Quote' button, appearing 7 times across the captured page. This is larger than most SaaS-adjacent pill treatments (Cloudflare uses full 9999px; Linear uses 6px) and lands the button in a distinctly rounded-but-not-fully-circular territory. The most common radius across the system is 8px (11 occurrences), used on card surfaces and secondary UI chrome. A 16px mid-tier radius (8 occurrences) applies to larger product card sections." - id: "canvas-and-footer" title: "What are GEICO's background surface colors?" answer: "GEICO's above-fold canvas is pure white (#ffffff), shared with the main body panels. The footer uses a warm light grey (#ededed) wired as --footer-background-color — a cluster of #ededed, #e9e9e9, #f6f5ee, and #f0f4fb values that the extractor merged into a single structural token. There is no dark-mode surface and no gradient background; every content zone is either white or the warm grey footer band. The secondary blue (#d9e6f5, wired as --secondary-blue) is declared as a CSS variable but does not render in the captured marketing surface." - id: "use-in-project" title: "Can I use this DESIGN.md to build an insurance marketing site in React?" 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 GEICO's specific moves: white canvas with no decorative chrome, two-navy hierarchy (deep navy for owned CTAs, lighter navy for interactive ambient UI), GEICO Roobert-equivalent typography at weight 700 for every heading and label tier, and 25px pill rounding for primary actions. Token references resolve cleanly: {colors.primary} for the navy CTA, {colors.canvas} for the white floor, {typography.display-xl} for the 44px hero heading. You can swap GEICO Roobert for DM Sans or Roobert and the proportions hold." mockups: - "marketing-hero" - "pricing-table" colors: primary: "#004b9b" primary-interaction: "#005ccc" ink: "#1c1c1e" ink-muted: "#707070" ink-light: "#141414" canvas: "#ffffff" surface-1: "#ededed" secondary-blue: "#d9e6f5" accent-cyan: "#c8f5f5" accent-lavender: "#f7dcfc" hairline: "#ededed" shadow: "#000000" typography: display-xl: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 44px fontWeight: 700 lineHeight: "normal" letterSpacing: 0 display-lg: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 60px letterSpacing: 0 display-md: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 43.2px letterSpacing: 0 heading-lg: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 22px fontWeight: 700 lineHeight: 33px letterSpacing: 0 heading-md: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 24px letterSpacing: 0 heading-sm: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 25.2px letterSpacing: 0 body-lg: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 22.4px letterSpacing: 0 body-sm: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 19.6px letterSpacing: 0 label-md: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 19.6px letterSpacing: 0 caption: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"GEICO Roobert\", sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 44px letterSpacing: 0 rounded: none: "0px" sm: "5px" md: "8px" lg: "14px" xl: "16px" pill: "25px" full: "50%" spacing: xs: "5px" sm: "10px" md: "12px" base: "15px" lg: "20px" xl: "25px" 2xl: "30px" 3xl: "40px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "0px 30px" height: "50px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: "0px 20px" height: "44px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "10px 20px" height: "56px" nav-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-md}" padding: "5px 10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "20px" borderColor: "{colors.hairline}" product-icon-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: "20px" photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-sm}" rounded: "{rounded.lg}" padding: "0px" stat-number: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" stat-label: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "10px 12px" height: "44px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.caption}" padding: "30px 20px" chat-fab: backgroundColor: "{colors.primary-interaction}" textColor: "{colors.canvas}" rounded: "{rounded.full}" height: "64px" --- ## Overview GEICO's marketing site holds the line on a two-navy hierarchy where most insurance incumbents have drifted toward lifestyle gradients or pastel brand palettes. **Weight-700 authority**: where challenger insurers (Lemonade, Root, Hippo) differentiate with serif personality, soft rounded type, or conversational tones, GEICO answers with GEICO Roobert at weight 700 across every display, heading, sub-heading, and label tier — the bold weight is not a display flourish but the system's default state. Body prose at weight 400 exists as a deliberate contrast to the surrounding boldness rather than as the baseline. The two navy values split cleanly by role. Deep `{colors.primary}` (#004b9b, wired as `--primary-blue`) carries owned primary actions — the "Start My Quote" CTA pill, section link buttons, in-page navigation anchors. Lighter `{colors.primary-interaction}` (#005ccc, wired as `--chat-fab-background-color`) carries ambient interactive chrome — the live chat floating action button, external link icons. The two blues coexist on the page at the same moment without competing because their surface types never overlap. The gecko mascot illustration sits right of the headline with no background, no decorative frame, no shadow — just the figure floating on white. This is not accidental: the mascot carrying the brand's personality means the headline and CTA column carry nothing but text and a pill button, which is why the hero reads structured rather than cluttered despite the illustration's presence. **Key Characteristics:** - Deep navy `{colors.primary}` (#004b9b) is the sole chromatic action color; 30 occurrences, 14 as text, 2 as background, 14 as border. - Lighter interaction navy `{colors.primary-interaction}` (#005ccc) carries live chat and secondary interactive chrome — 148 occurrences, never overlapping with the primary. - GEICO Roobert at weight 700 runs every heading, label, button, and bold-body surface; weight 400 is reserved for running prose only. - Primary CTA pill uses 25px border-radius (7 occurrences) — soft-rounded but not fully circular. - Pure white canvas (#ffffff) with no gradient layers or photography backgrounds in the hero band. - Warm grey footer band (#ededed, wired as `--footer-background-color`) anchors the bottom of the page without introducing a third chromatic surface. - Accent tiles in the product card row use light cyan (#c8f5f5) and pale lavender (#f7dcfc) fills — the only chromatic moments besides the two navies, and both are pale enough to read as tints rather than brand colors. ## Colors ### Brand - **Primary Navy** (`{colors.primary}` — #004b9b): frequency 30. Used as text (14), background (2), border (14). Wired as `--primary-blue`. The sole owned action color — every primary CTA, section button, and anchor link that GEICO controls renders in this navy. - **Interaction Blue** (`{colors.primary-interaction}` — #005ccc): frequency 148. Used as text (72), border (76). Wired as `--chat-fab-background-color`. The live chat FAB background and interactive icon fills. Higher frequency than the primary because interactive chrome appears on every scroll position. ### Structural - **Ink** (`{colors.ink}` — #1c1c1e): frequency 511. Used as text (262), border (249). The dominant text and hairline color — not quite pure black, carrying a faint warm-grey shift that softens the high contrast. - **Ink Light** (`{colors.ink-light}` — #141414): frequency 1. A near-black variant appearing on a single text element; declared but effectively the same perceptual value as ink. - **Ink Muted** (`{colors.ink-muted}` — #707070): frequency 2. Appears on secondary metadata text and disabled state labels. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 21 as background. The page floor for every content section above the footer band. - **Surface 1** (`{colors.surface-1}` — #ededed): frequency 17. Footer background band and light card fills. Wired as `--footer-background-color`. A cluster merging #ededed, #e9e9e9, #f6f5ee, and #f0f4fb — all structurally warm light greys. - **Shadow** (`{colors.shadow}` — #000000): frequency 12 as shadow. Box-shadow ink on card and button elevation; neutral black, not tinted. ### Accent (tint backgrounds) - **Accent Cyan** (`{colors.accent-cyan}` — #c8f5f5): frequency 1 as background. Used as the fill on a product-category chip — the only chromatic background beside the navies. - **Accent Lavender** (`{colors.accent-lavender}` — #f7dcfc): frequency 1 as background. Paired with accent cyan as the second product chip fill. - **Secondary Blue** (`{colors.secondary-blue}` — #d9e6f5): declared as `--secondary-blue` but does not appear in the captured render. Reserved for hover/soft-fill states in the app flow. ## Typography ### Font Family GEICO Roobert runs every surface — display, heading, body, button, nav, label, and caption. It is a custom proprietary sans-serif (a commissioned variant of Roobert by Display Type). Fallbacks walk to `sans-serif`. There is no second typeface, no serif tier, no mono voice. Weight 700 is the system's **default** state for every surface except body prose, which drops to 400. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 44px | 700 | normal | Hero h1 ("The Insurance Savings You Expect") | | `{typography.display-lg}` | 40px | 700 | 60px | Stat numbers ("$900+", "97%") | | `{typography.display-md}` | 36px | 700 | 43.2px | Section h2 ("Get Instant Access to Claims…") | | `{typography.heading-lg}` | 22px | 700 | 33px | Sub-section bold paragraphs | | `{typography.heading-md}` | 20px | 700 | 24px | Product card h4 titles | | `{typography.heading-sm}` | 18px | 700 | 25.2px | Photo card section links | | `{typography.body-lg}` | 16px | 400 | 24px | Default body prose — the only 400-weight text tier | | `{typography.body-md}` | 16px | 700 | 22.4px | Bold body labels, nav items, UI text | | `{typography.body-sm}` | 14px | 400 | 19.6px | Secondary body copy and metadata | | `{typography.label-md}` | 14px | 700 | 19.6px | Small labels, badges, category tags | | `{typography.caption}` | 12px | 400 | 16px | Legal footnotes, fine print | | `{typography.button-md}` | 16px | 700 | 44px | CTA button label with tall line-height | ### Principles Weight 700 is the floor, not a display flourish. Six of the twelve type tokens run at 700; weight 400 appears only in body prose and legal captions. This is the inverse of what most SaaS and fintech brands do — it is also the inverse of what insurance challengers (Lemonade's Merriweather at 400, Progressive's 96 Sans at 300) do. The "Start My Quote" button sits at weight 700 with a line-height of 44px — the height of the button itself — making the label feel pressed into the pill rather than floating inside it. ### Substitutes GEICO Roobert is proprietary. **DM Sans** at weight 700 transfers the display proportions. For body at 400, **Inter** or **Outfit** both work. Roobert by Display Type is the open-source root of GEICO's commissioned variant and is the closest match if licensing permits. ## Layout ### Spacing System - **Base unit:** 5px (54 occurrences of 5px — the dominant single-value spacing token). - **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 15px · `{spacing.lg}` 20px · `{spacing.xl}` 25px · `{spacing.2xl}` 30px · `{spacing.3xl}` 40px. - **Button padding:** 0×30px — the primary CTA is height-constrained (50px) rather than padding-constrained, with horizontal padding controlling width. - **Section rhythm:** major content bands use ~40px vertical padding above and below. ### Grid & Container - **Hero layout:** two-column split — headline/CTA left column, gecko mascot illustration right. No full-bleed canvas fill; the mascot floats on white. - **Product icon grid:** 5-up row of insurance product icons (auto, motorcycle, home, renters, more) in equal-width columns. - **Photo card grid:** 3-column grid of photography-led category cards below the icon row. - **Stats strip:** 3-stat centered layout with large `{typography.display-lg}` numbers above caption labels. - **Footer:** multi-column link list followed by GEICO wordmark centered at bottom. ### Rhythm The page alternates between **dense action bands** (the hero quote form, the product icon row) and **generous editorial sections** (photo cards, stats, app promotion). Section dividers are hairline rules at `{colors.hairline}` or background-color breaks to `{colors.surface-1}` for the footer zone. ## Elevation The system uses **minimal shadows**. The extracted shadow color is `#000000` at 12 occurrences, all applied to card or button elements as soft 1–2px box shadows. There are no tinted shadows, no glow effects, and no layered elevation ladder. Cards lift slightly from the white canvas via hairline borders at `{colors.hairline}` (#ededed) rather than shadow fills — the same pattern as Cloudflare's below-fold cards. The chat FAB (`{component.chat-fab}`) likely uses a stronger drop shadow but this was not captured in the marketing surface render. ## Shapes The radius scale is **mid-step plus pill**: - `{rounded.none}` 0px — hero text blocks, stat rows. - `{rounded.sm}` 5px — small chips and tag badges. - `{rounded.md}` 8px (11 occurrences, the dominant card radius) — default for product cards, form inputs, and section card containers. - `{rounded.lg}` 14px (6 occurrences) — larger photo-led section cards. - `{rounded.xl}` 16px (8 occurrences) — alternative large-card treatment. - `{rounded.pill}` 25px (7 occurrences) — primary CTA buttons, the "Start My Quote" signature pill. - `{rounded.full}` 50% (3 occurrences) — circular avatar and icon-button treatments. Unlike Cloudflare's binary small-step-plus-pill scale, GEICO has a full mid-range ladder (8 / 14 / 16px) that prevents the card surfaces from jumping directly from sharp to fully rounded. ## Components **`button-primary`** — The signature CTA. Deep navy `{colors.primary}` fill, white text at `{typography.button-md}`, 25px radius pill, 0×30px padding, 50px height. "Start My Quote" is the canonical instance above the fold. **`button-secondary`** — White canvas fill, navy `{colors.primary}` text and 1px border, pill radius, 20px horizontal padding, 44px height. Used for "Learn More" and section-level secondary actions. **`top-nav`** — White `{colors.canvas}` surface, GEICO wordmark left, product nav links center-right. 56px height, 10×20px padding. **`nav-link`** — Transparent fill, navy text at `{typography.label-md}`, 5×10px padding. The nav links in the top bar render in the primary navy. **`hero-heading`** — Ink `{colors.ink}` text, `{typography.display-xl}` (44px/700). The headline sits in the left column of the hero split layout. **`section-heading`** — Same ink text at `{typography.display-md}` (36px/700) for below-fold section h2s. **`body-paragraph`** — Default ink text at `{typography.body-lg}` (16px/400) — the one weight-400 running-text tier in the system. **`card`** — White canvas fill, 1px hairline border, `{rounded.md}` 8px radius, 20px padding. The default content card for supporting text sections. **`product-icon-card`** — White canvas, icon centered, `{typography.heading-md}` label beneath, 8px radius. The 5-up product row (auto, motorcycle, home, renters, umbrella, more). **`photo-card`** — Full-bleed photography fill, white overlay text in `{typography.heading-sm}`, 14px radius. Below-fold section cards for life, business, and additional insurance categories. **`stat-number`** — Display-lg type (40px/700) in `{colors.ink}` on transparent background. The stats strip ("85 Years of History / $900+ Avg Savings / 97% Satisfaction"). **`stat-label`** — Muted ink at `{typography.body-sm}` beneath each stat number. **`text-input`** — White canvas, ink text at body-lg, 1px hairline border, `{rounded.md}` 8px radius, 10×12px padding, 44px height. Quote form fields. **`footer`** — Surface-1 (#ededed) background, ink text at `{typography.caption}` (12px/400), multi-column link layout, 30×20px padding. **`chat-fab`** — Interaction-blue `{colors.primary-interaction}` circular FAB, white icon, 50% radius (circular), 64px height. Persistent live-chat launcher. ## Do's and Don'ts **Do** hold the two navy values strictly to their lanes: `{colors.primary}` (#004b9b) for owned primary actions, `{colors.primary-interaction}` (#005ccc) for interactive ambient chrome. Mixing them in the same component — e.g., using the interaction blue for a CTA hover state — collapses the role-based hierarchy the system depends on. **Do** run display and heading text at weight 700. The system's authority signal is the uniformity of boldness across every non-body tier; dropping a section heading to weight 400 or 500 makes it read as body copy, not as structure. **Do** use the 25px pill radius (`{rounded.pill}`) exclusively for primary CTA buttons. The system's card surfaces use 8–16px rounding; keeping the pill reserved for the primary action makes the CTA visually distinct in dense product-card grids. **Do** let the gecko mascot illustration carry the brand personality in the hero. That means the left column should hold nothing but the headline and CTA — no secondary graphic, no decorative element, no badge. **Don't** use `{colors.accent-cyan}` (#c8f5f5) or `{colors.accent-lavender}` (#f7dcfc) outside of small product-category chip fills. Each appears exactly once on the captured page as a background chip tint; applying either to card fills, section backgrounds, or CTAs would override the two-navy discipline with an untested third chromatic voice. **Don't** use `{colors.surface-1}` (#ededed) as a card border color — it is a background fill token (10 bg occurrences, 7 border) and its border-use is limited to low-contrast dividers. For visible card outlines, use `{colors.ink}` at low opacity or a dedicated 1px hairline. **Don't** apply the `{rounded.pill}` (25px) to form inputs or card surfaces. The pill is signature to primary CTAs; applying it to inputs would flatten the visual hierarchy between the call-to-action and the data-entry surface. **Don't** reduce the primary button's line-height from 44px to the conventional 24px. The `{typography.button-md}` token specifies 44px — the height of the button — so the label is vertically centered by line-height rather than by flexbox. Changing it shifts the text position within the pill. ## Known Gaps - **Hover and focus states:** only the resting state of each component is captured. The primary button hover, input focus ring, and nav link hover fill are not documented; the extraction surfaces the resting layer only. - **Form quote flow:** the "Start My Quote" form is a multi-step flow after the hero; the captured surface shows only the entry state. The in-flow component set (step indicators, radio buttons, ZIP input) is not represented here. - **App screens:** the bottom section includes a phone mockup showing the GEICO mobile app; the in-app component set uses a different surface system not captured from the marketing page. - **Dark mode:** no dark-mode variant exists on the captured marketing surface. The system is light-only. - **State machine for the chat FAB:** the chat FAB has minimized and expanded states with different dimensions (`--minimized-chat-frame-height: 45px` vs. `--chat-frame-height: 688px`) but only the resting FAB state is captured as a component. - **Product sub-brand colors:** the secondary-blue (`{colors.secondary-blue}` — #d9e6f5, `--secondary-blue`) is declared but not rendered, suggesting a hover or selected state in the quote flow that the marketing capture did not reach.