White Labelled

White Labelled

White Labelled

Design System

Design System

Design System

A flexible white-labelled design system built for an International Insurance Company to unify products and brands with consistent UI, faster launches, and seamless design-to-dev collaboration—scalable, accessible, and ready to adapt.

Category
[WL design system ]
Role
[ Design Lead ]
Time Line
[ four weeks ]

Building a Scalable, Brandable Design Foundation

Background

A leading international insurance provider in Singapore aimed to unify their fragmented design approach. Their existing products (both internal and partner-facing) used inconsistent design systems, making scalability a challenge. With plans to serve 10+ partner brands, they needed a cohesive, flexible, and brand-ready solution.

Objective

To build a flexible white-label design system that adapts to diverse brand identities while ensuring speed, consistency, and scalability.

image

Accessible

Accessible

Customizable

Customizable

Seamless

Seamless

Scalable

Scalable

Unified

Unified

Adaptive

Adaptive

Core Genesis

Core Genesis

My approach

The real challenge began with multiple disjointed design systems across internal products. My role was to unify these into one scalable foundation that could serve both internal and 10+ external partners. I audited existing workflows, identified must-have and good-to-have components, and collaborated closely with developers to define core tokens — global and brand — covering fonts, colors, spacing, and more. Without direct access to partners, I partnered with business analysts and sales teams to anticipate variations and design flexible components adaptable for all future use cases.

Atomic Design
Atomic Design

Applied Atomic Design to build a scalable, modular system—ensuring consistency, reusability, and effortless theming.

Applied Atomic Design to build a scalable, modular system—ensuring consistency, reusability, and effortless theming.

Applied Atomic Design to build a scalable, modular system—ensuring consistency, reusability, and effortless theming.

Design Tokens

Basic design variables that define visual design parameters like fonts & colors

Design Tokens

Basic design variables that define visual design parameters like fonts & colors

Design Tokens

Basic design variables that define visual design parameters like fonts & colors

Atoms

The simplest UI elements that make up the interface like icons, buttons, etc

Atoms

The simplest UI elements that make up the interface like icons, buttons, etc

Atoms

The simplest UI elements that make up the interface like icons, buttons, etc

Molecules

Combining atoms together to create functional groups

Molecules

Combining atoms together to create functional groups

Molecules

Combining atoms together to create functional groups

Organisms

Complex components combining molecules and atoms to solve problems

Organisms

Complex components combining molecules and atoms to solve problems

Organisms

Complex components combining molecules and atoms to solve problems

Templates

Page layouts showing how design atoms and molecules build cohesive structures.

Templates

Page layouts showing how design atoms and molecules build cohesive structures.

Templates

Page layouts showing how design atoms and molecules build cohesive structures.

Pages

The final template implementation filled with real content, data and images

Pages

The final template implementation filled with real content, data and images

Pages

The final template implementation filled with real content, data and images

Responsive Components

Responsive Components

Responsive Components

Theming & Tokens

Theming & Tokens

Theming & Tokens

Scalable Architecture

Scalable Architecture

Scalable Architecture

A Modular Design System That Adapts, Expands, and Evolves

Huge Component Library

Built an extensive set of reusable components to drive consistency and speed across products.

Brand-Ready Customization

Enabled effortless theming through tokenized styles for colors, fonts, spacing & more.

Layouts That Flex

Designed flexible components for responsive, accessible multi-brand experiences.

A Modular Design System That Adapts, Expands, and Evolves

Huge Component Library

Built an extensive set of reusable components to drive consistency and speed across products.

Brand-Ready Customization

Enabled effortless theming through tokenized styles for colors, fonts, spacing & more.

Layouts That Flex

Designed flexible components for responsive, accessible multi-brand experiences.

A Modular Design System That Adapts, Expands, and Evolves

Huge Component Library

Built an extensive set of reusable components to drive consistency and speed across products.

Brand-Ready Customization

Enabled effortless theming through tokenized styles for colors, fonts, spacing & more.

Layouts That Flex

Designed flexible components for responsive, accessible multi-brand experiences.

1+

[ design tokens ]

1+

[ design tokens ]

1+

[ design tokens ]

1+

[ design tokens ]

1x

[ faster launch ]

1x

[ faster launch ]

1x

[ faster launch ]

1%

[ quicker handoff ]

1%

[ quicker handoff ]

1%

[ quicker handoff ]

1%

[ quicker handoff ]

1%

[ adoption rate ]

1%

[ adoption rate ]

1%

[ adoption rate ]

White Label Product

To ensure flexibility, design tokens were split into Global Tokens (shared across apps) and Brand Tokens (customized for each brand’s identity).

200%

Seamless Multi-Brand Integration

Brand A

Brand B

Brand C

Built to empower teams to launch branded experiences faster, without reinventing the wheel each time

200%

Seamless Multi-Brand Integration

Brand A

Brand B

Brand C

Built to empower teams to launch branded experiences faster, without reinventing the wheel each time

200%

Seamless Multi-Brand Integration

Brand A

Brand B

Brand C

Built to empower teams to launch branded experiences faster, without reinventing the wheel each time

Scalable Architecture

Designed for Growth — A Scalable and Modular Architecture that adapts effortlessly across partners, products and geographies without losing identity.

10+

Brands Scaled Globally with a Unified Design Language

System Harmony

Consistent. Connected. Customizable.

Smart Scalability

Grows with your products—no redesigns needed.

10+

Brands Scaled Globally with a Unified Design Language

System Harmony

Consistent. Connected. Customizable.

Smart Scalability

Grows with your products—no redesigns needed.

10+

Brands Scaled Globally with a Unified Design Language

System Harmony

Consistent. Connected. Customizable.

Smart Scalability

Grows with your products—no redesigns needed.

The Outcome
The Outcome

Due to confidentiality, detailed project insights can’t be shared here. However, I’d be happy to connect and walk you through the process, challenges, and solutions behind building this large-scale, white-labelled design system!

Create a free website with Framer, the website builder loved by startups, designers and agencies.