--- name: Capital One tagline: Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. updated_at: 2026-05-28T22:15:11.824Z published_at: 2026-05-28T22:15:11.824Z author: webdesignhot source_url: https://www.capitalone.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, structured, sans, fintech, banking, accessible, navy, optimist] preview_swatch: ['#ffffff', '#0276b1', '#d03027'] related: [] description: 'Capital One''s experience is the visual equivalent of its tagline — "What''s in your wallet?" — confident, plainspoken, and built to be understood. The canvas is clean white (`#ffffff`) with black (`#000000`) body text, the highest-trust contrast a bank can offer. Identity lives in two marks: the institutional navy (`#004977`) that anchors headers, logos, and authoritative surfaces, and the single red swoosh (`#d03027`) that streaks across the wordmark like an underline of confidence. The working interactive colour, however, is a lighter, friendlier blue (`#0276b1`) — the colour of the Sign-in CTA and the system''s primary actionable signal — paired with an unusually sharp 2px corner radius that keeps the brand from ever feeling soft or playful. The typeface throughout is Optimist, Capital One''s proprietary geometric humanist sans, named for the brand''s outlook and tuned for legibility at the small sizes that financial disclosure demands. The result is a design language that is reassuringly square-shouldered: large optimistic headlines in 700-weight Optimist, generous whitespace, a restrained palette, and a 2px radius that reads as precise rather than decorative. It feels like a bank you can trust because it never tries too hard to look like anything other than a bank that respects your attention.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: text-on-brand accent: accent-red muted: text-muted border: border ring: focus-ring colors: bg: '#ffffff' surface: '#ffffff' surface-alt: '#f6f7f9' # cool off-white for alternating section bands and cards surface-navy: '#004977' # navy structural surface — headers, footers, hero bands text: '#000000' text-secondary: '#3b3f44' # softened near-black for supporting body copy text-muted: '#6b7177' # muted gray for captions, helper text, legal microcopy text-on-navy: '#ffffff' # white reverse on navy surfaces text-on-brand: '#ffffff' # white reverse on interactive-blue fills brand: '#0276b1' # interactive blue — Sign-in CTA, primary actions, links (LIVE token) brand-navy: '#004977' # Capital One institutional navy — logo, authority surfaces brand-red: '#d03027' # the red swoosh — wordmark accent, single signal red brand-blue-hover: '#015e8e' # darker blue for hover/active on interactive elements accent-red: '#d03027' # alert/emphasis red, reuse of the swoosh hue border: '#000000' # high-contrast hairline for inputs and outlined controls border-soft: '#d4d8dd' # 1px neutral divider between rows and sections border-strong: '#004977' # navy outline on emphasized cards focus-ring: '#0276b1' # interactive blue focus indicator scrim: 'rgba(0,73,119,0.55)' # navy-tinted modal backdrop shadow-soft: 'rgba(0,0,0,0.06)' # resting card lift shadow-medium: 'rgba(0,0,0,0.12)' # raised/hover card shadow-deep: 'rgba(0,0,0,0.20)' # modal / popover elevation success: '#1a7f37' # confirmation green — approvals, deposits posted warning: '#9a6700' # advisory amber-brown — pending / attention danger: '#d03027' # error red — reuses the swoosh hue for one unified red info: '#0276b1' # informational callouts reuse interactive blue typography: display: family: 'Optimist, system-ui, -apple-system, sans-serif' weights: [500, 600, 700] body: family: 'Optimist, system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display, notes: 'campaign hero on navy or white — optimistic, square-shouldered' } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display, notes: 'page title — Optimist 32px on the live homepage, scales up on campaign pages' } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body, notes: 'lead paragraph under headlines' } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body, notes: 'form field labels, nav items' } button-label: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0', family: body, notes: 'CTA text — 600 weight for emphasis without uppercase' } eyebrow: { size: 13, weight: 600, lineHeight: 1.2, tracking: '0.08em', family: body, transform: uppercase, notes: 'section category label above headlines' } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } legal-micro: { size: 11, weight: 400, lineHeight: 1.45, tracking: '0', family: body, notes: 'APR disclosures, footnotes, regulatory fine print' } radius: micro: 2 # the signature Capital One corner — inputs, buttons, most surfaces (LIVE: 2px) sm: 4 # small chips, badges md: 8 # cards, modals lg: 12 # large feature cards, media tiles xl: 16 # hero containers on campaign pages pill: 9999 # filter chips, status pills, avatar rings spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 card-gutter: 24 section-vertical: 96 components: button-primary: bg: '#0276b1' color: '#ffffff' radius: 2 padding: '12px 24px' border: 'none' height: 48 font: button-label use: 'Primary action — the interactive-blue Sign-in / Open Account CTA. Sharp 2px corners. Darkens to #015e8e on hover.' button-secondary: bg: '#ffffff' color: '#0276b1' radius: 2 padding: '12px 24px' border: '1.5px solid #0276b1' height: 48 font: button-label use: 'Secondary action — outlined interactive blue, paired beside a primary or standalone.' button-navy: bg: '#004977' color: '#ffffff' radius: 2 padding: '12px 24px' border: 'none' height: 48 font: button-label use: 'Authority CTA on white marketing surfaces where the institutional navy carries more gravity than the lighter blue.' button-ghost: bg: 'transparent' color: '#000000' radius: 2 padding: '12px 16px' border: 'none' font: button-label use: 'Tertiary / inline text action. Underline appears on hover; no fill.' card: bg: '#ffffff' color: '#000000' radius: 8 padding: '24px' border: '1px solid #d4d8dd' use: 'Product card (credit card, account, offer). Soft border + resting shadow; 2px-sharp interior controls.' card-navy: bg: '#004977' color: '#ffffff' radius: 12 padding: '32px' border: 'none' use: 'Promotional / authority card on navy — reverse text, white or interactive-blue CTA inside.' input: bg: '#ffffff' color: '#000000' radius: 2 padding: '12px 16px' border: '1px solid #000000' height: 48 use: 'Form field — high-contrast black hairline, 2px corners, interactive-blue focus ring.' badge: bg: '#f6f7f9' color: '#004977' radius: 9999 padding: '4px 12px' border: 'none' font: caption use: 'Neutral status / category pill. Navy text on cool off-white.' badge-red: bg: '#d03027' color: '#ffffff' radius: 4 padding: '4px 10px' border: 'none' font: caption use: 'Emphasis flag — "New", "Limited time". Uses the single signal red sparingly.' nav-bar: bg: '#ffffff' color: '#000000' radius: 0 padding: '0 32px' border: '1px solid #d4d8dd' height: 64 use: 'Top utility nav — white bar, navy logo with red swoosh left, primary links centre, interactive-blue Sign In button right.' footer: bg: '#004977' color: '#ffffff' radius: 0 padding: '64px 32px' border: 'none' use: 'Institutional navy footer — multi-column link grid, white reverse text, legal microcopy band at bottom.' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 button-hover: 'background darkens #0276b1 → #015e8e over 150ms ease-standard; no transform' card-hover: 'shadow-soft → shadow-medium lift over 240ms; optional 2px upward translate' link-underline: 'underline grows from 0 to full width over 150ms on hover' reduced-motion: 'respects prefers-reduced-motion: reduce — translates and underline grows become instant; colour transitions preserved at reduced duration' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: resting: 'rgba(0,0,0,0.06) 0 1px 3px 0' # default product cards raised: 'rgba(0,0,0,0.12) 0 4px 12px 0' # hover / active card lift overlay: 'rgba(0,0,0,0.20) 0 12px 32px 0' # modals, dropdowns, popovers ring: '0 0 0 3px rgba(2,118,177,0.4)' # interactive-blue focus glow philosophy: 'Capital One uses shadow conservatively and functionally — a bank communicates trust through clarity, not theatrics. Elevation marks interactivity (a card you can click lifts slightly) and layering (modals float above the page). Borders, not shadows, do most of the structural delineation work; the 2px radius keeps even shadowed elements feeling crisp rather than pillowy.' accessibility: contrast-text-on-bg: 21.0 # #000000 on #ffffff — AAA (maximum) contrast-brand-on-bg: 4.6 # #0276b1 on #ffffff — AA at body, AAA at large contrast-text-on-brand: 4.6 # #ffffff on #0276b1 — AA at body, AAA at large contrast-text-on-navy: 9.7 # #ffffff on #004977 — AAA contrast-red-on-bg: 4.7 # #d03027 on #ffffff — AA at body contrast-secondary: 11.2 # #3b3f44 on #ffffff — AAA contrast-muted: 4.8 # #6b7177 on #ffffff — AA at body focus-ring: '3px interactive-blue (#0276b1) glow ring at 40% opacity, plus 2px solid outline for non-mouse users' reduced-motion-honored: true touch-target-min: 48 keyboard-nav: 'Tab cycles skip-link → logo → primary nav links → Sign In CTA → main content actions → footer columns. Visible focus ring on every stop.' aria-patterns: 'Sign In is a labelled button/link; the red swoosh is decorative within the logo (aria-hidden); status badges use aria-label when colour alone conveys meaning; form fields use programmatic association and aria-describedby for helper/error text.' screen-reader: 'Legal disclosures are real text (never images) so screen readers and translation tools reach them; product names carry full alt text; decorative swoosh and divider rules are aria-hidden.' dark-mode: null # Public marketing + servicing surfaces are light-only. The navy footer/header bands are structural surface contrast within the light theme, not a separate dark mode. The authenticated app may offer a system-following dark theme; the brand site does not. lineage: summary: 'Capital One sits at the intersection of trust-first institutional banking and clarity-first accessible web design. From banking it inherits the navy-and-white authority palette, conservative shadow use, and complete legible disclosures; from the modern accessibility-led web (USWDS, Stripe) it takes roomy line-heights, high-contrast input borders, and a single-typeface hierarchy carried by the proprietary Optimist face. Its signature departure is the sharp 2px corner on interactive controls — where most fintech rounds to 8px+ for approachability, Capital One stays square-shouldered and engineered. With one disciplined red (the swoosh), one action blue, and one institutional navy, it feels human and accessible without drifting into generic rounded SaaS sameness. It rejects gradient-heavy hero theatrics, glassmorphism, decorative shadow stacking, and all-caps shoutiness.' influences: - name: Capital One Optimist typeface & brand design role: Proprietary humanist-geometric sans anchoring the whole system url: https://www.capitalone.com - name: U.S. Web Design System (USWDS) role: Accessibility-led palette discipline, high-contrast borders, real-text disclosures url: https://designsystem.digital.gov - name: Stripe design language role: Clean canvas and roomy typography as a fintech-credibility move url: https://stripe.com - name: Material Design (Google) role: Elevation-as-interactivity principle, applied conservatively url: https://m3.material.io - name: International Typographic (Swiss) Style role: Grid discipline and single sans-serif hierarchy, clarity over ornament url: https://en.wikipedia.org/wiki/International_Typographic_Style - name: Pentagram corporate identity work role: One-mark-one-signature approach where a single confident gesture carries the brand url: https://www.pentagram.com --- ## 1. Visual Theme & Atmosphere Capital One's design language is the visual equivalent of its tagline — *"What's in your wallet?"* — confident, plainspoken, and engineered to be understood by everyone. The canvas is clean white (`#ffffff`) with true black (`#000000`) body text, the highest-trust contrast pairing a financial institution can put on a page. Nothing about the surface is decorative for its own sake. Where a consumer brand might reach for warmth or whimsy, Capital One reaches for clarity, because clarity is what people want from the company holding their money. The brand identity rests on two marks working in tension. The first is the institutional **navy** (`#004977`) — the colour of the logo, the header, the footer, and the authoritative bands that frame the experience. Navy is the bank's gravity: it says established, regulated, dependable. The second is the **red swoosh** (`#d03027`), the single confident streak that crosses the wordmark like an underline drawn with one fast stroke. The swoosh is the only place the brand allows itself a flourish, and because it appears exactly once, it reads as a signature rather than decoration. The working interactive colour, however, is neither navy nor red. An audit of the production site caught a lighter, friendlier **interactive blue** (`#0276b1`) doing the actual labour — it is the colour of the Sign-in button, the primary CTAs, and the inline links. This is a deliberate hierarchy: navy carries identity and authority, the red swoosh carries the signature, and the lighter blue carries *action*. Keeping the action colour distinct from the identity colour means a "Sign In" button never competes visually with the logo, and the eye learns quickly that lighter blue means *you can click this*. Geometry reinforces the tone through one unusual decision: a very sharp **2px corner radius** on buttons, inputs, and most surfaces. Most modern banking sites round to 8px or more to feel approachable; Capital One stays at 2px, which reads as precise, square-shouldered, and engineered rather than soft. Larger containers relax to 8–16px, but the interactive controls — the things you touch — stay crisp. The effect is a brand that feels accessible without ever feeling casual. Typography is set throughout in **Optimist**, Capital One's proprietary geometric-humanist sans, named for the brand's outlook and tuned specifically for legibility at the small sizes that financial disclosure demands. Headlines run large and optimistic at 700 weight; body copy is comfortable and roomy at 1.55 line-height; legal microcopy stays real, selectable text rather than baked-into-image fine print. The whole system — white canvas, navy authority, one red swoosh, a friendly action blue, 2px-sharp controls, and a warm-but-disciplined sans — feels like a bank that respects your attention and assumes your intelligence. **Key Characteristics:** - Clean white canvas (`#ffffff`) with true-black body text (`#000000`) for maximum, AAA-level trust contrast - Two-part brand identity: institutional **navy** (`#004977`) for authority + a single **red swoosh** (`#d03027`) as signature - A distinct lighter **interactive blue** (`#0276b1`) reserved for action — Sign In, primary CTAs, links - Signature **2px corner radius** on buttons and inputs — precise and square-shouldered, never pillowy - Proprietary **Optimist** typeface across the entire system; no secondary display face - Large 700-weight optimistic headlines paired with roomy 1.55 line-height body copy - Navy structural bands (header, footer, promo cards) provide layering without a separate dark mode - One unified red: the swoosh hue (`#d03027`) doubles as the only error/emphasis red - Generous whitespace and restrained palette — the page never crowds the reader - Legal disclosures kept as real, accessible text, never rasterized into imagery ## 2. Color Palette & Roles ### Primary / Brand - **Interactive Blue** (`#0276b1`) [→ `brand`]: the working action colour — Sign-in CTA, primary buttons, inline links. This is the live, audited primary; it is *not* the logo navy. - **Capital One Navy** (`#004977`) [→ `brand-navy`]: institutional identity colour — logo, header, footer, authority cards and bands. Carries gravity and trust. - **Red Swoosh** (`#d03027`) [→ `brand-red`]: the single confident streak across the wordmark. Used as signature accent and the one signal red; never as a large fill. ### Accent - **Accent Red** (`#d03027`) [→ `accent-red`]: emphasis flags ("New", "Limited time") and the system's only error hue. One red, used sparingly, keeps the signal unambiguous. ### Interactive - **Interactive Blue** (`#0276b1`) [→ `brand`]: default link and primary-action colour. - **Blue Hover** (`#015e8e`) [→ `brand-blue-hover`]: darker blue for hover/active/pressed states on interactive elements — a darken, never a transform. - **Focus Ring Blue** (`#0276b1` at 40%) [→ `focus-ring`]: the visible focus indicator for keyboard users. ### Neutral / Text - **Black** (`#000000`) [→ `text`]: primary body and headline text on white — maximum contrast. - **Secondary Ink** (`#3b3f44`) [→ `text-secondary`]: softened near-black for supporting paragraphs where pure black would feel heavy. - **Muted Gray** (`#6b7177`) [→ `text-muted`]: captions, helper text, timestamps, legal microcopy. - **White** (`#ffffff`) [→ `text-on-navy` / `text-on-brand`]: reverse text on navy and interactive-blue surfaces. ### Surface & Background - **White Canvas** (`#ffffff`) [→ `bg` / `surface`]: the default page floor and card surface. - **Cool Off-White** (`#f6f7f9`) [→ `surface-alt`]: alternating section bands, neutral badges, and subtle card differentiation. - **Navy Surface** (`#004977`) [→ `surface-navy`]: structural navy bands — header, footer, promotional/authority cards. ### Borders - **Black Hairline** (`#000000`) [→ `border`]: high-contrast 1px border on inputs and outlined controls — a deliberate accessibility choice. - **Soft Divider** (`#d4d8dd`) [→ `border-soft`]: 1px neutral rule between rows, cards, and sections. - **Strong Border** (`#004977`) [→ `border-strong`]: navy outline on emphasized cards and selected states. ### Shadow Colors Shadows are neutral black at low opacity (`rgba(0,0,0,0.06–0.20)`), used functionally to mark interactivity and layering rather than for decorative depth. See §7. ### Semantic - **Success** (`#1a7f37`) [→ `success`]: approvals, deposits posted, positive confirmations. - **Warning** (`#9a6700`) [→ `warning`]: pending states, advisory banners, attention-needed. - **Danger** (`#d03027`) [→ `danger`]: error and destructive states — deliberately the same red as the swoosh, so the brand carries exactly one red. - **Info** (`#0276b1`) [→ `info`]: informational callouts reuse the interactive blue. ## 3. Typography Rules ### Font Family - **Primary**: `Optimist` — Capital One's proprietary geometric-humanist sans, used for every headline, paragraph, label, and button on the site. - **Fallback stack**: `system-ui, -apple-system, sans-serif` — graceful native fallbacks while the webfont loads, preserving layout stability. - **Mono** (rare): `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — account numbers, confirmation codes, and tabular data only. ### Hierarchy | Role | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|--------|-------------|----------------|-------| | Display Hero | 80 | 700 | 1.0 | -0.03em | Campaign hero on navy or white — optimistic, square-shouldered | | Display Large | 56 | 700 | 1.05 | -0.02em | Large marketing headline | | H1 | 40 | 700 | 1.1 | -0.018em | Page title (Optimist 32px on the live homepage; scales up on campaign pages) | | H2 | 32 | 600 | 1.2 | -0.012em | Section heading | | H3 | 24 | 600 | 1.25 | -0.005em | Card / subsection title | | H4 | 20 | 600 | 1.3 | 0 | Minor heading, form group title | | Body Large | 18 | 400 | 1.55 | 0 | Lead paragraph under a headline | | Body | 16 | 400 | 1.55 | 0 | Default reading text | | Body Small | 14 | 400 | 1.5 | 0 | Secondary paragraphs, dense lists | | Label | 13 | 500 | 1.4 | 0 | Form labels, nav items | | Button Label | 16 | 600 | 1.0 | 0 | CTA text — 600 weight for emphasis without uppercase | | Eyebrow | 13 | 600 | 1.2 | 0.08em (uppercase) | Section category label above a headline | | Caption | 12 | 500 | 1.4 | 0.02em | Captions, badge text, timestamps | | Legal Micro | 11 | 400 | 1.45 | 0 | APR disclosures, footnotes, regulatory fine print | ### Principles - **Optimist does everything.** One typeface, full hierarchy. Contrast comes from size and weight (400 → 700), not from adding a serif or display face. - **Headlines are large and confident.** The 700-weight display sizes (40–80px) with negative tracking give marketing pages their optimistic, square-shouldered tone. - **Body copy stays roomy.** 1.55 line-height at 16/18px makes dense financial content comfortable to read — never cramped. - **Legal copy is real text, never an image.** Fine print at 11px stays selectable, translatable, and screen-reader accessible — a regulatory and accessibility necessity. - **Uppercase only on the eyebrow.** The 13px eyebrow with +0.08em tracking is the single uppercase context. Headlines and body stay sentence case. - **600 weight carries buttons and subheads.** It reads as emphasis without the shoutiness of all-caps. - **Negative tracking scales with size.** Display sizes tighten to -0.03em; body sits at 0. Tight display, neutral reading. ### Note on Font Substitutes Optimist is proprietary. When rebuilding without a licence: - **Inter** is the closest open-source match — humanist proportions, excellent small-size legibility, the same engineered-but-friendly feel. - **Source Sans 3** or **IBM Plex Sans** approximate the geometric-humanist character. - Whatever the substitute, preserve the **roomy 1.55 body line-height**, the **700-weight headlines with negative tracking**, and the **sentence-case discipline** — those carry more of the brand than the exact letterforms. ## 4. Component Stylings ### Buttons **`button-primary`** — Interactive-blue primary CTA - Background: Interactive Blue (`#0276b1`) - Text: White (`#ffffff`), Optimist 16/600 - Border: none - Radius: **2px** (the signature sharp corner) - Padding: 12px 24px · Height: 48px - Hover: background darkens to `#015e8e` over 150ms — no transform, no scale - Focus: 3px interactive-blue glow ring + 2px solid outline - Use: Sign In, Open Account, the primary action on any surface **`button-secondary`** — Outlined interactive blue - Background: White (`#ffffff`) - Text: Interactive Blue (`#0276b1`) - Border: 1.5px solid `#0276b1` - Radius: 2px · Padding: 12px 24px · Height: 48px - Hover: faint `#0276b1` tint fill at ~6% opacity; border holds - Use: secondary action paired beside a primary, or a standalone utility CTA **`button-navy`** — Authority CTA - Background: Capital One Navy (`#004977`) - Text: White (`#ffffff`) - Border: none · Radius: 2px · Padding: 12px 24px · Height: 48px - Hover: darken navy ~8% - Use: white marketing surfaces where institutional gravity matters more than the lighter action blue (e.g., "Explore banking", investor pages) **`button-ghost`** — Tertiary / inline text action - Background: transparent - Text: Black (`#000000`) or Interactive Blue for link-style - Border: none · Radius: 2px · Padding: 12px 16px - Hover: underline grows from 0 to full width over 150ms - Use: low-emphasis inline actions, "Learn more", dismiss ### Cards **`card`** — Product / offer card - Background: White (`#ffffff`) - Border: 1px solid `#d4d8dd` - Radius: 8px (relaxed for containers; interior controls stay 2px) - Padding: 24px - Shadow: resting (`rgba(0,0,0,0.06) 0 1px 3px`); raises to `rgba(0,0,0,0.12) 0 4px 12px` on hover if interactive - Use: credit-card tiles, account products, offers — image/product art top, title, body, CTA **`card-navy`** — Authority / promo card - Background: Capital One Navy (`#004977`) - Text: White reverse - Border: none · Radius: 12px · Padding: 32px - CTA inside: white or interactive-blue button - Use: promotional bands, value-proposition cards that need to feel institutional ### Inputs & Forms **`input`** — Text / number field - Background: White (`#ffffff`) - Text: Black (`#000000`) - Border: 1px solid Black (`#000000`) — high-contrast by design - Radius: 2px · Padding: 12px 16px · Height: 48px - Label: 13/500 above the field, programmatically associated - Focus: 3px interactive-blue glow ring; border thickens to interactive blue - Error: border and message in `#d03027`; message wired via `aria-describedby` - Helper text: 12px muted gray below the field ### Badges, Tags & Pills **`badge`** — Neutral status / category - Background: Cool Off-White (`#f6f7f9`) - Text: Navy (`#004977`), 12/500 - Radius: 9999px (pill) · Padding: 4px 12px - Use: category tags, "Member FDIC", neutral status **`badge-red`** — Emphasis flag - Background: Red (`#d03027`) - Text: White · Radius: 4px · Padding: 4px 10px - Use: "New", "Limited time" — sparingly; one signal red per view ### Navigation **`nav-bar`** — Top utility navigation - Background: White (`#ffffff`) - Height: 64px · Bottom border: 1px `#d4d8dd` - Logo: navy wordmark + red swoosh, left - Links: primary nav centre/left, Black 13/500, underline-grow on hover - Right: interactive-blue Sign In button (2px radius), optional search - Mobile: collapses to logo + hamburger + Sign In; full-screen overlay menu **`footer`** — Institutional navy footer - Background: Navy (`#004977`) - Text: White reverse - Padding: 64px 32px - Structure: multi-column link grid (Banking, Credit Cards, Auto, Business, About) + a bottom legal-microcopy band (Member FDIC, NMLS, disclosures) in white at 11px - Dividers: white at low opacity ## 5. Layout Principles ### Spacing System - **Base unit**: 4px - **Scale**: 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 - **Section vertical padding**: ~96px desktop, compressing to ~48px on mobile - **Card padding**: 24px (32px on navy authority cards), ~16px on mobile - **Header height**: 64px fixed ### Grid & Container - **Max content width**: ~1280px centred, with comfortable horizontal gutters (32px+) - **Prose width**: ~720px for long-form content (legal, articles, FAQs) — keeps reading line length humane - **Column pattern**: 12-column implied; practical layouts use 2-up product comparisons, 3-up card grids, and full-bleed navy bands for hero/promo - **Footer grid**: 4–5 equal columns collapsing to stacked accordions on mobile ### Whitespace Philosophy Capital One treats whitespace as a trust signal. Financial decisions are high-stakes, and crowding raises anxiety — so the layout breathes. A typical product section gives a single headline plenty of air, presents two or three product cards with generous gutters, and resists the urge to fill every pixel. The restraint reads as confidence: a brand sure of its offer doesn't need to shout across every inch of screen. ### Section Cadence A typical marketing page scroll: 1. White nav bar (logo + swoosh left, links, Sign In right) 2. Hero — large 700-weight headline on white or full-bleed navy band, with an interactive-blue or navy CTA 3. Product card grid (credit cards / accounts) on white 4. Alternating cool off-white band for a secondary value-prop section 5. Navy authority card / band (security, rewards, "What's in your wallet?" moment) 6. Navy institutional footer with multi-column links + legal microcopy band ## 6. Shapes & Radius Scale | Tier | Radius | Use | |------|--------|-----| | Micro (signature) | 2px | Buttons, inputs, most interactive controls — the square-shouldered Capital One corner | | Small | 4px | Small chips, emphasis badges | | Standard | 8px | Product cards, modals, default containers | | Comfortable | 12px | Large feature cards, navy promo cards, media tiles | | Featured | 16px | Hero containers on campaign pages | | Pill | 9999px | Neutral status badges, filter chips, avatar rings | The defining decision is the **2px micro tier on interactive elements**. Where most banking sites round buttons and inputs to 8px+ for friendliness, Capital One holds at 2px, which reads as precise and engineered. Containers relax to 8–16px so the page isn't harsh, but the controls you touch stay crisp. The contrast between sharp 2px controls and softer 8–12px containers is itself a brand fingerprint. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 | No shadow | Default — most content sits flat on white, delineated by borders | | 1 | `rgba(0,0,0,0.06) 0 1px 3px 0` | Resting product cards — a hint of lift | | 2 | `rgba(0,0,0,0.12) 0 4px 12px 0` | Hover / active card — confirms interactivity | | 3 | `rgba(0,0,0,0.20) 0 12px 32px 0` | Modals, dropdowns, popovers floating above the page | ### Shadow Philosophy Capital One uses shadow **conservatively and functionally** — a bank communicates trust through clarity, not visual theatrics. Elevation does two jobs only: it marks interactivity (a clickable card lifts slightly on hover) and it marks layering (modals float above the page). Borders, not shadows, carry most of the structural delineation, especially the high-contrast black input border and the soft `#d4d8dd` dividers. Because the radius stays sharp at 2px on controls, even shadowed elements read as crisp and precise rather than soft and pillowy. There is no decorative ambient glow, no neumorphism, no layered drop-shadow stacking. ## 8. Interaction & Motion ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — colour, opacity, and most transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entrance, accordion expand ### Duration Buckets - **Fast** (150ms): button hover darken, link underline grow - **Standard** (240ms): card hover lift, dropdown open - **Slow** (320ms): modal/overlay entrance, accordion expand ### Per-Component Motion **Primary button** - Hover: background `#0276b1` → `#015e8e` over 150ms. No scale, no translate — banks don't bounce. - Active: brief darken hold; releases on pointer-up **Card** - Hover (if interactive): shadow 0.06 → 0.12 over 240ms, optional 2px upward translate - Non-interactive cards do not respond to hover **Link** - Hover: underline grows from 0 to full width over 150ms; colour holds interactive blue **Modal / dropdown** - Entrance: fade + 8px rise over 320ms ease-emphasized; scrim fades to navy-tinted `rgba(0,73,119,0.55)` - Exit: reverse, faster (240ms) ### Page Transitions Standard multi-page navigation; no SPA-style cross-fades on the marketing site. Content appears immediately on load — speed reads as trustworthy. ### Reduced Motion Strategy `@media (prefers-reduced-motion: reduce)`: - Card translate and link underline-grow become instant - Modal rise is suppressed; fade-only entrance preserved - Colour transitions (button hover) preserved at reduced duration — they aid comprehension without inducing motion discomfort ## 9. Accessibility & A11y Capital One treats accessibility as a regulatory and ethical baseline, not a finishing touch. The white/black canvas already delivers maximum contrast, and the palette is chosen so every text pairing clears WCAG AA at minimum. ### Contrast Pairs | Pair | Ratio | WCAG Level | |------|-------|------------| | `#000000` text on `#ffffff` bg | 21.0:1 | AAA (maximum) | | `#0276b1` brand on `#ffffff` bg | 4.6:1 | AA body / AAA large | | `#ffffff` on `#0276b1` brand fill | 4.6:1 | AA body / AAA large | | `#ffffff` on `#004977` navy | 9.7:1 | AAA | | `#d03027` red on `#ffffff` bg | 4.7:1 | AA body | | `#3b3f44` secondary on `#ffffff` | 11.2:1 | AAA | | `#6b7177` muted on `#ffffff` | 4.8:1 | AA body | > Note: interactive blue (`#0276b1`) clears AA for normal body text and AAA at large sizes. For dense small-text links where the 4.6:1 margin feels tight, pair the blue with an underline so colour is never the sole signal, or shift to the darker `#015e8e` (which lifts contrast further). ### Focus Indicators - 3px interactive-blue (`#0276b1`) glow ring at ~40% opacity, plus a 2px solid outline for keyboard/non-mouse users - Applied to every focusable: nav links, Sign In CTA, buttons, inputs, footer links - Focus is never suppressed; `:focus-visible` keeps the ring keyboard-only where appropriate ### ARIA Patterns - The red swoosh inside the logo is decorative — `aria-hidden="true"` - Status badges that rely on colour carry an `aria-label` ("New offer", "Pending") - Form fields use programmatic `` association and `aria-describedby` for helper and error text - Error messages announced via `role="alert"` or `aria-live="polite"` - Decorative dividers and section rules are `aria-hidden="true"` ### Keyboard Navigation - Skip-link at the very top: "Skip to main content" - Tab order: skip-link → logo → primary nav links → Sign In → main content actions → footer columns - Escape closes modals and the mobile menu overlay - Modal focus-trap keeps focus inside until dismissed; focus returns to the trigger on close - Dropdowns are arrow-key navigable ### Screen Reader Hints - Legal disclosures are real, selectable text (never rasterized images) so screen readers and translation tools reach every word - Product/card art carries descriptive `alt`; purely decorative imagery uses `alt=""` - The Sign In control is labelled by its visible text, not an icon alone ### Reduced Motion Handling Detailed in §8 — the system honours `prefers-reduced-motion: reduce`, removing translates and rises while preserving comprehension-aiding colour transitions. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | ≤640px | Nav collapses to logo + hamburger + Sign In; product cards stack single-column; hero headline drops from 80/40 → ~32px; footer columns become stacked accordions; section padding compresses to ~48px | | Tablet | 641–1024px | Nav shows a trimmed primary link set; product cards arrange 2-up; headlines ~40–48px | | Desktop | 1025–1280px | Full nav with all primary links + Sign In; 3-up card grids; full section cadence with navy bands | | Wide | ≥1536px | Content max-width caps ~1280px; gutters grow symmetrically; hero imagery extends full-bleed within navy bands | ### Touch Targets All interactive elements meet or exceed 48×48px — buttons are 48px tall, inputs 48px tall, the mobile hamburger and Sign In comfortably clear the 44px floor. Tap targets in dense footer link lists carry extra vertical padding on mobile. ### Per-Component Collapsing - **Nav**: full link row → hamburger overlay; the Sign In CTA stays visible at every breakpoint (it's the primary action) - **Card grids**: 3-up → 2-up → 1-up stack; gutters shrink from 24px to 16px - **Hero**: side-by-side headline + media becomes stacked (headline top, media/CTA below) - **Footer**: multi-column grid → stacked accordions with chevron toggles; legal band stays full-width at the bottom ### Image Behavior Product art (credit-card renders, account imagery) scales proportionally with the card. Hero imagery within navy bands goes full-bleed at wide breakpoints and crops to maintain focal point on mobile. Lazy loading is standard with a neutral placeholder; the 2px and 8–12px radii are preserved at every size. ### Container Queries Where supported, card components use container queries so a product card laid out 1-up in a sidebar renders its compact internal layout regardless of the global breakpoint — useful for the dashboard/servicing surfaces that reuse marketing card components. ## 11. Content & Voice ### Tone The voice is **confident-accessible** — anchored by the brand's signature line, *"What's in your wallet?"* Capital One writes like a knowledgeable bank that has chosen to speak plainly: direct, reassuring, jargon-free, and respectful of the reader's intelligence and time. It is optimistic (the typeface is literally named Optimist) without being giddy, and authoritative without being stiff. ### Microcopy Patterns - **Button verbs**: "Sign In", "Open Account", "See if you're pre-approved", "Compare cards", "Get started" — action-oriented and concrete - **Headline structure**: plainspoken value statements and direct questions ("What's in your wallet?", "Banking that's simpler", "No fees. No minimums.") - **Body copy**: short, benefit-led sentences; financial terms explained, never assumed - **Error messages**: calm and instructive — "We couldn't process that. Please check your details and try again." Never blame, never alarm - **Success confirmations**: reassuring and specific — "Your account is open" / "Payment scheduled for May 30" - **Disclosures**: complete, plain-language, and present where decisions are made — Capital One leans into transparency as a brand value ### Empty States Empty states stay practical and encouraging: "No transactions yet" with a clear next step, never cute filler copy that breaks the trustworthy register. ### CTA Verb Conventions Capital One uses concrete, confident action verbs: - Sign In - Open Account - Get started - See if you're pre-approved - Compare cards - Learn more - View details It avoids: - Hype verbs ("Unlock", "Supercharge") — too SaaS for a regulated bank - Vague excitement ("Dive in!", "Let's go!") with exclamation points — undermines trust - Ambiguous CTAs ("Click here") — accessibility and clarity both suffer ## 12. Dark Mode & Theming **The public marketing and servicing surfaces are light-only — no dark variant is offered.** Capital One commits to the white canvas with black text as its trust-maximizing default. The navy header, footer, and authority bands provide structural surface contrast *within* the light theme; they are layout devices, not a separate dark mode. (The authenticated mobile app and parts of the servicing app may follow the operating-system theme and offer a true dark mode, but the brand website does not — so this entry documents the light system as production-canonical.) ### Theming Notes for Derivatives If adapting this system for a brand that needs a true dark mode: - Swap `#ffffff` canvas → `#0c1116` (cool near-black, not warm — keeps the precise tone) - Swap `#000000` text → `#f2f4f6` (off-white for the dark canvas) - Navy (`#004977`) holds as an accent surface but lightens its text to maintain the 4.5:1 floor - Interactive blue (`#0276b1`) lightens to ~`#3fa3d6` to retain AA contrast on a dark canvas - The red swoosh (`#d03027`) holds — it reads on both light and dark - Keep the 2px control radius unchanged — the sharp corner is brand identity, not a light-mode artifact ## 13. Lineage & Influences Capital One's visual language sits at the intersection of two design traditions: the **trust-first restraint of institutional banking** and the **clarity-first discipline of modern accessible web design**. From banking it inherits the navy-and-white authority palette, the conservative use of shadow, and the insistence on legible, complete disclosures. From the modern web — and specifically from the accessibility-led, system-font-friendly direction that the U.S. Web Design System and brands like Stripe popularized — it takes the roomy line-heights, the high-contrast input borders, and the single-typeface hierarchy. The proprietary Optimist face is the keystone: a humanist-geometric sans engineered for legibility at the small sizes financial disclosure demands, which lets one family carry the entire system without a serif accent. What distinguishes Capital One from the broader fintech field is the **2px corner**. Where most contemporaries (and the design-systems lineage it draws from) round to 8px or more for approachability, Capital One holds its interactive controls square-shouldered, reading as precise and engineered. Combined with the disciplined one-red, one-action-blue, one-navy palette and the single confident red swoosh, the result is a brand that feels accessible and human without ever drifting into the soft, rounded sameness of generic SaaS. It rejects gradient-heavy hero theatrics, glassmorphism, decorative shadow stacking, and the all-caps shoutiness that fintech sometimes mistakes for confidence. ### Named Influences - **Optimist typeface / Capital One brand design** — https://www.capitalone.com — the proprietary humanist-geometric sans that anchors the whole system - **U.S. Web Design System (USWDS)** — https://designsystem.digital.gov — accessibility-led palette discipline, high-contrast borders, real-text disclosures - **Stripe design language** — https://stripe.com — clean canvas, roomy typography, restrained colour as a fintech-credibility move - **Material Design (Google)** — https://m3.material.io — the elevation-as-interactivity principle, applied conservatively rather than literally - **The International Typographic (Swiss) Style** — https://en.wikipedia.org/wiki/International_Typographic_Style — grid discipline, single sans-serif hierarchy, clarity over ornament - **Pentagram corporate identity work** — https://www.pentagram.com — the one-mark-one-signature approach where a single confident gesture (the swoosh) carries the brand ## 14. Do's and Don'ts ### Do - Use white (`#ffffff`) as the canvas with black (`#000000`) body text — the maximum-trust contrast - Reserve the interactive blue (`#0276b1`) for action — Sign In, primary CTAs, links - Use navy (`#004977`) for identity and authority — logo, header, footer, promo bands - Treat the red swoosh (`#d03027`) as a signature: one confident gesture, not a fill - Keep interactive controls at the signature 2px radius — buttons and inputs stay square-shouldered - Set everything in Optimist; let size and weight (400 → 700) carry the hierarchy - Give layouts generous whitespace — restraint reads as confidence in a bank - Keep legal disclosures as real, selectable, accessible text in plain language - Use one red across the system (the swoosh hue doubles as the only error red) - Pair link colour with an underline so colour is never the sole signal - Use high-contrast black borders on form inputs as a deliberate accessibility choice ### Don't - Don't promote the logo navy to the action colour — keep navy (identity) and blue (action) distinct - Don't round buttons or inputs past ~4px — the 2px sharp corner is brand identity - Don't introduce a second typeface — no serif accent, no display face beside Optimist - Don't use the red swoosh as a large fill or decorative wash — it loses its signature force - Don't add a second red (or red-orange) — the system carries exactly one red - Don't shout in all-caps beyond the 13px eyebrow — headlines and body stay sentence case - Don't crowd the page or stack decorative shadows — elevation is functional only - Don't rasterize legal copy into images — it must stay screen-reader and translation accessible - Don't use hype verbs ("Unlock", "Supercharge") or exclamation-point excitement — it erodes bank trust - Don't rely on colour alone to convey status — pair with text, icon, or label - Don't use warm off-white backgrounds — Capital One's neutral is cool (`#f6f7f9`), not cream ## 15. Agent Prompt Guide ### Quick Color Reference - Primary action / CTA: Interactive Blue (`#0276b1`) — Sign In, primary buttons, links - Brand identity / authority: Navy (`#004977`) — logo, header, footer, authority bands - Signature accent: Red Swoosh (`#d03027`) — wordmark streak; the one signal/error red - Background: White (`#ffffff`) — the canvas, never warm cream - Alt surface: Cool Off-White (`#f6f7f9`) — alternating bands, neutral badges - Heading + body text: Black (`#000000`) - Secondary text: Secondary Ink (`#3b3f44`) - Muted text: Muted Gray (`#6b7177`) - Reverse text: White (`#ffffff`) on navy or interactive-blue fills - Input border: Black (`#000000`) — high-contrast hairline ### Example Component Prompts - "Create a primary CTA button: interactive blue (`#0276b1`) background, white text, Optimist 16px weight 600, 2px border-radius (sharp corners), 12px vertical and 24px horizontal padding, 48px tall. On hover, darken the background to `#015e8e` with no transform. Add a 3px interactive-blue focus ring." - "Design a credit-card product card: white background, 1px `#d4d8dd` border, 8px radius, 24px padding, resting shadow `rgba(0,0,0,0.06) 0 1px 3px`. Card art top, an Optimist 24px/600 navy title, 16px/400 body in black, and an interactive-blue primary button at the bottom. On hover, lift the shadow to `rgba(0,0,0,0.12) 0 4px 12px`." - "Build a top navigation bar: white background, 64px tall, 1px `#d4d8dd` bottom border. Navy Capital One wordmark with the red swoosh on the left, primary links centred in black Optimist 13px/500 with underline-grow on hover, and an interactive-blue Sign In button (2px radius) pinned right." - "Create a navy authority band: full-bleed `#004977` background, white reverse text, a 700-weight Optimist headline up to 56px with -0.02em tracking, supporting 18px/400 body at 1.55 line-height, and a white or interactive-blue CTA. 12px container radius, 32px+ padding, generous whitespace." - "Design a high-contrast form input: white background, black text, 1px solid black border, 2px radius, 12px/16px padding, 48px tall, with a 13px/500 label above. On focus, add a 3px interactive-blue glow ring and thicken the border to interactive blue. Error state turns border and helper text `#d03027` and wires the message via aria-describedby." - "Create an institutional footer: navy (`#004977`) background, white reverse text, a multi-column link grid (Banking, Credit Cards, Auto, Business, About) collapsing to accordions on mobile, and a full-width legal-microcopy band at the bottom in white 11px/400 (Member FDIC, NMLS, disclosures) kept as real selectable text." ### Iteration Guide 1. Focus on one component at a time — refine the button system before touching cards or nav. 2. Reference colours by role *and* hex — and respect the hierarchy: navy is identity, blue (`#0276b1`) is action, red (`#d03027`) is the single signature accent. 3. If something feels too soft or generic, check the radius first — interactive controls should be at 2px, not 8px. 4. Default backgrounds to white (`#ffffff`), alt bands to cool off-white (`#f6f7f9`) — never warm cream. 5. Keep the palette disciplined: one red, one action blue, one navy. If a second red or a second blue appears, ask whether it should collapse into the canonical hue. 6. Use Optimist (or Inter as a stand-in) and let weight do the work — 700 for confident headlines, 600 for buttons/subheads, 400 for roomy 1.55 body. 7. Describe the desired feel — "confident-accessible", "square-shouldered", "a bank that respects your attention" — alongside the measurements. 8. Verify contrast on every text pairing; pair link colour with an underline so colour is never the only signal. --- *Theme-toggle audit: score=0, signals=[none]*