Colour
Colour allows us to communicate the look and feel of our products, and distinguish between brands. HUB24, Class, NowInfinity and myprosperity have their own distinct brand colours but share all other colour categories as a standard to simplify foundations across the group. Our colour palette is a selection of colours that work together to create consistency in products.
Goals of this colour palette in this design system are to ensure:
Colours are delivered in the form of design tokens. Design tokens are a layer of abstraction that allows for better maintainability, consistency and theming. Design tokens are represented as CSS variables for code and Figma variables for design.
Brand colours
Each brand has their own defined colours for their visual identity. They have aliases of primary, secondary or tertiary assigned to them and this structure supports our design tokens when switching themes for brands.
Primary
This is the main colour that sets the tone of the brand and is reserved for important action items and elements that need to stand out.
Secondary and tertiary
These are the colours that support the primary colour when a lower level of priority and differentiation is required. They tend to be used more sparingly and help highlight specific areas.
Neutral colours
An extensive grey palette enables us to convey hierarchy better with different levels of depth for other elements to stand out and optimise white space. Shades of grey are used for text, icons, borders, backgrounds, shadows, surfaces and much more.
Alpha colours
Alpha colors have varying levels of transparency or opacity. There is a light and dark scale which references two neutral colours as the base. Transparency helps UI adapt to different background colors and elevations.
Semantic colours
Semantic colours are typically used to communicate status, hierarchy, or emphasis. Each semantic colour is tied to a role with the intention behind the colour. Colour tokens are available for foreground, background, and border. Note that the role of information will use brand colours respectively and accents can be any colour from our full palette.
Other colours
Supplementary
These darker blues are used as common overarching colours across the Hub24 group and to alleviate some coldness with the fundamental usage of greys. They’re typically used for dark background surfaces and specific elements to complement the brand colours e.g. navigation headers.
Supporting
These are accent colours reserved for usage when there isn’t any specific meaning tied to them. These colours can be applied to elements such as tags, chips, and pills and data visualisation.
In terms of data visualisation, colours have been defined to work harmoniously for colourblindness to ensure users can differentiate between data points. Order of preference is also set to determine how colours should be used as a guideline. There is an exception to this when applying colours for charts with inflows where it should be green as an industry standard.
Palette
Our colour palette is a extensive selection that work together to create consistency in products and across brands.
Each colour scale has a base colour defined at the value 700 and expands into tints and shades. This allows us to design our products more dynamically and visually communicate with intent.