Color

Colour allows us to communicate the look and feel of our products, and distinguish between brands. HUB24, Class and NowInfinity 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:

• Accessibility - Adequate contrast ratio with consideration to colourblindness while striving to comply with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA when applicable.
• Consistency - A uniform appearance across various products and platforms.
• Scalability - Comprehensive enough for use cases but also expandable to be fit for purpose with minimal disruption.

Each colour ramp has a base colour defined with the value of 700 and expands to a range of tints and shades. This is crucial for UI design as it allows us to design our products more dynamically and visually communicate with intent.

Primitive color tokens

These are the primitive colours used across the HUB Group design system. All brands derive their primarty, secondart, tertiary and supporting colour palettes from this set of colours.

Some second level primitve colours as yet only have 3 colours attributed 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. See data visualisations for more detail.

Status tokens

These semantic status tokens are shared across the HUB Group design system. Status colours are used to provide contextual feedback to communicate success, warning and errors.

Neutral

The neutral tokens are shared across the HUB Group design system, the palettes are grouped as stark callouts and greys. 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. They will mainly be used for layout, text colours and elevations.

Alpha tokens for the neutral pallette are provided to be used as overlays on coloured backgrounds.

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 to complement brand colours and for components like the powerbar or navigation headers.

HUB24 semantic tokens

These tokens are specific to HUB24 products and should be consistently used as the labels indicate. Each colour ramp has a base colour defined with the value of 700 and expands to a range of tints and shades. This is crucial for UI design as it allows us to design our products more dynamically and visually communicate with intent.

Color tokens are referenced using the --sl-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.

Primary

This is the main colour that sets the tone of the brand identity and is reserved for important action items that need to stand out.

Secondary & Tertiary

These are colours that support the primary colour when a lower level of priority and differentiation is required.

Element tokens