BMO Secondary Color Palette
My role: Project Lead, Lead Designer
Project type: Brand design
Year: 2025
Company: BMO Bank - US & Canada
The Problem
BMO’s existing secondary palette was limited, incohesive and not representing the brands tone of voice. This left most of their work looking very blue heavy and lacking distinction. Their status notifications appeared in seemingly random hues that clashed with their primary brand colors and they needed to address the issue of designers creating their own colors to meet the needs of the charts and labels used by the Wealth team.
Goals & requirements
Improve and expand BMO’s secondary palette to better match their digital needs across platforms
A minimum of 15 possible colors to be used for infographics and charts
8 distinct hues that can be used to distinguish the different lines of business
Can be used to convey identification or meaning in small components within the UI such as status indicators
A palette that allows for flexibility while meeting accessibility requirements in its applications
A palette that compliments the two Primary brand colors (BMO Blue and BMO Red), brings in warmth and vibrancy, and allows BMO Red to be included in our color applications outside of being used as a warning indicator
A palette that will align with the goals of the bank to be a top competitor in the U.S. market
Opportunity
Building a color palette that applies successfully in Dark Mode as well
Proposed solution
Build a custom secondary palette to better meet the digital needs across BMO’s lines of business
Method
Exactly how do you build a secondary palette from scratch, without using an algorithm!?
Hue adjusted colors using HSL
Similar to the methodology used by Stripe and Atlassian, I used the HSL scale (Hue, Saturation, Lightness) to create a palette of 8 distinct colors and their range of shades from light to dark. These 8 colors were chosen to replace the murky and very limited palette that currently existed. I kept a loose pattern so each color shifted in it’s variables with consistency from shade to shade and color to color. This ensured that there were similarities amongst shades so that ranges of shades could be used for the same purpose, for example: All of the hues in the 100’s are very desaturated and very light so the whole 100’s range can be used as background colors on cards or badges. Similarly, all the hues in the 500’s range have similar brightness and saturation, to be applied to graphics and illustrations.
This method also allowed me to tweak each color so that they were pleasing to the eye and met our needs rather than the color following a programmed succession leading to some unattractive or less useful colors.
I continually referred back to BMO Blue and BMO Red to build upon, since we want these two primary brand colors to be complimented by the rest of the color system.
Vetting for accessibility across use cases
After the initial base palette was created I then started to test and fine tune the colors according to BMO’s needs and accessibility requirements.
BMO is aiming for a AA rating for accessibility. This means text needs to meet 4:5.1 on backgrounds and graphics need to meet 3:3.01 on backgrounds.
Accessible graphics: For BMO this means there needs to be range of colors accessible for graphics on the backgrounds used in light mode (White and Albicant) as well as the backgrounds I am proposing for dark mode (Black 800 and Black 700) for use cases such as color badges, product specific key-lines or indicators, and charts and graphs.
Accessible text: The same goes for text but it gets more complicated. There are instances where colorful text is placed on a colorful background, such as badges, so I needed to make sure that the darker shades of each color could be used as text on the lighter shades and vice versa.
Accessible links: I also needed to keep in mind colors used for actionable text such as links. BMO uses their primary brand color of BMO Blue for text links, which is NOT accessible on dark backgrounds for dark mode. So I needed to make sure that the palette allowed for brighter shades that would appear similar to BMO Blue in dark mode.
Assigning meaning
Up until the adoption of this project, BMO’s status colors were separate from the rest of their secondary colors, having no relation to them and, in some cases, clashing with the rest of the palette. This resulted in a disjointed and somewhat visually jarring experience when status notifications were on a page. I strongly recommended that the “status” colors be pulled from colors within the palette so that even a warning message would be in line with the brand and feel part of the experience.
Leveraging Figma’s Variables
While continuing to work on the color palette we brought the palette in to Figma’s new feature, called Variables. Variables gave us three new capabilities: usage rules, modes, and integration with CSS code. Using Variables allowed us to apply the colors across designs, create rules for these colors, and toggle designs between light and dark mode. It was also very simple when we needed to tweak a color, all we had to do was change the hex code in Variables and the change would apply to all instances of the design.
Charts & graphs
Another solve needed was to define how the palette should be applied to charts and graphs and how we could ensure those charts and graphs would remain accessible when created by designers in the wider org. To deepen our understanding of this we met weekly with an outside accessibility consulting team called Applause and met with visually impaired users as they live test our pages in dark mode and navigated our site using a screen reader. This was very eye opening and we learned so much!
As a result, we knew we could not rely on color alone to communicate data. We opted to have a label that appeared when hovering or tapping over a part of the chart for smaller charts and an alternative “table” view of the data for larger charts. This removed the issue of every color in use needing to be accessible from each other, instead, they just need to be accessible with their background color and have a gap between colors. Below is a guide I created to help communicate these accessibility requirements. (More on color application to charts and graphs further on).
Winning over the masses
Now that the palette had been developed, our Design System team joined in to help gather pages from all of BMO’s lines of business and start applying the palette to these screens (shown below). History would show that BMO’s Brand team has been reluctant to change in the past so we stayed conservative in showing how the palette can be applied and fit seamlessly with our existing designs, while also allowing much broader flexibility in the future.
To ensure we were considering the needs of the wider teams and gain buy-in along the way we presented to three separate groups:
Design Library Ambassadors from our lines of business: We first presented to our Design System Ambassadors from each line of business and allowed them to make comments, stress test color applications, toggle between light mode and dark mode, voice concerns or feedback. Other than a couple minor notes, everyone on the team was excited about the potential these new colors would bring.
BMO US and Canadian leadership: This included managers and both our Heads of Design. The leadership group was genuinely impressed with how much detail and thought had been put into this work. They gave us the green light to present to Brand but cautioned we would really have to sell it given how reluctant Brand has been to changes in the past.
BMO Brand team: Our final hurdle was to gain the buy-in of those whose job it is to defend the representation of the BMO as a brand. We shared the journey of how it began, the challenges of the current system, how other companies are building their color palettes , and how we’ve created a custom palette designed for BMO’s unique needs. I am delighted to say the Brand team was blown away by the proposal and responded with resounding excitement and enthusiasm. They approved us to proceed with implementing the palette officially into our Design System and for company-wide use!
The following screens are what was shared.
It’s offical - into the Design Library!
All of that hard work payed off and the palette is approved! Our team set about to build guides for each application of color and bring the new palette into existing design components.
What comes next is rethinking our illustrations and icons, how can we bring our new palette into the branding more? User testing with applying BMO red as a non-warning color to brighten up the page.
Below are some of the guides created for applying color to charts and graphs.
