--- version: alpha name: "Chase" website: "https://www.chase.com" description: >- The largest US consumer bank, a JPMorgan Chase subsidiary, whose marketing site commits to a saturated blue voltage (#0060f0) at extreme frequency — the blue carries 673 captured occurrences as primary CTA fill, link text, border accents, and inline emphasis, more than any other color in the system except the near-black ink that sits beside it. The page is anchored on Open Sans across every tier with weight 700 on h2 ("New Chase checking customers"), runs a four-corner 5px button radius that splits the difference between sharp-bank and pill-fintech, paints the hero band in the brand blue with a white sign-in card floating right-aligned over it, and stacks photographic offer cards below the fold in a dense three-up grid with cash-bonus dollar amounts treated as the page's loudest typographic objects. seo: title: "Chase Design System for React — saturated blue #0060f0, Open Sans, 14 components" metaDescription: "Chase Bank's marketing system as a DESIGN.md file. Saturated blue voltage at 673 occurrences, Open Sans weight 700 display, sub-pill 5px button radius, dense photographic offer grid. Tokens for React, Next.js, and AI coding tools." highlights: - "Blue voltage at extreme frequency — Chase 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 tier — Chase 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 radius — the 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 grid — large dollar-amount cash-bonus tiles ($400, $200, $1000) treated as the loudest typographic objects on the page below the fold" - "Secondary deep-blue at #005eb8 — a second darker blue carries link text and active borders, a deliberate two-tier blue voltage rather than tints of a single hex" tags: - "Banking & Payments" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.chase.com" title: "Chase — official site" description: "Chase Bank'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 Chase's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Chase use, and what should I use as a substitute?" answer: "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." - id: "saturated-blue" title: "Why does Chase use blue at such extreme frequency?" answer: "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." - id: "open-sans-choice" title: "Why does Chase use Open Sans instead of a proprietary typeface?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own bank marketing site?" answer: "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." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#0060f0" primary-deep: "#005eb8" primary-active: "#0a4386" green: "#128842" ink: "#101820" ink-soft: "#414042" muted: "#676c6f" muted-soft: "#8c8e90" hairline: "#cccccc" canvas: "#ffffff" shadow: "#000000" typography: display-xl: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 48px letterSpacing: 0 display-md: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 24px letterSpacing: 0 heading-md: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-sm: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 body-emphasis: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: 0 caption-strong: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 16px letterSpacing: 0 nav-link: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 button-md: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 32px letterSpacing: 0 button-tracked: fontFamily: "\"Open Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 18.4px letterSpacing: "0.5px" rounded: none: "0px" sm: "4px" md: "5px" lg: "10px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "10px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" components: hero-band: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "32px 24px" hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "24px" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" section-heading: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.display-xl}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-lg}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-sm}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "1px 6px" height: "34px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "1px 6px" height: "34px" borderColor: "{colors.primary}" button-green: backgroundColor: "{colors.green}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "1px 6px" height: "34px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 24px" height: "64px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" offer-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.hairline}" text-input: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "14px 0px 4.2px" height: "37px" borderColor: "{colors.muted}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Chase's marketing site commits the opposite move from Capital One. **Voltage as field.** Where Capital One holds Heritage Red so far in reserve that the home page renders zero red pixels, Chase deploys its brand blue (`{colors.primary}` — #0060f0) at extreme frequency: 673 captured occurrences across the page, 336 as text, 336 as border, one as background fill, plus the primary Sign-in button. The blue is more frequent than every color in the system except the near-black structural ink (`{colors.ink}` — #101820, 669 occurrences) that sits beside it. The two sit at near-parity — ink for chrome and content, blue for everything interactive — and the page reads as monochromatic blue against ink rather than as ink with blue accents. The deployment pattern is the typographic signature. Where Stripe holds a single indigo voltage for primary CTAs only, and where Ally runs a two-tier purple voltage with the saturated purple reserved for action and the deeper plum for editorial, Chase wires the blue into every interactive affordance on the page: link text, secondary CTAs, border emphasis, the hero band background, the bottom "Enjoy up to $200" emphasis card, the cash-bonus highlight tile. There is no rare-accent discipline — the blue is the page. The typeface choice reinforces the move. Chase ships **Open Sans across every tier** — an open-source workhorse with no particular identity, used by thousands of other sites. The hero h3 at 36px / 600 ("Choose what's right for you"), the offer-card h2 at 24px / 700 ("New Chase checking customers"), the 16px body, the 12px footer disclosure — all carried by the same family. The brand identity is the saturated blue, not the typography; the typeface is treated as transparent infrastructure rather than as a brand asset. **Key Characteristics:** - Saturated blue voltage (`{colors.primary}` — #0060f0) at 673 captured occurrences — by far the dominant color in the system, deployed as CTA fill, link text, border accent, and inline emphasis. - Two-tier blue voltage with deeper secondary `{colors.primary-deep}` (#005eb8) carrying link text and active borders at 36 additional occurrences. - Open Sans across every typographic tier (36 / 24 / 16 / 14 / 12px) — no proprietary display family, no second font for headlines or body. - Heaviest typographic moment at 24px / 700 (offer-card h2), not at the larger 36px display — the dollar-amount emphasis tiles at 24px / 700 carry more weight than the hero h3 at 36px / 600. - 5px button radius — sub-pill, deliberately warmer than the 2-3px banking-standard and sharper than the pill-fintech convention. Splits the difference. - Dense three-up offer grid: photographic cards showing $400, $200, $1000 cash bonuses with the dollar amounts treated as the loudest typographic objects below the fold. - Single green CTA accent (`{colors.green}` — #128842) used only on the business-banking secondary card — a deliberate departure from the blue voltage to signal a different product family. - Structural near-black ink (`{colors.ink}` — #101820) at 669 occurrences — not pure black, a slightly-warm dark navy that pairs with the saturated brand blue. ## Colors ### Brand - **Chase Blue** (`{colors.primary}` — #0060f0): frequency 673. Used as text (336), border (336), bg (1). The brand voltage at extreme frequency — wired in CSS as the primary CTA color, tertiary CTA color, link color, and flip-card hover background. The Sign-in button fill, every link on the page, and the hero band background all speak this hex. The single dominant color in the system. - **Chase Blue Deep** (`{colors.primary-deep}` — #005eb8): frequency 36. Used as text (17), bg (2), border (17). The secondary blue tier — carries link text on dark backgrounds and active-state borders. Wired as the flip-card link color and as the secondary inverse-active background. - **Chase Blue Active** (`{colors.primary-active}` — #0a4386): declared but rarely rendered. Wired as the secondary-inverse hover state and tertiary-inverse hover state. Reserved for press / active states on the deeper blue tier. - **Brand Green** (`{colors.green}` — #128842): frequency 4. Used as bg (4). The single green accent — wired as the green-CTA primary background, used on the business-banking flip card only. Not part of the primary brand voltage, scoped to the business-banking product family. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 29. Used as text (8), bg (13), border (8). Pure white — the page floor below the hero band, the offer-card fills, the floating sign-in card surface. Wired as the neutral background and the light-background text color. ### Text - **Ink** (`{colors.ink}` — #101820): frequency 669. Used as text (335), border (334). The dominant text color across nav labels, hero h2, body paragraphs, and offer-card headlines. A slightly-warm dark navy rather than pure black — chosen to pair with the saturated brand blue without competing chromatically. - **Ink Soft** (`{colors.ink-soft}` — #414042): frequency 65. Used as text (33), border (32). The lighter ink variant — carries the hero h3 ("Choose what's right for you"), input field text, tooltip font, and flip-card secondary text. - **Muted** (`{colors.muted}` — #676c6f): frequency 150. Used as text (75), border (75). The dominant secondary text color — carries footer disclosures, the flip-card title secondary tier, and footer social-icon strokes. - **Muted Soft** (`{colors.muted-soft}` — #8c8e90): frequency 3. Used as border (1), shadow (2). The disabled-state color — wired as the input-disabled color and the primary-CTA-disabled color. ### Hairline - **Hairline** (`{colors.hairline}` — #cccccc): frequency 1. Used as border (1). The card outline tone — wired as the sticky CTA divider and the author-grid divider. Used sparingly; the page relies on surface contrast rather than on hairline borders. ### Shadow - **Shadow** (`{colors.shadow}` — #000000): frequency 3. Used as text (2), border (1). The form-input label color, used inside the sign-in card's username and password labels. The single use of pure black in the captured render. ## Typography ### Font Family The system runs **Open Sans** for every spoken surface, with the fallback stack walking `"Helvetica Neue", helvetica, arial, sans-serif`. No proprietary display family, no second sans, no monospace. Open Sans is itself open-source, so the substitute question is moot — the typeface is what Chase actually ships. The choice is the distinguishing move. Capital One ships Optimist at weight 300, Wells Fargo runs Lato, Bank of America runs a custom sans — Chase trusts the saturated blue voltage to do all the brand work and lets the typeface stay invisible. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 36px | 600 | 48px | Hero h3 ("Choose what's right for you") | | `{typography.display-md}` | 24px | 700 | 24px | Offer-card h2 ("New Chase checking customers", "$400") | | `{typography.heading-md}` | 16px | 600 | 24px | Sub-section heads, dollar-amount captions | | `{typography.body-lg}` | 16px | 400 | 24px | Default running text, offer-card body | | `{typography.body-md}` | 14px | 400 | 20px | Secondary running text, input field text | | `{typography.body-sm}` | 12px | 400 | 16px | Footer disclosures, footnote rows | | `{typography.body-emphasis}` | 12px | 600 | 16px | Emphasis spans inside disclosures | | `{typography.caption-strong}` | 12px | 700 | 16px | Strong emphasis spans inside legal copy | | `{typography.nav-link}` | 16px | 400 | 24px | Top-nav link labels | | `{typography.button-md}` | 16px | 600 | 32px | Primary CTA labels | | `{typography.button-tracked}` | 16px | 600 | 18.4px | Tracked button label variant (+0.5px tracking) | ### Principles The system's loudest typographic moment is **24px / 700** (offer-card h2), not the larger 36px / 600 hero h3. The dollar-amount tiles ($400, $200, $1000) are the page's most visually-prominent objects below the fold, and they sit at 24px / 700. Where most marketing systems anchor on the hero display tier, Chase anchors on the cash-bonus emphasis — the typographic register telegraphs that the offers are the point. Display weight tops out at 700 — heavier than Capital One's weight-300 editorial register, lighter than the all-caps tracked emphasis some fintech brands lean on. The weight pattern is straightforward: 400 for body, 600 for buttons and emphasis, 700 for h2 and cash-bonus tiles only. ### Note on Font Substitutes Open Sans is itself open-source and freely licensable — no substitute needed. If a project requires a different sans for license reasons, **Inter** at the same weights transfers cleanly; Inter's slightly tighter counters at body sizes read close to Open Sans. ## Layout ### Spacing System - **Base unit:** 10px (Chase ships an unusual 10px base unit rather than the 8px convention) — 24 captured occurrences. 8px is the secondary unit at 17 occurrences. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px. - **Section padding (vertical):** ~32px on the hero band; below the fold the rhythm tightens to ~16-24px between offer-card rows. - **Card internal padding:** `{spacing.xl}` (24px) for offer cards; `{spacing.lg}` (16px) for the floating sign-in card content rows. - **Top-nav padding:** 16px vertical, 24px horizontal. ### Grid & Container - **Max content width:** ~1280px on the offer grid, ~720px on the hero sign-in card. - **Hero band:** full-bleed `{colors.primary}` (#0060f0) saturated-blue canvas, with the white floating sign-in card right-aligned at ~360px wide. - **Offer grid:** 3-up below-the-fold grid of photographic offer cards (Chase Credit Cards, Chase Sapphire Preferred, Chase Auto), each at ~360px wide with a card photograph and a "See if you're preapproved" / "Earn 75,000 bonus points" / "Finance your next ride with Chase Auto" CTA inside. - **Dollar-amount tiles:** the "Enjoy up to $200" and "Earn up to $1,000" tiles below the offer grid render the dollar amount at 24px / 700 as the dominant typographic object. ### Rhythm The page is structured as a **vertical CTA cascade**: hero sign-in band, three-up offer grid, two cash-bonus emphasis tiles, single below-the-fold business banking band, single mobile-app band, dense legal footer. Each band carries a single conversion goal. The rhythm is dense — there is little decorative whitespace between bands, and every band terminates in either a blue CTA or a blue link. ## Elevation The system has essentially **no shadow tier**. The captured render shows zero shadow occurrences. Every surface sits flat against the canvas, and depth comes from surface contrast (the white sign-in card on the blue hero band, the photographic offer cards on the white canvas) rather than from layered elevation. - **Flat (no shadow):** every surface on the page — 100% of captured elements. - **Surface contrast:** the white `{colors.canvas}` sign-in card on the saturated `{colors.primary}` blue hero band is the single elevated-feeling element on the page; the contrast is chromatic rather than shadow-based. - **Hairline:** the `{colors.hairline}` (#cccccc) border tone is used sparingly — only on author-grid dividers and sticky-CTA horizontal rules. ## Shapes The radius scale is **small-step**, anchored on 5px. - `{rounded.none}` 0px — hero band, top-nav, full-bleed photographs, footer. - `{rounded.sm}` 4px — small chips, secondary surfaces, dropdown items (8 captured occurrences). The dominant small-step radius. - `{rounded.md}` 5px — the primary Sign-in button (`{component.button-primary}`) sits at 5px, deliberately one step warmer than the 4px standard but still sub-pill. Splits the difference between sharp-bank and pill-fintech (2 captured occurrences). - `{rounded.lg}` 10px — large offer cards (3 captured occurrences). The maximum non-circular radius in the system. - `{rounded.full}` 9999px — circular avatars and icon containers (2 captured occurrences as 50%). Used only on round-by-purpose elements. There is no 12 / 16 / 20px middle tier. The 5px button radius is the system's signature shape move — a sub-pill that telegraphs warmth without committing to the fintech pill convention. ## Components **`hero-band`** — Full-bleed saturated-blue `{colors.primary}` canvas, no border-radius, 32×24px padding. The page's opening band, holding the "$400 — New Chase checking customers" headline in white text and the floating sign-in card right-aligned. **`hero-card`** — White `{colors.canvas}` fill on the blue hero band, ink text, `{rounded.sm}` 4px radius, 24px internal padding. Right-aligned at ~360px wide, contains the username / password inputs and Sign-in CTA. **`hero-heading`** — Ink `{colors.ink}` text, Open Sans 24px / 700. The h2 "New Chase checking customers" headline carries weight 700 — the heaviest typographic moment in the system, deliberately at 24px rather than at a larger display size. **`section-heading`** — Ink-soft `{colors.ink-soft}` text, Open Sans 36px / 600. The h3 "Choose what's right for you" mid-page section head — larger than the hero h2 but at a lighter weight. **`body-paragraph`** — Default ink running-text at `{typography.body-lg}` (16px / 400) — the workhorse paragraph style on offer cards and content bands. **`body-paragraph-muted`** — Muted `{colors.muted}` variant at 12px / 400 for legal disclosures, the dominant footer voice. **`button-primary`** — The signature CTA. Saturated blue `{colors.primary}` fill, white text, Open Sans 16px / 600, `{rounded.md}` 5px radius, 34px height. The Sign-in button on the floating account-access card is the canonical instance. **`button-secondary`** — White fill, blue text, 1px blue border, 5px radius, 34px height. Used below the fold for tertiary "Learn more" / "View offer" actions. **`button-green`** — Green `{colors.green}` (#128842) fill, white text, 5px radius, 34px height. The single non-blue CTA in the system, used only on the business-banking flip-card. A deliberate departure from the blue voltage to signal a different product family. **`top-nav`** — White `{colors.canvas}` surface, ink labels, 64px height, no border-radius. Carries the Chase wordmark flush left, category links center (Credit Cards / Checking / Savings / Auto / Home), and Customer Service / Espanol / Sign In flush right. **`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (16px / 400), 8×12px padding. No hover background visible in the captured surface. **`offer-card`** — White `{colors.canvas}` fill, ink text, `{rounded.lg}` 10px radius, 24px internal padding, 1px hairline border. The signature below-the-fold card holding a credit card photograph, a 24px / 700 cash-bonus headline ($400, $200, $1000), and a blue CTA. **`text-input`** — Transparent fill, ink-soft text, 1px muted bottom-border only (no full outline), 14×0px asymmetric padding, 37px height. The username and password inputs sit as bottom-border-only fields — a material-design-style input rather than a full outlined box. **`footer`** — White `{colors.canvas}` canvas, muted `{colors.muted}` 12px / 400 caption text, 48×24px padding. Dense legal-disclosure rows. ## Do's and Don'ts **Do** treat the brand blue as the page's chromatic field rather than as a held-in-reserve accent. The blue `{colors.primary}` carries 673 captured occurrences on Chase's home page. Holding it in reserve for one CTA per band would contradict the system's deliberate move and dilute the brand-recognition value. **Do** use the two-tier blue voltage — `{colors.primary}` for action surfaces and `{colors.primary-deep}` for link text and active-state borders. Collapsing both into a single tint variation loses the chromatic depth the system relies on. **Do** anchor the 24px / 700 dollar-amount typography as the loudest moment on the page below the fold. The cash-bonus emphasis is the conversion goal; the typographic weight should match. **Do** keep the 5px button radius. Splitting the difference between sharp-bank (2-3px) and pill-fintech (full pill) is the system's deliberate shape move. **Don't** introduce a third color voltage alongside the blue and the rare green. The green `{colors.green}` (#128842) is scoped to a single business-banking surface; adding a third chromatic interactive color (a red CTA, a purple emphasis tile) would break the monochromatic-blue discipline. **Don't** swap Open Sans for a proprietary display family. The typeface is treated as transparent infrastructure on purpose — the brand identity is the blue voltage, not the typography. Adding a custom display sans would compete with the brand voltage and weaken the recognition value. **Don't** anchor the offer-card headlines at 16px or below. The 24px / 700 cash-bonus tiles are the page's loudest typographic objects by design — shrinking them to 16px or 18px turns the conversion bands into generic content cards. **Don't** use full-pill (`{rounded.full}`) radius on primary buttons. The system's 5px radius is deliberately sub-pill; a fully-rounded primary button reads as a neobank competitor (Chime, Current) rather than as a heritage commercial bank. ## Known Gaps - **Hover and focus states:** documented for resting states only; the full hover / press / focus / disabled matrix for the primary blue CTA is not captured from the marketing surface. - **Authenticated banking product:** this DESIGN.md captures the marketing site only. The authenticated Chase banking app, the credit card application flow, and the JP Morgan Wealth Management product surfaces carry their own surface tokens and component sets. - **Dark mode:** the captured marketing surface is light-only. A dark variant may exist inside the authenticated banking product but is not represented here. - **Motion:** the offer cards may flip on hover (the CSS exposes flip-card transitions) but the spec captures end-state values only. Easing curves, rotation timing, and flip behavior are not documented. - **Form input error states:** `{component.text-input}` carries the resting state; validation styling, error tints, and inline error messages are not exposed on the marketing surface. - **Sub-brands:** Chase ships several sub-brands (Chase Sapphire, Chase Freedom, Chase Ink) with their own marketing surfaces that may carry distinct color tiers — those are not represented in this file. - **Spanish-language surface:** the top-nav links to a Spanish-language Chase site at a separate URL; the bilingual surface treatment is not captured here.