In 2019, DigitalOcean redesigned its platform, transitioning from a basic design to a modern, user-friendly interface. As DigitalOcean grew rapidly, acquiring companies like Snapshooter, Nimbella, Cloudways, and Paperspace, it became clear that our design-to-engineering pipeline needed improvement. The integration of Paperspace's comprehensive system highlighted our limitations in scalability, design tokens, dark mode, and multi-theming.
Our customers also pushed for change, with dark mode being the third most requested feature. Competitors were advancing quickly with responsive layouts and well-oiled pipelines. Recognizing this, we knew it was time for a change to ensure future growth and innovation.
DigitalOcean needed a scalable design system that supported light and dark modes across platforms and devices, enabling faster time-to-market and seamless integration for acquired teams.
Together with my engineering counterpart, we developed a platform-agnostic, multi-brand design system powered by design tokens. This system allows for easy theming, adaptability, and consistent application across all products and teams.
Step 1: Start with defined brand colors
The goal was not to change the values of our defined brand color or color palette, it was to account for enough color contrast for our future theming and accessibility.
Step 2: Adjust for lightness at each step
Step 3: I repeated the steps above until I had a full color palette.
Step 4: I placed these values inside of Leonardo to check for crazy jumps in contrast. I kept adjusting until the color palette worked for our use case.
Once we solidified the application of the new colors to the Control Panel, progress accelerated as we captured those decisions using design tokens. As this was a multi-brand system, meticulous planning was essential for token naming conventions, global value definitions, semantic themes, and light and dark modes.
With the establishment of the default brand, seamless switching between light and dark mode became effortlessly achievable with just a couple of clicks. This pivotal setup also paves the way for swift creation of new themes and brands, facilitating dynamic variations as needed.
Leveraging our semantic token set, making two color token adjustments triggers automatic updates across all interactive states for primary and accent elements. The arduous task of adjusting colors for each individual state is now a thing of the past, streamlining the design process and enhancing efficiency considerably.
We ensure that our design system team has everything needed to confidently use our system. We prioritize thorough documentation, including tutorial videos, detailed guides on component usage, development alignment, and showcasing all component variations and properties. We also highlight areas where components are nested and cover all token applications. Throughout the project, we held asynchronous office hours via Slack and conducted live workshops. This continuous interaction allowed us to stay closely connected with the design team and promptly address any issues or concerns they encountered.
The introduction of design tokens in the Walrus Design System has transformed our design approach at DigitalOcean. By creating a flexible, scalable system supporting light and dark modes, multi-theming, and multi-branding, we've set the stage for rapid growth and innovation.
Thorough documentation and continuous support have empowered our design system team to maintain and enhance the system efficiently. This project has improved our time-to-market, ensured visual consistency, and fostered collaboration across teams.
As we move forward, the Walrus Design System will continue to be a key element of our design strategy, enabling us to meet user needs and stay competitive.
