What is Chase's primary brand color?

Chase's brand voltage is a saturated blue at #0060f0, wired into the page CSS as the primary CTA fill, the tertiary CTA color, the link text color, and the border-accent color. It appears 673 times on the captured marketing page — 336 as text, 336 as border, 1 as background — by far the dominant color in the system. A deeper secondary blue at #005eb8 carries 36 additional occurrences as link text and active-state borders, sitting alongside the primary as a two-tier voltage rather than as a tint variation. The brand-recognition value of the blue is so strong that Chase commits it to every interactive affordance on the page rather than holding it in reserve.

What typeface does Chase use, and what should I use as a substitute?

Chase ships Open Sans for every spoken surface, with the system stack walking through Helvetica Neue, Helvetica, Arial, and sans-serif. The largest US consumer bank uses no proprietary typeface and no custom display family. The hierarchy runs 36px / 700 on hero h3 (Choose what's right for you), 24px / 700 on hero h2 (New Chase checking customers), 16px / 400 on body, and 12px / 400 on the dense legal-disclosure footer. The brand identity is carried entirely by the saturated blue voltage, not by typography. Open Sans is itself open-source, so the substitute is the typeface itself — no swap needed.

Why does Chase use blue at such extreme frequency?

Most heritage-bank brands hold a blue voltage in reserve for CTAs and link accents, with the rest of the page running on ink-on-white. Chase commits the opposite move: the blue #0060f0 appears 673 times on the captured page, used as text, border, and CTA fill across nearly every interactive surface. The brand-recognition value justifies the extreme frequency — the Chase blue is as instantly identifiable as the IBM blue or the Facebook blue, and the marketing site leans into that recognition rather than holding it back. The result is a page that reads as monochromatic-blue against ink, with the saturated voltage doing the work that color photography and decorative chrome would do on a more design-led site.

Why does Chase use Open Sans instead of a proprietary typeface?

Open Sans is an open-source workhorse — Google-funded, freely licensable, and used by enough other brands that it carries no particular identity. For most marketing systems this would be a weakness; for Chase it is a deliberate choice. The brand identity is carried by the saturated blue voltage at extreme frequency, not by typography, and the typeface is treated as transparent infrastructure rather than as a brand asset. Capital One ships Optimist at weight 300 and Charles Schwab ships custom display tiers; Chase trusts the blue to do all the brand work and lets the typeface stay invisible.

Can I use this DESIGN.md to build my own bank marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Chase's specific moves: saturated blue at extreme frequency across CTAs and link text, two-tier blue voltage with a deeper secondary, Open Sans across every tier, 5px button radius that splits the difference between sharp-bank and pill-fintech, and the dense three-up offer grid with dollar-amount emphasis. The token references resolve cleanly — every hex and font name in the file matches the live CSS Chase ships. One caveat: deploying a brand color at this frequency only works when the recognition value already exists in the consumer's head. Without that recognition, the blue reads as a default-CTA color rather than as a brand statement.

Chase Design System

Chase Bank's marketing system as a DESIGN.md file.

About Chase DESIGN.md

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

Banking & Payments

Chase's marketing site does what every other US bank in the directory implies but none of them commit to with the same intensity: the brand voltage is one saturated blue, deployed everywhere, at a frequency that makes the page read as monochromatic. The blue #0060f0 carries 673 captured occurrences — 336 as text, 336 as border, plus the primary Sign-in button fill — which is more than any other color in the system except the near-black structural ink #101820 that sits beside it. Where Capital One holds its Heritage Red so far in reserve that the marketing site renders zero red pixels, Chase commits the opposite move: the brand blue is the page, and every interactive affordance speaks the same voltage.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens drawn from the two-tier blue voltage (the primary #0060f0 and a deeper secondary #005eb8), the ink-on-canvas structural tier (#101820 near-black, three grays, white), the rare green CTA accent #128842 used only on the four-corner business-banking card, and the disabled-state gray; 12 typography tokens running Open Sans at sizes 12, 14, 16, 24, 36px with weights 400, 600, and 700; a 4-step radius scale (4 / 5 / 10px / 50%) where the primary button sits at 5px; an 8-10px base spacing scale; and 14 component definitions covering the brand-blue hero band, the floating sign-in card, the saturated-blue Sign-in button, the dense three-up offer grid, the dollar-amount emphasis card, and the deep-charcoal footer disclosure.

Feed this file to Claude or Cursor and it reproduces Chase's specific moves: saturated blue at extreme frequency rather than as a held-in-reserve accent, two-tier blue voltage with #005eb8 carrying secondary links, Open Sans across every tier instead of a proprietary brand typeface, 5px button corners that split the difference between sharp-bank and pill-fintech, and the photographic offer-card grid with dollar-amount typography as the loudest objects on the page. One move worth borrowing only if you have a brand-color association as strong as Chase's: deploying the voltage at this frequency. Brands without that pre-existing recognition risk the blue reading as a default rather than as a deliberate move.

What makes it distinct

Blue voltage at extreme frequencyChase blue #0060f0 appears 673 times on the captured page, by far the dominant color across CTAs, links, borders, and emphasis spans
Open Sans across every tierChase uses no proprietary typeface, running the open-source workhorse at weights 400 / 600 / 700 with the bank's identity carried by the saturated blue rather than by custom type
5px button radiusthe primary Sign-in button sits at 5px corners, deliberately sub-pill but warmer than the 2-3px banking-standard, splitting the difference between sharp and rounded
Photographic offer gridlarge dollar-amount cash-bonus tiles ($400, $200, $1000) treated as the loudest typographic objects on the page below the fold
Secondary deep-blue at #005eb8a second darker blue carries link text and active borders, a deliberate two-tier blue voltage rather than tints of a single hex

Live at chase.com

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

chase.com

Explore Chase

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Chase design system FAQ

Common questions about Chase'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.

Chase — official site

Chase Bank'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.