BMO Personal Banking

Overview

BMO Personal Banking's design system embodies Institutional Clarity—a refined aesthetic that balances the gravitas of financial services with the warmth of human accessibility. The brand serves individuals navigating complex financial decisions, from opening checking accounts to securing mortgages. The UI employs a "trust-through-transparency" visual language: a deep slate foundation (#001928) grounds the interface, while a signature cerulean blue (#0075be) acts as the primary accent, appearing on all call-to-action elements, links, and interactive states. This color pairing evokes both stability (the slate) and forward momentum (the blue), creating an emotional response of confidence tempered with approachability.

BMO's voice is professional yet conversational—precise when discussing rates and terms, but never condescending. The tone avoids financial jargon where possible, preferring clarity: "Open a new checking account and earn a $400 cash bonus" rather than "Activate a deposit product with promotional incentive." Typography is set in Heebo, a geometric sans-serif that reads as modern and efficient at all sizes, reinforcing the brand's commitment to digital-first banking while maintaining institutional credibility. The design system prioritizes legibility and scanability, recognizing that users often interact with BMO during high-stakes financial moments.

Colors

BMO's color system is anchored in a three-tier hierarchy: surface neutrals, primary accent, and semantic status colors. The surface stack ranges from #fefefe (surface-bright, used for primary backgrounds and card fills) through #f5f6f7 (surface-dim, for subtle container differentiation) to #001928 (on-surface, the primary text color). This restricted neutral palette ensures visual calm and reduces cognitive load when presenting financial data. The primary color, #0075be (cerulean blue), is reserved exclusively for interactive elements: primary call-to-action buttons, link text, focus states, and active navigation indicators. It appears on approximately 57 instances across the site, making it the most recognizable brand signal. Secondary accent #009ec9 (sky-blue) supports the primary in sec

Typography

The typography system uses Heebo across all weights (300 light, 400 regular, 500 medium, 700 bold) to create a cohesive, modern voice. Display (44px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major page sections, commanding attention without aggression. Headline-lg (36px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy, with the latter used for section titles and card headers. Title-lg (20px, 700 weight) marks subsections and form labels. Body text is set at 16px (body-md, 400 weight, 24px line-height) for optimal readability on screens; body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and callout text. Label-md (14px, 700 weight, uppercase, 0.01em letter-spacing) is applied to button text, form labels,

Layout

BMO's layout system uses a 12-column grid with a maximum container width of 1440px, accommodating desktop, tablet, and mobile viewports. The gutter width is 24px on desktop (1024px+), reducing to 16px on tablet (768–1023px) and 12px on mobile (< 768px). This responsive gutter ensures content remains readable and interactive elements remain touch-friendly across devices. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. The container max-width of 1440px prevents line lengths from exceeding 80 characters on ultra-wide displays, maintaining readability. White-space is used generously around form inputs and CTAs—a minimum of 24px paddi

Elevation & Depth

Depth in BMO's system is achieved through subtle shadows and layering, reflecting the brand's institutional restraint. The elevation scale uses three levels: sm (0 1px 3px rgba(19, 40, 71, 0.08)) for base cards and subtle containers, md (0 3px 14px rgba(19, 40, 71, 0.15)) for elevated cards and hover states, and lg (0 3px 14px 5px rgba(19, 40, 71, 0.25)) for modals, dropdowns, and top-level overlays. The shadow color uses a dark slate (rgba(19, 40, 71, ...)) rather than pure black, maintaining visual warmth while preserving contrast. Cards at rest use sm elevation; on hover or focus, they tran

Shapes

BMO's shape philosophy is "Institutional Precision"—a balance between the sharp edges of traditional banking and the approachability of modern digital design. Buttons use full-radius (border-radius: 9999px, creating pill-shaped buttons) to soften the interface and signal friendliness; this is applied to all primary and secondary CTAs. Cards and containers use md radius (8px), a subtle rounding that feels contemporary without being playful. Input fields use DEFAULT radius (4px), a minimal rounding that maintains the form's structural clarity. Modals and overlays use lg radius (10px), slightly m

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#0075be) background with {colors.on-primary} (#fefefe) text, set in {typography.label-md} (14px, 700 weight, uppercase). They measure 44px in height with 12px vertical and 32px horizontal padding, using full-radius (9999px) for a pill shape. On hover, the background transitions to {colors.primary-fixed-dim} (#73c3eb) over 150ms, maintaining the blue family while signaling state change. On focus, a 3px solid outline in {colors.primary} appears 2px outside the button boundary, supporting keyboard navigation. Secondary buttons mirror the primary structure but use a transparent background with a 2px {colors.primary} border; on hover, the background fills with {colors.surface-container-low}

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0075be) exclusively for interactive elements—buttons, links, focus states, and active navigation—to create a consistent, recognizable brand signal.
• Do maintain a minimum 44px × 44px touch target for all interactive elements to ensure accessibility for users with motor impairments.
• Do apply {elevation.md} (0 3px 14px rgba(19, 40, 71, 0.15)) on hover to cards and containers, signaling interactivity through subtle depth rather than color change alone.
• Do use Heebo at 400 weight for body text and 700 weight for headings and labels, maintaining visual hierarchy through weight rather than size alone.
• Do apply 24px (md spacing) between major sections and 12px (sm spacing) between related components to create visual rhythm and reduce cognitive load.

**Don't**

• Don't use colors outside the defined palette—avoid custom hex values or CSS variables not listed in the color token system, as this breaks brand consistency.
• Don't apply shadows larger than {elevation.lg} (0 3px 14px 5px rgba(19, 40, 71, 0.25)); excessive depth contradicts the institutional, grounded aesthetic.
• Don't use border-radius values other than those defined (sm: 2px, DEFAULT: 4px, md: 8px, lg: 10px, xl: 20px, full: 9999px)—custom radii create visual inconsistency.
• Don't set button text in anything other than {typography.label-md} (14px, 700 weight, uppercase); this is the only approved button typography to ensure consistency.
• Don't place text directly over images without applying a text-shadow of 0 2px 4px rgba(0, 0, 0, 0.15); this ensures legibility and WCAG AA contrast compliance.