---
version: alpha
name: "Wells Fargo"
website: "https://www.wellsfargo.com"
description: >-
  A major retail banking brand whose marketing homepage layers a scarlet-red navigation bar on a warm off-white canvas — the stagecoach-red top nav (#d71e28) is the singular brand color moment, set against a body that runs in near-black ink (#141414) on an antique-cream surface (#f9f7f6). A proprietary typeface family, Wells Fargo Sans, spans four weights (Light, Regular, SemiBold, Bold) from a 56px Light-weight display headline down to 13px caption labels. Corner radii use a two-tier system: 10px for form elements and standard cards, 24px for the larger promotional panels. The effect is warm, approachable, and community-oriented — distinct from the institutional cool of Citi or the digital-first tone of JPMorgan's consumer surfaces.

seo:
  title: "Wells Fargo Design System for React — stagecoach red on warm cream, Wells Fargo Sans, 14 components"
  metaDescription: "Wells Fargo's marketing-site design system as a DESIGN.md file. Stagecoach red #d71e28, warm cream #f9f7f6 canvas, Wells Fargo Sans type family, 10 color tokens, 14 components. For React, Next.js, and AI tools."
  highlights:
    - "Stagecoach red as nav canvas — #d71e28 fills the entire top navigation bar and appears only there, while the body runs entirely on warm cream #f9f7f6"
    - "Warm cream themeColor — the page declares #F9F7F6 as its theme-color meta; the canvas is not pure white but a slightly warm off-white that runs the full system"
    - "Wells Fargo Sans across four weights — Light 300 for display, Regular 400 for body, SemiBold 600 for headings and interactive labels, Bold 700 for emphasis; no secondary family"
    - "Purple link accent — #5a469b carries 40 interactive occurrences as the link and secondary accent color, a surprising pairing against the red nav"
    - "Two-tier radius — 10px on standard elements, 24px on featured promotional panels; no pill or sharp-corner extremes"
  tags:
    - "Banking & Payments"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Wells Fargo's homepage opens with a full-width stagecoach-red navigation bar — the brand's scarlet #d71e28 fills the header band completely, carrying the stagecoach logo and utility links in white. Below that, the entire page runs on a warm antique-cream canvas (#f9f7f6 is the declared themeColor, not pure white), with near-black body text and a surprising purple link accent (#5a469b) rather than a red or gold derivative. Where Citi separates brand blue from interactive cerulean, Wells Fargo separates the brand red (header-only) from a completely different interactive hue (purple), treating the two colors as distinct semantic registers rather than tonal variations of the same palette.

    The typographic choice reinforces the warmth. Wells Fargo Sans — a custom family — ships in four weights that graduate from the display headline (42px / Light 300) down through Regular body text (13–17px / 400) to SemiBold interactive labels (15–24px / 600) and Bold emphasis (16–18px / 700). The weight graduation is smoother than Citi's binary 300/700 gap — a SemiBold sits between Regular and Bold, giving the page a warmer, more magazine-like tone. The 56px display headline captured in the hero ("$325 checking bonus on us") uses Regular 400 at a large scale — not Bold — which keeps the large type feeling approachable rather than forceful.

    The DESIGN.md file packages this into machine-readable tokens. The distinctive move for builders: the warm cream canvas (#f9f7f6) is not pure white — it carries a visible warmth that affects every card, section background, and input surface. Substituting pure white breaks the system's temperature. The red is structurally confined to the nav; the purple carries all interactivity; and the near-black ink (#141414) is noticeably warmer than pure black, consistent with the canvas's temperature throughout.
  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.wellsfargo.com"
      title: "Wells Fargo — official site"
      description: "Wells Fargo'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 Wells Fargo's primary brand color?"
      answer: "Wells Fargo's brand voltage is stagecoach red #d71e28 — marked as layer: brand in the extraction and declared as a background-only token appearing twice as nav fill. The red is structurally contained to the top navigation bar; it does not appear as text, borders, or body fills on the marketing page. The interactive system color is a separate purple #5a469b (40 occurrences as text and border), which carries all link and CTA accent duties. The two colors serve completely different semantic roles: red signals 'Wells Fargo brand identity,' purple signals 'this is interactive.' The palette also carries a second purple shade #6048ad for hover/active states."
    - id: "typography"
      title: "What typeface does Wells Fargo use, and what should I substitute?"
      answer: "Wells Fargo uses a proprietary custom family called Wells Fargo Sans, shipped in four weights with separate font-family names: Wells Fargo Sans Light (300) for the large display headline tier, Wells Fargo Sans Regular (400) for body text and nav links, Wells Fargo Sans SemiBold (600) for section headings and interactive labels, and Wells Fargo Sans Bold (700) for inline emphasis. The fallback stack is Arial, Helvetica, sans-serif. The closest open-source substitute is Source Sans Pro across the same four-weight spread — it shares the humanist geometry that gives Wells Fargo Sans its approachable warmth. Lato or Nunito are acceptable alternatives for the SemiBold and Bold tiers."
    - id: "canvas-color"
      title: "Why is Wells Fargo's canvas warm cream instead of white?"
      answer: "Wells Fargo declares #F9F7F6 as its themeColor meta tag — a slightly warm off-white with visible cream undertone. The extraction clusters this with #ffffff (pure white) and #f4f0ed (an even warmer cream used for some section fills), because the perceptual difference is small. The warmth is intentional: it softens the stagecoach-red nav by making the canvas feel closer to warm paper than cold LCD white, and it reinforces the brand's community-bank identity. The warm canvas also makes the near-black ink (#141414) read less stark than on a pure white background. Using pure white instead would feel clinically cold against the red nav."
    - id: "radius-style"
      title: "What is Wells Fargo's corner-radius philosophy?"
      answer: "Wells Fargo uses a two-tier radius system: 10px for standard form elements, input fields, and everyday cards; 24px for featured promotional panels, larger call-out cards, and the hero content block. A third value of 40px appears on the pill-style CTA chip used in the mobile app download section. There is no sharp-corner tier and no fully-rounded pill button — even the primary CTA is at 10px. The 10px default is warmer than the 8px used by Citi, reflecting the overall warmer temperature of the system; 24px on the promotional panels provides a card-ier, more approachable feel than a standard 8–12px."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a retail banking or financial-services UI?"
      answer: "Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Wells Fargo's specific moves: warm cream canvas instead of cold white, stagecoach red confined to the top navigation bar, purple as the interactive system accent, Wells Fargo Sans-equivalent typography (use Source Sans Pro at the same weights), and a two-tier radius of 10px / 24px. The tokens resolve cleanly: {colors.red} for the nav canvas, {colors.link} for interactive purple, {colors.canvas} for the cream body floor, {typography.display-xl} for the 56px hero. Key constraint: do not let the red escape the nav bar — placing it on body CTAs or section fills would break the system's semantic separation between brand identity and interactive affordance."

mockups:
  - "marketing-hero"
  - "checkout-flow"

colors:
  red: "#d71e28"
  link: "#5a469b"
  link-hover: "#6048ad"
  link-dark: "#46348d"
  ink: "#141414"
  ink-muted: "#787070"
  ink-warm: "#3b3331"
  canvas: "#f9f7f6"
  surface-1: "#f4f0ed"
  hairline: "#787070"

typography:
  display-xl:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 62px
    letterSpacing: 0
  display-md:
    fontFamily: "\"Wells Fargo Sans Light\", Arial, Helvetica, sans-serif"
    fontSize: 42px
    fontWeight: 300
    lineHeight: 54px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"Wells Fargo Sans SemiBold\", Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 34px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Wells Fargo Sans SemiBold\", Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 25px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Wells Fargo Sans SemiBold\", Arial, Helvetica, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0
  body-xs:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  label-md:
    fontFamily: "\"Wells Fargo Sans SemiBold\", Arial, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 19px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Wells Fargo Sans SemiBold\", Arial, Helvetica, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"Wells Fargo Sans Regular\", Arial, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "10px"
  md: "24px"
  lg: "40px"

spacing:
  xs: "2px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "40px"

components:
  button-primary:
    backgroundColor: "{colors.link}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "9px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.link}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "9px 16px"
    height: "40px"
    borderColor: "{colors.link}"
  top-nav:
    backgroundColor: "{colors.red}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "44px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "20px"
    borderColor: "{colors.hairline}"
  card-featured:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "24px"
  label:
    backgroundColor: "transparent"
    textColor: "{colors.link}"
    typography: "{typography.label-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "1px 16px"
    height: "30px"
  section-band:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "40px 20px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-xs}"
    padding: "20px 16px"
---

## Overview

Wells Fargo's homepage makes a bold typographic statement before a user reads a word. **Stagecoach red as brand boundary.** The entire top navigation bar is scarlet #d71e28 — the stagecoach brand color — and below it, the red disappears entirely. The body runs on warm antique-cream canvas with near-black ink and a purple link accent (#5a469b) that has no chromatic relationship to the red above it. Where Citi's dual-blue system tones up and down within a single hue family, Wells Fargo separates its brand identity color (red, header only) from its interactive system color (purple, everywhere else) as if they belong to different design systems that share a border.

The display headline ("$325 checking bonus on us") runs at 56px in Wells Fargo Sans Regular at weight 400 — large but not Bold, which keeps the tone conversational. Below it the type graduates through a SemiBold (600) section heading tier, a Regular (400) body tier, and a caption tier, all in the same proprietary family. The warmth of the cream canvas and the humanist geometry of Wells Fargo Sans work together to project community bank rather than Wall Street institution.

The radius language is similarly warm and approachable: 10px on everyday cards and inputs, 24px on featured promotional panels, 40px on the mobile-app download pill chip. There is no sharp-corner tier.

**Key Characteristics:**
- Stagecoach red (`{colors.red}` — #d71e28) appears only as the navigation bar fill — 2 background occurrences. Never used as text, border, or body accent.
- Purple link accent (`{colors.link}` — #5a469b) carries 40 interactive occurrences (20 text, 20 border) — all link text, CTA underlines, and button fills in the body.
- Warm cream canvas (`{colors.canvas}` — #f9f7f6 theme color) throughout — not pure white; the warmth is consistent from nav edge to footer edge.
- Wells Fargo Sans in four weights — Light (300), Regular (400), SemiBold (600), Bold (700) — with a smooth weight ladder rather than a binary gap.
- Display headline at 56px / weight 400 (Regular) — the large size does the emphasis work; Bold weight is held for inline labels and emphasis spans.
- Two-tier radius: 10px on standard elements, 24px on featured cards; 40px on pill chips.
- Near-black ink (`{colors.ink}` — #141414) and warm grey muted (`{colors.ink-muted}` — #787070) — both carry visible warmth rather than neutral cool grey.

## Colors

### Brand

- **Red** (`{colors.red}` — #d71e28): frequency 2, both as background fills. The stagecoach brand voltage — fills the top navigation bar exclusively. Layer: brand in extraction. Never used as text or border on the marketing body.

### Interactive

- **Link** (`{colors.link}` — #5a469b): frequency 40 — 20 as text, 20 as border. The interactive system color for all link text, CTA button fills, and interactive surface accents. A medium-value purple distinct from the brand red.
- **Link Hover** (`{colors.link-hover}` — #6048ad): frequency 4. A slightly lighter, more saturated purple for hover and active states on interactive elements.
- **Link Dark** (`{colors.link-dark}` — #46348d): frequency 2. The darkened purple for pressed / visited states.

### Text

- **Ink** (`{colors.ink}` — #141414): frequency 248 — the dominant text color. Near-black with slight warmth, used for all body copy, hero headline, and section headings.
- **Ink Muted** (`{colors.ink-muted}` — #787070): frequency 317 — appearing as text (157), border (157), and gradient (1). The mid-grey used for secondary body text, hairline borders, and meta labels. The high frequency is explained by its dual role as both a text and border color.
- **Ink Warm** (`{colors.ink-warm}` — #3b3331): frequency 44. A dark warm brown used for select headline and label tones — slightly warmer than the near-black ink.

### Surface

- **Canvas** (`{colors.canvas}` — #f9f7f6): frequency 50 as merged cluster (with pure white and near-white variants). The body floor — warm cream throughout. The declared themeColor for the page.
- **Surface-1** (`{colors.surface-1}` — #f4f0ed): frequency 2. A slightly deeper cream for alternate section fills and the sign-on sidebar background.

### Hairline

- **Hairline** (`{colors.hairline}` — #787070): shared with the ink-muted tone. The 157 border occurrences use this warm grey rather than a pure neutral hairline — a deliberate warmth move that avoids the cold grey borders typical of banking interfaces.

## Typography

### Font Family

The system runs **Wells Fargo Sans** exclusively — a custom proprietary humanist sans in four named weight variants: Wells Fargo Sans Light (300), Wells Fargo Sans Regular (400), Wells Fargo Sans SemiBold (600), and Wells Fargo Sans Bold (700). Fallback stack is `Arial, Helvetica, sans-serif`. There is no secondary family. The four weights create a smooth gradient from the 300-weight display headline (approachable, not authoritative) through the 400/600 body-and-heading split to the 700 Bold for inline emphasis.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 56px | 400 | 62px | Hero display headline — large size, Regular weight |
| `{typography.display-md}` | 42px | 300 | 54px | Light-weight section display, promotional panels |
| `{typography.heading-lg}` | 24px | 600 | 34px | Section sub-headings (SemiBold) |
| `{typography.heading-md}` | 20px | 600 | 25px | Card headings and feature titles |
| `{typography.heading-sm}` | 17px | 600 | 22px | Nav section labels and inline headings |
| `{typography.body-lg}` | 18px | 400 | 23px | Hero sub-paragraph and section lead |
| `{typography.body-md}` | 16px | 400 | 22px | Standard body and input label |
| `{typography.body-sm}` | 15px | 400 | 19px | Card body text and secondary links |
| `{typography.body-xs}` | 13px | 400 | 18px | Caption, fine print, footnote disclaimers |
| `{typography.label-md}` | 15px | 600 | 19px | Interactive labels, link-style headings |
| `{typography.button-md}` | 17px | 600 | 22px | Button labels |
| `{typography.nav-link}` | 13px | 400 | 16px | Top-nav links |

### Principles

The display headline at 56px / Regular 400 is the single largest typographic moment, and it earns its scale through size rather than weight — the system trusts large Regular-weight type to command attention without shouting. SemiBold (600) does the heading work across 17–24px, which gives section headings warmth; Bold (700) appears only in inline emphasis spans and is not used for any standalone heading tier. The result is a warmer, softer weight scale than Citi's binary 300/700 snap.

### Note on Font Substitutes

Wells Fargo Sans is proprietary. **Source Sans Pro** at weights 300/400/600/700 is the closest open-source substitute — the humanist geometry transfers well across the full size range. **Lato** works for the 300/400 tiers but is slightly narrower at SemiBold. For a banking UI where warmth is the goal, avoid Inter (too neutral-cool) and prefer Source Sans, Nunito, or Karla.

## Layout

### Spacing System

- **Base unit:** 8px (dominant gap), with 20px as the most frequent compound padding.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 40px.
- **Card padding:** `{spacing.lg}` (20px) standard; `{spacing.xl}` (24px) on featured promotional cards.
- **Section padding:** `{spacing.2xl}` (40px) vertical on major section bands.
- **Button padding:** 9px top/bottom, 16px horizontal.

### Grid & Container

- **Max content width:** approximately 1280px; the sign-on sidebar module sits at approximately 296px width flush right within the hero.
- **Hero layout:** two-column split — left column holds the headline and marketing copy; right column holds the sign-on form panel, a common banking-page convention.
- **Below-fold grid:** a mix of 3-up feature cards and 2-up editorial image rows; the home equity and community sections use full-bleed photography with overlaid text.

### Rhythm

The page alternates between cream sections and warmer surface-1 fills at the community and community-bank sections. Photography of community members and families appears in alternating editorial rows — the page's visual identity comes primarily from warm-toned photography rather than from graphic brand moments.

## Elevation

The system uses **warm-grey hairline borders** as the primary card-separation mechanism, matching the warm-grey tone of the ink-muted color rather than using a neutral grey hairline. Shadows appear on the sign-on panel (11 `{colors.hairline}` occurrences wired as black shadow ink at low opacity) and on card hover states. There is no expressive shadow tier.

- **Flat:** all section bands, body text, footer — the majority of surfaces.
- **Card hairline:** 1px `{colors.hairline}` (#787070 warm grey) borders on standard product cards.
- **Sign-on panel elevation:** black-at-opacity soft shadow on the sign-on sidebar distinguishes it from the hero background.

## Shapes

The radius scale is **warm and two-tiered**:

- `{rounded.none}` 0px — input fields in the sign-on form (sharp-cornered, high-information-density context).
- `{rounded.sm}` 10px — standard cards, buttons, and everyday UI surfaces.
- `{rounded.md}` 24px — featured promotional cards, the "$325 checking bonus" hero tile, and larger editorial panels.
- `{rounded.lg}` 40px — the mobile app download pill chip.

The 10px default is a degree warmer than the 8px used by Citi and the 4–6px used by Cloudflare — enough to read as "community bank" rather than "fintech" or "institutional." The 24px featured-card radius is the most distinctive shape in the system; it gives the promotional card the feel of a physical marketing card.

## Components

**`button-primary`** — Purple `{colors.link}` fill, cream text, Wells Fargo Sans SemiBold at `{typography.button-md}`, `{rounded.sm}` 10px, 9×16px padding, 40px height. The canonical CTA for product applications and sign-on actions.

**`button-secondary`** — Cream fill, purple text and 1px purple border, same typography and radius. Used in dual-button clusters alongside the primary fill.

**`top-nav`** — Stagecoach red `{colors.red}` fill, cream white text in `{typography.nav-link}` (13px / 400), no border-radius, 44px height. Holds the stagecoach logo and the secondary utility nav (ATMs/Locations, Contact, Sign On).

**`nav-link`** — Transparent background, cream white text on the red nav surface. The primary product nav links (Checking, Savings, Credit Cards, Home Loans, Personal Loans, Investing, Small Business).

**`hero-heading`** — Near-black `{colors.ink}` at `{typography.display-xl}` (56px / 400). "$325 checking bonus on us" is the canonical instance — large Regular weight is the display convention.

**`section-heading`** — Near-black `{colors.ink}` at `{typography.heading-lg}` (24px / 600). Section titles like "Financial guidance and support" and "Serving our customers and communities."

**`body-paragraph`** — Near-black `{colors.ink}` at `{typography.body-md}` (16px / 400). Standard marketing body copy.

**`body-paragraph-muted`** — Warm grey `{colors.ink-muted}` at `{typography.body-sm}` for secondary body, card descriptions, and meta text.

**`card`** — Cream `{colors.canvas}` fill, 1px warm-grey `{colors.hairline}` border, `{rounded.sm}` 10px, 20px padding. The standard product card — used for the checking account promotion tiles and feature-benefit cards.

**`card-featured`** — Cream fill, `{rounded.md}` 24px, 24px padding, no border. The featured promotional panel — the "$325 checking bonus" hero tile uses this rounded treatment.

**`label`** — Purple `{colors.link}` text at `{typography.label-md}` (15px / 600). Interactive section headings that double as navigation labels (e.g., the financial-guidance category links).

**`text-input`** — Cream `{colors.canvas}` fill, near-black text, `{rounded.none}` sharp corners, 1×16px padding, 30px height. The sign-on username and password fields — the only 0px radius surface in the system.

**`section-band`** — `{colors.surface-1}` deeper cream fill, 40px vertical padding. Used for the app-download and community sections where a tonal shift signals a change in content register.

**`footer`** — Cream `{colors.canvas}` surface, warm grey `{colors.ink-muted}` text at `{typography.body-xs}` (13px / 400), 20×16px padding. The footer holds four-to-five link groups (Who We Are, Products, Sites, and legal) in the same cream as the body.

## Do's and Don'ts

**Do** confine the stagecoach red `{colors.red}` to the navigation bar. The system's disciplined separation of brand identity (red header) from interactive affordance (purple body) is the organizing principle; placing red on body CTAs or section fills would collapse that separation and make the page feel like a different brand.

**Do** use the warm cream `{colors.canvas}` (#f9f7f6) as the body floor, not pure white. The warmth is the system's temperature signal — the cream pairs with the near-black ink (#141414) and warm-grey hairlines (#787070) to create a consistent warm register that pure white would break.

**Do** use Wells Fargo Sans SemiBold (600) — not Bold (700) — for section headings and button labels. The SemiBold tier is the workhouse of the heading system; Bold appears only for inline emphasis and is too heavy for standalone headings at 17–24px.

**Do** use 24px radius on any featured promotional card. The system's two-tier radius (10px standard / 24px featured) creates a clear visual hierarchy between everyday content cards and highlighted product promotions.

**Don't** use the purple `{colors.link}` (#5a469b) for non-interactive text. The purple carries the same semantic contract as the cerulean in Citi's system — it means "this can be tapped." Using it for decorative headings or labels that aren't interactive trains users to expect interactivity that isn't there.

**Don't** use sharp corners (`{rounded.none}`) except on sign-on input fields. The 0px radius on inputs is a convention for high-density form contexts; applying it to buttons or cards would break the warm-radius tone of the rest of the page.

**Don't** render the display headline in Bold weight. The 56px / Regular 400 display convention is intentional — large type at regular weight reads as trustworthy and approachable rather than aggressive. Adding Bold weight at that scale tips the page toward demanding rather than inviting.

**Don't** introduce a neutral cool grey for hairlines or secondary text. The ink-muted tone (`{colors.ink-muted}`) carries a warm brownish undertone; substituting a neutral or cool mid-grey would break the system's consistent warm temperature and read as a different brand temperature entirely.

## Known Gaps

- **Hover states:** no hover states for buttons or cards are captured from the marketing surface; only `{colors.link-hover}` and `{colors.link-dark}` are inferred from the declared color palette.
- **Mobile navigation:** the stagecoach-red nav collapses to a mobile hamburger; the expanded drawer surface and flyout treatment are not represented.
- **Sign-on error states:** the sign-on input fields capture the resting state only; validation error and field-focus states are not exposed in the captured marketing surface.
- **Stagecoach logo and arc mark:** the stagecoach illustration and wordmark are SVG assets not representable in DESIGN.md tokens; the brand logo treatment is absent from the component system.
- **ATM/branch locator module:** a map and branch-search widget appears on the homepage but its specialized tokens (map fill, pin color, search input treatment) are not captured.
- **Community photography treatment:** the editorial sections use full-bleed photography with warm-toned community imagery as the primary visual identity signal; photo art direction is not capturable as design tokens.