Bain & Company

Overview

Bain & Company's design system embodies Strategic Authority Minimalism—a refined aesthetic that prioritizes clarity, precision, and executive confidence. The brand serves C-suite leaders and enterprise decision-makers across industries, translating complex consulting insights into visually decisive interfaces. The visual language combines serif typography (Tiempos for headlines, commanding presence) with clean sans-serif (Graphik for UI, functional clarity), anchored by a signature crimson red (#cc0000) that signals action and strategic importance. The emotional response is one of trust, sophistication, and forward momentum: users perceive the interface as the work of a premium advisor, not a commodity vendor.

Bain's voice is precise, data-driven, and never breathless. Sentences are direct and outcome-focused. Example: 'Transform your operating model in 18 months. See how.' The brand avoids jargon-heavy abstractions; instead, it grounds insights in measurable impact. The palette—deep navy backgrounds in hero sections, crisp white surfaces, and strategic red accents—creates visual hierarchy through restraint rather than decoration. Every color choice serves a function: navy conveys depth and authority, white provides breathing room, red commands attention on CTAs and critical metrics.

Colors

The color system is built on a foundation of high-contrast, print-inspired restraint. Primary (#cc0000) is Bain's signature crimson, deployed exclusively on call-to-action buttons ('See all offices', 'Contact'), active states, and key data highlights. It appears infrequently but with maximum impact—users learn to recognize it as the signal to engage. Secondary (#2b333f) is a deep navy-gray, used for body text, section headers, and the hero background gradient (often layered with dark blue overlays at rgba(0,0,0,0.4) to 0.6 opacity). Tertiary (#767676) is a neutral mid-gray for disabled states, secondary labels, and dividers. The surface stack is deliberately minimal: surface (#fefefe) is near-white for maximum readability; surface-container variants (#f5f5f5 to #e8e8e8) provide subtle dept

Typography

The type system pairs serif and sans-serif to signal hierarchy and function. Tiempos (serif) is reserved for display, headlines, and body copy—it conveys editorial authority and is the voice of the brand's strategic insights. Graphik (sans-serif) handles UI labels, buttons, inputs, and navigation—it is functional and scannable. Display (60px, 700 weight, -0.04em tracking) is used sparingly for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, Tiempos) is the default for article text and long-form content, set at 28px line-height for comfortable reading. Body-md (16px, 400 weight, Graphik) is used for UI copy, form labels, and shorter passages. Label-md (14px, 600 weight, Graphik, 0.01em tracking) is

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero, featured insights, case studies); md (24px) separates cards and subsections; sm (12px) separates inline elements. The gutter (24px) is applied consistently to left/right margins on all container widths. Hero sections span full-width with a dark navy or gradient background (often rgba(43, 51, 63, 0.9) overlaid on an image), white or light text, and a single prominent CTA in red. Content sections use a two-column or three-column layout for case studies and insights, with cards at 100% width on mobile, 50% on tablet, and 33% on desktop. White-space is generous: sections have 40-64px vertical padding, ca

Elevation & Depth

Depth is achieved through subtle shadows and layering, not through color darkening. The elevation system uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for hover states on list items and light interactive elements; md (0 4px 12px rgba(0,0,0,0.08)) for standard cards and modals; lg (0 16px 40px rgba(0,0,0,0.12)) for elevated modals, dropdowns, and hero overlays. Cards on white backgrounds use md shadows by default; on hover, they transition to lg over 300ms. The hero section often uses a layered approach: a full-width background image with a semi-transparent dark overlay (rgba(0,0,0,0.4) to

Shapes

The shape philosophy is Refined Geometry—rounded corners are used sparingly and consistently to signal interactivity without sacrificing the brand's premium, structured aesthetic. Buttons use rounded.DEFAULT (0.5rem / 8px) for a subtle, professional appearance; cards use rounded.lg (1rem / 16px) for a slightly softer, more approachable feel. Input fields use rounded.DEFAULT (8px) to match buttons and maintain visual consistency. Badges and pills use rounded.full (9999px) for maximum roundness, signaling status or metadata. Dividers and borders are sharp (0px radius). The reasoning: sharp corne

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses background: #cc0000, text: white, padding: 12px 24px, height: 48px, rounded: 8px, font: Graphik 14px 600 weight. On hover, background transitions to #990000 over 200ms (transition: background-color 200ms ease-in-out). On active/pressed, background becomes #660000. button-secondary uses a transparent background with a 2px solid #cc0000 border, same padding and height, text in red. On hover, background becomes #f5e6e6 (primary-container) with text in #8b0000 (on-primary-container). button-tertiary is a ghost button with transparent background, 1px solid #767676 border, text in #0a0a0a. On hover, background becomes #eeeeee. All buttons use cursor: pointer and should have a focus state with outline: 2px s

Do's and Don'ts

**Do**

• Do use primary red (#cc0000) exclusively on CTAs, active states, and critical metrics—never as a background fill for large areas.
• Do pair Tiempos serif headlines with Graphik sans-serif body copy to create clear hierarchy between editorial content and UI.
• Do maintain 40px (lg) spacing between major sections and 24px (md) between cards to create visual breathing room.
• Do apply box-shadow: 0 4px 12px rgba(0,0,0,0.08) to cards by default, upgrading to 0 16px 40px rgba(0,0,0,0.12) on hover.
• Do use rounded: 8px (DEFAULT) for buttons and inputs, 16px (lg) for cards, and 9999px (full) for badges.
• Do ensure all interactive elements have a visible focus state with outline: 2px solid #cc0000 for keyboard accessibility.

**Don't**

• Don't use primary red on backgrounds, body text, or decorative elements—it is reserved for high-priority actions.
• Don't mix serif and sans-serif within the same headline or button label; use serif for editorial, sans-serif for UI.
• Don't apply shadows to buttons; use color contrast and state changes (hover, active) to indicate interactivity.
• Don't round corners beyond 16px on cards or 8px on buttons; excessive rounding undermines the brand's premium, structured aesthetic.
• Don't use more than 15% of a page's visual real estate for primary red; if you do, the hierarchy has failed.
• Don't apply text-shadow or drop-shadow effects to body text; reserve shadows for containers and interactive elements only.