GEICO Design System

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

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.