Mercury Content Design System

Mercury grew exponentially over the past 2 years, with dozens of new engineers and designers constantly shipping new features in an expansive product surface. While we had documented guidance and a rudimentary component library, our design system needed to grow up a little in order to continue providing value.

A small working group was tasked with formalizing our design system documentation and expanding our library to include not just components, but patterns and other prefab templates.

As a starting point, I established taxonomy for the different "levels" of the system by talking to system leads from other companies and pulling inspiration from external systems we loved. Then I audited our existing component library, grouping them into categories and figuring out which may actually have been patterns in disguise.

Working closely with front end engineers, we audited various sources of truth (Figma libraries, the codebase, Notion pages, Storybook) to lay out what needed to be merged or added.

We rewrote articles to include code snippets for engineers and content/token guidance for designers. We also consolidated our sources of truth into a single, well-designed documentation hub that included Foundations, Tokens, Components, and Patterns.