Skip to main content

Aurum Design System Scalable, White-Labelled SaaS Design System

Client: Contemi Wealth

  • Design System
  • SaaS
  • Fintech
Unified visual identity and component framework for a multi-tenant, white-labelled wealth management platform, enabling faster delivery, consistent experiences, and quality at scale.

Overview

Problem

Contemi was transitioning legacy desktop software into a cloud-based SaaS platform. The product needed a unified, modern, and timeless look that could be white-labelled across multiple clients, while ensuring scalability and maintainability for future products.

Goal

Create a flexible design system and visual identity that worked across the Contemi group, supported co-branding, and empowered developers and designers to deliver consistent, accessible interfaces at speed.

Challenges

  • Delivering 12 distinct product modules across 7 squads in under 18 months, while maintaining quality and consistency.
  • Supporting white-labelling without compromising usability or brand cohesion.
  • Being the sole designer for most of the project, requiring highly efficient workflows and clear documentation.
  • Driving developer and product owner adoption across distributed teams in multiple time zones.
  • Balancing brand guidelines with client-specific theming needs.

Role Lead UX Designer

Responsible for end-to-end UX and visual design, including research synthesis, journey mapping, wireframes, prototypes, high-fidelity design, and supporting developer implementation.

Team

7 product squads (2–3 developers and 1 product owner per squad), supported by product owners, business analysts, SME stakeholders, front-end and back-end engineers, QA specialists, and additional designers where required.

Responsibilities

  • Defined typography, colour palettes, iconography, and layout grid.
  • Designed and documented UI components, patterns, and visual rules.
  • Collaborated with engineering to create a front-end framework and interactive design system manager (DSM).
  • Extended brand identity, including refinement of the WIN logo.

Approach

Foundation & Identity – Selected typography, established 8-pixel grid, chose icon sets, and created rules for components.

Icon System (Reduplication) – Developed a modular icon language using a 2×2 grid, simple geometric shapes, and opacity variations to form a consistent, adaptable visual signature.

Grid of module icons demonstrating modular graphic system in Aurum branding.
Module Icons
Grid of reduplication pattern variations demonstrating modular graphic system in Aurum branding.
Reduplication Pattern at full, 40% and 20% tints
  • Colour Architecture — Designed a structured palette system:
    • Neutral palette for base structure and depth.
    • Semantic palette for intent (danger, success, warning, info, buy, sell).
    • Data palette for charts.
    • Client branding palette (primary + secondary colours) for white-labelling.
Colour system showing neutral, semantic, data, brand, and highlight palettes.
Colour System documentation

White Labelling Strategy – Developed a scalable theming approach that applied client-specific primary and secondary colours across all modules without requiring code rewrites, ensuring brand alignment while retaining usability.

Component & Pattern Library – Defined styles, components, layout primitives, and interaction patterns, creating reusable building blocks for rapid delivery.

Alert component examples with HTML and TypeScript setup.
Alert component
Typography documentation detailing font scale, heading styles, and code examples for usage.
Typography
Aurum DSM – Built an in-house, interactive design system manager for designers, developers, and business teams, serving as the single source of truth.
Aurum design system welcome screen with icons for styles, components, and patterns.
Design System Documentation Homepage

Solution

A modular, white-label-ready design system that:

  • Applied consistent branding while supporting client theming.
  • Used semantic design tokens for flexible, scalable UI updates.
  • Enabled rapid module development via a shared code library.
  • Provided a single source of truth for design and development.

Impact & Results

  • 12+ modules
  • 7 squads
  • 100% adoption

Quantitative Outcomes

  • Delivered 12+ product modules across 7 squads in under 18 months
  • Significantly reduced design-to-development cycles with a shared code library
  • Achieved 100% adoption across squads, strengthening brand consistency

Qualitative Outcomes

  • Strong positive reception from developers, product owners, and sales teams
  • Reinforced Contemi’s brand consistency across products and clients
  • Contributed to industry recognition, including awards at WealthBriefing and Systems in the City

Reflection

The Aurum design system represented a shift towards a user-centred, scalable design culture at Contemi. It demonstrated how a well-documented, flexible system can speed delivery without sacrificing quality — even when scaling across multiple squads and time zones. The success of Aurum informed subsequent design system rollouts, building on its principles of clarity, adaptability, and cross-team adoption.

Work with me

Let’s make your digital experiences work better for everyone.

Whether you need strategic direction, accessible design, or facilitation to align your team, I offer flexible support — as a UX consultant providin fractional UX leadership and defined projects to tailored workshops. I bring the right expertise and, when needed, a trusted network of collaborators to scale your delivery.

Let's talk
I’m Jonathan Kokké, a UX consultant who helps organisations create digital experiences that are inclusive, scalable, and genuinely useful. My work spans UX strategy, design systems, accessibility (WCAG and EAA), and DesignOps — bringing more clarity, consistency, and care to every product for everyone.