Creating a meta-contextual design system for adidas

Client Overview

Company: Adidas - a global sportswear brand known for blending performance and style. Through design and digital transformation, Adidas ensures a consistent brand experience across all platforms.

Industry: Retail, E-commerce

Location: Amsterdam, Netherlands

Company Size: 500+ employees

Service Requirement: Developing a proof of concept to automate the adidas design library (aDL), from Figma into React web components, other web components and other formats, including print and digital in-store display.

The Challenge: A Brand Divided

Competa IT didn’t just take the brief; we dug deep to understand adidas’s core challenges. Following in-house strategy discussions, we identified the ideal solution and the right expert to lead it. In a few days, we mapped out a plan designed to deliver lasting brand consistency at scale for the client.

Our solution: Listen, Plan, Execute

adidas, a global brand synonymous with innovation and performance, was facing a challenge that’s surprisingly common among large organisations: inconsistent design. With separate teams managing digital, print, and in-store materials, the brand’s visual identity was beginning to drift. Each silo worked in isolation, resulting in inconsistent experiences across customer touchpoints. What adidas needed was a cohesive, scalable solution: a unified design system to bring order to creative chaos.

The Mission: A Meta-Contextual Design System

Enter Graeme MacPherson, our Software Architect and Senior Full Stack Developer, known for his precision in creating design systems that don’t just live on the web—they stretch across platforms, screens, and even store shelves. At adidas, he aimed to develop a proof of concept for a meta-contextual design system.

The goal was to establish brand uniformity across web, print, and in-store experiences by automating a centralised design library built in Figma and transforming it into reusable React components and other platform-ready formats, all within six months.

Between December 2020 and April 2021, Graeme’s team of five set out to prove it could be done.

The Breakthrough: One System to Rule Them All

adidas gave the team creative freedom, so long as the solution harmonised their brand properties. But what set this project apart was Graeme’s niche expertise in bridging Figma to functional code, both for React-based properties and legacy platforms using PHP. The system didn’t just live online. It extended offline, into the physical and print world, answering adidas’s call for total brand cohesion.

The Result: From Prototype to Pipeline

The proof of concept was delivered on time and met with enthusiasm. It wasn’t just approved, it was added to adidas’s long-term planning pipeline, with a three-year roadmap for full implementation. The project became a model for what’s possible when design and brand vision meet technical mastery.

Then came a twist…

In a unique twist, while the adidas proof of concept was underway, Graeme’s team also worked on building websites for - drum rolls please - Beyoncé. The pop icon was collaborating with adidas at the time and needed development for her website. Beyoncé and her team came with mood boards and a crystal-clear vision. Her project, though secondary, sharpened the team’s ability to turn creative direction into scalable digital outputs, skills directly transferrable to the adidas system.