Freshworks - Design System

When Scaling Outpaced Standards

Background

As part of the Freshworks rebranding initiative, I was involved from the ground up—helping define the new visual language through the design of landing pages, selection of color palettes, typography, and overall design direction.

The Challenge

As the rebranding project scaled and more designers joined the team, maintaining consistency across deliverables became increasingly difficult. We needed a centralized source of truth to ensure alignment and efficiency.

Taking the Initiative

Recognizing this gap, I proposed the idea of creating a comprehensive Design System—a scalable and evolving guide to enforce consistency and streamline collaboration. This would help both internal and external teams understand and apply the rebranding principles effectively.

Goal

Create a scalable design system to unify product UI post-rebrand.
Empower designers and developers with clear guidelines, reusable components, and governance.

Exploration & Tool Evaluation

Initially, I experimented with platforms like Zeroheight and InVision DSM to build and host the system. However, these tools had limitations in flexibility and customization, which prompted a shift towards building an internal design system platform tailored to Freshworks’ needs.

Execution

Defined foundational elements: color palette, typography, iconography, spacing, grid systems, and UI components.
Collaborated with product and front-end teams to ensure implementation feasibility.
Documented usage guidelines, accessibility considerations, and interaction patterns.
Led a team of designers to populate the system with real-use components and templates.

Impact

Enabled faster onboarding for new designers and developers.
Significantly reduced design inconsistencies across pages and products.
Improved design-to-development handoff with standardized components and tokens.
Established a scalable foundation for future product and marketing design efforts.

Building the Design System

Type Scale: Rigorous Foundations for Visual Harmony

To ensure balanced typography, I evaluated multiple scaling methods:

Tested modular scale ratios (1.125, 1.25) for proportional hierarchy.
Explored fluid typography for responsiveness but prioritized consistency.
Adopted IBM’s Carbon Design System formula (base-10, logarithmic progression) for its proven scalability and developer-friendly math.

Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2

Xn: step n type size Xn-1: step n-1 type size

Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2

Xn: step n type size Xn-1: step n-1 type size

Result: A predictable type scale that harmonized with our grid system, reduced arbitrary decisions, and accelerated UI development.

Line Height: Precision-Built for Readability

To pair with our type scale, we defined line heights using a multiplier system tailored to each text role:

Titles (H1-H2): 1.125x font size (tight for impact, yet breathable).

Body Text: 1.5x (optimal for long-form readability).

Short Text & Subheadings (H3-H6): 1.25x (balanced density for scannability).

Why It Worked:

Mathematically harmonious — Multipliers aligned with our Carbon-based type scale.

Role-specific optimization — No arbitrary values; each ratio served a functional purpose.

Developer-friendly — Simple rules like line-height = font-size × ratio ensured consistency.

Spacing System: Strict 8-point grid for all vertical/horizontal spacing. No complex scaling—just consistent multiples of 8 (8/16/24/32px) to align typography, components, and layouts with pixel-perfect precision.

Scroll For More