What is GEICO's primary brand color?

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.

What typeface does GEICO use, and what should I substitute?

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.

What corner-radius does GEICO use for buttons?

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.

What are GEICO's background surface colors?

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.

Can I use this DESIGN.md to build an insurance marketing site in React?

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.

GEICO Design System

GEICO's marketing design system as a DESIGN.md file.

About GEICO DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source geico.com

Banking & Payments

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.

What makes it distinct

Two-tone navy discipline#004b9b (--primary-blue) carries CTAs; #005ccc handles interactive chrome and chat; neither bleeds into the other's role
Weight 700 dominanceGEICO Roobert runs display, heading, button, and body-bold exclusively at 700; body prose is the only 400-weight surface
Pill geometry for actionsprimary 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 companionthe illustration sits at right, meaning the headline and CTA occupy the left two-thirds of the hero with no decorative chrome

Live at geico.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

geico.com

Explore GEICO

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

GEICO design system FAQ

Common questions about GEICO's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

GEICO — official site

GEICO's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.