What is Vanguard's primary brand color?

Vanguard's brand voltage is a saturated crimson rendered at hex c20029 — used as the hero canvas, the primary CTA pill fill, and the oversized V monogram behind the founder portrait. Across the captured page the crimson appears 4 times, all as background or border, with the near-black ink at frequency 388 carrying every text surface. The discipline is intentional: the crimson owns the hero band and a handful of statistic-emphasis blocks, then the page drops back to a white-and-ink editorial rhythm. There is no secondary red, no light or dark variant; the brand voltage is exactly one value and the system never softens it.

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

Vanguard's marketing site runs FF Mark for every tier of the system — display, heading, body, button, label. Display sits at 92px in weight 800 with -2px letter-spacing on the hero h1; section headlines at 57px weight 800, sub-section h3 at 28px weight 900; body at 17px weight 400 with 24px line-height; emphasis spans at 17px weight 700. There is no serif voice and no monospace tier on the marketing surface. The closest open-source substitute is Mark FOT's nearest cousin Geist or Inter at the same weights; the proportions transfer reasonably though FF Mark's slightly tighter counters tighten the optical color at 17px body.

Why does Vanguard show a founder portrait above the fold?

The hero portrait is Jack Bogle — Vanguard's founder, who invented the index fund in 1976 and built the brand's anti-fee, long-horizon position. Showing him in the hero block is a brand equity move: Vanguard's competitive moat is being the inventor of the category, and the founder's face anchors the page in that history. The composition treats the portrait as a typographic element rather than a stock photo — three-quarter profile, dark navy suit on crimson, with the oversized V monogram filling the negative space. Most marketing teams cannot replicate this; the move only works when the founder's portrait carries 50 years of recognized brand equity.

What corner-radius scale does Vanguard use?

The radius scale is generous-soft with a binary character — 32px rounding appears 10 times on cards and content panels, 80px pill rounding on every primary CTA and tab cluster, and 50% rounding on icon avatars. There is no 4-8px small-step tier that most fintech systems use; the smallest non-pill surface on the page sits at 32px. The 80px pill renders fully-rounded on the typical 56-68px button height, and the 32px panel rounding gives statistic cards and editorial bands a magazine-soft edge. The discipline is unusual in finance, where tight rounding is the convention.

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

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Vanguard's specific moves: crimson voltage carrying the CTA and a single hero band, FF Mark weight 800 at display sizes, 80px pill CTAs, 32px panel rounding, and the near-black editorial floor below the fold. You can also reference the tokens directly — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one caveat: the founder-portrait hero is a brand-equity move, not a layout move. If you do not have a 50-year-recognized founder, use a product or scene composition in that slot.

Vanguard Design System

Vanguard's marketing system as a DESIGN.md file — saturated crimson hero with Jack Bogle's portrait, FF Mark weight 800 display, 80px pill CTAs, and a near-black editorial floor.

About Vanguard DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source investor.vanguard.com

Fintech & Crypto
Banking & Payments

Vanguard's marketing site does something almost no other broker attempts: the hero is a portrait of the founder. Jack Bogle in a navy suit, three-quarter profile, sits inside a saturated crimson rectangle that occupies the entire above-fold canvas, with an oversized sans-serif "V" filling the negative space behind his shoulders. The headline — "Reflecting on another year of smart investing" — sits in white on the same red block beside him, and the primary CTA pill drops a single red-on-red fill into the bottom-left corner. Where Schwab paints its hero in corporate navy and Fidelity leans on a green-and-white photographic editorial, Vanguard reads as a manifesto poster: founder, monogram, declarative sentence. The "V" mark is doing the same job a logo would in a luxury brand wordmark.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 9 color tokens dominated by near-black ink at frequency 388 and crimson voltage at frequency 4 (declared as the primary CTA fill); 11 typography tokens running FF Mark at four weights — 400 body, 700 emphasis, 800 display, 900 sub-section — with sizes spanning 17px body up to a 92px hero h1; 4 radius tokens centered on 32px panels and 80px pill CTAs; 8 spacing values on a 4px base with 24px and 32px doing the heaviest lifting; and 14 component definitions covering the crimson primary pill, the near-black secondary surface, hero h1, body paragraph, and the inverted statistic-card variant used inside the testimonial bands.

Feed this file to an AI coding tool and it reproduces Vanguard's specific moves: founder-portrait hero block (or branded photograph at minimum), crimson voltage carrying the CTA, FF Mark weight 800 at display sizes, 80px pill CTAs, and the near-black-over-white inversion below the fold. The one move that only works if your brand has a 50-year recognizable founder: don't replicate the portrait without earning the equity. Most teams should treat it as a structural lesson — give the brand a face, even if the face is a product object rather than a person.

What makes it distinct

Founder-as-hero portraitJack Bogle photographed three-quarter against an oversized red V monogram sits above the headline, where every other broker shows a chart or a phone mockup
Crimson hero canvasa saturated red block carries the above-fold composition rather than the usual finance-industry navy or black
FF Mark across every tiera single sans-serif runs the 92px weight-800 display down to the 17px body, no serif voice anywhere
80px pill CTAs and 32px rounded panelsthe radius scale skips the 4-12px small-step tier most fintech systems use, jumping straight to generous-soft
Binary chromatic systemcrimson + near-black do every job, with a single cobalt blue held for inline links and footer accents

Live at investor.vanguard.com

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

investor.vanguard.com

Explore Vanguard

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Vanguard design system FAQ

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

Vanguard — official site

Vanguard'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.