McKinsey Document Style
A design system for diligence memos, investment committee papers, and product statements. Authored against the DESIGN.md format specification.
Overview
McKinsey Document is a conservative-institutional design system for HTML artifacts used in due diligence, investment committee papers, and product statements. It is built on a single navy primary, IBM Plex Sans throughout, flat surfaces with no elevation, and a strict component vocabulary. Every numbered section opens with a one-sentence governing thought stating the section's bottom-line conclusion; supporting evidence follows. The visual language is editorial print, not application UI. This document is itself authored under the spec — it is documentation and test case in one.
1. Colors
A single navy primary anchors the palette; emphasis is communicated through weight, never through a second accent color.
The thirteen tokens below cover every fill, stroke, and text use in the system. The palette is intentionally narrow: a system that allows a designer to "add a green for positive metrics" cannot also enforce that risks are bolded rather than red. The constraint is the feature.
2. Typography
IBM Plex Sans is the entire family — no serif, no monospace, no system-ui substitute.
Plex Sans was designed by Mike Abbink and Bold Monday for IBM and released under the SIL Open Font License1. It carries enough character that the design does not need decoration; substituting Inter or Arial collapses the system's tone. Labels are uppercase, letter-spaced, and smaller than body — they function as wayfinding, not content.
3. Layout
Single column, 740px max-width, mobile-first padding; no floats, no sidebars, no two-column layouts.
The reader scrolls one continuous line of argument. Nothing competes for attention horizontally. The spacing scale below is closed — values outside it are not added "for one occasion." The scale is dense at the small end (4, 8, 12, 16) where intra-element spacing lives, and sparse at the large end (28, 32, 40) where inter-section rhythm lives.
| Token | Value | Typical use |
|---|---|---|
| xs | 4px | Inline label gap |
| sm | 8px | Title-to-subtitle |
| md | 12px | Callout vertical padding |
| lg | 16px | Callout horizontal padding |
| xl | 22px | Doc side padding |
| xxl | 28px | Section-to-section |
| xxxl | 32px | Recommendation top margin |
| xxxxl | 40px | Footnotes top margin |
4. Elevation & Depth
There is no elevation — the system is flat, and layering is achieved with stroke and fill, not with shadow.
Shadow communicates "this object floats above the surface" — an app metaphor. Editorial print does not float; it stacks. The four treatments below are the only ways to establish hierarchy in this system.
| Treatment | Where used |
|---|---|
| 1px solid border | Exhibit perimeter; any structural container |
| 3px solid primary, top edge | Exhibit top-rule; document header rule |
| 4px solid primary, left edge | Governing-thought callout; recommendation governing-thought |
| Background fill | Abstract block (surface-variant); governing thought (callout); recommendation panel (primary) |
5. Shapes
Sharp by default; 2px radius is the only exception, reserved for the abstract block and recommendation panel.
Tables, exhibit borders, callouts, and rules are all sharp (radius 0). The 2px softening on filled panels is barely perceptible and exists only to read as "object" rather than "page edge." Pill radii and circles are not part of the vocabulary.
| Token | Value | Use |
|---|---|---|
| none | 0 | Tables, exhibits, callouts, rules — the default |
| xs | 2px | Abstract block; recommendation panel |
6. Components
Components are tokens composed; new ones require updating the spec, not local invention.
Each component below is rendered live below its specification — what you see is what the spec produces.
6.1 governing-thought
One sentence. Navy on callout. 4px navy left rule. The section's bottom-line conclusion, stated up-front.
This is what a governing thought looks like — one sentence, the answer first, before the supporting evidence.
6.2 abstract-block
One dense paragraph stating situation, recommendation, and reasoning. Filled with surface-variant. Never bullets. Never a second paragraph. This component does not include a governing-thought callout, because the whole block is the answer.
Executive Summary (example)
Meridian Analytics seeks $40M Series B at $280M post-money. Growth is real but unit economics fall below threshold (gross retention 87%, CAC payback 22 months) and hyperscaler bundling pressures the long tail. Recommendation: pass; re-engage at Series C if NDR exceeds 120% and a CRO is in place.
6.3 exhibit + table
A bordered figure with a 3px navy top-rule and a navy uppercase caption. Tables inside use navy headers, zebra body rows, tabular-nums.
| Metric | FY23 | FY24 | FY25 |
|---|---|---|---|
| ARR ($M) | 3.8 | 10.3 | 18.4 |
| Growth YoY | — | 171% | 78% |
| Gross margin | 62% | 68% | 71% |
| Net retention | 112% | 108% | 104% |
| Gross retention | 91% | 89% | 87% |
6.4 risk-list
Numbered. Each item opens with a bolded short phrase, then the explanation in normal weight. The bolded lead is mandatory — without it, items read as undifferentiated.
- Retention deterioration. Gross retention has fallen 400 bps over two years to 87%, below the 90% infrastructure-software floor.
- CAC payback above gate. 22 months exceeds the 18-month underwriting threshold, indicating pricing pressure or lengthening sales cycles.
- Hyperscaler bundling. AWS, GCP, and Azure each ship first-party observability that improves quarterly; long-tail acquisition is structurally at risk.
6.5 recommendation-panel
Closing section. Primary-filled, white text, 2px rounded. Contains a governing thought stating the recommendation as imperative, then a rationale paragraph including conditions for revisiting.
Recommendation (example)
Adopt McKinsey Document as the locked style for all diligence memos and product statements going forward.
The combination of strict tokens, mandatory governing thoughts, and a flat exhibit-driven vocabulary collapses per-document design variance to near zero while preserving substantive flexibility. Revisit if the firm adds a published-externally use case (e.g. white papers), which may warrant a sister spec with looser margins and an alternate accent.
7. Do's and Don'ts
The single diagnostic for spec compliance is whether every numbered section opens with a governing-thought callout.
If that one rule holds, ninety percent of the system is being honored. The remaining rules below close the loop on the visual vocabulary and on the prose conventions that make the visual language coherent with the writing.
| Do | Don't |
|---|---|
| Open every numbered section with a one-sentence governing thought. | Write a numbered section without one (except the Executive Summary). |
| State recommendations as imperatives: Pass, Invest, Approve. | Hedge: "could potentially," "may possibly," "one might consider." |
| Number exhibits sequentially across the entire document. | Reference an exhibit as "the table below." |
| Use bold for risk emphasis. | Use red text for risk emphasis. |
| Use tabular-nums in every table; include units on every number. | Abbreviate thousands as "k" or write naked numbers without units. |
| Footnote every external claim and unverified company-reported figure. | Mix verified and unverified numbers without distinguishing them. |
| Use IBM Plex Sans throughout. | Substitute Inter, Roboto, Arial, system-ui, or any serif. |
| Layer with stroke and fill. | Introduce drop shadows, gradients, glassmorphism, or radii > 2px. |
| Use the bolded-lead numbered convention for risks. | Use bulleted lists for risks. |
| Trust the Executive Summary to do TL;DR work. | Add a separate TL;DR section. |