ual: Design System

Get Started

The UAL design system consists of a set of guidelines and reusable components, that are used in a modular manner to create a consistent and accessible experience for all users, across UALs digital estate.

Why do we need a design system?

Our design system is essential for us to:

  • Align all UAL digital services through a seamless user experience that improves consistency and usability.
  • Effectively build and maintain our unique UAL brand across our digital products and services, whilst championing accessibility.
  • Enable product teams to deliver faster, improving productivity and efficiency in how we collaborate.

Who is the design system for?

The design system is primarily used by:

Designers – To design user-friendly, consistent and accessible digital experiences

Developers – To build and apply robust, clean, reusable components efficiently across different environments

The design system is also extremely valuable to:

Product Owners – To understand where and how to scale effective, accessible experiences quickly and efficiently

Content Designers – To design clear and consistent pages using the design system components embedded into our CMS’s.

How to get started?

We recommend growing your understanding of the design system and how it works before using it, so you can start by familiarising yourself with the following sections:|

Core principles – Guidelines for how we evolve our design system

Modular approach – Adopting the atomic design approach

How we work – The process we take to create or add components

Accessibility – How we aim to make the experiences for everyone

Following this, we’d suggest you then spend some time exploring the different parts of our design system:

Foundations – the visual language behind the system, including design tokens

Components – the smallest elements of our interface

Patterns – multiple components connected together (coming soon)

Templates – common repeatable structures of content (coming soon)

Once you have familiarised yourself with what currently exists in our design system, then you will want to start exploring the assets available in the tools most relevant to your discipline.

For designers you can begin exploring our Figma UI kit here.

For developers you can begin exploring our Storybook repository here.