--- version: alpha name: "Morgan Stanley" website: "https://www.morganstanley.com" description: >- A global investment bank whose marketing site runs two proprietary typefaces in strict division of labor — MS Gloriola II Std carries every heading in weight 500 at tight negative tracking, while Karla (bold and regular variants) handles all navigation, CTA labels, and body copy in uppercase 12px at 1.1px letter-spacing. The palette is near-monochrome: pure black ink on white canvas with a single steel-blue (#187aba) for link text and interactive borders, and a sharp 0px border-radius across every surface. No shadows, no fills, no gradients — authority expressed through restraint and a serified display voice that none of its direct competitors use at the primary heading tier. seo: title: "Morgan Stanley Design System for React — ink black, MS Gloriola II, 16 components" metaDescription: "Morgan Stanley's marketing-site design system as DESIGN.md. Near-monochrome palette, MS Gloriola II Std display, Karla uppercase CTA labels, 0px border-radius, 16 components. For React, Next.js, and AI tools." highlights: - "Two-typeface split — MS Gloriola II Std owns every heading tier; Karla handles every label, nav item, and CTA in uppercase-tracked sans" - "Near-monochrome palette — pure black (#000000) dominates at 503 occurrences; the only chromatic note is steel blue (#187aba) for links and borders" - "Zero rounding — every surface including the newsletter input sits at 0px border-radius; the only detected radius is a single 10px on the email field" - "Uppercase CTA labels at 1.1px tracking — Karla Bold at 14px / weight 700 in all-caps is the system's only typographic warmth signal" - "No shadows, no background fills — depth comes from a 1px black border and column-level ink contrast alone" tags: - "Banking & Payments" - "Fintech & Crypto" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Morgan Stanley's marketing site announces authority through absence. No gradient hero, no photography overlay with a glowing CTA pill — the above-fold is a full-bleed documentary image (a globe rendered in blue light) with the wordmark set in white Karla Bold at 12px uppercase in the top-left corner, nothing else. The only color decision is the background: black. Below the fold, a white canvas opens and the system's two typefaces take over: MS Gloriola II Std in weight 500 at 40px with tight -1.45px tracking for section headings, and Karla Regular at 16px with no tracking for body copy. Where Goldman Sachs leans on a bold weight-700 sans and JPMorgan Chase uses a conventional blue primary, Morgan Stanley keeps its headings in a semi-serif display family that reads closer to a financial-publication editorial voice than a typical investment-bank marketing system. The DESIGN.md file captures the system in machine-readable form. Inside: 12 color tokens organized around a pure-ink dominant (503 occurrences), a single steel-blue interactive layer (#187aba, 210 occurrences split equally between text and border roles), and structural mid-grays at #4c4c4c and #333333. Twelve typography tokens span MS Gloriola II Std across three heading sizes and Karla across body, label, nav, and CTA roles — including the uppercase-tracked 12px Karla Bold used on every navigation link and CTA. One radius value (10px on the newsletter input), an 8-step spacing scale, and 16 component definitions cover the hero image band, the sectional display headings, the uppercase-link CTAs, the zero-radius navigation, and the newsletter subscription form. Feed this file to Claude or Cursor and it reproduces Morgan Stanley's specific discipline: two proprietary typefaces in strict division, near-monochrome palette with a single blue link layer, flat 0px surfaces everywhere except the newsletter email input, and no decorative background fills outside the hero photography band. The system is worth studying not for its visual warmth — it has none — but for how far a brand can lean into typographic voice and ink-to-paper contrast as its sole differentiator. The display font is doing the work that color and gradient do in every competitor's system. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.morganstanley.com" title: "Morgan Stanley — official site" description: "Morgan Stanley's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Morgan Stanley's primary brand color?" answer: "Morgan Stanley does not have a chromatic brand voltage in the conventional sense. The dominant color across the captured page is pure black (#000000) at 503 occurrences — used as text (251), border (251), and one background. The only chromatic color is steel blue (#187aba), appearing 210 times split equally between text (103) and border (105) roles. This is the interactive layer: link underlines, hover-state borders, and focus rings. There is no CTA fill in blue — the primary button is charcoal (#333333) with white text, a rectangular block with 0px radius and no chromatic brand signal." - id: "typography" title: "What typefaces does Morgan Stanley use, and what are good substitutes?" answer: "Morgan Stanley runs two proprietary typefaces in strict division. MS Gloriola II Std (in three weights: stdregular, std_semibold, stdlight) handles every heading — display at 40-54px, section sub-heads at 20px — in weight 400-500 with tight negative tracking down to -1.45px. Karla (in bold and regular variants) handles all navigation labels, CTA text, body copy, and the uppercase-tracked 12-14px link labels (Karla Bold at 0.24px and 1.1px tracking). The two-family split maps exactly to a content-voice vs. navigation-voice division. For MS Gloriola II Std, the closest open-source alternative is Playfair Display at the same weight for display headings; for Karla, the typeface is freely available on Google Fonts." - id: "border-radius" title: "What is Morgan Stanley's corner-radius approach?" answer: "Morgan Stanley uses 0px border-radius on virtually every surface — buttons, navigation items, cards, dropdown menus, and most form elements all render as sharp rectangles. The only detected non-zero radius in the extracted data is 10px on the newsletter email subscription input field. This makes Morgan Stanley one of the most geometrically strict systems in the financial category — Morgan Stanley and Fidelity both reach for zero rounding while Barclays uses 99px pill buttons. The square geometry reads as institutional authority: nothing is softened." - id: "heading-voice" title: "Why does Morgan Stanley use a semi-serif display font for headings when most banks use sans?" answer: "MS Gloriola II Std is a contemporary semi-serif — it has the proportions of a humanist sans but with subtle serifs on certain strokes, positioning it between a full editorial serif (like the Financial Times' Financier) and a geometric sans. The choice signals print-publication credibility rather than tech-product clarity. Goldman Sachs uses a bold italic sans for headlines; JPMorgan uses a conventional geometric sans at high weight. Morgan Stanley's semi-serif at weight 500 (not 700) reads closer to the Financial Times or Wall Street Journal house style, which is exactly the authority positioning the brand wants — investment ideas, not retail banking. The font is proprietary and not available for download." - id: "interactive-blue" title: "What role does the steel blue (#187aba) play, and when should I use it?" answer: "Steel blue (#187aba) is the system's sole chromatic layer. Its 210 occurrences split almost evenly between text (103) and border (105), with only 2 background uses — which means it is almost exclusively a typography and border signal, never a fill. Use it for link text, focus-state borders, active-state borders on navigation items, and inline hyperlinks. Do not use it as a button background fill or a card surface — that usage is absent from the captured page and would be inconsistent with the system's flat-ink discipline. The blue is close to the Pantone 300-range steel blue used by many financial institutions, though Morgan Stanley's specific hex sits at medium lightness (OKLCH L≈0.56) rather than the deeper navy that Goldman and JPMorgan use." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" ink-soft: "#333333" ink-mid: "#4c4c4c" ink-muted: "#757575" canvas: "#ffffff" surface-1: "#f2f2f2" hairline: "#bdbdbd" primary: "#187aba" primary-text: "#0000ee" ink-dark: "#222222" typography: display-xl: fontFamily: "\"ms_gloriola_ii_std_semibold\", sans-serif" fontSize: 54px fontWeight: 500 lineHeight: 68px letterSpacing: "-1.45px" display-lg: fontFamily: "\"ms_gloriola_ii_std_semibold\", sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 48px letterSpacing: "-1.45px" heading-md: fontFamily: "\"ms_gloriola_ii_std_semibold\", sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 24px letterSpacing: "-0.73px" heading-sm: fontFamily: "\"ms_gloriola_ii_stdregular\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 14px letterSpacing: "1px" body-lg: fontFamily: "karlaregular, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-md: fontFamily: "karlaregular, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "-0.67px" body-sm: fontFamily: "karlaregular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "karlabold, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 14px letterSpacing: "1.1px" label-sm: fontFamily: "karlabold, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 12px letterSpacing: "0.24px" button-md: fontFamily: "karlabold, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 14px letterSpacing: "1.1px" nav-link: fontFamily: "karlaregular, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 14px letterSpacing: "-0.5px" caption: fontFamily: "karlaregular, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: "-0.2px" rounded: none: "0px" input: "10px" spacing: xxs: "3px" xs: "5px" sm: "10px" md: "14px" base: "20px" lg: "30px" xl: "40px" 2xl: "80px" components: button-primary: backgroundColor: "{colors.ink-soft}" textColor: "{colors.canvas}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "10px 20px" height: "62px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "10px 20px" border: "0" cta-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" padding: "10px 0px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-sm}" rounded: "{rounded.none}" padding: "10px 0px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 7px" hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-sm}" rounded: "{rounded.none}" padding: "80px 20px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.display-lg}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.display-lg}" card-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.heading-md}" padding: "0px 0px 0px 20px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-mid}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.caption}" card: backgroundColor: "{colors.ink-soft}" textColor: "{colors.canvas}" typography: "{typography.heading-md}" rounded: "{rounded.none}" padding: "20px" link-text: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm}" category-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mid}" typography: "{typography.body-lg}" rounded: "{rounded.input}" padding: "0px 20px" height: "64px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "30px 20px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 54px | 500 | 68px | -1.45px | Hero / primary page h1 | | `{typography.display-lg}` | 40px | 500 | 48px | -1.45px | Section h2 ("What We Do") | | `{typography.heading-md}` | 20px | 500 | 24px | -0.73px | Card headlines, article sub-heads | | `{typography.heading-sm}` | 14px | 400 | 14px | 1px | Small-caps section labels (MS Gloriola regular) | | `{typography.body-lg}` | 18px | 400 | 20px | 0 | Navigation area links (Karla Regular) | | `{typography.body-md}` | 16px | 400 | 24px | -0.67px | Default body paragraph (Karla Regular) | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Body anchor text, inline links | | `{typography.label-md}` | 14px | 700 | 14px | 1.1px | Primary CTA labels, uppercase link buttons | | `{typography.label-sm}` | 12px | 700 | 12px | 0.24px | Secondary navigation labels, small uppercase links | | `{typography.button-md}` | 14px | 700 | 14px | 1.1px | CTA button text in uppercase | | `{typography.nav-link}` | 14px | 400 | 14px | -0.5px | Top-nav link labels in Karla Regular uppercase | | `{typography.caption}` | 12px | 400 | 16px | -0.2px | Footer, disclaimer text, metadata | ### 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.