The Challenge
Each of SPH's publications operated with its own isolated design language, component library, and codebase — creating duplicated effort, inconsistent user experiences, and accessibility gaps that were impossible to enforce at scale. Teams were rebuilding the same components from scratch for every feature, onboarding new products took weeks of design groundwork, and serving content across five languages — English, Chinese, Malay, and Tamil — added significant typographic complexity. The core tension was clear: how do you build one system for eight distinct publication brands without erasing any of them?
The Solution
Luna is a token-first design system with a two-tier architecture: global tokens define every raw value; semantic tokens map those values to intent. This separation means any publication can apply its own theme layer without touching component structure or behaviour. Luna was built on a token-first, two-tier architecture: global tokens hold every raw value; semantic tokens map them to intent — giving each publication a theming layer that overrides brand colours and type without touching a single component. A perceptually uniform OKLCH colour system with pre-validated APCA contrast values eliminated manual accessibility checks, while Source Sans 3 provided multi-script coverage across English, Chinese, Malay, and Tamil. The result was a library of 400+ fully-documented components — each with complete state coverage, responsive behaviour, and accessibility annotations — governed by a contribution model that turned publication brand teams from sceptics into advocates.
