--- version: alpha name: "Capital One" website: "https://www.capitalone.com" description: >- A US bank and credit card issuer whose famous Heritage Red — the brand voltage everyone associates with the "What's in your wallet?" campaigns — is declared as a CSS variable on every page but never actually rendered in the captured marketing chrome. The above-the-fold sign-in card uses a teal-leaning blue primary button instead, and the page floor is a near-black ink running Optimist at weight 300 across every display tier. 40px h2 in weight 300, photography-led lifestyle bands, a sub-pill 2px corner radius on inputs and buttons, and a quietly unusual eleven-token "brand palette" of oat / linen / pistachio / sky / pacific / prairie / surf / atlantic / parakeet / midnight nature tones that load alongside the red but never appear on the home page either. seo: title: "Capital One Design System for React — Optimist weight 300, 13 components" metaDescription: "Capital One's marketing system as a DESIGN.md file. Heritage Red declared but absent, Optimist weight 300 display, lifestyle photography hero, sub-pill 2px button radius. Tokens for React, Next.js, and AI coding tools." highlights: - "Heritage Red declared, never shipped — the 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 display — 40px 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 bands — the 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 radius — primary 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 palette — oat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight all declared as brand colors but absent from the home-page render" tags: - "Banking & Payments" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.capitalone.com" title: "Capital One — official site" description: "Capital One'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 Capital One's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Capital One use, and what should I use as a substitute?" answer: "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." - id: "weight-300-display" title: "Why does Capital One run display at weight 300?" answer: "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." - id: "brand-palette" title: "Why does Capital One declare a nature-tone brand palette?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own bank marketing site?" answer: "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." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#0276b1" primary-dark: "#255f82" heritage-red: "#cc2427" ink: "#141414" ink-soft: "#1f1f1f" ink-press: "#3d3d3d" ink-secondary: "#525252" muted: "#696969" hairline: "#d4d4d4" canvas: "#ffffff" surface-1: "#f4f4f4" shadow: "#000000" typography: display-xl: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 300 lineHeight: 52px letterSpacing: 0 display-md: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 41.6px letterSpacing: 0 heading-md: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 36px letterSpacing: 0 heading-sm: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 25.92px letterSpacing: 0 body-md: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 body-emphasis: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 21px letterSpacing: 0 caption: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 button-md: fontFamily: "Optimist, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 21px letterSpacing: 0 rounded: none: "0px" xs: "2px" sm: "4px" pill: "1000px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "40px" 3xl: "48px" 4xl: "80px" components: hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.sm}" padding: "32px" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-xl}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-sm}" caption-text: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.caption}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "6px 20px 7px" height: "32px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "6px 20px" height: "32px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px 32px" height: "64px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "8px 12px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "24px" borderColor: "{colors.hairline}" surface-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "32px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" padding: "5px 8px 5px 32px" height: "32px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "48px 32px" --- ## Overview Capital One's marketing site inverts the heritage-bank convention. **Voltage in reserve.** The famous Heritage Red (`{colors.heritage-red}` — #cc2427) that defines the brand on television and outdoor advertising is declared as a CSS custom property on every page — but rendered zero times in the captured home-page chrome. The above-fold sign-in card ships a teal-leaning blue (`{colors.primary}` — #0276b1) as its primary button instead, and the page floor commits entirely to ink-on-white editorial composition. Where Chase fills its hero with navy and a saturated blue CTA stack, and where Wells Fargo leans on a red-on-cream heritage canvas, Capital One holds the red so far in reserve that it has effectively left the marketing surface — the brand association arrives from external channels rather than from the page. The typographic register reinforces the move. The display tier runs Optimist at **weight 300**: the 40px h2 ("Navigate your summer spending") sits at typographic weight 300, the 24-32px section heads stay at weight 300, and only the 16px button label tips into weight 600. There is no 700+ weight anywhere on the captured page. Where every other US bank in this directory anchors display at weight 600 or 700 to signal trust through authority, Capital One signals it through restraint — confidence by typographic lightness. Stripe makes a comparable move at weight 300 in fintech; Capital One is the only US bank that does. The shape language is **sub-pill geometry**. Primary buttons and inputs both sit at 2px corners (`{rounded.xs}`), cards step up to 4px (`{rounded.sm}`), and a 1000px pill (`{rounded.pill}`) appears only on toggles and circular selectors. There is no 8 / 12 / 16px middle tier and no fully-rounded CTA pill — the system is binary in radius the same way it is binary in weight. **Key Characteristics:** - Heritage Red (`{colors.heritage-red}` — #cc2427) declared as a brand custom property on every page but rendered zero times in the captured marketing chrome — the brand voltage exists in CSS, not in pixels. - Teal-blue primary CTA (`{colors.primary}` — #0276b1) carries 21 captured occurrences, the only chromatic interactive surface on the page. - Optimist at weight 300 across every display tier (40 / 32 / 24px) — the lightest display weight of any US bank in the directory. - Ink-on-white structural composition — 449 occurrences of near-black ink (`{colors.ink}` — #141414) against 231 of pure canvas (`{colors.canvas}` — #ffffff), with no intermediate-tone surface bands. - Sub-pill 2px corner geometry on buttons and inputs, 4px on cards, 1000px on toggles — no 8 / 12 / 16px middle tier. - Photography-led lifestyle bands stacked vertically: a man fishing, two friends gardening, a woman holding a phone — the page's only chromatic moments come from the photographs themselves. - Eleven-token nature-tone brand palette (oat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight) declared in the brand namespace but absent from the home-page render. - Standard top-nav at 64px height on a white surface, with a slim hairline divider — no chromatic chrome. ## Colors ### Brand - **Heritage Red** (`{colors.heritage-red}` — #cc2427): frequency 0 on the captured page. Wired in CSS as the brand-red custom property — registered as the famous Capital One voltage from television and outdoor advertising, but rendered zero times in the home-page chrome. The single most-recognized brand color in the directory that does not appear in its own marketing surface. - **Interactive Blue** (`{colors.primary}` — #0276b1): frequency 21 — used as text (9), bg (3), border (9). The actual interactive accent — fills the Sign-in CTA above the fold and carries link text across the page. Wired as the interactive-emphasis token. Reads as a teal-leaning blue rather than a saturated banking blue. - **Interactive Blue Dark** (`{colors.primary-dark}` — #255f82): frequency 18 — used as text (9), border (9). The hover / press variant of the interactive blue. One step darker, slightly more desaturated. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 231 — used as text (109), bg (13), border (109). Pure white, the page floor below the photographic bands. Wired into multiple inverse and on-image tokens. - **Surface-1** (`{colors.surface-1}` — #f4f4f4): frequency 5 — used as bg (5). The off-white interactive-low surface, also tied to the brand oat token. Used on hover-emphasis backgrounds and on a single feature card. ### Text - **Ink** (`{colors.ink}` — #141414): frequency 130 — used as text (65), border (65). The dominant text color across hero h2, section heads, and primary body copy. Wired as the high-emphasis neutral text token. - **Ink Soft** (`{colors.ink-soft}` — #1f1f1f): frequency 12 — used as text (6), border (6). Slightly softer running-text variant for body paragraphs. - **Ink Press** (`{colors.ink-press}` — #3d3d3d): frequency 1 — used as bg (1). The press-state background for high-emphasis interactive surfaces. Also tied to one of the categorical-callout chart steps. - **Ink Secondary** (`{colors.ink-secondary}` — #525252): frequency 1 — used as bg (1). The hover state for secondary text-and-icon tokens. - **Muted** (`{colors.muted}` — #696969): frequency 34 — used as text (16), border (16), shadow (2). Secondary text and chrome — toggle tracks, avatar text, medium-emphasis borders. ### Hairline - **Hairline** (`{colors.hairline}` — #d4d4d4): frequency 68 — used as text (34), border (34). The dominant border tone, carrying card outlines, input field outlines, and the top-nav bottom rule. Also reserved for inverse high-emphasis press states. ### Shadow - **Shadow** (`{colors.shadow}` — #000000): frequency 449 — used as text (223), border (223), shadow (3). Pure black appears at extreme frequency in the structural tier, but almost entirely as text-and-icon ink in inverse contexts (white-on-black footer, on-image overlays); the shadow-ink role is incidental. ## Typography ### Font Family The system runs **Optimist** for every spoken surface, with the system stack walking `"Helvetica Neue", Helvetica, Arial, sans-serif`. There is no separate display family, no serif tier, and no monospace anywhere in the captured chrome. Optimist is a custom proprietary sans tied to the Capital One brand — variable-weight, with a slightly humanist axis at lighter weights. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 40px | 300 | 52px | Section h2 ("Navigate your summer spending") | | `{typography.display-md}` | 32px | 300 | 41.6px | Sub-section h3 | | `{typography.heading-md}` | 24px | 300 | 36px | Tertiary heads, lead paragraphs | | `{typography.heading-sm}` | 18px | 600 | 25.92px | Emphasis sub-heads (rare) | | `{typography.body-md}` | 16px | 400 | 24px | Default running text, link labels | | `{typography.body-sm}` | 14px | 400 | 21px | Captions, secondary nav labels | | `{typography.body-emphasis}` | 14px | 600 | 21px | Emphasis spans inside paragraphs | | `{typography.caption}` | 12px | 400 | 18px | Legal disclosures, footnote rows | | `{typography.button-md}` | 16px | 600 | 21px | Primary CTA labels | ### Principles The system anchors on **weight 300 for display, weight 400 for body, weight 600 for emphasis**. There is no 700+ weight on the captured marketing surface. Where Chase runs h2 at weight 700 to signal authority and Wells Fargo runs display at weight 600 to signal heritage gravitas, Capital One inverts the move — weight 300 on the 40px h2 reads as editorial-magazine rather than as bank-marketing. The result is a typographic register much closer to Stripe's weight-300 fintech treatment than to any other US bank in the directory. The 16px button label at weight 600 is the heaviest typographic moment in the system. It sits inside a 32px-tall pill button at 2px radius — the size and weight discrepancy reads as a deliberate move: the action signal is bolder than any content tier above it. ### Note on Font Substitutes Optimist is proprietary. **Inter Variable** at weight 300 is the closest open-source substitute; the proportions transfer cleanly at display sizes and Inter's humanist axis at weight 300 reads close to Optimist. **Söhne** at weight 300 (the typeface Stripe runs) is similar in feel but not free. For body sizes, Inter at weight 400 transfers without adjustment. ## Layout ### Spacing System - **Base unit:** 8px — the dominant gap value. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 48px · `{spacing.4xl}` 80px. - **Section padding (vertical):** the marketing bands sit at 80x48px on the larger feature blocks; the lifestyle photo bands carry generous 48-64px top-and-bottom padding to let the photography breathe. - **Card internal padding:** the hero sign-in card carries 32px; the photographic feature cards step up to 48px. - **Top-nav padding:** 16px vertical, 32px horizontal. ### Grid & Container - **Max content width:** ~1280px on the editorial bands and ~720px on the centered hero sign-in card. - **Hero block:** full-bleed lifestyle photograph as the background, with the sign-in card floating right-aligned at ~360px wide. - **Feature bands:** 3-up rows below the fold (Explore card offers, Bank with confidence, Find a car you love) using small icon-pictograms and 16px body copy. - **Lifestyle editorial bands:** alternating photograph-left / copy-right layouts, each at ~1080px max width. ### Rhythm The page reads as a vertical stack of **photography + caption pairs** rather than as the typical bank-marketing CTA-grid. Each band carries a single lifestyle photograph, a 40px / weight 300 h2, a 16-24px body paragraph, and at most one link. The rhythm is editorial: each section is a magazine-spread page rather than a banking-feature card. ## Elevation The system has essentially **no shadow tier**. The captured render has 3 occurrences of shadow ink on the entire page — almost all confined to the sign-in card's faint lift off the photographic hero background. Below the fold, every card sits on the pure-white canvas with a 1px `{colors.hairline}` border doing the elevation work that a shadow would carry on a dashboard product. - **Flat (no shadow):** hero bands, feature cells, lifestyle editorial blocks, footer — 99% of surfaces. - **Sign-in card lift:** the floating account-access card carries a faint dropshadow against the photographic background — the single elevated element on the page. - **Hairline outlines:** the 1px `{colors.hairline}` (#d4d4d4) border carries card outlines, input field outlines, and the top-nav bottom rule. ## Shapes The radius scale is **binary**: sub-pill on interactives, pill on toggles. - `{rounded.none}` 0px — section bands and full-bleed photographs. - `{rounded.xs}` 2px — primary buttons, secondary buttons, and text inputs all sit at this near-square radius (3 + 8 captured occurrences). The 2px corners feel closer to a print-magazine typographic baseline than to a fintech app. - `{rounded.sm}` 4px — cards and feature panels (8 captured occurrences). The dominant non-interactive radius. - `{rounded.pill}` 1000px — toggle switches, avatar circles, and circular selectors (3 captured occurrences). Used only on round-by-purpose elements. There is no 6 / 8 / 12 / 16px middle tier. The system is deliberately binary in shape language the same way it is in typographic weight — either 2-4px sub-pill or a full circle, with nothing rounded-but-not-pill in between. ## Components **`hero-card`** — The above-fold sign-in card. White `{colors.canvas}` fill on the photographic hero, ink text, `{rounded.sm}` 4px radius, 32px internal padding. Right-aligned at ~360px wide. Holds the username / password inputs and the Sign-in CTA. **`hero-heading`** — Ink `{colors.ink}` text on the photographic hero, Optimist 40px / 300. The 40px display at weight 300 is the loudest typographic moment in the system — and it still reads as editorial restraint. **`section-heading`** — Ink text, Optimist 32px / 300. Used for "Explore card offers", "Bank with confidence", "Find a car you love" feature bands. **`body-paragraph`** — Default ink running-text at `{typography.body-md}` — the workhorse paragraph style. **`body-paragraph-muted`** — Muted `{colors.muted}` variant for secondary copy and metadata under feature cells. **`caption-text`** — White-on-black 12px / 400 footer disclosure type. The only caption-rank typography appears in the footer band. **`button-primary`** — The signature CTA. Teal-blue `{colors.primary}` fill, white text, Optimist 16px / 600, `{rounded.xs}` 2px radius, 6×20px padding, 32px height. The Sign-in button on the account-access card is the canonical instance. **`button-secondary`** — White fill, ink text, 1px hairline border, 2px radius, 32px height. Used for tertiary actions ("Learn more", "Sign up"). **`top-nav`** — White `{colors.canvas}` surface, ink wordmark and link labels, 64px height, no border-radius. Carries the Capital One wordmark flush left, category links center (Credit Cards / Checking & Savings / Auto), and Sign-in / Search flush right. **`nav-link`** — Transparent background, ink text in `{typography.body-md}` (16px / 400), 8×12px padding. No hover background visible in the captured surface. **`card`** — White fill, 1px `{colors.hairline}` border, `{rounded.sm}` 4px radius, 24px internal padding. The default feature card. **`surface-card`** — `{colors.surface-1}` (#f4f4f4) fill, ink text, 4px radius, 32px padding. The single off-white surface card on the page — used on one of the secondary feature bands below the photographic editorial section. **`text-input`** — White fill, ink text, 1px hairline border, 2px radius, 5×8px padding, 32px height. The username and password inputs on the sign-in card. Notice the 5×8px padding is asymmetric — extra left-padding accounts for a leading icon. **`footer`** — Dark ink `{colors.ink}` (#141414) canvas, white-on-black caption text at 12px / 400, 48×32px padding. The single inverse-contrast band on the page. ## Do's and Don'ts **Do** treat the brand red as a registered asset rather than as an active voltage. The Heritage Red is wired into CSS as a brand custom property — it exists in the system — but the home page renders zero red pixels. Leading with the red on a chrome surface would contradict the page's editorial register. **Do** keep display weight at 300. The 40px h2 at weight 300 is the system's signature move. Bumping to 600 or 700 turns the editorial page into a generic banking hero and loses the magazine register. **Do** anchor the page on photography. The chromatic moments on the captured page come almost entirely from the lifestyle photographs (a man fishing, two friends gardening). Replacing them with illustrated icons or product chrome would leave the system with nothing chromatic at all. **Do** use 2px corners on all interactive surfaces. The sub-pill 2px radius on buttons and inputs is structural to the brand register — it reads as typographic rather than as fintech-button. **Don't** render the brand red (`{colors.heritage-red}` — #cc2427) inside chrome surfaces just because the token exists. The red is held in reserve on the home page on purpose; using it for a CTA fill or a banner background would break the page's editorial discipline. **Don't** use the teal-blue `{colors.primary}` (#0276b1) for more than one interactive surface per band. The blue carries 21 occurrences across the entire page; treating it as a standard SaaS CTA color and stamping it on every card breaks the scarcity. **Don't** introduce a 6 / 8 / 12 / 16px middle radius tier. The system is binary — 2-4px sub-pill, then 1000px on round-by-purpose elements. A 12px-rounded card would read as borrowed from a fintech competitor rather than from the editorial register. **Don't** anchor display at weight 600+. Capital One's typographic confidence comes from weight 300, not from heavier tiers. A 40px h2 at weight 700 would read as Chase or Bank of America — the bank Capital One has spent twenty years differentiating itself from. ## Known Gaps - **Heritage Red usage contexts:** the famous brand red is declared but absent from the home page. It likely appears on credit-card product detail pages, advertising creative, or sub-brand surfaces — those contexts are not captured here. - **Nature-tone brand palette:** the eleven nature-tone tokens (oat, linen, pistachio, sky, fern, pacific, prairie, surf, atlantic, parakeet, midnight) are declared as brand colors but render zero times on the captured page. Their actual usage contexts (account-line illustrations? savings-account marketing?) are not exposed here. - **Hover and focus states:** documented for `{component.button-primary}` only; the full state matrix (focus rings, disabled tints, error states) is not captured from the marketing surface. - **Form input error states:** `{component.text-input}` carries the resting state; validation styling is not exposed on the marketing site. - **Dark mode:** the captured marketing surface is light-only. A dark variant may exist inside the authenticated banking product but is not represented here. - **Product surfaces:** this DESIGN.md captures the marketing site only. The authenticated Capital One banking app, the Auto Navigator product surface, and the credit-card application flow carry their own surface tokens and component sets. - **Motion:** the page does not appear to carry meaningful motion above the fold — the photographic bands are static — so the spec does not document easing curves.