By Dave McNally, May 11, 2023
Before we introduce Union, our internal design system, let’s first explain what a design system is exactly. The Nielsen Norman Group describe it as follows:
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In relation to coherence, our design system allows us to maintain consistency across our products from visual design to our tone of voice and documentation. Let’s take a look at Union in a bit more detail and see how our team is building, maintaining and using it.
Union consists of several core components and we’ll be focusing on the visual elements and patterns for today. These make up the basis for all design at coherence and serve multiple purposes.
At a foundational level, color is used to determine hierarchy and help us communicate things of importance to users. Accessibility is one of the most important factors in establishing rules for our design at coherence and color plays a large role in this. Ensuring a high standard for contrast passing combinations, we outline rules for usage so we’re always confident users will have a positive experience regardless of any potential visual impairments.
Rules for color hierarchy also help us establish connections for users to quickly identify actions and information while using coherence. For example, consistency in color for primary calls to action and consistency across warnings and destructive actions. While we don’t rely on color entirely for this, but it does plays a part in establishing patterns for users.
We have a custom iconography library to maintain consistency across our SDK and online products and ensure balance. These have been drawn for optical balance and come with rules for creation so the team can work together on them without sacrificing the unified visual identity we’ve created.
We’re following the principles of Atomic Design in the creation of Union. This gives us flexibility to design effectively while also allowing us to iterate quickly - which is important as coherence grows and evolves. This approach is also very effective for building out products quickly and maintaining consistency across coherence.
