LSEG is a pretty big brand with Refinitiv, FTSE russel and London Stock exchange under it's belt. They, of course, already had a design system in place when I joined, and they wanted to apply this design system for all brands. The design system also needed some love, but working on a design system that's already in place and actively being used is always a challenge. We needed to make the design system more flexible and scalable.
A Flexible and scalable design system called 'Forge' where colors can be turned ON/OFF and where every component in the design system has a clear documentation that explained how to use it. The design system contained the logo's for all brands and could by used by all brands. Furthermore, almost every element of LSEG's design was discussed and documented.
Adaptive color system
At LSEG they had a lot of brand colors. Creating shades for those brand colors didn't make sense, because then we would have a hundred different colors. So instead we made the system more flexible and predictable. We did added the color names, but we created a color overview where each color could be turned ON/OFF. This way, whenever we needed an extra shade, we could go to the overview and turn it ON.
Data map
One of the more complex components was the data map component. Where we needed to create a responsive map component, that can be used in UI screen designs. Additionally a clear explanation and documentation for developers, so they could then create the component.
