--- version: alpha name: "J.P. Morgan" website: "https://www.jpmorgan.com" description: >- A global financial-services brand whose marketing site runs a single proprietary typeface — Amplitude — across every tier from 64px display headlines at weight 300 to 12px nav labels at weight 400, with no second family. The page canvas is white (#ffffff) with a near-blue-gray ink (#31373d) as the dominant text color; teal (#1a7b99) wired into the CSS as --cwm-actionable-accented-bold-background serves as the primary interactive accent for CTA buttons and link text. A warm earth-brown (#936846) appears as a secondary accent on featured-article headlines and divider marks. The system is spare and deliberately institutional — square-cornered inputs (radius 3, the single CSS variable), 50% circles for avatar elements, no gradient fills, and weight 300 at display sizes signaling authority through restraint rather than mass. seo: title: "J.P. Morgan Design System for React — teal CTA on white, Amplitude, 16 components" metaDescription: "J.P. Morgan's marketing-site design system as a DESIGN.md file. Amplitude typeface at weight 300 display, teal #1a7b99 CTA accent, near-blue-gray ink #31373d, 14 color tokens, 16 components. For React, Next.js, and AI coding tools." highlights: - "Weight 300 at 64px display — Amplitude runs feather-light at large sizes; authority comes from restraint, not mass, diverging from Citibank's weight-700 approach" - "Teal accent as the sole interactive voltage — #1a7b99 wired into --cwm-actionable-accented-* CSS properties carries every CTA, hover state, and focus ring" - "Earth-brown editorial accent — #936846 appears 26 times as text and border, marking featured-article links and section dividers with a warmth the teal primary does not carry" - "Corner default of 3 — the --cwm-palette-corner-default CSS variable is set to 3, yielding 3px radius on inputs and interactive elements; the system is nearly square-cornered throughout" - "Single-family typography — Amplitude handles every tier from 64px hero to 12px caption with no second voice, unlike bank competitors that run a separate serif for editorial moments" tags: - "Banking & Payments" - "Fintech & Crypto" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | J.P. Morgan's site presents institutional restraint as its primary design gesture. The hero is a dark photograph of Tel Aviv at night, with "J.P. Morgan in Israel" set in Amplitude at 64px / weight 300 — the lightest weight at the largest size in any financial-services brand in this directory. Where Citibank and Goldman Sachs push their display headlines to weight 600–700, J.P. Morgan holds at 300 and lets the sizing do the authority work. The body of the page returns to white canvas, with a near-blue-gray ink (#31373d) as the text color — not pure black, not charcoal, but a corporate blue-gray that reads as precision without aggression. Teal (#1a7b99) handles all interactive elements: CTA buttons, inline link text, and focus rings alike. The DESIGN.md file captures 14 color tokens, 12 typography tokens, and 16 component definitions from the J.P. Morgan marketing surface. The color palette is spare: three chromatic tones (teal #1a7b99 as the primary CTA accent, earth-brown #936846 as an editorial secondary, deep teal #005075 for hover/focus states) plus structural neutrals. The typography is a single family — Amplitude, a proprietary humanist sans with Arial, Helvetica fallbacks — running from 64px display at weight 300 through 12px nav labels at weight 400. The CSS exposes a named component token system (--cwm-actionable-accented-*) that wires teal and deep teal into a four-state interactive model: resting, hover, active, focus. The corner palette variable --cwm-palette-corner-default is set to 3, making 3px the system-wide interactive element radius. Feed this file to an AI coding tool and it will reproduce J.P. Morgan's specific moves: weight-300 display at 64px, teal reserved exclusively for interactive elements, earth-brown for editorial accents on article links and section dividers, nearly square-cornered inputs at 3px, and white canvas with blue-gray text throughout. The move worth studying is the interactive-token system: unlike most brand specs that treat hover and focus as implicit, J.P. Morgan's CSS explicitly wires --cwm-actionable-accented-bold-background (#1a7b99), --cwm-actionable-accented-bold-background-hover (#005075), and --cwm-actionable-accented-bold-foreground (#ffffff) as first-class named tokens, suggesting the system was built for component-library reuse rather than one-off page styling. 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.jpmorgan.com" title: "J.P. Morgan — official site" description: "J.P. Morgan'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: "jpmorgan-primary-color" title: "What is J.P. Morgan's primary brand color?" answer: "J.P. Morgan's primary interactive accent is teal at #1a7b99, wired into the CSS as --cwm-actionable-accented-bold-background and --cwm-actionable-accented-borderColor. It handles CTA button fills, inline link text, and active border states — 14 total occurrences in the captured page, split evenly between text (7) and border (7) roles. The hover state deepens to a dark teal at #005075 (--cwm-actionable-accented-bold-background-hover). A second chromatic accent, earth-brown #936846, appears 26 times for editorial article links and section dividers — subordinate to teal, warmer in register, and not wired into the interactive token system. Neither color has appeared as a rendered background fill in the captured surface." - id: "jpmorgan-typography" title: "What typeface does J.P. Morgan use, and what should I use as a substitute?" answer: "J.P. Morgan's marketing site runs Amplitude, a humanist sans-serif licensed by Font Bureau, across every typographic tier. There is no second voice — display, heading, body, button, nav, and caption all share Amplitude with Arial, Helvetica as fallbacks. The distinctive setting is weight 300 at the display sizes: 64px hero h1 at 300, 56px section h2 at 300, 32px mid-tier at 300. Body text runs at 14–16px in weight 300–400, and interactive labels at 14px in weight 400. The closest open-source substitute for Amplitude at weight 300 is Source Sans 3 (Google Fonts) at the same weight; Nunito Sans at weight 300 is a second option. Preserve the 0.28px letter-spacing that appears on most Amplitude sizes — it is an explicit CSS value across 30+ captured typography samples." - id: "jpmorgan-canvas" title: "What is J.P. Morgan's canvas and ink strategy?" answer: "The body canvas is white (#ffffff), with a near-blue-gray (#31373d) as the dominant text color rather than near-black. The #31373d token merges two near-identical values (#31373d and #373739) that the extractor clustered together; combined frequency is 511 occurrences — 255 text and 255 border. The tone sits at oklch lightness 33%, roughly equivalent to a very dark slate, cooler than a warm charcoal. The hero section inverts this with white text on the dark photograph. Below the fold, white canvas with #31373d text is the universal combination. There is no declared off-white or warm cream variant in the system — the canvas is clean #ffffff." - id: "jpmorgan-corner-radius" title: "What corner-radius style does J.P. Morgan use?" answer: "The system exposes a single CSS custom property for corner geometry: --cwm-palette-corner-default: 3, corresponding to 3px border-radius. This appears on interactive elements — buttons, input fields, and card containers — but the component extraction shows 0px radius on the heroHeading and bodyText selectors, meaning editorial surfaces are square-cornered. The 50% radius appears 7 times for circular avatar elements (profile photographs, leadership-team thumbnails). Outside of circles and the 3px interactive default, the system is effectively square. This matches the institutional posture: banks that round aggressively (Chase at 8–12px, Stripe at 4–6px) read as consumer-facing; 3px keeps the surfaces reading as institutional documents." - id: "jpmorgan-interactive-tokens" title: "How does J.P. Morgan's interactive token system work?" answer: "The CSS exposes a named component token family beginning with --cwm-actionable-accented-*, covering a four-state interactive model for the accented (teal-filled) variant of buttons. Resting state: --cwm-actionable-accented-bold-background (#1a7b99), --cwm-actionable-accented-bold-foreground (#ffffff), --cwm-actionable-accented-bold-borderColor (#1a7b99). Hover state: --cwm-actionable-accented-bold-background-hover (#005075), --cwm-actionable-accented-bold-foreground-hover (#ffffff). Focus ring: --cwm-focused-bold-outline (#005075) and --cwm-focused-outline (#005075). A ghost variant is also wired: --cwm-actionable-accented-background (transparent), --cwm-actionable-accented-foreground (#1a7b99), --cwm-actionable-accented-borderColor (#1a7b99). The architecture suggests a component library built on design tokens, not ad-hoc inline styles." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#1a7b99" primary-hover: "#005075" secondary: "#936846" ink: "#31373d" canvas: "#ffffff" canvas-light: "#f5f7f8" ink-black: "#000000" ink-muted: "#808080" shadow-dark: "#101820" focus-ring: "#005075" brand-dark: "#35210d" typography: display-xl: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 64px fontWeight: 300 lineHeight: 72px letterSpacing: 0 display-lg: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 56px fontWeight: 300 lineHeight: 64px letterSpacing: 0 display-md: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 40px letterSpacing: "0.32px" heading-md: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 32px letterSpacing: "0.24px" body-lg: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0.32px" body-md: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0.28px" body-sm: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 20px letterSpacing: "0.28px" body-md-bold: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0.32px" label-md: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 24px letterSpacing: "0.28px" caption: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 17.14px letterSpacing: 0 button-md: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0.28px" nav-link: fontFamily: "Amplitude, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" xs: "3px" full: "9999px" circle: "50%" spacing: xxs: "5px" xs: "8px" sm: "12px" base: "16px" lg: "24px" xl: "30px" 2xl: "40px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "1px 6px" height: "32px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "1px 6px" height: "32px" border: "0" button-ghost: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "1px 6px" height: "32px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "8px 24px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 0px" hero-section: backgroundColor: "{colors.shadow-dark}" textColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "64px 24px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "20px 24px" borderColor: "{colors.canvas-light}" article-link: backgroundColor: "transparent" textColor: "{colors.secondary}" typography: "{typography.heading-md}" inline-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-md}" service-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "24px" avatar: backgroundColor: "{colors.canvas-light}" rounded: "{rounded.circle}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "8px 16px" height: "40px" borderColor: "{colors.ink}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "40px 24px" --- ## Overview J.P. Morgan's marketing site reads like a precisely formatted document — white canvas, blue-gray ink, teal interactive accents, and a typeface running at weight 300 everywhere that matters most. **Institutional featherweight**: where Citibank and Capital One run display headlines at weight 600–700 to claim authority through mass, J.P. Morgan runs Amplitude at 300 across every large-scale moment — 64px hero, 56px section headers, 32px mid-page displays — trusting scale alone to do the authority work. The system conveys gravitas by showing how little visual force it needs to hold the page together. The interactive token system reveals a component-library mindset that goes beyond typical marketing-site CSS. The CSS custom properties begin with `--cwm-actionable-accented-*` and wire a full four-state interactive model (resting, hover, focus, active) into teal (#1a7b99) and dark teal (#005075) with explicit foreground, background, and border values for each. Where most marketing sites define hover states inline, J.P. Morgan declares them as first-class tokens — a signal that this CSS serves a shared design system rather than a single-page stylebook. No other financial-services brand in this directory exposes this level of token architecture on a marketing surface. The secondary earth-brown (#936846) breaks the otherwise cool palette with a warmth that suggests history and depth. It appears 26 times as text and border edges on featured article links and divider marks — not the interactive accent but the editorial one, connoting longevity rather than action. **Key Characteristics:** - Amplitude at weight 300 for display (64px, 56px, 32px) — the lightest display weight in any financial-services brand in this directory. - Teal (#1a7b99) as the sole interactive voltage, wired through a named --cwm-actionable-accented-* CSS token family. - Near-blue-gray ink (#31373d) for all body text — not charcoal, not black, a cool institutional slate at lightness 33%. - Earth-brown (#936846) as the editorial secondary accent — 26 occurrences on article links and section dividers. - Corner default of 3px (--cwm-palette-corner-default: 3) — near-square throughout, matching the institutional document register. - Single-family typography: Amplitude from display to caption, no second voice. - White canvas with no warm-cream variation — pure #ffffff throughout the below-fold surfaces. ## Colors ### Interactive Accent - **Primary Teal** (`#1a7b99`): frequency 14. Used as text (7) and border (7) — CTA button fills, inline link text, and active border states. Wired as --cwm-actionable-accented-bold-background and --cwm-actionable-accented-borderColor. The sole interactive voltage on the page. - **Primary Hover** (`#005075`): frequency 0 in resting capture (hover state only). Wired as --cwm-actionable-accented-bold-background-hover and --cwm-focused-bold-outline. Darkens the teal for both hover and keyboard-focus states. ### Editorial Accent - **Earth Brown** (`#936846`): frequency 26. Used as text (13) and border (13) — featured article titles, section divider lines, and editorial link accents. Not wired into the interactive token system. A warm amber-brown at oklch hue 59°, providing editorial warmth against the cool blue-gray ink. ### Surface - **Canvas** (`#ffffff`): frequency 18 as background. The body floor for all below-fold sections, card surfaces, and the top-nav. Pure white with no cream drift. - **Canvas Light** (`#f5f7f8`): merged with canvas in the extraction cluster. A near-imperceptible blue-white used for card backgrounds in the services section. - **Brand Dark** (`#35210d`): frequency 1 as background, classified brand layer. The very dark brown that appears as the footer's section strip or a featured-image overlay. - **Shadow Dark** (`#101820`): frequency 1 as gradient. A near-black indigo-blue used as the gradient foundation on the hero photograph overlay. ### Text - **Ink** (`#31373d`): frequency 511 total (255 text, 255 border). The dominant text color for body paragraphs, section headings below the fold, and the top-nav links. Merges #31373d and #373739 — a cool blue-gray slate at lightness 33%. - **Ink Black** (`#000000`): frequency 10 (5 text, 5 border). Appears on the highest-contrast text moments, likely the logo and main heading anchor text. - **Ink Muted** (`#808080`): frequency 2. Secondary caption and metadata text. - **Focus Ring** (`#005075`): frequency 0 in visual render; declared as --cwm-focused-bold-outline and --cwm-focused-outline. Keyboard focus ring color, matching the hover state. ## Typography ### Font Family J.P. Morgan runs **Amplitude** across every typographic tier — display at 64px, body at 14–16px, caption at 12px, and nav links at 16px all share the same humanist sans. Fallbacks are Arial, Helvetica, sans-serif. There is no editorial serif, no monospace accent, and no secondary display family. The full typographic range is expressed through size and weight variation within a single voice. The weight strategy is distinct: display sizes run at 300, body sizes at 300–400, labels at 400–500, and a single bold instance at 700 (inline `` emphasis). Weight 700 appears once across all captured typography. The system's authority comes from 64px at 300, not from bold. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 64px | 300 | 72px | 0 | Hero h1 ("J.P. Morgan in Israel") | | `{typography.display-lg}` | 56px | 300 | 64px | 0 | Major section h2 headings | | `{typography.display-md}` | 32px | 300 | 40px | 0.32px | Mid-level section headings | | `{typography.heading-md}` | 24px | 300 | 32px | 0.24px | Section sub-titles, article headings | | `{typography.body-lg}` | 16px | 400 | 24px | 0.32px | Lead paragraphs, service descriptions | | `{typography.body-md}` | 14px | 400 | 20px | 0.28px | Default body copy | | `{typography.body-sm}` | 14px | 300 | 20px | 0.28px | Secondary running text | | `{typography.body-md-bold}` | 16px | 700 | 24px | 0.32px | Inline emphasis only | | `{typography.label-md}` | 14px | 500 | 24px | 0.28px | Category labels, service chip text | | `{typography.caption}` | 12px | 400 | 17.14px | 0 | Fine-print metadata, footnote rows | | `{typography.button-md}` | 14px | 400 | 20px | 0.28px | CTA button labels | | `{typography.nav-link}` | 16px | 400 | 24px | 0 | Top-nav link labels | ### Note on Font Substitutes Amplitude is a licensed proprietary typeface. The closest open-source substitute at weight 300 is **Source Sans 3** (Google Fonts) — it matches Amplitude's humanist proportions and has a genuine weight 300 that reads without the optical thinness some sans-serifs produce. **Nunito Sans at weight 300** is a second option with similar counters. Preserve the 0.28px / 0.32px letter-spacing that appears on most sizes — it is a global CSS declaration, not an occasional override, and removing it noticeably tightens the system. ## Layout ### Spacing System - **Base unit:** 8px — the dominant extracted padding value. - **Tokens:** `{spacing.xxs}` 5px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 30px · `{spacing.2xl}` 40px · `{spacing.3xl}` 64px. - **Hero padding:** 64px top, with the photograph filling the full viewport. - **Card internal padding:** 20×24px — compact for an institutional brand, reflecting the density of financial-services information. - **Section vertical rhythm:** ~40px between major sections below the fold; looser 64px on the hero-adjacent band. ### Grid and Container - **Container width:** ~1122px for body text and paragraph columns (confirmed by bodyText.widthPx in extraction). - **Service cards:** a 4-column grid ("Investment Banking", "Markets", "Payments", "Prime Services") carrying equal-weight service descriptions. - **Article grid:** a responsive article-card layout below the service section showing editorial photography with earth-brown title accents. - **Footer:** multi-column link grid with the J.P. Morgan logo at right. ### Rhythm The page's pacing is dense-to-comfortable — the hero section with its dark photograph and single headline h1 is generous, but the "About us" body section that follows packs a multi-paragraph institutional narrative at compact 16px body text with modest 40px vertical margins between sections. The service-card grid is the densest moment: four equal tiles with 24px padding, no visible gap between them. The "Contact us" section at the bottom opens up again with generous top padding. ## Elevation J.P. Morgan's marketing surface shows **no shadow tier** in the captured extraction. Elevation comes from surface-color contrast: the hero photograph provides depth through photography, and card surfaces use a slight canvas-light background (#f5f7f8) to lift off the pure-white page floor. Zero box-shadow values were detected in the rendered components. The institutional document aesthetic specifically avoids drop shadows — depth in financial documents comes from column structure, not visual layering. - **Flat:** hero band, article grid, service tiles, footer. - **Tonal lift:** canvas-light (#f5f7f8) cards sit on white (#ffffff) canvas — barely perceptible, enough to distinguish interactive cards from editorial copy. - **Border demarcation:** the hairline (#808080 / near-invisible) separates nav from content; the teal border (#1a7b99) marks active interactive elements. ## Shapes The corner system reduces to **three values**: 0px for editorial surfaces, 3px for interactive elements (the CSS --cwm-palette-corner-default value), and 50% for circular avatars. - **0px:** hero photography tiles, section bands, the footer, body paragraphs — the overwhelming majority of surfaces. - **3px (`{rounded.xs}`):** CTA buttons, form inputs, service card containers — wherever a cursor is expected to interact. The 3px value prevents the hairline "corner fold" visual artifact on high-DPI screens without adding any perceptible softness. - **50% (`{rounded.circle}`):** leadership-team avatars, staff photograph thumbnails, circular icon containers. Unlike consumer financial brands (Klarna at 24px, Affirm at 16px), J.P. Morgan's near-square geometry reads as institutional precision rather than consumer friendliness. ## Components **`hero-section`** — A dark night-photograph of Tel Aviv at near-black (#101820) overlay gradient, 64×24px padding. Holds the hero heading in white Amplitude and a subheading beneath in body text. **`hero-heading`** — White text on the dark photograph, Amplitude 64px / weight 300. "J.P. Morgan in Israel" is the canonical instance — the lightest-weight hero heading in this directory at any financial brand. **`section-heading`** — Ink (#31373d) text in Amplitude 32px / weight 300. Used for "About us" and "What problem can we solve together?" and other mid-page section titles. **`body-paragraph`** — Ink text at Amplitude 16px / weight 400, 0.32px tracking. Default running text for institutional descriptions and service summaries. **`button-primary`** — Teal (#1a7b99) fill, white text, Amplitude 14px / weight 400, 3px radius, 1×6px padding, 32px height. The CTA buttons on service tiles ("Learn more"). **`button-primary-hover`** — Deepens to dark teal (#005075), same proportions. Wired as --cwm-actionable-accented-bold-background-hover. **`button-ghost`** — Transparent fill, teal text, 1px teal border, 3px radius. The ghost variant of the CTA button for secondary actions. **`top-nav`** — White canvas surface, charcoal ink text at Amplitude 16px / weight 400, 64px height. J.P. Morgan wordmark at left, primary navigation center (About Us, Products, Insights, Regions), login/search right. **`nav-link`** — Transparent background, ink text at Amplitude 16px / weight 400. No visible hover background in the captured surface. **`card`** — White canvas fill, 3px radius, light canvas-light border, 20×24px padding. Used for service description tiles and article cards. **`article-link`** — Transparent background, earth-brown (#936846) text at Amplitude 24px / weight 300. Featured article headings and editorial section links. **`inline-link`** — Transparent background, teal (#1a7b99) text at body-md. In-prose text links and CTA text links. **`service-tile`** — White canvas fill, ink text, Amplitude 14px / weight 400, 3px radius, 24px padding. The four-column service grid ("Investment Banking", "Markets", "Payments", "Prime Services"). **`avatar`** — Canvas-light fill, 50% circle radius. Leadership-team profile photographs and staff thumbnail circles. **`text-input`** — White canvas fill, ink border, Amplitude 14px, 3px radius, 8×16px padding, 40px height. Contact-form fields. **`footer`** — Ink-dark (#31373d or deeper) surface, white text, Amplitude 14px / weight 300. Multi-column link grid with J.P. Morgan logo at right, legal text at bottom. ## Do's and Don'ts **Do** run Amplitude at weight 300 for all display sizes (32px and above). The featherweight display is the system's authority signal — its restraint is what makes J.P. Morgan's page feel institutional rather than promotional. **Do** use the full --cwm-actionable-accented-* token family when building interactive components. The CSS explicitly wires resting, hover, and focus states as named tokens; implementing hover as an ad-hoc darker shade instead of the declared #005075 would break the system's state consistency. **Do** keep earth-brown (#936846) reserved for editorial content — article headlines, section dividers, featured-story links. Placing it on interactive elements (buttons, nav links) would blur the teal/brown division between action and editorial. **Do** use 3px radius (`{rounded.xs}`) on all interactive surfaces. The --cwm-palette-corner-default value of 3 is a system-wide declaration; rounding buttons or inputs further would conflict with the institutional document geometry. **Don't** use weight 700 for display sizes. The single captured weight-700 occurrence is an inline `` tag in body prose. Bumping section headings to weight 700 turns the editorial restraint into SaaS marketing energy and loses the institutional register. **Don't** substitute #936846 for teal on link text. Earth-brown is the editorial accent; teal is the interactive accent — mixing them collapses the two-register system into visual noise. Every clickable element should use teal or dark teal. **Don't** add shadow elevation to service tiles or article cards. The captured surface has zero shadow occurrences; adding drop shadows would soften the institutional document aesthetic into something that reads as a consumer dashboard. **Don't** deviate from the 0.28px / 0.32px letter-spacing values on body and CTA text. These are explicit CSS declarations present across 30+ extracted typography samples — they are design intent, not browser defaults, and removing them visibly tightens the system's reading rhythm. ## Known Gaps - **Extraction captured a regional sub-page** (jpmorgan.com/IL/en/about-us) rather than the global homepage. The global homepage at jpmorgan.com likely exposes a richer hero treatment, additional product-surface patterns, and possibly a different primary color from the wealth-management or investment-banking sub-brands. - **Primary button not extracted:** the `components.primaryButton` slot returned null — the teal CTA buttons were identified from the --cwm-actionable-accented-* CSS variables rather than from a direct DOM extraction. Button dimensions (padding: 1×6px, height 32px) come from the CTA `