--- name: Chase tagline: 'Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans.' updated_at: 2026-05-28T22:15:06.661Z published_at: 2026-05-28T22:15:06.661Z author: webdesignhot source_url: https://www.chase.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, structured, sans, fintech, enterprise] preview_swatch: ['#ffffff', '#0060f0', '#128842'] related: [] description: 'Chase reads like a major US bank built its public site to look exactly as trustworthy as its balance sheet — a clean white canvas (`#ffffff`), near-black ink (`#101820`), and a single confident bright blue (`#0060f0`) carrying every primary action. The identity is anchored by the Chase octagon mark, and the chrome is deliberately quiet: lots of whitespace, generous body line-height, and Open Sans throughout from headlines to fine print. The chromatic system runs on a two-CTA dialogue — a bright-blue primary (Sign in, radius 5px) paired with a green secondary (Open an account, `#128842`, radius 4px) — so the page always offers an authenticated path and an acquisition path side by side. Headlines are set in Open Sans 700 (the hero h1 lands at 32px), body copy at 16px with comfortable 1.55 line-height, and the whole register is institutional-but-approachable: confident, plainspoken, never trendy. Corners are modest (2–16px), shadows are soft and functional rather than decorative, and the page leans on borders and spacing — not drama — to organize a large amount of financial information into something a first-time visitor can scan without anxiety.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border colors: bg: '#ffffff' surface: '#ffffff' surface-soft: '#f5f7fa' # subtle gray panel for grouped cards / alternating sections surface-tint: '#eef4ff' # faint blue wash behind promotional/info modules text: '#101820' # near-black ink — headlines + body text-muted: '#5a6470' # secondary copy, captions, helper text text-faint: '#6b7280' # disclaimers, legal fine print, disabled labels text-on-brand: '#ffffff' # white reverse on blue primary text-on-green: '#ffffff' # white reverse on green secondary brand: '#0060f0' # primary blue — Sign-in CTA, links, focus, octagon energy brand-hover: '#0048bf' # darkened blue for hover/active on primary brand-deep: '#003594' # navy-blue for headers, footer band, emphasis secondary: '#128842' # secondary green — Open-account CTA secondary-hover: '#0e6e35' # darkened green for hover/active on secondary link: '#0060f0' # inline link blue (same as brand) link-hover: '#0048bf' # link hover (darken + underline) border: '#d4d9e0' # default 1px hairline border (cool gray) border-strong: '#9aa3af' # stronger divider / input outline on focus-adjacent border-on-dark: 'rgba(255,255,255,0.24)' # hairlines on navy footer band scrim: 'rgba(16,24,32,0.55)' # modal / overlay backdrop shadow-soft: 'rgba(16,24,32,0.06)' # resting card lift shadow-medium: 'rgba(16,24,32,0.12)' # hover / dropdown elevation shadow-deep: 'rgba(16,24,32,0.20)' # modal / dialog elevation on-brand: '#ffffff' success: '#128842' # success green reuses secondary warning: '#9a5b00' # amber-brown advisory text on white danger: '#c4001a' # error red — form validation, alerts info: '#0060f0' # info banners reuse brand blue typography: display: family: '"Open Sans", system-ui, -apple-system, sans-serif' weights: [500, 600, 700] opentype-features: [] body: family: '"Open Sans", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display, notes: 'campaign splash only; production hero h1 is 32px' } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display, notes: 'rare oversized marketing headline' } h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display, notes: 'large page title; live hero h1 measures 32px' } h1-hero: { size: 32, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display, notes: 'PRODUCTION hero h1 — Open Sans 32px/700' } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body, notes: 'lead paragraph under headlines' } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body, notes: 'load-bearing body size' } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } button-label: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0', family: body, notes: 'CTA text — semibold for weight on solid fills' } nav-link: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } legal-micro: { size: 11, weight: 400, lineHeight: 1.45, tracking: '0', family: body, notes: 'footnote disclosures, member-FDIC fine print' } radius: micro: 2 # tiny chrome details, checkbox/inline marks sm: 4 # secondary green CTA (Open an account), inputs, small chips brand: 5 # primary blue CTA (Sign in) — Chase's signature button radius md: 8 # default control radius, dropdown items lg: 12 # cards, panels xl: 16 # large feature tiles, modal corners pill: 9999 # toggle pills, avatar/badge circles, status dots spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 card-gutter: 24 section-vertical: 64 components: button-primary: bg: '#0060f0' color: '#ffffff' radius: 5 padding: '10px 16px' border: 'none' height: 44 font: button-label use: 'Primary action — bright-blue solid pill-corner button. Authenticated/conversion path ("Sign in", "Continue").' button-secondary: bg: '#128842' color: '#ffffff' radius: 4 padding: '10px 16px' border: 'none' height: 44 font: button-label use: 'Secondary action — green solid. Acquisition path ("Open an account"). Sits beside the blue primary.' button-outline: bg: '#ffffff' color: '#0060f0' radius: 5 padding: '10px 16px' border: '1px solid #0060f0' height: 44 font: button-label use: 'Tertiary / low-commitment action paired with a solid CTA ("Learn more", "Explore options").' button-ghost: bg: 'transparent' color: '#0060f0' radius: 5 padding: '10px 12px' border: 'none' height: 40 font: button-label use: 'Text-style action inside dense modules; underline on hover, no fill at rest.' card: bg: '#ffffff' color: '#101820' radius: 12 padding: '24px' border: '1px solid #d4d9e0' use: 'Default product/offer card on white or soft-gray section. Hairline border + soft resting shadow.' card-promo: bg: '#eef4ff' color: '#101820' radius: 16 padding: '32px' border: 'none' use: 'Promotional/informational tile on faint blue wash — bonus offers, account highlights.' input: bg: '#ffffff' color: '#101820' radius: 8 padding: '10px 12px' border: '1px solid #d4d9e0' height: 48 use: 'Form field. 48px tall for comfortable touch; blue focus ring on activation.' badge: bg: '#eef4ff' color: '#003594' radius: 9999 padding: '4px 10px' border: 'none' font: caption use: 'Status/category chip — soft-blue fill, navy text. "New", "Limited time".' badge-success: bg: '#e6f4ec' color: '#0e6e35' radius: 9999 padding: '4px 10px' border: 'none' font: caption use: 'Positive status pill — eligible, approved, available.' nav-bar: bg: '#ffffff' color: '#101820' radius: 0 padding: '0 24px' border: '0 0 1px 0 solid #d4d9e0' height: 64 use: 'Top utility/product nav — white bar, octagon logo left, primary links center, sign-in CTA right.' footer: bg: '#003594' color: '#ffffff' radius: 0 padding: '48px 24px 32px' use: 'Deep navy footer band — multi-column link grid, legal disclosures, member-FDIC line, social icons.' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 button-hover: 'background darkens (blue → #0048bf, green → #0e6e35) over 150ms; no transform lift' card-hover: 'shadow-soft → shadow-medium over 240ms; optional 1px translateY(-2px) on interactive cards' dropdown-open: 'fade + 4px translateY over 240ms ease-emphasized' focus-ring: 'instant — no transition on focus outline for clarity' reduced-motion: 'respects prefers-reduced-motion: reduce — translate/scale removed, color + opacity transitions kept' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: resting: 'rgba(16,24,32,0.06) 0 1px 3px 0, rgba(16,24,32,0.04) 0 1px 2px 0' # resting cards raised: 'rgba(16,24,32,0.12) 0 6px 16px -2px' # hover cards, dropdowns overlay: 'rgba(16,24,32,0.20) 0 16px 40px -8px' # modals, dialogs ring: '0 0 0 3px rgba(0,96,240,0.45)' # blue focus ring philosophy: 'Chase uses shadow functionally, not decoratively — soft, cool-toned (ink-tinted), low-opacity. Elevation signals interactivity (a card you can click) or layering (a menu above content), never ornament. Borders carry most structural delineation; shadow only appears at hover or on floating layers.' accessibility: contrast-text-on-bg: 17.89 # #101820 on #ffffff — AAA contrast-on-brand: 5.34 # #ffffff on #0060f0 — AA body, AAA large contrast-on-green: 4.54 # #ffffff on #128842 — AA large; pair with >=18.66px/14pt bold for body contrast-link: 5.34 # #0060f0 link on #ffffff — AA body contrast-muted: 6.01 # #5a6470 on #ffffff — AA body, AAA large contrast-faint: 4.83 # #6b7280 on #ffffff — AA body (use only for non-essential fine print) focus-ring: '3px solid rgba(0,96,240,0.45) with 2px outline-offset (blue ring)' reduced-motion-honored: true touch-target-min: 44 keyboard-nav: 'Tab cycles: skip-link → logo → primary nav → utility/sign-in CTA → hero CTAs (blue primary then green secondary) → body modules → footer columns. Visible focus on every stop.' aria-patterns: 'octagon logo is a link with aria-label="Chase home"; dropdown nav uses aria-expanded + aria-controls; CTA pairs are distinct buttons not toggles; status badges use aria-label when color is the only signal' screen-reader: 'decorative octagon/icon glyphs are aria-hidden; legal disclosure footnotes linked via aria-describedby from the claims they qualify; member-FDIC line announced as static text' lineage: summary: 'Chase sits in the lineage of major-institution corporate web design — the trust-first tradition descending from Swiss / International Typographic Style: one humanist sans (Open Sans) carrying the whole hierarchy, near-black ink on plain white, generous whitespace as the organizing device, and a single brand color reserved almost entirely for action. It reads less like a startup marketing site and more like a well-set annual report translated to the web, which is exactly right for a bank whose product is confidence. What makes the system specifically Chase is the octagon-blue identity (#0060f0) concentrated into the primary action and the two-CTA dialogue that pairs a blue primary (Sign in) with a green secondary (Open an account). The brand deliberately rejects trend-driven consumer-fintech patterns — no glassmorphism, no gradient meshes, no oversized playful radii, no dark-mode-first aesthetic — and rejects the dense data-grid look of developer tools in favor of calm legibility for a general public making financial decisions.' influences: - name: Open Sans (Steve Matteson / Google Fonts) role: The humanist sans that defines the type voice across the entire system url: https://fonts.google.com/specimen/Open+Sans - name: Swiss / International Typographic Style role: Grid discipline, sans-serif hierarchy, and whitespace-as-structure that the layout descends from url: https://en.wikipedia.org/wiki/International_Typographic_Style - name: Material Design role: The functional-elevation model — shadow as an interactivity / layering signal, not ornament url: https://m3.material.io - name: U.S. Web Design System (USWDS) role: Institutional, accessibility-first patterns for high-trust public-facing sites url: https://designsystem.digital.gov - name: Web Content Accessibility Guidelines (WCAG) role: The AA / AAA contrast targets the palette is built to clear url: https://www.w3.org/WAI/standards-guidelines/wcag/ dark-mode: null # Public marketing site is light-only — white canvas is core to the trust-institutional register. Authenticated app surfaces are out of scope. --- ## 1. Visual Theme & Atmosphere Chase's public site reads like a major US bank decided its website should look exactly as trustworthy as its balance sheet. The canvas is plain, confident **white** (`#ffffff`) — no warm tint, no texture, no gradient wash — and against it sits near-black ink (`#101820`) for everything you read. The effect is clarity over personality: a first-time visitor lands on a wall of financial choices (checking, credit cards, mortgages, investing) and the design's entire job is to make that wall scannable without anxiety. It does this with whitespace, hairline borders, and a single bright blue, rather than with color, drama, or motion. The identity anchor is the **Chase octagon** — the blue eight-sided mark that has signaled the bank since the 1960s — and the site borrows its energy as one dominant brand blue: `#0060f0`. That blue is disciplined. It carries the primary call to action ("Sign in"), inline links, and the focus ring, and it appears almost nowhere else as a large fill. The result is that blue always means "this is the thing to click," which is precisely the legibility a bank wants when a customer is hunting for the sign-in button under stress. The most distinctive structural gesture is the **two-CTA dialogue**. Chase nearly always presents two solid buttons side by side: a bright-blue primary (Sign in, with a soft 5px radius) and a green secondary (Open an account, `#128842`, 4px radius). One button is the authenticated path for existing customers; the other is the acquisition path for new ones. This pairing repeats from the header into hero modules and product cards, so the page reliably offers both "I already bank here" and "I want to" without making the visitor choose a single funnel. The green is the only other saturated color on the page, and its job is narrow: account acquisition. Typography is **Open Sans** end to end — headlines, body, buttons, and fine print all share the one humanist sans. Headlines run at weight 700 (the production hero h1 lands at a restrained 32px rather than a giant splash), body copy sits at 16px with a generous 1.55 line-height, and disclosures drop to 11–12px. There is no second display face, no serif accent, no script. The contrast in the hierarchy comes entirely from size and weight, which keeps the page feeling like one calm institutional voice rather than a marketing collage. The overall atmosphere is **institutional-but-approachable**. Corners are modest (2–16px — present enough to feel modern, never so round they read as playful). Shadows are soft, cool, and functional — they signal "this card is clickable" or "this menu floats above," never decoration. Sections are separated by air and the occasional faint-gray or pale-blue panel, not by heavy rules. Everything communicates the same thing the brand wants you to feel about your money there: steady, legible, in good hands. **Key Characteristics:** - Plain white canvas (`#ffffff`) — no tint, no texture; clarity over warmth - Near-black ink (`#101820`) for all reading text, giving AAA contrast on white - One dominant brand blue (`#0060f0`) reserved for primary CTA, links, and focus - Signature two-CTA dialogue: blue primary ("Sign in") beside green secondary ("Open an account") - Green (`#128842`) used narrowly for the acquisition path — the only other saturated fill - Open Sans across the entire system — no second typeface, hierarchy via size/weight - Modest corner radii (2–16px); 5px on the blue primary, 4px on the green secondary - Soft, cool, low-opacity shadows used functionally — interactivity and layering, not ornament - Borders + whitespace carry structure; the page organizes dense financial info without crowding - Deep navy footer band (`#003594`) closing the page with disclosures and member-FDIC fine print ## 2. Color Palette & Roles ### Primary / Brand - **Brand Blue** (`#0060f0`) [→ `brand`]: the dominant action color — primary CTA fill ("Sign in", "Continue"), inline links, focus ring. The page's "click here" signal. - **Brand Blue Hover** (`#0048bf`) [→ `brand-hover`]: darkened blue for hover/active on the primary button and link hover. - **Brand Deep / Navy** (`#003594`) [→ `brand-deep`]: navy for the footer band, emphasis headings, and badge text — the steady, authoritative end of the blue range. ### Secondary - **Secondary Green** (`#128842`) [→ `secondary`]: the acquisition CTA fill ("Open an account"). The only other saturated fill on the page; never used for navigation or links. - **Secondary Green Hover** (`#0e6e35`) [→ `secondary-hover`]: darkened green for hover/active on the green CTA. ### Interactive - **Link** (`#0060f0`) [→ `link`]: inline text links — same hue as brand, underlined on hover. - **Link Hover** (`#0048bf`) [→ `link-hover`]: link hover state, darken plus underline. ### Neutral / Text - **Ink** (`#101820`) [→ `text`]: near-black for headlines and body copy. AAA on white. - **Muted** (`#5a6470`) [→ `text-muted`]: secondary copy, captions, helper text. AA on white. - **Faint** (`#6b7280`) [→ `text-faint`]: disclaimers and disabled labels. Use only for non-essential fine print. - **On-Brand White** (`#ffffff`) [→ `text-on-brand`]: white reverse on blue primary and on the green secondary. ### Surface & Background - **Canvas** (`#ffffff`) [→ `bg` / `surface`]: page background and default card surface. - **Soft Gray Panel** (`#f5f7fa`) [→ `surface-soft`]: subtle gray for grouped cards and alternating section bands. - **Blue Tint** (`#eef4ff`) [→ `surface-tint`]: faint blue wash behind promotional/informational modules and soft-blue badges. ### Borders - **Border** (`#d4d9e0`) [→ `border`]: default 1px cool-gray hairline on cards, inputs, and dividers. - **Border Strong** (`#9aa3af`) [→ `border-strong`]: heavier divider / input outline near focus. - **Border on Dark** (`rgba(255,255,255,0.24)`) [→ `border-on-dark`]: hairlines inside the navy footer band. ### Shadow Colors Chase shadows are ink-tinted and cool (`rgba(16,24,32, …)`), kept at very low opacity (6–20%). The resting state is barely-there (6% at 3px blur); hover lifts to 12%; modals reach 20%. Shadows never warm the page — they only suggest depth on layers a user can interact with. ### Semantic - **Success** (`#128842`) [→ `success`]: reuses the secondary green — eligible, approved, available. - **Warning** (`#9a5b00`) [→ `warning`]: amber-brown advisory text on white (passes body contrast). - **Danger** (`#c4001a`) [→ `danger`]: error red for form validation and alert banners. - **Info** (`#0060f0`) [→ `info`]: informational banners reuse brand blue. ### Gradient System Chase uses essentially no programmatic gradients in the core UI. Any sense of depth comes from (1) the faint blue tint (`#eef4ff`) layered behind promo modules and (2) soft ink-tinted card shadows. Flat fills are the rule — gradients would undercut the plainspoken, trustworthy register. ## 3. Typography Rules ### Font Family - **Primary**: `Open Sans` — a humanist sans used for every headline, body paragraph, button, nav link, and disclosure. One face, top to bottom. - **Fallback stack**: `system-ui, -apple-system, sans-serif` — graceful native fallback that preserves the humanist, neutral tone before Open Sans loads. - **Mono** (rare): `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — reserved for account/reference numbers and code-like values. ### Hierarchy | Role | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|--------|-------------|----------------|-------| | Display hero | 80 | 700 | 1.0 | -0.03em | Campaign splash only — not the production hero | | Display large | 56 | 700 | 1.05 | -0.02em | Rare oversized marketing headline | | H1 | 40 | 700 | 1.1 | -0.018em | Large page title | | H1 (production hero) | 32 | 700 | 1.15 | -0.012em | The live hero h1 — Open Sans 32px/700 | | H2 (section) | 32 | 600 | 1.2 | -0.012em | Section titles | | H3 (card title) | 24 | 600 | 1.25 | -0.005em | Card and module headings | | H4 (subhead) | 20 | 600 | 1.3 | 0 | Sub-section labels | | Body large (lead) | 18 | 400 | 1.55 | 0 | Lead paragraph under a headline | | Body | 16 | 400 | 1.55 | 0 | Load-bearing body size | | Body small | 14 | 400 | 1.5 | 0 | Secondary copy, dense lists | | Button label | 16 | 600 | 1.0 | 0 | CTA text — semibold for weight on solid fills | | Nav link | 16 | 600 | 1.0 | 0 | Top-nav primary links | | Label | 13 | 500 | 1.4 | 0 | Form labels, eyebrows | | Caption | 12 | 500 | 1.4 | 0.02em | Badge text, timestamps, helper notes | | Legal micro | 11 | 400 | 1.45 | 0 | Footnote disclosures, member-FDIC fine print | ### Principles - **One font, full stack.** Open Sans handles display through fine print. Hierarchy comes from size and weight, never from a second face. Adding a serif or display accent breaks the institutional calm. - **Body is 16px at 1.55 line-height.** The generous leading is deliberate — financial copy is dense and the loose lines keep long disclosures readable. Don't tighten below ~1.5. - **Headlines are 700, body is 400, controls are 600.** Three weights do all the work. Button and nav labels sit at semibold (600) so they hold weight on solid fills without shouting. - **Slight negative tracking on large headlines only** (-0.012em to -0.03em). Body and small sizes run at 0 — no tightening that would hurt legibility at reading scale. - **The production hero is restrained.** Despite an 80px display token existing, the live hero h1 is 32px/700 — Chase favors a measured headline over a giant splash, reinforcing the steady tone. - **Fine print is honest, not hidden.** Legal micro is 11px/400 at 1.45 line-height — small but readable; never gray it below the `#6b7280` faint stop. - **No uppercase headlines.** Sentence case throughout; uppercase is limited to short labels/eyebrows if used at all. ### Note on Font Substitutes Open Sans is open-source (Google Fonts) and free to self-host, so substitution is rarely necessary. If a project must swap it: - **Source Sans 3** or **Noto Sans** are the closest humanist matches. - **Inter** works as a generic stand-in — expect a slightly larger x-height and more geometric letterforms; nudge body line-height up to ~1.6 to compensate. - Whatever the substitute, keep three weights (400 / 600 / 700), the 16px/1.55 body, and the modest negative tracking on large headings only. ## 4. Component Stylings ### Buttons **`button-primary`** — Primary, bright-blue solid - Background: Brand Blue (`#0060f0`) - Text: White (`#ffffff`) - Border: none - Radius: 5px (Chase's signature primary radius) - Padding: 10px 16px - Height: ~44px - Font: Open Sans 16/600 - Hover: background darkens to `#0048bf` over 150ms; no transform - Active: same fill, optional 1px inset feel - Use: the authenticated/conversion action ("Sign in", "Continue", "Log in") **`button-secondary`** — Secondary, green solid - Background: Secondary Green (`#128842`) - Text: White (`#ffffff`) - Border: none - Radius: 4px - Padding: 10px 16px - Height: ~44px - Font: Open Sans 16/600 - Hover: background darkens to `#0e6e35` over 150ms - Use: the acquisition action ("Open an account") — sits beside the blue primary - Note: white-on-green is AA at large only; the 16/600 label and 44px target keep it legible, but never use this green for body-size text **`button-outline`** — Tertiary, blue outline - Background: White (`#ffffff`) - Text: Brand Blue (`#0060f0`) - Border: 1px solid Brand Blue - Radius: 5px - Padding: 10px 16px - Font: Open Sans 16/600 - Hover: faint blue tint fill (`#eef4ff`) - Use: low-commitment action paired with a solid CTA ("Learn more", "Explore options") **`button-ghost`** — Text-style action - Background: transparent - Text: Brand Blue (`#0060f0`) - Border: none - Radius: 5px (for focus ring shape) - Padding: 10px 12px - Hover: underline appears; no fill - Use: in-module text actions inside dense lists where a solid button would be too heavy ### Cards & Containers **`card`** — Default product/offer card - Background: White (`#ffffff`) - Text: Ink (`#101820`) - Border: 1px solid Border (`#d4d9e0`) - Radius: 12px - Padding: 24px - Shadow: resting (`rgba(16,24,32,0.06) 0 1px 3px`) - Hover (when interactive): shadow lifts to raised (`12%`), optional `translateY(-2px)` - Use: product summaries, offer tiles, content modules on white or soft-gray sections **`card-promo`** — Promotional/informational tile - Background: Blue Tint (`#eef4ff`) - Text: Ink (`#101820`) - Border: none - Radius: 16px - Padding: 32px - Use: bonus offers, account highlights, "limited time" modules — the tint sets it apart from plain content without a heavy border ### Badges / Tags / Pills **`badge`** — Status/category chip - Background: Blue Tint (`#eef4ff`) - Text: Navy (`#003594`) - Radius: 9999px (pill) - Padding: 4px 10px - Font: Open Sans 12/500 - Use: "New", "Limited time", category labels **`badge-success`** — Positive status pill - Background: pale green (`#e6f4ec`) - Text: Green hover stop (`#0e6e35`) - Radius: 9999px - Padding: 4px 10px - Use: eligible / approved / available indicators ### Inputs & Forms **`input`** — Standard form field - Background: White (`#ffffff`) - Text: Ink (`#101820`) - Border: 1px solid Border (`#d4d9e0`) - Radius: 8px - Padding: 10px 12px - Height: 48px (comfortable touch) - Focus: 3px blue ring (`rgba(0,96,240,0.45)`) with 2px offset; border strengthens - Label: 13px/500 above the field; helper text 14px muted below - Error: border + helper text switch to Danger (`#c4001a`); icon optional - Use: sign-in fields, account-open forms, search ### Navigation **`nav-bar`** — Top product/utility nav - Background: White (`#ffffff`) - Height: 64px - Border: 1px bottom hairline (`#d4d9e0`) - Content: Chase octagon logo left, primary product links center (Open Sans 16/600), blue "Sign in" primary CTA at right; "Open an account" green secondary often beside it - Dropdowns: white panels with raised shadow, 4px fade-in, hairline border - Link style: ink text, no underline at rest; blue underline or blue text on hover/active **Mobile Nav** - Collapses to: octagon logo + hamburger + sign-in. Full-screen overlay stacks primary links vertically; the blue/green CTA pair pins near the top of the overlay. ### Footer - Background: Deep Navy (`#003594`) - Text: White - Padding: 48px top / 24px sides / 32px bottom - Structure: multi-column link grid (banking, cards, lending, investing, about), legal disclosures row, member-FDIC and Equal Housing Lender lines, social icons - Dividers: `rgba(255,255,255,0.24)` hairlines - Link style: white, 14px; underline on hover ## 5. Layout Principles ### Spacing System - **Base unit**: 4px - **Scale**: 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 - **Section vertical padding**: ~64px between major sections on desktop; ~32–48px on mobile - **Card internal padding**: 24px (default), 32px (promo tiles); ~16px on mobile - **Card gutter**: 24px between cards in a grid ### Grid & Container - **Max content width**: ~1280px centered, with ~24px horizontal gutter at small sizes growing symmetrically on wide screens - **Prose width**: ~720px for long-form reading (disclosures, articles) - **Column pattern**: 12-column implied. Common layouts are 2-up (headline + supporting copy), 3-up product card rows, and full-width hero bands. Product grids reflow 3-up → 2-up → 1-up as width drops. - **Header**: fixed 64px white bar with bottom hairline ### Whitespace Philosophy Chase uses whitespace as the primary organizing tool. A page that lists checking, savings, cards, and loans could feel like a dense directory; instead, generous section padding and 1.55 body leading let each module breathe. The rule of thumb: when content gets dense (a comparison table, a fee schedule), add air and a soft-gray band rather than borders or color to separate it. Empty space here signals "take your time" — the right tone for financial decisions. ### Section Cadence A typical homepage scroll: 1. White nav bar (octagon logo + links + blue/green CTA pair) 2. Hero band — 32px/700 headline, lead paragraph, the two-CTA dialogue 3. Product card row (3-up cards on white) 4. Soft-gray or blue-tint promo band (offer / bonus module) 5. Secondary product row or feature module 6. Trust/reassurance band (security, FDIC, support) 7. Deep navy footer with disclosures and member-FDIC line ## 6. Shapes & Radius Scale | Radius | Tier | Use | |--------|------|-----| | 2px | Micro | Tiny chrome details, inline marks, checkboxes | | 4px | Standard | Secondary green CTA ("Open an account"), small chips | | 5px | Brand | Primary blue CTA ("Sign in") — Chase's signature button radius | | 8px | Comfortable | Default controls, inputs, dropdown items | | 12px | Relaxed | Cards and panels | | 16px | Featured | Large feature tiles, promo cards, modal corners | | 9999px | Pill | Status badges, toggle pills, avatar/badge circles, status dots | The scale is deliberately modest and tight. The two solid CTAs sit one point apart on purpose — 5px on the blue primary, 4px on the green secondary — a subtle differentiation you feel more than see, reinforcing that they are two distinct actions, not a toggle. Beyond buttons, radii climb gently (8 → 12 → 16) for nested surfaces and resolve to full-pill only on small chips and circular elements. Nothing on the page is sharp-cornered, and nothing is so round it reads as playful — the corners say "modern bank," not "consumer app." ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | No shadow, 1px border | Default — most content sits flat on white with a hairline border | | 1 | `rgba(16,24,32,0.06) 0 1px 3px 0, rgba(16,24,32,0.04) 0 1px 2px 0` | Resting interactive cards — a faint cushion | | 2 | `rgba(16,24,32,0.12) 0 6px 16px -2px` | Hover cards, open dropdowns — clearly lifted | | 3 | `rgba(16,24,32,0.20) 0 16px 40px -8px` | Modals, dialogs — floating above a dimmed scrim | ### Shadow Philosophy Chase treats shadow as a **signal of interactivity and layering, not decoration**. At rest, most surfaces use a 1px cool-gray border rather than a shadow; structure comes from borders and spacing. Shadow appears in three situations only: (1) a card the user can click gets a faint resting cushion; (2) hovering a card or opening a menu lifts it to Level 2; (3) a modal floats at Level 3 above a 55%-opacity ink scrim. All shadows are ink-tinted and cool, kept at 6–20% opacity, so they read as quiet depth rather than drama. The page never uses warm, colored, or hard-edged shadows. ### Decorative Depth - **Blue-tint promo bands** (`#eef4ff`): the faint wash creates a sense of a layered panel without a border or shadow - **Soft-gray section bands** (`#f5f7fa`): alternate-band shading separates dense modules using tone, not lines - **Card resting cushion**: the barely-there Level 1 shadow tells the eye which surfaces are tappable ## 8. Interaction & Motion ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most color, background, and opacity transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — dropdown and menu reveals ### Duration Buckets - **Fast** (150ms): button hover background darken, link underline - **Standard** (240ms): card shadow lift, dropdown fade-in - **Slow** (320ms): larger panel/overlay transitions, accordion expand ### Per-Component Motion **Primary / secondary buttons** - Hover: background darkens (blue → `#0048bf`, green → `#0e6e35`) over 150ms - No transform lift — buttons stay grounded; the color shift is the whole feedback - Active: instant, no bounce **Cards** - Hover (interactive only): shadow Level 1 → Level 2 over 240ms; optional `translateY(-2px)` - Non-interactive cards do not animate on hover **Dropdown / nav menus** - Open: fade + 4px `translateY` over 240ms ease-emphasized - Close: instant or quick fade **Inputs** - Focus: blue ring appears instantly (no transition) for unambiguous feedback; border strengthens **Links** - Hover: color darkens and underline appears over 150ms ### Page Transitions Standard multi-page navigation — no SPA route animation. New pages load fresh; the white canvas and fixed nav keep continuity. Modals fade in over the scrim at 240ms. ### Reduced Motion Strategy `@media (prefers-reduced-motion: reduce)`: - Card `translateY` lift removed — shadow change alone conveys hover - Dropdown `translateY` removed — fade only - Focus ring already instant — unchanged - Color/opacity transitions preserved (they don't cause vestibular discomfort) ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | WCAG Level | |------|-------|------------| | `#101820` ink on `#ffffff` canvas | 17.89:1 | AAA | | `#ffffff` on `#0060f0` brand blue | 5.34:1 | AA body, AAA large | | `#ffffff` on `#128842` green | 4.54:1 | AA large — pair with ≥14pt bold / 18.66px | | `#0060f0` link on `#ffffff` | 5.34:1 | AA body | | `#5a6470` muted on `#ffffff` | 6.01:1 | AA body, AAA large | | `#6b7280` faint on `#ffffff` | 4.83:1 | AA body — non-essential fine print only | ### Focus Indicators - 3px blue ring (`rgba(0,96,240,0.45)`) with 2px outline-offset on every focusable element - The ring uses the brand blue rather than the browser default, but is clearly visible on white - Applied to: nav links, both CTA buttons, inputs, footer links, card links ### ARIA Patterns - The octagon logo is a link with `aria-label="Chase home"`; the glyph itself is `aria-hidden` - Dropdown nav uses `aria-expanded` + `aria-controls` on the trigger; menu is `role="menu"` - The blue/green CTA pair are two distinct `