Modular approach

All our digital experiences are created in a modular way using an approach called atomic design where each element builds upon the next in a stackable manner.

To enable this approach, we have described and organised the different elements of our design system into these four areas:

Foundations - This is the visual language that informs how components and patterns look. This exemplifies the UAL brand showing how it can be used in an accessible manner in the digital space. (eg. typography, colour and spacing).

Components - These are the smallest reusable elements of our interface, used as the smallest building blocks of the digital experience (eg. parts of the navigation)

Patterns - A pattern connects multiple components and foundational elements together to define common parts of the digital experience (eg. header or footer).

Templates - These combine multiple patterns, components and foundational elements to define a repeatable structure for content within the digital experience (eg. course page)