The Wall Street Journal design system in Figma offers a comprehensive and well-organized set of components, styles, and detailed guidelines for creating cohesive and visually consistent digital products. It features an extensive library that includes typography, color palettes, iconography, templates, and additional resources, all carefully curated to ensure strong brand consistency across every sector of WSJ. By providing easy and centralized access to these design elements, the system enables designers, copywriters, animators, and developers to efficiently collaborate, iterate on ideas, and maintain a unified and seamless design language throughout the entire project lifecycle.

I lead the creation of the WSJ design system in Figma, which was developed to enable our team to easily access all of the essential elements of the WSJ brand in a single, centralized location. Prior to this, WSJ’s design elements were either documented in written guidelines or constructed within Adobe applications, neither of which offered the efficiency or flexibility needed when projects were briefed in on a daily basis. This new system significantly improved our workflow and consistency across all design work.

A design system helps keep design work consistent and efficient. It includes things like colors, fonts, spacing, and buttons. The WSJ design system uses these standards to ensure all digital and print materials look unified, speed up development, and improve the project process.

While there are basic expectations to a design system, there were also brand nuances that went beyond color and logo usage. Unique typography concerns, such as manual kerning, crashing ascenders and descenders, and adjusting ligatures were just a few things to take into consideration when working on projects.