One System, Three Brands

Following a major rebrand, our client needed a digital foundation to match their new brand identity guidelines: a single design system capable of serving three distinct arms of the organisation, powering a push into the retail investor market, and scaling across global regional teams.

Previously there was no unified design foundation. Design files were scattered across unstructured documents with no version control, there were a limited set of styles, few reusable components, and no tokenisation. Every new page meant reinterpretation, and every handoff left room for error.

This rebrand also added a distinctive complication - rather than a single primary colour, the new brand identity guidelines placed three colours on equal footing. The digital experience needed to honour that parity while giving each arm of the organisation (corporate communications, professional data products, and retail investor content) a clear identity of its own.

With the client’s ambitions in the retail investment space, the design system needed to feel at home alongside modern fintech and ETF platforms, while remaining credible to institutional audiences and adaptable to the visual conventions of key regional markets including India and China.

The goals of the design system project aimed to:

• Establish a single source of truth for design and development across the client’s corporate, research, and retail investor platforms.
• Translate a newly launched brand into a scalable, fully tokenised digital design language.
• Dramatically accelerate page and product delivery through a template-driven component architecture.
• Remove ambiguity from developer handoff, so that designs are implemented exactly as intended, every time.

Working closely with the client’s brand and regional teams, we designed and built a comprehensive design system with a fully automated pipeline from Figma through Storybook to Drupal. Key elements include:

1. Three-pillar theme architecture:
   • We resolved the equal-parity brand palette by treating each organisational pillar as its own theme (purple for corporate, blue for data, green for retail), with every primitive token structured to resolve across all three.
   • Any component can switch pillar, mode, or breakpoint instantly, with no redesign and no rebuilt assets.
   • Dark mode was engineered in from day one, giving the client scalability that later proved decisive.
2. Zero-interpretation tokenisation:
   • Every value in the system including typography, padding, margins, etc. is locked to a strict 4px grid and expressed as a token, leaving no room for guesswork between design and build.
   • A family of ‘t-shirt-sized’ spacing components, responsive across desktop, tablet, and mobile, allows new components and pages to be assembled rapidly with guaranteed consistency.
   • Developers work from a single source of truth: every component is documented with all of its instances, and the full token set exports as JSON straight into the build pipeline.
3. Built for global rollout:
   • Highly configurable components allow regional teams to adapt density and imagery to local market conventions. The same card serves an image-led Western layout or a denser, content-rich page for Indian and Chinese audiences.
   • Preset block templates let teams compose full page sections from pre-configured component arrangements, keeping global consistency without constraining local needs.
4. A living, governed system:
   • Design changes flow through a comprehensive changelog with stakeholder review, so the system evolves deliberately rather than drifting.
   • Migrating the client’s extensive legacy component estate into the system demanded close designer–developer collaboration up front, an investment that now pays for itself with every token-level change propagating automatically across the whole estate.

The result is a design language that turned a rebrand into an operating system for the client’s entire digital presence: one source of truth, three distinct brand experiences, and a delivery pipeline where what is designed is exactly what ships.

The system today comprises over 50 components and styles, and over 375 design tokens, that powers the client’s main platform, four microsites, as well as hundreds of templates and built pages.

• A new brand identity, live in weeks: When the client’s latest design revisions demanded a friendlier, more breathable visual identity - new typography, new spacing, a distinct personality, the token architecture allowed this entire “discovery” mode to be designed, built, and launched in weeks, rolling out first to the Indian market and then worldwide.
• Radically faster delivery: With responsive values fixed in tokens, components no longer need redesigning per breakpoint. Page templates aligned to the grid mean new pages are assembled, not interpreted.
• A template for growth: The system’s structure has become the blueprint for the client’s wider digital estate, including major derived properties and microsites.
• Still evolving: 542 Digital remain the custodians of the design system, which has been in continuous development since 2023. Next on the roadmap is a dedicated data design system covering dashboard standards, data-visualisation tokens, and chart layouts, plus fixed page templates powered by Figma’s new slots capability, enabling even non-designers to build on-brand pages safely.

This reflects 542 Digital’s approach to design system architecture: rigorous, scalable, and built for the realities of global, data-driven organisations.