Trinity

Design system strategy and governance across a fragmented logistics enterprise — one source of truth for dozens of teams.

ClientHermes (now Evri)
TypeDesign Systems
IndustryLogistics
Overview

Design system strategy, audit and governance framework for Hermes. Multiple product teams, inconsistent components, zero shared language — Trinity brought structure without slowing delivery down.

Deliverables
  • Design system strategy
  • UI audit
  • Component library creation
  • Pattern documentation
  • Governance framework
  • Health optimisation
Trinity design system — component library illustration
Problem

Scaling consistency across a fragmented ecosystem.

Hermes managed multiple digital products across customer, operational and logistics touchpoints. Different teams and agencies contributed to the same ecosystem. Patterns diverged. Brand guidelines existed. A unified design system did not.

As the product suite expanded, inconsistencies became more visible. Components were recreated across teams, interaction patterns varied by context. Each product functioned independently. Collectively the ecosystem felt disconnected and unreliable.

The issue was not visual polish. It was scalability. No shared structure meant design debt accumulated faster than teams could clear it.

Trinity — component audit mapping inconsistencies across products Trinity — component audit mapping inconsistencies across products
Approach

Audit first. Build second. Govern always.

The objective was not to redesign screens but to introduce system-level governance. Three stages: understand what existed, establish shared foundations, build components that could be maintained without constant intervention.

01

Audit first

A full UI audit mapped component duplication, spacing inconsistencies and divergent interaction patterns across every product surface. Structural gaps made visible before any solution was proposed.

02

Atomic foundations

Typography, spacing, colour and interaction states established first. Foundations agreed once and applied everywhere — before a single component was built on top of them.

03

Governance by design

Documentation introduced early. Components structured around engineering constraints to ensure adoption, not just agreement. The system designed to stay honest over time.

1

Audit and analysis

Component duplication mapped across every product surface. Patterns analysed rather than pages — making structural gaps visible and solvable.

2

Foundations

Core tokens established: typography, spacing, colour, interaction states. Agreed once. Applied everywhere. Non-negotiable before any component work began.

3

Component library

Atomic components built to real engineering constraints — not design ideals. Each component documented and versioned for adoption across teams.

4

Governance

Documentation, contribution guidelines and adoption tracking introduced before handoff. The system designed to evolve without fragmenting.

Trinity — component library showing atoms, molecules and organisms Trinity — component library showing atoms, molecules and organisms
Execution

Visual alignment

Trinity introduced a consistent visual framework across products. Typography, spacing, hierarchy: aligned once. Interfaces began to feel like parts of the same system rather than tools built in isolation.

Clarity improved naturally once structural alignment was established. Teams stopped solving the same problems independently and started building on shared decisions.

Trinity — component library overview and pattern documentation Trinity — component library overview and pattern documentation
Execution

Component library

A shared component library reduced duplication and tightened developer handoff. Consistency increased across products. Governance documentation kept the system honest as it grew.

The design system became infrastructure rather than documentation. Teams gained confidence in shared components, reducing unnecessary redesigns and accelerating iteration cycles.

Trinity — governance framework and design token documentation Trinity — governance framework and design token documentation
Outcomes

One source of truth

Component library

Shared

Atomic components adopted across product teams. Duplication eliminated at source — not managed around it.

Delivery velocity

Faster

New features implemented with greater speed and consistency as adoption matured. Fewer redesigns, shorter handoffs.

Visual alignment

Unified

Interfaces across the product suite began to feel part of a single, coherent system — not an estate of disconnected tools.

Foundation

Scalable

The first shared design language Hermes could scale into its next generation of products — built to evolve without fragmenting.

Trinity — design system applied across product suite Trinity — design system applied across product suite

A design system becomes infrastructure
the moment teams stop thinking about it.

The goal wasn't visual uniformity. Teams needed the tools to build anything and stay consistent doing it. Every component, every token, every rule: decided once.

When the system works, it disappears. Teams ship faster, interfaces cohere naturally, the cost of consistency drops to near zero. That's the measure.

Next Project

Pickle

Product Design · Mobile →