CEMEX DLS

The Design Language System was among the longest-running programs in this portfolio: a living system maintained and renewed over five years. The mandate was direct: put every piece of CEMEX software under one visual identity, speed up how quickly designers produce compositions, give developers a robust framework to build on, and take genuine control of the interface.

A style guide is the wrong shape

The first version was a single, carefully made PDF. It was handsome and structurally wrong: a PDF is an editorial artifact. Updates were painful, versions multiplied, and each department drifted onto a slightly different truth. Two further lessons followed: that atomic design is an excellent compositional method but a poor filing system, and that maintaining separate desktop and mobile libraries is a trap, because the two inevitably diverge. The libraries were merged and the taxonomy rebuilt around how components are actually found.

One source of truth, on the web

Distribution moved to the web. The DLS became a single site anyone could reach, always current, replacing the circulating PDFs. But the persistent gap was between design and engineering: developers were not following the code samples, and reasonably so: a code sample on a page is a suggestion, not a dependency.

Design and code, one for one

The resolution was to stop suggesting and start shipping. A web-components library built in Stencil.js mirrors the design source one for one, so every component a designer places has a real, encapsulated software counterpart waiting for it. Applying engineering to the design operation is what finally closed the gap between designers and developers, and handed every project team a single standard to build on.