Morgan Stanley Design System

Overview

Morgan Stanley's marketing site is built on a single organizing principle. Ink authority: the page is a near-monochrome system — pure black ink on white canvas, structured by two proprietary typefaces in strict division of labor — that refuses every decorative shortcut competitors reach for. Where Goldman Sachs deploys a heavy-weight italic sans for headline punch and JPMorgan Chase leans on a conventional corporate blue as its primary voltage, Morgan Stanley holds the heading tier to MS Gloriola II Std, a semi-serif that reads closer to the Financial Times than to any investment-bank peer, at weight 500 — never 700 — with tight negative tracking.

The chromatic restraint is absolute. 503 of the most-used color occurrences are pure black (#000000); the only non-neutral color is steel blue (#187aba) at 210 occurrences, used almost entirely as text (103) and border (105), never as a background fill. This is not a "conservative blue" brand in the convention of retail banking — it is a system that refuses hue as a design instrument and instead competes on typographic weight and negative space.

Navigation and CTAs speak in a second voice: Karla Bold at 12px, uppercase, with 1.1px letter-spacing — a technical, tracking-heavy label register that stands in deliberate contrast to the semi-serif display above. The split maps precisely to content vs. wayfinding.

Key Characteristics:

• Near-monochrome palette with pure black (#000000) as the dominant token — 503 occurrences covering text, borders, and the hero background equally.
• Single chromatic layer: steel blue (#187aba) reserved for link text, interactive borders, and focus rings — never as a fill color.
• MS Gloriola II Std at weight 500 in three heading sizes — a semi-serif display that no major bank competitor uses at this tier.
• Karla Bold at 12-14px uppercase with 1.1px tracking for every label, navigation item, and CTA — the system's typographic counterweight.
• Zero border-radius on all surfaces except the newsletter email input (10px) — sharp geometry as institutional signal.
• 0px radius buttons filled with charcoal (#333333), not blue — the CTA has no brand voltage.
• Flat system with no shadow tier; depth comes from 1px black borders and column-level contrast.
• Full-bleed dark photography hero with white label text over black — the only moment of visual luxury.

Colors

Ink

• Ink ({colors.ink} — #000000): frequency 503. Used as text (251), border (251), background (1). The page's load-bearing structural token — every nav item, section divider, body paragraph, and button border runs in pure black. Wired with no CSS variable name on the captured surfaces.
• Ink Soft ({colors.ink-soft} — #333333): frequency 92. Used as text (43), border (37), background (12). The primary button fill and secondary heading color below the fold. Softer than pure black but still achromatic.
• Ink Mid ({colors.ink-mid} — #4c4c4c): frequency 91. Used as text (47), border (44). The workhorse body-paragraph color — slightly lighter than ink-soft, used for running copy and the newsletter form label.
• Ink Muted ({colors.ink-muted} — #757575): frequency 46. Used as text (23), border (23). Secondary and tertiary labels, caption rows, footer sub-text.
• Ink Dark ({colors.ink-dark} — #222222): frequency 2. Used as text and border in selected card contexts. A near-black that merges visually with pure ink but registers as a separate value in the CSS.

Canvas

• Canvas ({colors.canvas} — #ffffff): frequency 118. Used as text (57), background (7), border (54). Below-fold body surface, button text over dark fills, and the white text in the hero band.
• Surface-1 ({colors.surface-1} — #f2f2f2): frequency 2. Background fill on alternating section rows — the only surface color that breaks the white canvas.

Interactive

• Primary ({colors.primary} — #187aba): frequency 210. Used as text (103), border (105), background (2). The system's only chromatic token — steel blue reserved for link underlines, hover-state borders, and inline hyperlinks. Never used as a button fill.
• Primary Text ({colors.primary-text} — #0000ee): frequency 46. Used as text (23), border (23). The browser default hyperlink blue — appears on unvisited anchor elements that have not been restyled. A residual rendering artifact rather than a brand decision; avoid introducing this deliberately.

Hairline

• Hairline ({colors.hairline} — #bdbdbd): frequency 2, as border only. Used exclusively on the newsletter email input field to mark the resting border state.

Typography

Font Families

The system runs MS Gloriola II Std for headings across three weight variants (ms_gloriola_ii_stdlight, ms_gloriola_ii_stdregular, ms_gloriola_ii_std_semibold) and Karla for everything else (karlabold, karlaregular). Both are proprietary or brand-customized — MS Gloriola II Std is not publicly licensed; Karla is available on Google Fonts in standard weight variants. The two-family split is absolute: there is no heading size that uses Karla, and no body size that uses MS Gloriola II Std.

Hierarchy

Principles

The semi-serif display at weight 500 is the distinctive move. The heading never reaches 700 — the authority comes from the typeface's letterform character, not from weight. Karla labels at uppercase with positive tracking are the sharpest typographic contrast in the system: where the headings are quiet and editorial, the CTAs announce themselves through capitalization and spacing.

Note on Font Substitutes

MS Gloriola II Std is proprietary and unavailable for download. Playfair Display at weight 400-500 is the closest public alternative for the semi-serif display role — it shares the mixed-serif character. For Karla, the original is on Google Fonts; Inter Bold in uppercase with 0.08em tracking is an acceptable substitute if Karla is unavailable.

Layout

Spacing System

• Base unit: 10px — the dominant padding value (24 occurrences), present on button verticals, card internals, and nav items.
• Tokens: {spacing.xxs} 3px · {spacing.xs} 5px · {spacing.sm} 10px · {spacing.md} 14px · {spacing.base} 20px · {spacing.lg} 30px · {spacing.xl} 40px · {spacing.2xl} 80px.
• Section padding (vertical): 80px on the full-bleed hero photography band; below-fold sections have no declared background padding — they rely on heading margin and column rhythm.
• Card internal padding: 20px for dark overlay cards; 0px on left-edge for editorial columns.
• Navigation: 7px horizontal padding per nav link label (0px vertical on the link element itself, with padding applied to the parent nav container).

Grid & Container

• Max content width: approximately 1200px for the "What We Do" section heading and article columns.
• Hero: full-bleed dark photography, with small uppercase Karla wordmark at the top-left. No centered CTA stack — the image IS the hero.
• Below-fold sections: 3-column layouts with ink hairline dividers, article card grids with dark overlay panels, and an editorial full-bleed "Morgan Stanley Blueprint" section with reversed text on a navy panel.
• Newsletter section: centered 2-column form (label + input + submit button in a row) on white canvas, 357px input width.

Rhythm

The page alternates between dark-surface editorial moments (the hero photography, the dark card overlays, the Blueprint panel) and white-canvas structured content (the "What We Do" grid, the "Recent Insights" card row, the "Discover Who We Are" section). Neither band dominates — the rhythm is counter-alternating, which prevents the page from feeling either consistently light or consistently dark.

Elevation

The system has no shadow tier. The page renders no detected shadow values in the extracted color data. Depth is communicated entirely through two mechanisms: surface-color contrast (dark photography or dark card overlays against the white canvas) and 1px black borders ({colors.ink}) that define the edges of cards, form inputs, and navigation items. The newsletter input uses a {colors.hairline} (#bdbdbd) border in resting state — the only non-ink border in the system.

There is no elevation ladder of any kind — no raised cards, no ambient shadow, no floating nav bar. The system is categorically flat.

Shapes

The radius scale is zero-first. The only detected non-zero value in the extracted data is 10px on the newsletter email subscription input — every other surface (buttons, navigation items, card containers, dropdowns) renders at 0px. This makes Morgan Stanley the most geometrically strict system in the banking category captured in this directory.

• {rounded.none} 0px — all buttons, nav elements, card containers, dropdown panels.
• {rounded.input} 10px — newsletter email input field only.

The square geometry reads as institutional authority; the single rounded input is the one concession to conventional form-field usability.

Components

button-primary — Charcoal {colors.ink-soft} fill, white text, Karla Bold 14px uppercase at 1.1px tracking, 0px radius, 10×20px padding, 62px height. "Investment Banking & Capital Markets" is the canonical instance — a category selector, not a conventional CTA.

button-secondary — White canvas fill, ink text, same Karla Bold uppercase label. No border on the captured instances; 0px radius.

cta-link — Transparent background, ink text, Karla Bold uppercase at 1.1px tracking. The navigation arrow-link pattern ("View All Insights →") used throughout section footers.

top-nav — White canvas surface, 48px height. Wordmark flush left, primary nav links (About Us / Wealth Management / Investment Management / Institutional / Research / Ideas) in Karla Regular uppercase 14px, utility links (Careers / Locations / What We Do / About Us) at Karla Bold 12px uppercase.

nav-link — Transparent, ink text, Karla Regular 14px uppercase at -0.5px tracking, 7px horizontal padding. No hover fill — only an ink border appears on active states.

hero-section — Full-bleed dark photography, 80px top/bottom padding. The wordmark label in white Karla Bold 12px uppercase sits at the top-left; no centered CTA.

hero-heading — Not a true h1 above the fold; the first true display heading "What We Do" sits below the photography band, rendered in MS Gloriola II Std 40px / weight 500 / -1.45px tracking in charcoal ink-soft.

section-heading — Same as hero-heading: MS Gloriola II Std 40px / 500 on white canvas in ink-soft. Used for "The Morgan Stanley Blueprint," "Recent Insights," "Discover Who We Are & Join Us."

card-heading — MS Gloriola II Std 20px / 500 in white on dark overlay cards; 0px left padding on the body, 20px left padding on the headline block that spans the dark panel.

body-paragraph — Karla Regular 16px / 400 in ink-mid (#4c4c4c), 24px line height, -0.67px tracking. The default running-text style.

body-paragraph-muted — Karla Regular 12px / 400 in ink-muted (#757575) for legal disclaimers, form consent text, and caption rows.

card — Charcoal ink-soft fill, white headline in MS Gloriola II Std 20px, 20px padding, 0px radius. Used for the dark overlay article cards in the "Recent Insights" row.

link-text — Transparent background, steel blue (#187aba) text in Karla Regular 14px. The inline hyperlink style — the only moment of chromatic brand voltage in body copy.

category-label — Ink text, Karla Bold 12px uppercase at 0.24px tracking. The small-caps category markers above article cards.

text-input — White canvas fill, ink-mid text, Karla Regular 18px, 10px rounded corners, 0×20px padding, 64px height, {colors.hairline} border. The newsletter email field — the system's only interaction surface.

footer — White canvas, ink body text, Karla Regular 14px. No surface contrast from the page floor; the footer continues the canvas.

Do's and Don'ts

Do use MS Gloriola II Std exclusively for headings. The two-typeface split between the semi-serif display family and Karla is the system's load-bearing typographic identity — using Karla for a heading or MS Gloriola II Std for a nav label breaks the division the entire system is built on.

Do hold steel blue ({colors.primary} — #187aba) to link text and borders only. Its 210 occurrences are split 103 text / 105 border — there are only 2 background-fill uses in the entire captured page, both incidental. Blue fills on buttons would contradict the system's flat-ink authority.

Do use 0px border-radius on all interactive surfaces. The square geometry is not a default oversight — it is the institution's architectural decision. A pill button or rounded card would read as a completely different brand.

Do let the heading weight stay at 500. MS Gloriola II Std at 40px / 500 with -1.45px tracking makes the editorial statement — bumping to 700 would change the heading from a publication dek to a retail-banking shout.

Don't use #187aba as a background fill for buttons or cards. It appears twice as a background in 210 extracted occurrences; the system's CTA fill is charcoal #333333 on white text. Rendering a blue-fill primary button imports the visual grammar of Chase or Bank of America, not Morgan Stanley.

Don't introduce shadows. The page has zero shadow-color entries in its extraction; every elevation signal comes from surface-color contrast. A drop shadow on a card would be the single most foreign element in the system.

Don't set heading letter-spacing to 0 or positive values. MS Gloriola II Std at 40px needs -1.45px tracking; at 20px it takes -0.73px. Without negative tracking, the semi-serif letterforms open up and lose the compact editorial reading.

Don't mix uppercase Karla with mixed-case at the same typographic tier. The system is binary: display-tier text is in MS Gloriola II Std in mixed case; CTA and nav text is in Karla Bold uppercase. Any mixed-case Karla label at the CTA tier reads as a styling accident.

Known Gaps

• Color system depth: the captured page exposes no CSS custom properties for color — Morgan Stanley does not appear to use CSS variables for theming. The token set reflects direct hex values only; any internal design-token system is not publicly surfaced.
• The actual homepage: the above-fold captured content is a photography band with no text content visible at scrape time; the effective "hero" heading is the "What We Do" section below. A full homepage capture with the rotating hero copy would reveal more typographic instances.
• Dark-surface component states: the dark overlay cards and the Blueprint panel carry white text on dark backgrounds, but hover and focus states on these surfaces are not captured.
• Navigation mega-menu: Morgan Stanley runs a dropdown mega-menu on hover for each primary nav item; its internal layout, card structure, and color decisions are not captured in the marketing-surface extraction.
• Mobile and responsive tokens: the CSS variable system exposes zh-hans and JP font families (source-han-sans-cn-variable, source-han-sans-jp-variable, source-han-sans-hk-variable) for international markets, but no responsive breakpoint tokens are exposed in the captured variables.
• Motion: the hero photography transitions between images in a slow crossfade; timing and easing values are not captured.
• Form error states: the newsletter input resting state is captured; validation error (red border, error message) and success state are not.