What is Capital One's primary brand color?

The registered brand voltage is Heritage Red, wired into the page CSS as a brand custom property and a deep saturated red close to a heritage stamp tone. But the captured marketing surface renders the Heritage Red exactly zero times. The actual primary button above the fold — the Sign-in CTA on the account-access card — ships in a teal-leaning blue tied to the interactive-emphasis token. The structural tier carries 449 occurrences of near-black ink and 231 of pure white; the only chromatic interactive surface is the deep teal blue at 21 occurrences. The red is held in such deep reserve on the home page that the brand association comes almost entirely from television and outdoor advertising rather than from the marketing site chrome.

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

Capital One ships Optimist for every spoken surface, with the system stack walking through Helvetica Neue, Helvetica, and Arial as fallbacks. The display tier is unusual for a US bank: the 40px h2 sits at weight 300, the 24-32px section heads sit at weight 300, and only the 16px button label and a small set of emphasis spans use weight 600. Body copy runs 14-16px at weight 400, captions at 12px at weight 400. There is no 700+ weight anywhere in the captured render. The closest open-source substitute is Inter Variable at weight 300 for display tiers and weight 400 for body; the proportions transfer cleanly and Inter at weight 300 reads with comparable typographic restraint.

Why does Capital One run display at weight 300?

Most US banks command display attention with weight 600 or 700 to signal authority and trust. Capital One inverts the convention: the 40px h2 renders at weight 300, which reads as editorial and quietly confident rather than authoritative. The visual register is closer to a Sunday-paper feature headline than to a bank-marketing hero. Combined with the photographic lifestyle bands, the light display weight pushes the system away from heritage-banking gravitas and toward a magazine-editorial tone. Stripe makes a similar move at weight 300, but Stripe pairs it with a saturated indigo voltage; Capital One pairs weight 300 with photography and lets the typography recede entirely.

Why does Capital One declare a nature-tone brand palette?

The CSS exposes eleven nature-toned brand color custom properties: oat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight. They are all declared with concrete hex values inside the brand namespace, alongside Heritage Red. None of them render on the captured home page — the page floor is ink-on-white with a teal-blue interactive accent. The palette appears to be a brand asset reserved for product-line illustrations, savings-account marketing, or sub-brand surfaces that are not exposed on the root marketing path. The naming pattern (atlantic, pacific, prairie, midnight) suggests an editorial system rather than a utility palette.

Can I use this DESIGN.md to build my own bank 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 Capital One's specific moves: Optimist-equivalent typography at weight 300 across display tiers, photography-led editorial bands stacked vertically, sub-pill 2px corner geometry on interactive surfaces, and a declared-but-absent brand voltage held in deep reserve. The token references resolve cleanly — every hex and font name in the file matches the live CSS Capital One ships. One caveat: hiding the brand color from the home page only works when an external channel (television, outdoor) already carries the color association in the consumer's head. For a brand without that pre-existing recognition, leading with the voltage is the safer move.

Capital One Design System

Capital One's marketing system as a DESIGN.md file.

About Capital One DESIGN.md

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

Banking & Payments

Capital One's marketing site does something almost no heritage-bank brand does: the brand color everyone associates with it — the deep Heritage Red of every "What's in your wallet?" television spot — is declared as a CSS custom property on every page and rendered zero times in the captured marketing chrome. The token sits in the system as registered brand voltage, named in lowercase as a brand asset, but the actual sign-in card above the fold ships a teal-leaning blue primary button instead, and the rest of the page commits to ink-on-white editorial composition. The result is a marketing system that reads as a magazine spread about banking rather than as a bank's marketing site — the red is held in such deep reserve that it has effectively left the page.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 12 color tokens drawn from a tight ink-on-canvas structural tier (near-black, off-black, three grays, white) plus the deep teal-blue interactive accent and the still-registered Heritage Red, with the eleven-token nature-tone palette (oat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight) carried in the spec as a sub-tier; 9 typography tokens running Optimist at weight 300 from the 40px h2 down through 24 and 32px section heads, with 14-16px body at weight 400 and a single 16px / 600 button label; a 3-step radius scale (2px / 4px / 1000px) where most interactive elements sit at 2px; an 8px base spacing scale; and 13 component definitions covering the teal-blue sign-in button, the photographic hero card, the lifestyle feature bands, and the deep-charcoal footer.

Feed this file to Claude or Cursor and it reproduces Capital One's specific moves: weight-300 editorial display instead of the weight-600+ used by every other US bank, photographic lifestyle bands stacked vertically, sub-pill 2px corner geometry, and a declared-but-absent brand red treated as an asset to be deployed rarely rather than as a voltage to fill every CTA. One move worth borrowing only with caution: hiding your primary brand color from your home page. Capital One can do it because its television presence carries the red association for them; most teams need the brand voltage to show up where the user lands.

What makes it distinct

Heritage Red declared, never shippedthe famous brand red lives in CSS as a custom property but the marketing site renders zero red pixels in the captured chrome
Optimist weight 300 display40px h2s and 24-32px section heads sit at typographic weight 300, the lightest display tier of any US bank in the directory
Photography-led editorial bandsthe page is a vertical stack of lifestyle photographs (a man fishing, two friends gardening, a woman holding a phone) with caption-rank typography over each
Sub-pill 2px button radiusprimary buttons and inputs both sit at 2px corners, a typographic-baseline radius that feels closer to a print magazine than to a fintech app
Eleven-token nature-tone brand paletteoat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight all declared as brand colors but absent from the home-page render

Live at capitalone.com

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

capitalone.com

Explore Capital One

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Capital One design system FAQ

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

Capital One — official site

Capital One'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.