BP: a React design system for fleet products

The problem

BP’s fleet team had products to build for customers in several markets. A set of products like that needs to look and behave like one family, and that’s hard to keep up if each team makes its own buttons, forms and layouts.

What we built

We joined BP’s fleet team at the start of 2022 to build their design system. That meant a React component library and the design tokens behind it, so the products could share one set of buttons, forms, layouts and colours rather than each team making their own.

After the system was in use, we moved into the product team and became the technical lead for the front end, building on the components we’d made.

The design tokens hold the colours, spacing and type sizes in one place, so a change to the look reaches every product that uses them. The component library is what the product teams build with, and staying on to lead the front end meant we used it every day alongside them.

What’s happened since

The work ran for three years, to the end of 2024. The front end launched in Europe first, followed by Australia and New Zealand, and we led the front end through both.

We worked together at BP where he delivered exceptional work in one of our largest global portfolios. I wholeheartedly recommend him.

Edward Santana, who worked with Steve at BP

Who else was involved

This was work inside BP’s own fleet team.

If you’re thinking about a component library or design tokens for your own products, our design systems page explains how we’d approach it. We’ve also built a Lit web component library for Mitsubishi Electric, which you can read about in the MELCloud case study.