THE | Mono Design System (MDS)

Overview

I led the creation of Mono Design System (MDS) — a unified design system for Times Higher Education’s digital products.

The goal was to replace a patchwork of inconsistent interfaces with a consistent, accessible, and scalable framework. MDS was designed to serve both editorial and data-heavy products, ensuring THE could deliver new features faster while maintaining brand authority and user trust.

The design language was intentionally sober and restrained: typography, grids, and spacing create clarity, while high-quality imagery carries editorial tone. Colour is used sparingly and purposefully, so primary actions stand out and data visualisations are easier to read.

Design System foundations: colour, type, and core UI components

Research & Foundations

The project began with a comprehensive audit of THE’s platforms. Years of iterative product releases had left behind a landscape of duplicated styles, mismatched buttons, and ad-hoc layouts. This slowed development, created unnecessary design–dev friction, and made the user experience inconsistent.

Accessibility was another concern. Several legacy components failed WCAG 2.1 standards for colour contrast, focus states, and form labels. From the outset, MDS was designed to meet accessibility requirements at the component level, so compliance was built-in rather than added later.

Through workshops with editorial, product, and engineering teams, we defined the requirements for a shared system:

Editorial authority → typography and layouts optimised for long-form reading.
Data scalability → patterns flexible enough to handle complex tables, charts, and rankings.
Accessible foundations → colour, type, and forms tested against WCAG guidelines.
Consistency across products → a common library to replace duplicate efforts.

The result was the foundation for a scalable system that could unify THE’s products while reducing delivery time and design debt.

Design Principles

From this, we defined guiding principles:

Clarity first → typography and spacing prioritise legibility for long-form editorial and data tables.
Purposeful colour → restrained palette, with colour reserved for actions, highlights, and data.
Editorial integrity → sober UI so high-quality photography and illustrations could carry tone of voice.
System over pages → modular components built to work across multiple products.

Components & Patterns

We built a library of components in Figma and worked closely with developers to document them in Storybook. Key highlights:

Typography scale optimised for editorial readability.
Grid & spacing system for consistency across layouts.
Buttons & CTAs → primary action stands out against a neutral base.
Cards & modules → structured to handle varied content types.
Forms & inputs → simplified, accessible, mobile-first.
Data visualisation styles → consistent treatment of charts and metrics.

We used ZeroHeight in order to share our Design Principles with partners and third parties.

Rollout & Adoption

MDS was rolled out incrementally, starting with new sections of the website. This ensured stability and gave teams time to adapt. Adoption is expanding gradually across other products, with each release reducing legacy inconsistencies.

To support consistency, all new modules — from rankings cards to CTAs — were documented in Storybook, creating a single source of truth for developers. This reduced QA issues, accelerated development, and made components easier to extend into related products.