BMO Rewards

Overview

BMO Rewards is a financial-services rewards platform that transforms everyday banking transactions into redeemable points across travel, shopping, dining, and lifestyle categories. The design system embodies 'Institutional Clarity'—a philosophy that marries the trust and stability of a major Canadian bank with the accessibility and visual lightness of modern fintech. The brand personality is confident yet approachable: precise, data-driven, and outcome-focused. Users should feel that their rewards are tangible, earned, and immediately actionable. The UI avoids unnecessary ornamentation, instead using a clean, spacious grid and a restrained color palette anchored by a vivid institutional blue (#0075be) that signals trust and action. Example sentence in brand voice: 'Every coffee purchase earns points—redeem them for flights, gift cards, or exclusive experiences.'

Colors

The color system is built on a light, neutral foundation (surface #f5f6f7, on-surface #001928) that ensures maximum readability and accessibility across all devices. Primary (#0075be) is the institutional blue used exclusively for interactive elements—call-to-action buttons, links, focus states, and active navigation. This color is drawn directly from the BMO brand identity and appears in the hero 'Shop Now' button and throughout the interface as the signal for clickable actions. Secondary (#68b631) is a vibrant green reserved for positive outcomes, confirmations, and success states (e.g., 'Points earned' badges). Tertiary (#3860be) provides a softer blue accent for secondary information hierarchies and container backgrounds. The surface stack (surface-container-lowest #ececec through surf

Typography

The type system uses Open Sans across all scales, chosen for its high legibility at small sizes and its neutral, professional character that aligns with financial services. Display (60px, 700 weight) is reserved for hero headlines and major page titles; headline-lg (44px, 500 weight) is used for section headers and prominent calls-to-action text, as seen in the hero 'Up to 15% off for your early mornings.' Headline-md (32px, 600 weight) breaks up content sections. Title-lg (24px, 600 weight) is applied to card titles and subsection headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the reading hierarchy for descriptive text and product descriptions. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for button text, form labels, and metadata. All head

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on large displays while maintaining a sense of spaciousness. The page rhythm is governed by a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for compact groupings, md (24px) for standard section separation, lg (40px) for major content blocks, and xl (64px) for full-page section breaks. The hero section uses a 50/50 split (text left, image right) with md (24px) gutter between columns, allowing the headline and CTA to breathe without competing with the lifestyle photography. Card grids typically employ md (24px) gaps between items. The gutter (24px) is applied consistently to page margins on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile.

Elevation & Depth

Depth in this system is achieved through subtle, restrained shadows that reinforce information hierarchy without creating visual noise. The elevation scale uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for minor interactive elements like hover states on list items; md (0 3px 8px rgba(0,0,0,0.15)) for primary cards, dropdowns, and modals—this is the workhorse shadow seen on the custom select panels and card hover states; lg (0px 2px 10px -3px rgba(153,153,153,1)) for elevated modals and overlays that demand visual separation from the page. Shadows are always soft and diffuse, never sharp o

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners that feel approachable with precise, geometric proportions that signal institutional competence. Primary CTAs use full (9999px) border-radius to create pill-shaped buttons that are instantly recognizable and highly clickable; this is seen on the 'Shop Now' button. Standard cards and containers use md (0.75rem / 12px) radius for a balanced, modern appearance that avoids both sharp corners and excessive roundness. Input fields and search boxes use full (9999px) radius to match the button language and create a cohesive interaction

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses primary (#0075be) background with on-primary (#ffffff) text, label-md typography (14px, 600 weight), full border-radius (9999px), padding 0 32px, and height 48px. The md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) is applied to all primary buttons. On hover, the background transitions to #005a94 (a 20% darker blue) over 150ms with cubic-bezier(0.4, 0, 0.2, 1) easing; on active/pressed, it darkens further to #003d7a. Button-secondary uses a transparent background with a 1px solid primary border, same typography and dimensions, but no shadow. Secondary buttons transition their background to surface-container-high (#e9e9e9) on hover. Both button variants include a 4px focus ring (outline: 2px

Do's and Don'ts

**Do**

• Do use primary (#0075be) exclusively for interactive elements—buttons, links, focus states—to create a consistent, predictable interaction model.
• Do apply md (24px) spacing between major content sections and lg (40px) spacing between full-page sections to maintain visual rhythm and readability.
• Do use full border-radius (9999px) on primary CTAs and input fields to signal high interactivity; reserve md (12px) radius for cards and containers.
• Do apply md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) to cards and dropdowns; transition to lg shadow on hover to indicate depth change.
• Do maintain a 44px minimum touch target height on all interactive elements to ensure mobile accessibility.
• Do use Open Sans at 14px or larger for body text; apply letter-spacing 0.01em for comfortable reading.

**Don't**

• Don't use primary color for backgrounds or large surface areas; reserve it for interactive elements only to maintain visual hierarchy.
• Don't apply shadows larger than lg elevation; excessive shadow depth creates visual clutter and undermines the clean, institutional aesthetic.
• Don't mix border-radius styles within a single component family—all buttons should use full radius, all cards should use md radius.
• Don't apply text-shadow or drop-shadow effects to body text; these reduce legibility and contradict the system's clarity-first philosophy.
• Don't use more than three colors in a single component; the system is built on restraint and purposeful color application.
• Don't reduce spacing below sm (12px) in interactive areas; cramped layouts increase error rates and reduce perceived quality.