What is Wells Fargo's primary brand color?

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.

What typeface does Wells Fargo use, and what should I substitute?

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.

Why is Wells Fargo's canvas warm cream instead of white?

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.

What is Wells Fargo's corner-radius philosophy?

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.

Can I use this DESIGN.md to build a retail banking or financial-services UI?

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.

Wells Fargo Design System

Wells Fargo's marketing-site design system as a DESIGN.md file.

About Wells Fargo DESIGN.md

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

Banking & Payments

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.

What makes it distinct

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 themeColorthe 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 weightsLight 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 radius10px on standard elements, 24px on featured promotional panels; no pill or sharp-corner extremes

Live at wellsfargo.com

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

wellsfargo.com

Explore Wells Fargo

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Wells Fargo design system FAQ

Common questions about Wells Fargo's tokens, components, and how to use this DESIGN.md in your project.

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

Browse all design systems

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

Wells Fargo — official site

Wells Fargo's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

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