Convex’s Design System: Cobalt
My Role
Team Lead
Senior Designer
The Team
Myself
Senior Developer
Developers
Duration
1+ Years
Overview
Convex offered a product tailored for commercial service businesses, providing data, insights, and applications to enhance sales performance. Their web application, Atlas, integrated property mapping with user-friendly tools to help sales teams identify high-potential prospects, streamline outreach, and boost revenue growth. By consolidating disparate data sources and offering a property-centric perspective, Convex enabled teams to efficiently plan, target, and engage with opportunities, optimizing their sales processes.
The Problem
When I joined Convex, the company was growing quickly, but its expanding application didn’t have a cohesive design system to keep things consistent and scalable. Without a unified framework, it was hard to maintain visual and functional harmony across the platform, and the lack of standardization slowed down both design and development. Teams often had to start from scratch, which led to inefficiencies, duplicated work, and inconsistent user experiences. Convex was looking for someone with experience building a design system from the ground up, and that’s where I came in. My role was to design and implement the foundational components of the system, creating a framework that could grow with the product while making collaboration between design and engineering smoother and more efficient.
Convex was also seeking a fresh look and feel that reflected its commercial service roots, so my role extended beyond creating the design system to redesigning the entire application for a cohesive and industry-aligned user experience.
Brainstorming
I started working on Convex's design system by auditing the existing app to document its current look and feel, identifying patterns, inconsistencies, and areas for improvement. Once I had a clear understanding of the starting point, I connected with leadership to discuss their vision for a refreshed look and feel that would better align with the company’s roots in commercial services. Together, we brainstormed and created vision boards that captured our collective ideas of what an app in the commercial services industry should look like—drawing inspiration from the field's practical and professional aesthetic.
The main theme for the redesign came from elevator buttons, with a desire for strong drop shadows and a three dimensional look and feel. We named the design system Cobalt, drawing inspiration from the element known for its strength and reliability.
Design System Foundations
The project began by establishing the foundations of the design system, starting with a color palette that aligned with the brand and met accessibility requirements. An icon library was created to maintain consistency in visual elements and support common actions and navigation. Typography was defined by selecting fonts and setting styles for headers, body text, and other text elements to ensure clarity and structure.
The color palette for Cobalt.
An example of the documentation for the typography in Cobalt.
Building the System
The first step in creating Convex's design system was defining the tokens we would use across the platform. I started with the foundational tokens—global colors, spacing, sizing, and typography—ensuring consistency throughout the app. From there, I defined semantic tokens to represent key elements like primary and secondary colors, borders, disabled and error states, and even special colors for sales campaigns. This helped establish a clear and organized foundation for our design system.
As I worked on building out the components for the system, I also introduced component-specific tokens. These tokens were tailored to the needs of each individual component, adding flexibility and precision as the system grew. By using tokens in this way, we created a scalable design system that ensured both consistency and adaptability as the product evolved.
The next step was creating the components for Cobalt. Within the first year, I built a library of over 60 fully designed, developed, and documented components, starting from scratch. The design system was housed in Figma as a comprehensive component library for design work, in ZeroHeight as a centralized documentation hub for designers and product owners, and in Storybook as a reference tool for developers to use when building projects with the system. This multi-platform approach ensured that the design system was accessible and useful for all teams involved, streamlining workflows and fostering consistency across the application.
Cobalt’s button component and documentation.
Text field component and documentation in Cobalt.
Patterns
In addition to creating and documenting components, I also developed detailed guidelines for unique interactions and patterns specific to the application as part of Cobalt. I designed elements like tables, inline editing, and page headers, providing clear documentation for designers to easily use these features in their projects and maintain consistency across the platform.
Inline editing for text fields, including headers, in Cobalt.
Page headers and examples in Cobalt.
Success
After a year and a half of dedicated work on Cobalt, we had built a robust design system that became an essential resource for the designers and developers at Convex. The system provided a comprehensive library of components, clear guidelines, and well-documented patterns, ensuring consistency and efficiency across projects. Designers could quickly access pre-defined elements and interaction standards, while developers had a reliable reference for implementing them in code. Cobalt streamlined collaboration between teams, reduced redundant work, and established a scalable framework that supported the company’s growing application and future initiatives.