Bank of America Design System

Overview

Bank of America's marketing site refuses to perform modernity. Institutional density: the page opens not with a hero headline but with a grid of credit card product cards, each displaying APR rates, sign-up bonus amounts, and card tier names in small Roboto type. A headline appears only after the card grid. This sequencing — product before brand story — distinguishes BofA from every robo-advisor and neobank in the directory, and it is a deliberate choice for an institution where most visitors arrive with a specific product inquiry rather than a brand discovery intent.

The color system is a study in bounded roles. Azure (#0053c2) appears 62 times in text and border roles, carrying every interactive link and navigation label — but zero times as a background fill in the marketing surface. Flag-red (#e31837) appears 10 times in the logo zone and contextual alert callouts but never in marketing copy or buttons. Deep navy (#012169) carries authentication surfaces and footer backgrounds. Where Betterment uses midnight navy as a hero canvas, BofA uses it only for the login panel and footer — the functional surfaces — while keeping the main marketing floor on pure white. The color separation is institutional: brand colors are identity marks, not decorative fills.

Typography follows the same institutional logic. CNX (a custom humanist sans commissioned for BofA's 2012 rebrand) handles all marketing display text — headlines at 38–44px in weight 300–400. Roboto handles all functional UI text — form labels, button labels, body paragraphs. The boundary is hard: CNX does not appear in navigation or forms, Roboto does not appear in marketing headlines.

Key Characteristics:

• Azure ({colors.azure} — #0053c2): frequency 62, exclusively as text (31) and border (31). Zero background fills in the marketing surface. The interactive anchor that never becomes a canvas.
• Flag-red ({colors.flag-red} — #e31837): frequency 10, confined to logo zone and alert callouts. Never on marketing copy or button fills.
• Near-black ink ({colors.ink} — #222222): frequency 500 — text (258), border (242). Not pure black — a dark gray that softens the high-contrast banking aesthetic.
• CNX display / Roboto function — a hard family boundary between marketing surfaces and interactive surfaces.
• 2px dominant radius (18 occurrences) — the minimum rounding that reads as intentional rather than absent.
• Information-density model: the hero section yields to a product comparison grid above the first fold.
• Deep navy ({colors.navy} — #012169) reserved for authentication and footer surfaces only.

Colors

Interactive

• Azure ({colors.azure} — #0053c2): frequency 62 — text (31), border (31). The load-bearing interactive color: every hyperlink, navigation label, focus indicator, and inline call-to-action runs in this value. It never fills a button or section background in the captured marketing surface — it is a text-and-border-only token at this surface level.
• Cobalt ({colors.cobalt} — #0d1ba7): frequency 4, all as text. A slightly more saturated deep blue that appears in product illustration overlays and icon fills.

Brand Identity

• Navy ({colors.navy} — #012169): frequency 19 — text (6), border (10), bg (3). The institutional brand navy — fills the login button, the authentication form, and the footer. Wired as the primary CTA background.
• Flag-red ({colors.flag-red} — #e31837): frequency 10 — text (5), border (5). Confined to the logomark, promotional badge callouts, and contextual alert indicators. Never decorative.
• Flag-red Dark ({colors.flag-red-dark} — #c41230): frequency 1, bg only. The dark brand-red variant — appears as a hover-state or darker badge background.
• Flag-red Deeper ({colors.flag-red-deeper} — #a50e28): frequency 1, bg only. The deepest red value in the brand spectrum.
• Sky ({colors.sky} — #0073cf): frequency 1, bg only. A lighter blue used for a product-section illustration background accent.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 358 — text (166), bg (36), border (156). The page floor. The dominant surface — pure white, no warm or cool offset.
• Surface-1 ({colors.surface-1} — #d5d5d5): frequency 1, bg only. The light gray used for divider rules and secondary surface fills.

Text

• Ink ({colors.ink} — #222222): frequency 500 — text (258), border (242). The dominant ink. Not pure black — a dark near-black that softens the visual intensity slightly.
• Ink Secondary ({colors.ink-secondary} — #333333): frequency 60 — text (37), border (23). The secondary text tone for supporting body copy.
• Ink Muted ({colors.ink-muted} — #646464): frequency 72 — text (38), border (34). Caption and metadata tone — regulatory disclosure text, card fine print.
• Ink Light ({colors.ink-light} — #555555): frequency 2. A mid-range gray for secondary structural elements.

Shadow

• Shadow Gray ({colors.shadow-gray} — #919191): frequency 1, shadow only. The single shadow value captured in the extraction — used for subtle card-elevation halos.

Typography

Font Families

The system enforces a strict two-family functional split: CNX (Bank of America's custom humanist sans, commissioned from Dalton Maag in 2012) handles all marketing display and heading text, with three weight variants: cnx-light (used at 44px for the hero heading), cnx-regular (38px for marketing h2s, 16–20px for section leads), and cnx-medium (22px for sub-headings). Roboto handles all functional UI text: form labels, body paragraphs, button labels, navigation items. roboto-regular for standard text, roboto-bold for list items, roboto-medium for links and interactive labels. The family boundary is unambiguous: CNX does not appear in navigation or forms; Roboto does not appear in marketing headlines.

Hierarchy

Principles

CNX runs at weight 300–400 for all display text — the lightest weight tier in the system. This is the same "confidence through restraint" move that Cloudflare makes at weight 500 and Stripe makes at weight 300, but BofA lands in the middle. The 44px hero heading at CNX Light (weight 400 rendering as approximately 300) produces a display that is authoritative through sheer size, not through weight. Roboto's functional role means that every interactive element — buttons, links, inputs — renders in a different family than the marketing copy; the boundary signals that "this is where brand ends and product begins."

Note on Font Substitutes

CNX is proprietary and not publicly available. Nunito Sans or Source Sans 3 (both Google Fonts) carry similar humanist proportions at display sizes; Trebuchet MS (system-available) is a closer historical match. Roboto is a Google Font and freely available everywhere.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 2px · {spacing.sm} 4px · {spacing.base} 8px · {spacing.md} 12px · {spacing.lg} 15px · {spacing.xl} 16px · {spacing.2xl} 28px · {spacing.3xl} 32px · {spacing.section} 50px.
• Section vertical padding: ~50px between major section bands.
• Card padding: 16×12px on product card grids, 28×16px on feature blue cards.
• Nav padding: 12px top / 8px horizontal — a tight, information-dense nav row.

Grid & Container

• Max content width: 1392px — wider than most fintech brands, reflecting the information-dense product grid.
• Hero / login panel: the top of the page holds the login form inline at desktop width rather than in a modal, with the credit card grid immediately below.
• Credit card grid: 4-up product card row at desktop, showing card name, APR, bonus, and CTA per card.
• Feature grid: 3-up or 4-up icon-plus-label grid for banking services (checking accounts, savings, mortgages, wealth management).

Rhythm

The page stacks functional bands without generous breathing room: login panel → card comparison grid → product categories → editorial "your financial goals" → app feature → connect section → footer. No section uses a significant gap — the 50px section padding is the maximum spacing token, and the page reads as a continuous document rather than an open-canvas marketing sequence.

Elevation

The elevation model is hairline-plus-tonal, with minimal shadow use. The dominant border token is {colors.surface-1} (#d5d5d5) used as a light gray card outline on the white canvas. Shadow gray (#919191) appears exactly once as a shadow value — a subtle halo on the primary authentication form. There are no colored shadows (no navy offsets, no brand-tinted depth), and no tonal lift technique (no surface-2 elevation layer). Depth in the product grid comes entirely from the 1px gray hairline border separating cards on a white background.

Shapes

The radius scale is minimal-utility, anchored at 2px:

• {rounded.none} 0px — section backgrounds, full-bleed feature bands.
• {rounded.xs} 2px — dominant rounding (18 occurrences): form inputs, product cards, navigation items. The minimum rounding that reads as intentional.
• {rounded.sm} 4px — (3 occurrences): larger interactive chips and some secondary card containers.
• {rounded.md} 8px — (4 occurrences): search inputs and selected product card surfaces.
• {rounded.lg} 10px — (4 occurrences): feature illustration containers.
• {rounded.xl} 12px — (7 occurrences): card containers in the financial-goals section.
• {rounded.pill} 22px — (4 occurrences): the login button and primary CTA pill shapes.

The gap between 2px cards and 22px CTAs is the system's only radius contrast. The login and primary action buttons are the rounded elements; everything informational is square.

Components

button-primary — Deep navy {colors.navy} fill, white text, {rounded.pill} 22px radius, 8×24px padding, 44px height. The login button is the canonical instance — a rounded pill on a field of navy.

button-secondary — White {colors.canvas} fill, azure {colors.azure} text, 1px azure border, {rounded.xs} 2px radius. The default inline CTA for product offers and comparison sections.

button-ghost — Transparent fill, azure text, no border. Used for inline text links that need button affordance without visual weight.

top-nav — Navy {colors.navy} surface at the very top, with the BofA eagle/flag logo, primary account navigation, and a search input. Below that, a white secondary nav with the product category tabs.

nav-link — Transparent background, navy {colors.navy} text at {typography.nav-link}, 12×8×8px padding, 46px height. Tab-style active state uses a bottom navy border-bottom indicator.

hero-heading — Near-black {colors.ink} text, {typography.display-xl} (44px / CNX Light). Appears on the editorial mid-page sections ("Your financial goals matter," "Connect with us") rather than at the very top of the page.

section-heading — Near-black text, {typography.display-lg} (38px / CNX Regular at weight 300). The product section headers ("Choose the card that works for you").

section-heading-white — White {colors.canvas} text, same typography. Used on the navy and cobalt-background feature sections.

body-paragraph — Near-black text, Roboto 16px / 400, standard body copy.

body-paragraph-muted — Muted gray {colors.ink-muted} (#646464), Roboto 14px / 400. Regulatory disclosure text, secondary card details.

card — White surface, light gray {colors.surface-1} border, {rounded.xl} 12px radius, 16×12px padding. The product feature card used in the financial goals section.

card-blue — Navy {colors.navy} fill, white text, {rounded.xl} 12px radius, 28×16px padding. The Merrill investment card — the only dark-surface card in the marketing section.

feature-grid — White surface, light gray border, {rounded.xs} 2px radius, 15px padding. The dense product grid used for credit card comparisons — 4 cards side by side with APR, bonus, and CTA per card.

text-input — White surface, dark ink text, {rounded.sm} 4px radius, muted gray border, 36px height. The inline search input in the top navigation uses an extended right padding (100px) to accommodate the submit button.

footer — Navy {colors.navy} surface, white text, {typography.body-sm} Roboto, 32×16px padding. Multi-column link grid with regulatory disclosures below.

Do's and Don'ts

Do use {colors.azure} (#0053c2) only for text and border roles. It appears 62 times in the extraction with zero background-fill occurrences in the marketing surface — using it as a button background or section fill violates the system's semantic role separation.

Do use {colors.navy} (#012169) for authentication and CTA-button fills only. It is not a marketing canvas color; applying it to editorial section backgrounds creates a tone the system does not support.

Do maintain the CNX / Roboto family boundary. CNX should not appear in form labels or button text; Roboto should not appear in marketing headlines. When the two families appear on the same surface, each signals its domain.

Do use {rounded.xs} (2px) as the default rounding for cards and inputs. Rounding up to 8–12px to feel more contemporary breaks the institutional signal that makes the 22px pill button stand out as the single warm interactive element.

Don't use {colors.flag-red} (#e31837) for marketing copy highlights, heading accents, or button fills. It appears in the logo zone and contextual alerts only; applying it decoratively reads as a warning signal rather than a brand emphasis.

Don't add whitespace between sections to make the page feel more spacious. The 50px section padding ({spacing.section}) is the system's maximum; increasing it undermines the information-density model that the page's returning-user audience relies on.

Don't apply shadows to product cards. The system uses hairline borders ({colors.surface-1}) rather than elevation shadows for card separation; adding box-shadows imports a visual convention from a different design system category.

Don't render display headlines in Roboto. CNX carries the institutional marketing voice — using Roboto at 38–44px reads as a system error rather than a stylistic choice.

Known Gaps

• Hover and focus states: the resting state is captured throughout; the nav tab active-indicator (a bottom-border in navy) is documented, but hover fills, input focus rings, and button active-press states are not captured.
• Mobile layout: the 1440px extraction captures desktop only; the mobile nav (likely a hamburger-to-drawer), responsive card grid collapsing, and mobile login form layout are not documented.
• Authenticated product surfaces: the online banking dashboard, transaction history, and account management screens have a substantially different visual system (higher density, tabular data components, chart elements) not captured here.
• Credit card illustration system: the card-art illustrations (actual credit card designs with their visual motifs) are product-surface items, not design-system tokens, and are not documented.
• Merrill Lynch / Merrill Edge sub-brand: the Merrill investment platform uses its own type and color conventions on sub-pages; this file captures only the BofA primary marketing surface.
• Accessibility compliance patterns: BofA is subject to ADA compliance requirements; the focus ring implementation, ARIA patterns, and keyboard-navigation design are not documented from the marketing surface alone.