Capital One DESIGN.md

Brands

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

Raw DESIGN.md

At a glance

Group: Brands
Main color: #d03027Red design systems
Fonts: OptimistSF Mono

Colors in this file

#ffffff
background
#d03027
background
#1a1a2e
Unnamed
#e5e7eb
Unnamed
#a81f1a
Unnamed
#0a7ea4
Unnamed
#15803d
Unnamed
#b45309
Unnamed
#1d4ed8
Unnamed
#f8fafc
Unnamed

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

1. Visual Theme & Atmosphere

Capital One should feel bold, accessible, and modern. The design language communicates credit cards, banking, auto loans, and financial wellness with a confident, approachable voice.

Mood: confident, bold, accessible, trustworthy
Density: medium, with account summaries, card management, and transaction surfaces
Character: signature red brand, clean white canvas, light gray structure, Credit Wise accent teal

2. Color Palette & Roles

Token	Hex	Role
`--c1-red`	`#D03027`	Primary brand CTA and card highlight
`--c1-red-dark`	`#A81F1A`	Hover and pressed states
`--c1-teal`	`#0A7EA4`	Credit Wise and credit score accent
`--c1-green`	`#15803D`	Positive balance and payment success
`--c1-amber`	`#B45309`	Payment due and budget alert
`--c1-blue`	`#1D4ED8`	Informational and link states
`--surface-card`	`#FFFFFF`	Account and credit card panels
`--surface-bg`	`#F8FAFC`	Dashboard background
`--surface-dark`	`#1A1A2E`	Dark card mockup surface
`--text-primary`	`#111827`	Primary text and balances
`--border-default`	`#E5E7EB`	Row and panel borders

Use red exclusively for the primary brand CTA. Teal is reserved for credit score and Credit Wise features only — do not generalize it.

3. Typography Rules

css--font-sans: "Optimist", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", "Roboto Mono", Menlo, monospace;

Element	Size	Weight	Line Height
Hero Display	56px	700	1.05
Page Title	36px	700	1.1
Section Title	26px	600	1.2
Card Title	20px	600	1.3
Body	16px	400	1.6
Balance	36px	700	1.0
Label	13px	500	1.4

4. Component Stylings

css.button-primary {
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  background: #D03027;
  color: #FFFFFF;
  font: 600 16px/1 Inter, sans-serif;
}

.account-card {
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 24px;
}

.credit-card-mock {
  border-radius: 16px;
  background: linear-gradient(135deg, #1A1A2E, #2D2D44);
  color: #FFFFFF;
  padding: 24px;
  aspect-ratio: 1.586 / 1;
}

.transaction-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
}

5. Layout Principles

Token	Value	Usage
`--space-3`	`12px`	Transaction row padding
`--space-5`	`20px`	Card content rhythm
`--space-8`	`32px`	Account section separation
`--space-14`	`56px`	Page section gaps

Show account balance and next payment prominently. Credit score and Credit Wise should be a persistent but secondary element.

6. Depth & Elevation

css.shadow-card   { box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06); }
.shadow-panel  { box-shadow: 0 8px 24px rgba(208, 48, 39, 0.10); }
.shadow-modal  { box-shadow: 0 20px 52px rgba(17, 24, 39, 0.16); }

Use the brand-tinted shadow only for credit card mockups. Account panels use neutral shadows.

7. Do's and Don'ts

Do show account balance and payment due date above the fold. Do use the card mockup with correct 1.586:1 aspect ratio. Do not use red for negative balances or errors — that conflicts with the brand. Do not combine brand red and error red in the same view. Do make the "Pay Now" CTA the most prominent action.

8. Responsive Behavior

Breakpoint	Min Width	Behavior
Mobile	`0px`	Single account card, simplified transactions
Tablet	`768px`	Account overview + transaction list side-by-side
Desktop	`1200px`	Full dashboard: all accounts, spending insights, credit score

The mobile experience is primary — most card management happens on phones.

9. Agent Prompt Guide

Design like Capital One: bold red CTAs, clean white account surfaces, dark credit card mockups, accessible financial typography, teal credit-score accents, and balance-first information hierarchy.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/capitalone.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "capitalone" })

Lenovo

Brands · Lato

Computing and device retail with black-red branding, practical hierarchy, and broad catalog structure. Lenovo's public site uses a black-white base, red brand accents, and hardware-forward merchandising.

Redis

Brands · Inter

Fast data-platform design with bold red identity, black technical contrast, and performance-first product framing.

McDonald

Brands · Speedee

Fast-food commerce with strong red-and-yellow branding, friendly utility, and mainstream consumer accessibility. McDonald's public site uses bright brand color, white space, large food imagery, and clear app/deal CTAs.

Mistral

Brands · Arial

Frontier AI platform design with sharp black foundations, a warm orange-to-yellow signature spectrum, and highly controlled enterprise product framing. Mistral combines open-model energy with direct, no-frills…

KRAFTON

Brands · Poppins

KRAFTON is a South Korean game publisher and developer whose digital identity is built entirely in monochrome — deep black surfaces carry white type and logotypes while a proprietary KRAFTON typeface, Zalando Sans…

Confluent