Verso Design System
Evolving and maintaining a modular design system to support 26 distinct brands across 32 global markets
2 min readApr 20, 2021
--
Throughout my time at Condé Nast, I have worked closely with other designers within our design system and platform application, Verso, in various contexts, sometimes on projects to extend its utility on the front-end and other times more discreetly to strengthen its foundations behind the scenes.
While I cannot disclose the intimate details of much of this body of work, suffice it to say that it includes, but is not limited to, the following:
- Setting up and updating brand identities in Figma, so that designers across our team have access to the various color and type tokens that work together to comprise each brand’s unique online persona,
- Working with engineering to organize components within a refined new component hierarchy in Storybook that moves away from the atomic design structure of systemizing components using groups like atoms and molecules in favor of a simplified, use-case based methodology of organization,
- Crafting living documentation of 1.) new and existing components that acts as a resource to other designers regarding their purpose and functionality, promoting reusability within the design system, and 2.) key processes required to uphold the integrity of the design system, such as how to set up and update a brand identity in Figma / Github,
- Creating brandless specs for new and existing components, detailing color and type tokens referenced, spacers applied, and engineering notes relevant to its implementation in the codebase,
- Acting as a design resource in the creation of a Figma ← → JSON brand identity plugin devised by several engineers to allow designers to easily convert brand identity updates in Figma to JSON that can be seamlessly uploaded to Github and pushed to production,
- Ensuring new components and design updates made within the design system reference type and color tokens according to stated use case rather than aesthetic proclivities to ensure scaleability across brands, &
- Serving as a point of contact for various cross-functional stakeholders in disseminating knowledge about Verso and its many intricacies, such as component architecture and organization, the design Q/A process, and decision-making frameworks around new features, components, variations, design tokens and anything else that can be introduced into the Verso system.