---
version: alpha
name: "Bain & Company"
description: "Bain uses a direct consulting editorial system with clean white pages, assertive black headlines, signature red actions and dividers, client-outcome stories, and structured topic navigation across industries, capabilities, and insights."
colors:
  bg: "#ffffff"
  bg-dark: "#181818"
  surface: "#ffffff"
  surface-soft: "#f4f4f4"
  text: "#222222"
  text-muted: "#626262"
  brand: "#cc0000"
  brand-hover: "#a80000"
  accent: "#ea1b2b"
  border: "#d9d9d9"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "4px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Bain should feel decisive, clean, and outcome-oriented. White space and black type establish editorial seriousness; red marks the few actions and ideas that demand attention.

## Colors

Use white for the primary canvas, charcoal for reading, and Bain red `#cc0000` for actions, rules, and selected states. Keep gray surfaces neutral and avoid red-tinted page backgrounds.

## Typography

Use a direct sans hierarchy with strong 48-68px headlines and readable 16-20px body copy. Metadata and topic labels remain compact but never faint.

## Layout

Build pages on a clear editorial grid with one dominant idea followed by capabilities, insights, and client results. Keep global industry navigation separate from article-level filters.

Prioritize the lead story, then stack client outcomes and insights in editorial order. Keep headlines within the viewport and avoid reducing long words below a readable size.

## Elevation & Depth

Use whitespace, red rules, and image scale instead of shadows. Dark bands can provide contrast for featured client stories or careers content.

## Shapes

Use square geometry: 0-2px on actions and media, up to 4px on inputs, and 8px only where a large utility panel needs separation.

## Components

Primary actions are square red rectangles with white text. Client-story modules combine photography, a concise outcome, and a text link without being enclosed in rounded cards.

Links and actions should respond quickly with darker red or underlines. Image zoom may support editorial cards but disappears in reduced-motion mode.

Pair red with text or icons rather than relying on color alone. Navigation, insight filters, and cookie controls require visible focus and semantic disclosure states.

Lead with a business problem or measurable result. Use active verbs and specific outcomes; avoid generic transformation language without evidence.

The main reading system is light. Dark campaign bands can use white copy and red actions, but insight pages should preserve the white editorial canvas.

Bain's visual language resembles a decisive business publication. Red introduces urgency, while the grid and limited radius keep the tone analytical rather than promotional.

## Do's and Don'ts

Do use outcome metrics, strong black type, and restrained red. Do not soften the interface with pill cards, use red for long text, or bury client evidence beneath generic imagery.

Create a Bain-style consulting homepage with a white editorial canvas, assertive black sans headline, square signature-red action, strict multi-column grid, real client-story photography, and measurable outcome callouts.