Systemising SEEK’s Brand Palette
Systemising colour from our original brand palette 🎨
Over the past 18 months, I have been building out our universal colour palette at SEEK. The teams that consume this work sit across the organisation and include:
- Braid, our React-based Design System
- Braid Native, our native app Design System
- Data Visualisation
- New Visual Language across Product and Brand teams.
In this article, we’ll look at how we took our original brand palette and built an extended palette around it — which remained true to our brand — as well as answering our growing product needs. All set?
The Challenge
Our original brand palette was created in 2015. We had outgrown it. Really outgrown it. Designers and developers alike were reaching for colours we simply didn’t have let alone have guidance for. We needed more fidelity, better colour relationships and overhauling our approach to colour needed to start from the ground up.
We ask a lot more of our palette than we did in 2015:
- Adhering to WCAG 2.1 web standard contrast ratio
- Dark and High Contrast Modes
- Global semantic colours (such as Critical, Informative and Promotional messages) that give clarity and meaning to our experiences. You can read more about that here
- Infographics and data visualisation
- Greater Brand and Product alignment
- Increased fidelity leading to a more modern, crafted experience.
The Original Brand Palette(s)
The original SEEK Style Guide consisted of brand and product palettes, so this work was aimed at simplifying this into one source of truth. The original brand palette consisted of:
- 2x primary colours
- 9x secondary colours
- 1x neutral grey (across 10 Tints and Shades)
Phase 1
We tried several ways of defining an extended palette, mostly from a brand position first. The issue with this approach was that our original brand palette was not designed for this purpose. It contained specific Sub Brand colours which were representative of our brand but didn’t really have any relation to each other. This posed a problem for design system usage as similar tones needed to have similar perceived weights.
To understand this better, we placed our secondary colours on Saturation and Lightness graphs:
Now, this isn’t to say they aren’t acceptable colours for a Brand, but analysing them made it clear that using them as a starting foundation would provide less than ideal results when expanding out our extended palette.
To demonstrate this, below is an example of our Phase 1 attempt at extending our palette. We naively took the secondary colours and made those our starting foundation. We used ColorBox and Colorizer to determine Tints and Shades for each colour individually. Although the parameters were the same, the starting points were varied which gave us some pretty gnarly results.
Phase 2
After reading and investigating different approaches, we settled on the HSL (Hue-Saturation-Lightness) scale as our way forward. We found that defining the Hue value removed the issues we had with saturation and lightness. This put Hue front and centre. It would allow us to plot our current colour values in a more programmatic, 360 degree spectrum. We converted our Hex values to HSL using HSL Color Picker by Brandon Mathis.
So starting with our Sub Brand colours, we tinkered and played around with different steps across different Hue angles. We plotted the 10 Sub Brand colours and found they naturally occurred approximately every 20 degrees or so. So dividing up the 360 degree spectrum we found ourselves with 18 steps.
Tip: If you’re retrofitting an existing brand palette, this may require a bit of extra work to find the different steps that work for your brand. Even if you don’t need all the steps, they may come in handy later on.
Saturation and Lightness
As we found in Phase 1, it was apparent that Saturation and Lightness needed to be adjusted across the spectrum with differing amounts as per the nature of colour. For example, setting a Lightness value of 30 would be fine for Cyan, but would make our yellows turn brown.
Creating a complete spectrum
We adjusted Saturation and Lightness — but in relation to one another — using values of 2. It was manual and did take time, but it allowed us to reach a more harmonious solution and one that felt more like a family. The outcome gave us a natural wave-effect across both Saturation and Lightness values. We would then use a subset of these to recreate our secondary colour palette.
So our base colours were relatively set, some of which were derived from our original Sub Brand hues. Now it was a matter of extrapolating these to build out our Tints and Shades, so we could alter Saturation and Lightness to match our original Sub Brand colours. There is a little bit of pragmatism with this. This approach probably won’t deliver you exact colours. If exact colours are needed, they can be adjusted manually in your design program and/or in the codebase, but this in turn will impact how colours relate to each other across the palette.
Now that we had these foundational colours, we could extrapolate our Tints and Shades.
Tints and Shades
Our Phase 1 approach used values between 900 and 050 which was already in our mobile products and felt like the right amount of granularity.
The colours defined above would therefore form our mid or 500 values. Four darker steps and five lighter steps including a nice subtle 050 were needed for each colour. For our purposes, the objective of Tints and Shades was to hit expected tones across values.
We wanted to define our Tints and Shades in a similar harmonious fashion to how we arrived at our 500 values. We could have put each 500 value through a colour generator, but again we would have lost that relationship. Instead, we worked with HSL and percentages.
Finding 900 values
Let’s use Indigo as an example and set the darkest 900 value. The 500 Indigo value in HSL is written as:
Hue: 220 (degrees out of 360°)
Saturation: 78%
Lightness: 54%
We played with different percentages of the Lightness value. We went with 32% darker for our 900 values to ensure we didn’t top out at black anywhere across the spectrum. This percentage value will depend on your starting palette and how light and dark you want to go.
L: 54 x 32/100=20 (rounded to the nearest integer)
Your new dark value for Indigo is:
H: 220, S: 78, L: 20
Place this on top of your base 500 colour and play with some layer effects and opacities. Heads up: if we were starting from scratch, this isn’t how we’d go about Tints and Shades. But we found this was a great way to define a performant extended palette that was retrofitted from an existing brand palette.
You can also do the same with Saturation levels if you like but we kept things simple. However many colours and steps you have in your palette, apply the same effects across the board. You should end up with something like this:
Neutral palette
We had a stepped set of greys in our original brand palette, but they were very much stacked at the light end of the spectrum primarily as Dark Mode wasn’t a thing in 2015. We used the same process to define our Neutral palette as we did with our Tints and Shades, giving us better coverage and performance in Dark Mode. I was fortunate enough to work closely with our mobile design team who put the palette through its’ paces and helped ensure we were on the right track.
An additional bonus whilst undertaking the Neutral palette was to take inspiration from our SEEK Blue. This is a SEEK Primary Brand colour and has a Hue of 218, so we reduced the saturation from 82 to 18, which gave us a Neutral palette inspired by our brand DNA.
Our new Greys allow for subtlety in our UI as well as secondary text styles and bolder titles, all whilst adhering to AA accessibility best practice. Currently, 29% of our mobile audience uses Dark Mode.
Finally, Primary Colours
Our approach to Secondary Colours was to get as close as possible to our original secondary brand palette, whilst creating a relationship between them which did not previously exist. This can’t be done for Brand Colours. So, we treated them as separate entities in the system.
We opted to make our official SEEK Pink and SEEK Blue primary colours our “500” colours as it was important for these to be represented faithfully. We understood that any relationship we achieved with the Sub Brand colours would not be achieved with Primary colours.
We extrapolated our Tints and Shades as we did with our Sub Brand colours, with the knowledge that these steps would be inconsistent, but it was a trade off to ensure our 500 Primary colours were the focus.
How and where we use these supporting Tints and Shades from a Primary colour perspective is still ongoing. We have found SEEK Pink tones such as 300 and 400 have helped with our product illustrations, where the original 500 colour would be too overpowering. Different shades were always historically used but never articulated which led to design debt. Now we had a definitive set to reach for, if and when we needed them.
Next steps 🌟
So defining an extended palette is the first step. I hope you’ve found our process interesting and maybe even helped a couple of brands in maturing their approach with systems in mind.
Our next step will be working on how we use colour and where limiting the palette makes sense, usage across different platforms such as Braid and Braid Native, brand and marketing executions, product illustration as well as pairing colours and accessible palettes for Data Visualisation.
Thanks for sticking with me until the end!
Thanks 🙌
Special mention to the talented humans I work with everyday:
Kuming Kao, Michael Taranto, Mark Dalgleish, Tim Crook, Joanne Kwok, the Beautifully SEEK and SEEK Brand teams.
