---
version: alpha
name: "McKinsey & Company"
description: "McKinsey uses a research-led editorial system: a midnight navigation shell, very large serif questions, modular article and case-study imagery, cobalt digital actions, and dense pathways across industries, capabilities, insights, and careers."
colors:
  bg: "#ffffff"
  bg-dark: "#051c2c"
  surface: "#ffffff"
  surface-soft: "#f3f4f5"
  text: "#051c2c"
  text-muted: "#626a70"
  text-on-dark: "#ffffff"
  brand: "#051c2c"
  accent: "#2251ff"
  accent-hover: "#153bd1"
  border: "#d9dde0"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "4px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Use a midnight shell and high-contrast editorial modules. Oversized serif questions create authority, while article photography and case studies provide movement across a strict grid.

## Colors

Midnight `#051c2c` anchors navigation and major text. Cobalt `#2251ff` is reserved for digital actions and focus states; white and cool gray carry research-heavy content.

## Typography

Serif display type should be large, line-broken deliberately, and used for strategic questions or insight titles. A neutral sans handles navigation, labels, metadata, and long explanatory paragraphs.

## Layout

Use a 12-column editorial grid that supports one major story plus smaller articles. Keep navigation broad but predictable, and give research pages a narrower prose measure.

Collapse the editorial grid into a single prioritized stream. Keep the main strategic question first, move navigation into a clear menu, and preserve article metadata beside each title.

## Elevation & Depth

Depth comes from photography, scale, and dark-to-light bands. Shadows are rarely necessary; thin rules and whitespace should separate content.

## Shapes

Corners are square or nearly square. Use 0-2px for buttons and media, 4px for forms, and avoid rounded marketing cards.

## Components

Insight cards are largely borderless image-and-copy modules. Primary actions are square cobalt rectangles; taxonomies and filters use compact text controls rather than decorative pills.

Article imagery may zoom slightly on hover, while menus and filters respond quickly. Remove zoom and reveal motion for reduced-motion users without changing content order.

Maintain high contrast in the dark header, expose menu states, and preserve visible text links. Cookie and privacy controls must remain keyboard reachable and must not obscure focus.

Frame subjects as consequential business questions, then support them with evidence, cases, and clear outcomes. Avoid casual product language or unsupported superlatives.

Dark is used for navigation and campaign moments; research reading remains light. A complete dark mode should preserve the serif/sans hierarchy and restrained cobalt accent.

The system draws from broadsheet journalism and annual-report design. Its authority comes from scale, editing, and evidence rather than decorative enterprise UI.

## Do's and Don'ts

Do use a clear grid, large serif questions, and real case-study imagery. Do not round cards, fill every module with navy, or reduce complex research to vague slogans.

Create a McKinsey-style consulting homepage with a midnight navigation shell, oversized white or navy serif strategic question, strict editorial grid, real case-study photography, compact sans metadata, and square cobalt actions.