SRMG Design System

01 Overview & Problem

Twenty-five titles, twenty-five ways of building the same page.

Picture the group design team. Every publication — lifestyle, news, business, sport — was designed from scratch. Different designers drew divergent wireframes for the same article card, the same nav, the same newsletter block. The same component lived in a dozen near-identical, incompatible variants, and no two titles quite felt like part of the same house.

Underneath sat three structural failures: no single source — colours and type were re-keyed by hand per title and drifted instantly; RTL as an afterthought — Arabic was always retrofitted last, and always broke; and no governance — with no owner, a fix in one title never made it back to the rest.

This was the reality across SRMG's 25+ publications. The brief: replace the sprawl with one streamlined, multi-brand design system every title could build on. Its real user wasn't a reader — it was the next designer, who should assemble a title from a trusted library rather than redraw it.

02 Goals & Success Metrics

What “one system” had to deliver — agreed before a single component was drawn.

We translated the ambition into three measurable goals, using the group's own delivery KPIs as the yardstick so success wasn't a matter of taste.

03 Approach

From twenty-five fragmented titles to one atomic library.

Rather than design a system in the abstract, I worked bottom-up from the titles themselves — grouping them into families, distilling the patterns they genuinely shared, then building those up into a governed atomic library.

04 Component Prioritisation

A sprawling component wishlist, prioritised into a confident v1.

I mapped every candidate component onto a value vs. effort matrix, so the first release covered what every title needed most — not simply what was quickest to draw.

05 Architecture & Foundations

Foundations, to atoms, to molecules, to organisms.

The library is organised as an atomic hierarchy — every organism traces back to the same foundations, so a change to one colour or type style ripples everywhere, once. Foundations carry the Inter variable font, ~20 type styles, 80 colour styles, one unified icon set, and responsive 6/12/24-column grids across every breakpoint — with each component shipping an EN and an Arabic/RTL variant from a single master.

06 Visual Design

One system, rendered — foundations you can see and components you can trust.

The library ships as a governed set of foundations and components, each with toggleable variations and nested atoms, so a designer assembles a title rather than redrawing it.

07 Outcomes & Impact

Adopted across the group — and the titles started to feel like a family.

The system rolled out to the design team and became the default starting point for new work. Early results tracked directly against the three goals we set at the start.