Creating a design system from scratch

Overview

As Gorgias rapidly scaled, the lack of a centralized and reusable design framework created inconsistencies across its product and brand experiences. Until early 2021, design assets were primarily created by contractors, leading to fragmented visuals and a high maintenance burden. In response, a lean internal design team initiated the development of a unified design system to ensure scalability, consistency, and better alignment between product and brand. This project aimed not only to streamline the design process but also to empower cross-functional collaboration through shared design principles and tools.

Problems

The product UI and marketing website had diverged significantly—each using different components, typography, and color schemes. There was no system in place to manage reusable elements, resulting in redundant work, visual inconsistency, and development inefficiencies. Typography varied across surfaces, and the paid font added recurring costs. Developers lacked an efficient method to implement design updates, often needing to manually reproduce styles. As the company scaled, this lack of cohesion and reusability became a growing bottleneck for both speed and quality.

Solution

The team began by auditing every existing design component—creating a comprehensive inventory of styles, buttons, icons, and more. These were then rebuilt in Figma, creating a centralized source of truth. Core foundations like typography and color styles were unified, with the company transitioning from the proprietary ‘Söhne’ font to the open-source ‘Inter’ for visual harmony and cost savings. Design tokens were introduced via Zero Height to create a direct link between design and code, significantly reducing development time for UI updates. The system also introduced built-in theming options, offering Light, Dark, and brand-based themes for a more flexible, personalized user experience.

Project presentation ↗

Results

The new design system established a consistent visual language across the Gorgias product and website, bridging the gap between brand and product teams. Developers benefited from streamlined workflows and fewer handoff errors, while designers were empowered with reusable, scalable components. The inclusion of theming addressed customer customization needs and future-proofed the UI for evolving user preferences. Ultimately, the project laid the foundation for faster product development, stronger brand cohesion, and a design culture built around efficiency and long-term scalability.