Bank of America Design System Deep Dive

1. Brand Overview

Bank of America’s design language is exactly what you’d expect from one of the largest financial institutions in the U.S.—controlled, trustworthy, and unmistakably corporate. The vibe is confidence without arrogance. You’re looking at a system built to reassure millions of customers that their money is safe, their data is protected, and their user experience won’t surprise them in bad ways.

This is a design system for people who need clarity and stability over playful experimentation. The colors, typography, and spacing are all tuned for high legibility and predictable patterns. There’s no attempt at trendy gradients or animated flourishes. Instead, the focus is on strict alignment, high-contrast accessibility, and consistent UI components across breakpoints.

The philosophy here: Consistency beats creativity—at least for the core banking interface. Every element feels like it’s been through a corporate design review multiple times. The blues are serious blues, the reds are brand reds, and the whites are clean but not sterile. Shadow usage is minimal, relying more on borders to define hierarchy. This works because shadows can create ambiguity; borders are explicit.

Audience? Anyone from a retiree checking balances on an iPad to a small business owner transferring funds at midnight. It needs to be easy to use, even if you’re stressed or in a hurry.

I like how Bank of America’s system treats primary actions—it’s not “fun,” it’s “safe to click.” The CTAs are thick, pill-shaped, and in a blue that screams “corporate trust.” The alternate red CTA is bold but sparingly used—likely for destructive or high-importance actions where attention is critical.

Odd choice: some link colors are almost identical to button blues, but because hover states shift to a lighter blue, it works. The typography is a mash-up of custom “cnx” fonts and Roboto, which is unusual for a bank—Roboto gives them a slightly more modern feel than the typical Times New Roman / Arial combo.

2. Color System

2.1 Primary Colors

