Design System

overview

Why I created the design system

Before the design system, the interface lacked consistency in colours, typography, spacing, and reusable components, leading to an inconsistent user experience and slower design workflows. To address these challenges, I designed a scalable design system that established a unified visual language through standardized colours, typography, design tokens, and reusable components, improving consistency, collaboration, and efficiency across the product.

* This case study presents selected aspects of my contribution. Confidential and proprietary information has been omitted.

About the company

This Design System for an Australian Telecom Provider supports a company that offers affordable NBN and mobile plans through a digital-first platform. With a focus on simplicity, transparency, and customer convenience, the brand aims to make purchasing and managing internet services intuitive and hassle free. As the product expanded, maintaining consistency across its digital experiences became increasingly important, leading to the development of a scalable design system.

Design System

Colour

The colour system was designed to establish a consistent and accessible visual language across the product. I created a structured palette consisting of primary, secondary, gradient, and link colours, each with clear usage guidelines to reinforce the brand identity, create visual hierarchy, and support intuitive user interactions. By standardising colour usage throughout the interface, the system ensured consistency, improved usability, and provided a cohesive experience across all digital touchpoints.

I also made sure colour combinations were 100% WCAG 2.1 level AA compliant so that the design system creates products that are accessible to everyone.

Typography

Typography was defined to create a clear visual hierarchy and improve readability across the company's digital products. I established a structured type scale with consistent font sizes, weights, and line heights for headings, body text, navigation, and buttons, ensuring content remains legible and accessible across different screen sizes and contexts.

Icons

The design system includes a unified icon library with clear usage guidelines for navigation, actions, product features, and interface states. This ensures consistency, improves recognition, and creates a seamless experience across the product.

Buttons

A comprehensive button system was created to support consistent interactions throughout the interface. Variants including primary, secondary, outlined, and on-dark were designed with clearly defined interaction states, helping establish visual hierarchy, improve usability, and maintain consistency across the product.

Shadows

A consistent elevation system was developed using reusable shadow tokens that enhance depth and guide visual hierarchy. By defining a small range of shadow levels, components maintain a cohesive appearance across marketing pages and product interfaces while preserving the brand's clean, modern aesthetic.

Project Outcomes

Reflection