ual: Design System
Colour
Our digital palette is purposeful and clear, letting the stories of our staff and students take centre stage.
Overview
Colour is an important part of our digital identity. We use colour to make the experience simple and clear, supporting users as they navigate our digital spaces. Our core colours, black and white, form the foundation of our digital interfaces. A structured greyscale range provides neutral tones that build hierarchy and organise content. Alongside our neutral palette, our digital colour palette includes a set of interaction colours:
Yellow and orange: for actions
Red: for errors or critical states
Green: for success and positive feedback
Colour is one of the ways we communicate meaning, but it is never the only one. We design visually, while recognising that visual is not the only way people understand content. Accessibility shapes how we use colour, so meaning is never carried by sight alone.
Brand and digital colour
The brand palette and the digital palette share the same foundation. Our digital palette is derived from the UAL brand palette, with some additional values added to our underlying brand palette in order to support accessibility requirements in the digital space, such as contrast on screen.
The brand palette supports a wide range of applications across print and marketing materials. The digital palette carries the same identity into screen-based interfaces, where it also supports the needs of theming and interface states.
For the full brand colour palette, see the UAL brand colour guidelines.
The digital colour palette
The digital colour palette contains all the colour values available in the UAL design system. These are the base values that everything else in the colour system draws from.
Colour roles
Colours in the design system are organised by the role they play in the interface. Each colour has a specific job, and using colours by their role rather than their raw value keeps the system consistent and adaptable. Each role is expressed through a design token. See the Design tokens page for how tokens work across the system.
There are three colour roles:
Surface colours
Surface colours control the backgrounds and containers that make up the structure of a page. They define the base layers that content sits on.
In this example, a surface token is applied to the base layer of a page. The token surface-default references neutral-100.
Content colours
Content colours control text, icons, and other foreground elements. They are designed to work on top of surface colours and meet accessibility contrast requirements.
In this example, a content token is applied to a heading. The token content-primary references neutral-600, and meets WCAG 2.2 AA contrast when paired with surface-default.
Line colours
Line colours control borders, dividers, and other structural lines that separate or define areas of the interface.
In this example, a line token is applied to a border. The token line-default references neutral-500.
These groupings ensure that every colour in the system has a clear purpose. When choosing a colour, start with what role it needs to play, then select the appropriate token from that group.
Theming
Our colour palette has been designed with theming in mind. Not all UAL digital products use both light and dark themes, but for products that do, the colour token system supports both.
Colour tokens are defined per theme, so the same token adapts to its context. For example, content-default resolves to black in the light theme and white in the dark theme. The role stays the same; the value changes to suit the background.
This means designs and code reference token names, not specific values. When the theme changes, tokens update automatically.
A semantic token updates its reference to primitive tokens based on the theme.
Interactive states
Interaction states such as hover, pressed, and disabled are handled at the component level. Different components require different behaviour, so interaction colours are defined per component rather than as a global set.
See individual component pages for interaction colour specifications. Each component includes a live preview where you can interact with the component and see its states in action.