The main brand color is rgb(1, 33, 105) (#012169). This is the deep navy you see in the logo and primary buttons. It’s a corporate blue—heavy, grounded, not playful. In banking, dark blues convey trust, authority, and stability. Competitors like Chase and Citi use brighter blues, but Bank of America’s navy is thicker and more serious.

Secondary color: pure white (#ffffff), used for text on dark backgrounds and as the primary page background.

Supporting blues like #0053c2 and #0d1ba7 appear in links and secondary CTAs. The red tones (#c41230 and #e31837) tie back to the logo’s stripes and are used for alerts, alternate CTAs, or brand accents.

2.2 Complete Palette

2.3 Color Relationships

The navy (#012169) against white (#ffffff) is highly accessible—contrast ratio ~12:1 (passing WCAG AAA for text). The bright blue (#0053c2) also passes easily on white. The red (#c41230) on white is strong but needs careful use for non-critical contexts because red signals “error” to most users.

No evidence of a dark mode in this data—this palette is tuned for light backgrounds. Text remains black or dark gray for readability; accents are strictly brand colors.

2.4 Usage Guide

• Primary actions → #012169 background, white text.
• Links → #0053c2 default, lighten on hover.
• Alerts/errors → #c41230 or #e31837, never mixed with blues.
• Backgrounds → white only; grays (#333333, #646464) for text, not surfaces.
• Avoid mixing red and blue in the same component unless it’s the logo—creates visual conflict.
• Hover/focus states often lighten or brighten the base color—keep contrast high.

3. Typography

3.1 Font Families

Two primary families:

• cnx-light / cnx-regular / cnx-bold — custom corporate typeface, probably proprietary to Bank of America.
• Roboto (regular, medium) — fallback and used for buttons, links, and captions.
• Fallback stacks: "Arial, Helvetica" or "Arial, Helvetica Neue, Helvetica, Roboto"—safe web defaults.

No Google Fonts or Adobe Fonts detected—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The H1 size at 70px is huge—clearly for hero headlines. The drop to 44px and 38px gives the system flexibility. Body text sits around 16–17px, keeping readability high. Button text ranges from 14px to 20px depending on emphasis. The mix of cnx and Roboto is deliberate—cnx for branding, Roboto for functional UI.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.

4.2 Layout

Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 610px, 640px, 767px, 768px, 896px, 1024px, 1025px. Mobile-first responsive scaling, with significant changes around 768px and 1024px.

5. Visual Elements

Border Radius: Range from square (0px) to pill (22px). Buttons often use 22px for rounded pill shapes. Inputs use 4px radius—subtle rounding for professionalism.

Shadows: Minimal. Most common is rgba(0,0,0,0.12) 0px 2px 20px 0px for soft elevation. Cards sometimes use rgb(213,213,213) 0px 2px 4px.

Borders: Lots of 1px solid borders in brand navy (#012169), medium gray (#646464), or white (#ffffff).

6. Components

6.1 Buttons

Primary Button (spa-btn--primary)
Default: navy background (#012169), white text, 8px x 24px padding, 22px radius, 1px solid navy border, font-size 20px, weight 500.
Hover: border changes to #cce3f5, background shifts to bright blue (#1eaedb).
Focus: outline 2px solid black, background bright blue, border black.

Primary Alt Button
Default: dark red background (#a50e28), white text, 8px x 24px padding, 22px radius, white border.
Hover: white background, blue text (#1883fd).
Active: green background (#2c6415), white text.
Focus: outline 1px solid black, bright blue background.

Circle Button
Transparent background, white text, no padding, no radius. Hover: bright blue background.

6.2 Links

Links use multiple palettes:

• #0053c2 → lighten on hover (#1883fd)
• #012169 → lighten on hover
• #646464 → lighten on hover
• #000000 → lighten on hover
• #0d1ba7 → underline default, remove on hover
• #ffffff → underline default, remove on hover

6.3 Forms

Text inputs: white background, black text, 1px solid #646464 border, 4px radius, padding 12px left/right. Focus: bright blue background (#1eaedb), white text, black border.

Checkboxes: transparent background, no radius, no padding. Focus matches text inputs.

6.4 Cards

Card radius: 12px, often with top corners squared off for headers. Shadows: soft black at 0px 2px 20px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #012169;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bright-blue: #0053c2;
  --color-dark-gray: #333333;
  --color-accent-blue: #0d1ba7;
  --color-medium-gray: #646464;
  --color-brand-red: #c41230;
  --color-bright-red: #e31837;
  --color-mid-blue: #3860be;
  --color-hover-blue: #003e9c;
  --color-hover-blue2: #26599e;
  --color-hover-blue3: #2a5a9a;
  --color-hover-blue4: #2b5a9a;
  --color-hover-blue5: #305b95;
  --color-hover-blue6: #2159a3;
  --color-hover-blue7: #154686;
  --color-hover-blue8: #0351bb;

  /* Typography */
  --font-cnx-light: "cnx-light", Arial, Helvetica;
  --font-cnx-regular: "cnx-regular", Arial, Helvetica;
  --font-cnx-bold: "cnx-bold", Arial, Helvetica;
  --font-roboto-regular: "roboto-regular", Arial, Helvetica Neue, Helvetica, Roboto;
  --font-roboto-medium: "roboto-medium", Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3_2: 3.2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 22px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.12) 0px 2px 20px 0px;
  --shadow-md: rgb(213,213,213) 0px 2px 4px 0px;
}

8. AI Coding Assistant Prompt

# Bank of America Design System Specification

You are a Bank of America design expert. Build UIs matching their visual language exactly.

## Brand Context
Bank of America’s design language is corporate, trustworthy, and consistent. It uses a navy blue and red palette for brand recognition, minimal shadows, and clear typography for high accessibility. All spacing follows an 8px grid.

## Color Palette
- Primary Navy: #012169 — Primary buttons, brand headings
- White: #ffffff — Backgrounds, text on dark buttons
- Black: #000000 — Body text, outlines
- Bright Blue: #0053c2 — Links, hover states
- Dark Gray: #333333 — Secondary text
- Accent Blue: #0d1ba7 — Card CTAs
- Medium Gray: #646464 — Form borders, muted copy
- Brand Red: #c41230 — Alerts, high-importance CTAs
- Bright Red: #e31837 — Error states
- Mid Blue: #3860be — Secondary buttons
- Hover Blues: #003e9c, #26599e, #2a5a9a, #2b5a9a, #305b95, #2159a3, #154686, #0351bb — Interactive hover/focus accents

## Typography
Fonts:
- Headings: "cnx-light"/"cnx-regular"/"cnx-bold", Arial, Helvetica
- Body/UI: "roboto-regular"/"roboto-medium", Arial, Helvetica Neue, Helvetica, Roboto

Sizes:  
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 70px | 400 | 1.00 | Hero titles |
| H2 | 44px | 400 | 1.40 | Section titles |
| Body | 16px | 400 | 1.50 | Main text |
| Button | 20px | 500 | 1.20 | Primary actions |
| Caption | 14px | 400 | 1.43 | Footnotes |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px  
Use multiples for padding, margins, gaps.

## Border Radius
- none: 0px — tables
- sm: 4px — inputs
- lg: 10px — cards
- xl: 12px — modals
- pill: 22px — buttons

## Shadows & Depth
- Soft: rgba(0,0,0,0.12) 0px 2px 20px 0px — cards
- Medium: rgb(213,213,213) 0px 2px 4px — subtle elevation

## Component Specifications

### Primary Button
Default: background #012169, color #ffffff, padding 8px 24px, radius 22px, border 1px solid #012169.  
Hover: background #1eaedb, color #ffffff.  
Focus: outline 2px solid #000000.

### Link
Default: color #0053c2, underline.  
Hover: color #1883fd, no underline.

### Input
Default: background #ffffff, border 1px solid #646464, radius 4px, padding 12px.  
Focus: background #1eaedb, color #ffffff, border 1px solid #000000.

## Layout & Responsive Rules
Breakpoints: 400px, 768px, 1024px.  
Mobile-first scaling.

## Interaction Rules
- Transition: 150ms ease
- Focus: visible outlines on interactive elements

## DO
- Use only palette colors
- Maintain 8px grid
- Use cnx fonts for headings, Roboto for UI
- Keep borders 1px solid
- Reserve red for alerts/errors

## DON'T
- Add custom shadows
- Mix sharp and rounded corners
- Use gradients
- Change brand colors

## Code Examples

```css
.btn-primary {
  background: #012169;
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 22px;
  font-weight: 500;
  font-size: 20px;
  border: 1px solid #012169;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1eaedb; }
.btn-primary:focus { outline: 2px solid #000000; }

.input {
  border: 1px solid #646464;
  border-radius: 4px;
  padding: 12px;
  font-size: 16px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.12) 0px 2px 20px 0px;
}

---

## 9. Summary

**TL;DR** — Bank of America’s design system is corporate, controlled, and built for clarity. Navy blues and reds anchor the brand, cnx fonts handle branding, Roboto handles UI, and the 8px grid keeps everything aligned.

**Brand Keywords**:  
- trust-first  
- corporate-minimal  
- accessibility-driven  
- navy-red-identity