Thank youSVG
01
Foundations
A system, not a stylesheet.
MDS 2.0 is how McKinsey ships software at scale — a token-driven foundation that dresses every app, email and slide in a shared visual language. This page walks through the four pillars: color tokens, theming, the illustration kit, and the principles that hold them together.
Blue · steps 1 → 12
1
2
3
4
5
6
7
8
9
10
11
12
Brand accentblue-9#2251ff
Hovered brandblue-10#1e48df
Subtle tintblue-3#ebf2ff
Primary textgray-12#202020
Version
2.0 · stable
Teams using
400+ product teams
Color families
Gray · Blue · Green · Red · Yellow
Scale
12 steps per family · Radix-style
Themes
Light · Dark
Typography
McKinsey Sans · McKinsey Serif
02
Color tokens
Twelve steps, five roles.
Every family resolves to a 12-step scale with the same semantic meaning. Step 9 is always the solid accent. Steps 11–12 are always accessible text. Hover a swatch to see which UI slot it powers, then pick a family to watch the live components re-skin.
Hover a step to inspect its role.
Live components
$2.4M
Forecast, Q3 pipeline
StrategyAnalyticsPeopleSystems
Step 1–2
Backgrounds — app surface, subtle fill
Step 3–5
Interactive — rest, hover, active
Step 6–8
Borders — subtle · ui · strong
Step 9–10
Solid — brand accent, hovered brand
Step 11–12
Accessible text — secondary, primary
03
Theming
Same layout. Different resolution.
Drag the divider to split a dashboard across the light and dark themes. The only difference is which column of the token dictionary the components read from — nothing in the layout changes.
Drag the divider · nothing in the layout changes, only which column of the token dictionary is read.
04
Illustration kit
One kit, many moods.
Every scene composes from the same set of figures, props, and tokens. Pick a category to re-skin the canvas — or flip the theme to see how the scale keeps every accent legible across light and dark.
05
Shipped library
What teams actually pull down.
The previous section is the system; this is the library. Each illustration is a ready-to-drop SVG, tagged by category and authored under the same character rules so any two sit together without clashing.
Success· 2 scenes
Fail· 1 scene
Informational· 3 scenes
06
Card · Component
One component, the system in miniature.
A worked example. The Card component dresses its surface, borders, accents, and hover state entirely from MDS tokens — swap the theme and every layer re-resolves without a line of layout changing.
Article Card · 3 styles × Default / HoverHover any card →
Contained
1px border on all sides.
Elevated
Medium shadow, no border.
Flushed
Eyebrow
Card Title
A 4:3 ratio is typically used for TV displays, computer monitors, and digital cameras.
32px padding, no chrome.
Component API
style
"contained" · "elevated" · "flushed" — default: containedstate
"default" · "hover" — driven by pointer/focus, not a prophasEyebrow
boolean — default: truehasDescription
boolean — default: truehasImage
boolean — default: true, 4:3 ratiohasActionItems
boolean — default: true, 4 icons @ 16pxcardTitle
string — primary heading, underlines on hovercardEyebrow
string — 14/20 regular, graycardDescription
string — 18/28 lightTokens in play
Surface white · border #e8e8e8 · primary text gray-12 · muted text gray-11 · hover title brand-primary #2452e9 · shadow tokens shadow-md → shadow-lg.
07
Principles
Why it holds together.
Three commitments that keep the system coherent as it scales across 400+ teams.