What is J.P. Morgan's primary brand color?

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.

What typeface does J.P. Morgan use, and what should I use as a substitute?

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.

What is J.P. Morgan's canvas and ink strategy?

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.

What corner-radius style does J.P. Morgan use?

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.

How does J.P. Morgan's interactive token system work?

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.

J.P. Morgan Design System

J.P.

About J.P. Morgan DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source jpmorgan.com

Banking & Payments
Fintech & Crypto

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.

What makes it distinct

Weight 300 at 64px displayAmplitude 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 3the --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 typographyAmplitude handles every tier from 64px hero to 12px caption with no second voice, unlike bank competitors that run a separate serif for editorial moments

Live at jpmorgan.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

jpmorgan.com

Explore J.P. Morgan

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

J.P. Morgan design system FAQ

Common questions about J.P. Morgan's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

J.P. Morgan — official site

J.P. Morgan's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.