Mobile Design System & Templates

This project showcases my philosophy on setting up design systems that support light and dark themes, colour management, component states and prototype-ready components and layouts.

Project Goals

• Find a better solution for managing and updating colour palettes that allows users to theme their designs.
• Find optimal solutions to manage a design system that supports a light and dark mode theme.
• Ensure all components are interactive and document the states for designers.
• Ensure layouts are ready for prototyping.
• Enjoy the process.

How To Improve Colour Management?

Problem

We desired a more dynamic method for editing colour palettes within our design system. Traditionally, we used a single base colour to represent the primary, secondary, and tertiary colours. Each of these base colours would have an additional layer that incorporated white or black to create the tints and tones of the base colour range. The combination of the base colour and the tint or tone layer would then be expressed as a single HEX value. However, the challenge we faced was that editing these colours and updating them was a labour-intensive process. We sought a simpler solution that would allow us to change the base colour while automatically updating all related tint and tone variables.

Solution

The proposed solution was to change from HEX values to hue, saturation and lightness (HSL). Set the entire colour range to have the same hue and saturation levels while incrementally adding white or black through the lightness channel. This meant that if the hue was altered, all hues would be changed through the colour range with the same base colour, without any manual work. We used a plugin called Batch Styler to help with the selection and edits of the overall colour palette. All colour variable edits would propagate throughout the entire design system and onto the mobile templates.

View Colour Manager

How To Support A Dark Theme?

Problem

In macOS 10.14 and later versions, users can choose to adopt a dark system-wide appearance instead of a light appearance. With the dark mode option, the system adopts a darker colour palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds.

Possible Solutions

First solution

Build only a light version of a component and allow designers to generate a dark mode version by using the design system colour variables.

Pros

• Only one set of components to manage, making future updates effortless

Cons

• Allowing designers to create a dark mode component by editing colours on a light mode component has the potential to introduce a large number of inconsistencies

Second solution - (preferred approach)

We could create two sets of each component, a light and a dark mode variant. The dark mode will have its own set of colours that will adhere to accessibility standards. Designers can toggle between modes in the component variant, ensuring consistency, and the retention of content would be guaranteed.

Pros

• Designers can easily switch components between light and dark modes using the variant settings.
• This approach ensures consistent colour selection and helps maintain accessibility standards for colour contrast when transitioning between light and dark modes.
• It's important to bake in the colours to meet these accessibility requirements.

Cons

• The overhead management of the components in the design system will increase.

Managing Interactive Components

Our approach

We wanted to support designers and ensure that component states are documented using Figma variants. However, to ensure all interactions were consistent across the design system, we baked in some basic interactions, mainly pressing, active and submission states. This ensured that the design system would handle the nuances of state management and allowed product designers to focus on customer-facing solutions and not worry about the details of the component's design.

Prototype Ready Components

Our approach

Incorporating all the interactions and states into our components, we aimed to make the layouts interactive as well. This focus was primarily on the side-scrolling content. All side-scrolling layouts include components that extend beyond the parent frame, enabling horizontal scrolling. This feature allows designers to better visualise how the application will function.

Moreover, these layouts need to be flexible enough to accommodate any content retrieved from an API without breaking. It is also essential for the layout content to remain consistent in both light and dark modes, ensuring that when toggling between these modes, the content only requires handling once.

High-fidelity Designs