Cemex DLS · Consistency as Infrastructure (2017 - 2021)

In 2017, before "design system" was a job title in most orgs, I convinced a 100-year-old industrial giant that consistency isn't a document, it's infrastructure. What started as a style-guide PDF became a cross-framework component system governing every screen Cemex shipped.

It became one of the longest projects I have been invested in: a living entity that renews itself constantly.

The mandate

The pitch was simple to say and hard to do. Put every piece of Cemex software under one visual identity, speed up how fast designers turn out compositions, give developers a robust framework to build on, take real control of the presentational layer, define design processes that scale, and shrink the app development budget while doing all of it. Six goals, one system.

Before drawing anything of our own we went and studied the systems that already worked, Google's Material Design, Apple's Human Interface Guidelines, Twitter Bootstrap, SAP Fiori, Ionic, and for all their very different philosophies they kept teaching us the same lesson: a system lives or dies on how easy it is to actually use, not on how complete it looks on paper.

The team

This is the team behind it.

It was beautiful, and it was the wrong shape

The first step was getting our designers aligned on branding, visual aspect and content guidelines, and it was romantically conceived and lovingly distributed as a single PDF file. It was beautiful. It was also, as we would learn, the wrong shape for the job.

A PDF is an editorial artifact, and that is exactly the problem. Updates were painful, so versions multiplied, and soon every department was working from a slightly different truth, while consistency inside a single project stayed shaky, because a static document leaves plenty of room for wacky interpretation. If we wanted real consistency in the deliverables, the guide had to stop being a document and become a tool. That meant putting the library directly inside the design software our people already had open, which was Sketch, centralizing it in the cloud so it could push updates automatically, structuring it around atomic design so one edit would not turn into an afternoon of edits everywhere, and defining a mobile version for every desktop component and vice versa.

Atomic design is a great method and a terrible filing system

We built the library on atomic design, so a swatch atom feeds a card molecule, a card molecule feeds a person organism, and editing a piece once propagated it to every comp on the team automagically. The day we nudged one green to pass AA contrast, it went compliant in every composition the library had ever touched, from a single edit. That was the moment everyone finally understood what we had been talking about for two years.

Then the system taught us two things that no article had. The first is that atomic design is a wonderful compositional method and a poor filing system. We had dutifully buried our components inside nested atoms, molecules and organisms drop-downs, exactly as the book says, and every designer on the team had to remember which bucket a thing lived in before they could go use it. An OCD nightmare. So we flattened the whole thing to components at root level and kept the atomic thinking where it actually belongs, in how the pieces compose, not in where they sit.

The second is that a separate desktop library and mobile library is a trap. You end up with two things to sync, the desktop one always gets edited first, and the mobile one quietly drifts until nobody trusts it. So we merged them into one, where each component carries its own Mobile subgroup when it genuinely needs one.

Neither of those is in anybody's playbook. You get them from living inside a system for five years and watching real designers use it on an ordinary Tuesday.

One source of truth, on the web

Distributing a contemporary design system goes way beyond an editorial effort, and the web is the natural channel for it, so we built the DLS website to be the one place anybody could go. A unique source of truth, every asset you need to design a Cemex application, relevant examples of how each component is meant to be used, and enough real code that a developer could translate the designers' intent without having to invent the middle part themselves.

It's about finesse...

Even with all the information organized, a gap remained between designers and developers, and it lived in the definition of good enough. That gap was expensive. The QA and bugfixing cycle dragged, and deliveries slowed right along with it.

Aligning the conversation

Our main priority was to unify the language around UI, and the cause of the disconnect turned out to be simple: developers were not following our code samples. Not out of malice, either. A code sample sitting on a website is a suggestion, and a suggestion loses to a deadline every single time.

So we stopped suggesting. We built a web components library in Stencil.js that mirrors the Sketch symbols one for one, so every component a designer places has a real software counterpart waiting for it, and we encapsulated the CSS so the styles could not be altered on the way to the screen. We wrapped it for Angular, React, Vue and NEXT so that no team had to argue about their framework first, and we documented all of it so that building with the system became the easy path instead of the virtuous one. I told that whole story, from butchered comps to one common language, in Easing the Disconnect Between Designers and Developers.

The loop is now closed

The CEMEX DLS is a complete system now, in constant evolution. Applying technology to the design operation is what finally closed the gap between our designers and our developers, and it handed the project teams one standardized language around UI. It shows up in the quality of what we ship, and in the millions of dollars saved in development costs, which is of course the number that got everyone's attention. The part I care about is quieter: a designer's intent now survives the whole trip to production.

...Eppur si muove

And yet it moves. The thing that started life as a PDF now animates, on every screen Cemex ships.