Work

About

Playground

The TeamGantt Design System is a scalable and structured foundation for product design, enabling efficiency, consistency, and streamlined collaboration between design and engineering.

Results

🌙

🌙

🌙

Seamless dark mode/light mode implementation

Seamless dark mode/light mode implementation

Seamless dark mode/light mode implementation

🎨

🎨

🎨

Consistent UI across all features

Consistent UI across all features

Consistent UI across all features

🚀

🚀

🚀

40% faster design-to-development workflow

40% faster design-to-development workflow

40% faster design-to-development workflow

🔄

🔄

🔄

Scalable foundation for future growth

Scalable foundation for future growth

Scalable foundation for future growth

🛠

🛠

🛠

Improved engineering handoff efficiency

Improved engineering handoff efficiency

Improved engineering handoff efficiency

Challenges & Approach

Challenges & Approach

The challenge was to create a scalable, flexible design system without disrupting existing workflows. With significant technical debt, we needed to streamline, standardize, and accelerate our processes to improve efficiency across the company. Our approach included:

The challenge was to create a scalable, flexible design system without disrupting existing workflows. With significant technical debt, we needed to streamline, standardize, and accelerate our processes to improve efficiency across the company. Our approach included:

Audit & Analysis:

Audit & Analysis:

Audit & Analysis:

Evaluating inconsistencies in existing UI components and workflows

Evaluating inconsistencies in existing UI components and workflows

Tokenization:

Tokenization:

Tokenization:

Implementing design tokens for color, spacing, elevation, typography, and more

Implementing design tokens for color, spacing, elevation, typography, and more

Component Standardization:

Component Standardization:

Component Standardization:

Creating atomic components with variations to cover all use cases

Creating atomic components with variations to cover all use cases

Cross-Team Collaboration:

Cross-Team Collaboration:

Cross-Team Collaboration:

Ensuring engineers had clear documentation and an efficient build process

Ensuring engineers had clear documentation and an efficient build process

Key Features of the Design System

Key Features of the Design System

Key Features of the Design System

Establish foundations

Establish foundations

I began with a focused, needs-first approach, prioritizing essentials over nice-to-haves. I researched industry-leading design systems to identify the core building blocks necessary for a strong foundation, including color, typography, elevation, borders, and spacing to ensure consistency and scalability.

Establish design tokens

Establish design tokens

We systematized our foundational categories by implementing design tokens. Our approach to design tokens followed a three-tiered structure:

  1. Foundation – The core properties that define the system.

  2. Type – The design element the token applies to.

  3. Modifier – The state or variation of an element.

This structured approach allowed us to bridge the gap between design and development with ease.

The Color System

The Color System

We built a color system optimized for theming like dark mode, featuring 10 shades per color, ranging from 100 (lightest) to 1000 (darkest). In dark mode, the scale automatically inverts. Neutral colors include two extra variants: 0 (white) and 1100 (black).

Build, build, build.

Build, build, build.

With foundations in place and tokens systematized, I moved to building components. We integrated tokens across all components, ensuring consistency throughout the UI. For cases requiring additional context, we created new tokens that referenced core tokens, maintaining flexibility while preserving structure. This streamlined design decisions and reinforced consistency at scale.

What I Learned

There is Always a User

There is Always a User

A design system is more than just a set of components—it’s a product for the engineering team. Structuring it to support fast adoption, efficiency, and maintainability ensures it’s not just usable but invaluable.

A design system is more than just a set of components—it’s a product for the engineering team. Structuring it to support fast adoption, efficiency, and maintainability ensures it’s not just usable but invaluable.

Edge Cases Matter

Edge Cases Matter

While standardization is crucial, accounting for edge cases and future flexibility is equally important. Proactively identifying and documenting edge cases saves time and frustration for both designers and engineers.

While standardization is crucial, accounting for edge cases and future flexibility is equally important. Proactively identifying and documenting edge cases saves time and frustration for both designers and engineers.

Final Thoughts

The TeamGantt Design System was a foundational step toward scalability, consistency, and efficiency in our product design workflow. By structuring it for long-term growth, we ensured that future features and iterations could be built faster, with fewer roadblocks, and with a consistent user experience.

The TeamGantt Design System was a foundational step toward scalability, consistency, and efficiency in our product design workflow. By structuring it for long-term growth, we ensured that future features and iterations could be built faster, with fewer roadblocks, and with a consistent user experience.

Overview

The TeamGantt Design System is a scalable and structured foundation for product design, enabling efficiency, consistency, and streamlined collaboration between design and engineering.