Gallagher

Overview

Gallagher is a global insurance and risk management powerhouse that translates complex, high-stakes business challenges into clear, actionable strategies. The design system embodies **Corporate Clarity**—a philosophy that marries institutional authority with approachable professionalism. The visual language is rooted in clean typography, restrained color discipline (navy primary accent #0075bc paired with neutral grays #333333 and #5d5d5d), and generous whitespace that conveys confidence and expertise. Every interface element is designed to instill trust: the user should feel they are engaging with a partner who has mastered risk, not a vendor selling commodities.

The brand voice is measured, precise, and human-centered. Gallagher speaks in the language of outcomes—not features. Sentences are direct and benefit-focused, avoiding jargon while respecting the intelligence of C-suite and operational decision-makers alike. The tone is reassuring without being patronizing, authoritative without being cold. Example: "When AI goes wrong, your insurance policies must be ready—Gallagher ensures they are."

Colors

The color system is built on a foundation of trust and clarity. **Primary (#0075bc)** is the signature accent—a professional, confident blue deployed on all call-to-action buttons, active navigation states, and critical interactive elements. It signals action and authority without aggression. **Secondary (#1a1f71)** is a deep navy used sparingly for secondary accents, badges, and emphasis in data-heavy contexts; it reinforces institutional gravitas. **Tertiary (#333333)** is the dominant text color and structural element, providing the visual backbone of the interface. **Surface stack** ranges from pure white (#ffffff) for primary content areas down through carefully calibrated grays (#f4f4f4, #e6e6e6, #cccccc) to create subtle depth without visual noise. **On-surface-variant (#5d5d5d)** i

Typography

The type system reflects Gallagher's dual nature: authoritative yet accessible. **Source Sans 3** is the sole typeface—a modern, highly legible sans-serif that works equally well at 12px (label-sm, letterSpacing 0.03em) and 60px (display, letterSpacing -0.04em). Headlines use negative letter-spacing (-0.02em to -0.04em) to tighten the visual mass and convey confidence; body text uses neutral to slightly positive letter-spacing (0.01em) to maximize readability in dense insurance documentation. **Display (60px, 700 weight, 68px line-height)** is reserved for hero statements and major page titles. **Headline-lg (40px, 600 weight)** anchors section introductions. **Body-md (16px, 400 weight, 24px line-height)** is the workhorse for all body copy, ensuring 1.5 line-height ratio for comfortable

Layout

Gallagher's layout philosophy is **structured minimalism**: a 12-column grid with a max-width of 1280px ensures content never overwhelms the viewport. The gutter is consistently 24px, creating breathing room between sections and reinforcing the brand's confidence in whitespace. Container padding follows the spacing scale: 24px (md) for standard sections, 40px (lg) for hero and major feature blocks, and 64px (xl) for full-width sections on desktop. Mobile breakpoints collapse to single-column layouts with 12px (sm) gutters and 16px padding, maintaining the visual hierarchy without cramping. Section separation uses lg spacing (40px) vertically to create clear rhythm; related elements within a section use md spacing (24px). Cards and modular content blocks sit on the surface-container-lowest

Elevation & Depth

Depth in Gallagher's system is achieved through **subtle layering and shadow discipline**, not dramatic contrast. The elevation scale uses three tiers: **Level 1 (Base)** is the white surface (#ffffff) with no shadow—the default reading plane. **Level 2 (Cards & Containers)** applies elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06)) and a 1px outline-variant border, creating a barely-perceptible lift that defines edges without visual noise. **Level 3 (Modals, Popovers, Dropdowns)** uses elevation-md (0 4px 12px rgba(0, 0, 0, 0.08)) with the same border treatment, signaling modal priority. On hover,

Shapes

The shape language is **Soft Institutional**—rounded enough to feel modern and approachable, but restrained enough to maintain professional authority. **Buttons use 16px border-radius** (matching the live computed primaryCta and secondaryCta styles), creating a subtle pill effect that signals action without whimsy. **Cards and containers use 12px (md)** for a more structured appearance, reinforcing containment. **Inputs use 0px (DEFAULT)** for a clean, linear aesthetic that aligns with form-heavy insurance workflows. **Full-width elements and badges use 9999px (full)** for maximum roundness, r

Components

Action Elements **Buttons** are the primary interaction mechanism. Primary buttons use background-color: #0075bc, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 16px, and transition: background-color 0.2s ease-in-out. On hover, the background shifts to #0056a3 (a 15% darkening) without shadow, maintaining flatness. On focus, add outline: 2px solid #1a1f71 with outline-offset: 2px. Secondary buttons are transparent with a 1px border in primary (#0075bc), text color primary, and the same padding/height. On hover, secondary buttons fill with primary-container (#e3f2fd) while maintaining the border. All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing).

Containers & Surfaces **Cards** are the foundational container. Default styling: background

Do's and Don'ts

**Do**

• Do use primary (#0075bc) exclusively for CTAs, active states, and critical interactive elements—it is the visual anchor of user intent.
• Do maintain 24px (md) gutter spacing between major sections and 40px (lg) for hero blocks to create breathing room that conveys confidence.
• Do apply elevation-md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on hover to interactive containers, with a 200ms transition for tactile feedback.
• Do use Source Sans 3 at 16px body-md with 24px line-height for all body copy to ensure legibility in dense insurance documentation.
• Do add 2px dotted outline in secondary (#1a1f71) with 2px offset on focus states to meet WCAG AA contrast without disrupting the clean aesthetic.

**Don't**

• Don't use secondary (#1a1f71) or tertiary (#333333) as primary accent colors—they are supporting roles only; primary (#0075bc) is the sole call-to-action color.
• Don't apply shadows to buttons or flat interactive elements; rely on color contrast and border-radius (16px) to signal interactivity.
• Don't use border-radius greater than 12px on cards or containers—it dilutes the institutional authority; reserve 9999px (full) for badges and status indicators only.
• Don't center-align body copy; use left-alignment for legibility, reserving center-alignment for headlines and CTAs only.
• Don't mix typefaces; Source Sans 3 is the sole font family—avoid Arial, Roboto Slab, or system fonts in the UI layer.